IMPROVING THE AUTHENTICATION PAGE ADDING FORM VALIDATIONS AND OPTIMIZING

 AUTH.JSX

INSTEAD OF USING MULTIPLE IF BLOCKS IN HANDLESIGNUP FUNCTION , WE CAN CREATE AN OBJECT AND STORE THEM.


import React, { useState } from "react";
import axios from "axios";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { useSnackbar } from "notistack";

import "../Auth.css";

export default function Authentication() {
  const [showPassword, setShowPassword] = useState(false);
  const [showSignUp, setShowSignUp] = useState(true);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [fullnameValidation, setFullnameValidation] = useState(false);
  const [usernameValidation, setUsernameValidation] = useState(false);
  const [emailValidation, setEmailValidation] = useState(false);
  const [passwordValidation, setPasswordValidation] = useState(false);

  const { enqueueSnackbar } = useSnackbar();

  const handleSuccess = (message) => {
    enqueueSnackbar(message, {
      variant: "success",
    });
  };
  const handleFailure = (message) => {
    enqueueSnackbar(message, { variant: "error" });
  };
  const handleSignupBtn = () => {
    setShowSignUp(true);
  };
  const handleSignInBtn = () => {
    setShowSignUp(false);
  };

  const handleToggleBtn = () => {
    setShowPassword((prev) => !prev);
  };

  const handleSubmitSignup = async (event) => {
    event.preventDefault();
    if (!fullname) {
      setFullnameValidation(true);
    }
    if (!username) {
      setUsernameValidation(true);
    }
    if (!email) {
      setEmailValidation(true);
    }
    if (!password) {
      setPasswordValidation(true);
    }
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signup",
        {
          name: fullname,
          username: username,
          password: password,
          email: email,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
    }
  };

  const handleSubmitSignin = async (event) => {
    event.preventDefault();
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signin",
        {
          username: username,
          password: password,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
    }
  };
  return (
    <>
      <video autoPlay muted loop playsInline id="bg-video">
        <source src="bg.mp4" type="video/mp4" />
      </video>

      <Box className="box">
        <span className="buttons">
          <ButtonGroup variant="outlined" aria-label="Basic button group">
            <Button onClick={handleSignupBtn}>SIGN UP</Button>
            <Button onClick={handleSignInBtn}>SIGN IN</Button>
          </ButtonGroup>
        </span>
        {showSignUp ? (
          <form onSubmit={handleSubmitSignup} noValidate>
            <div className="inputFields">
              <TextField
                className="inputsRequired"
                required
                fullWidth
                onChange={(event) => setFullname(event.target.value)}
                id="outlined name"
                label="Enter Your Full Name"
                variant="outlined"
                error={fullnameValidation}
                helperText={fullnameValidation ? "Fill this field" : ""}
              />

              <TextField
                className="inputsRequired"
                type="email"
                id="outlined email"
                label="Enter Your mail"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setEmail(event.target.value)}
                error={emailValidation}
                helperText={emailValidation ? "Fill this field" : ""}
              />
              <TextField
                className="inputsRequired"
                id="outlined username"
                label="Enter username"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setUsername(event.target.value)}
                error={usernameValidation}
                helperText={usernameValidation ? "Fill this field" : ""}
              />
              <TextField
                className="inputsRequired"
                id="outlined password"
                label="Enter password"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setPassword(event.target.value)}
                type={showPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={handleToggleBtn}
                        edge="end"
                        style={{ color: "white" }}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
                error={passwordValidation}
                helperText={passwordValidation ? "Fill this field" : ""}
              />
            </div>
            <div className="submitBtn">
              <Button variant="contained" fullWidth type="submit">
                Submit
              </Button>
            </div>

            <p>
              Already have an account click&nbsp;
              <span style={{ color: "darkorchid" }}>Sign In</span>
            </p>
          </form>
        ) : (
          <form onSubmit={handleSubmitSignin} noValidate>
            <div className="inputFields">
              <TextField
                noValidate
                className="inputsRequired"
                id="outlined username"
                label="Enter username"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setUsername(event.target.value)}
              />
              <TextField
                className="inputsRequired"
                id="outlined password"
                label="Enter password"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setPassword(event.target.value)}
                type={showPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={handleToggleBtn}
                        edge="end"
                        style={{ color: "white" }}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
            </div>
            <div className="submitBtn">
              <Button variant="contained" fullWidth type="submit">
                Submit
              </Button>
            </div>
            <p>
              Don't have an account?Click&nbsp;
              <span style={{ color: "darkorchid" }}>SignUp</span>
            </p>
          </form>
        )}
      </Box>
    </>
  );
}


OPTIMIZING:

const handleSubmitSignup = async (event) => {
    event.preventDefault();
    const fieldValues = { fullname, email, username, password };
    const fieldSetters = {
      fullname: setFullnameValidation,
      username: setUsernameValidation,
      email: setEmailValidation,
      password: setPasswordValidation,
    };
    Object.keys(fieldValues).forEach((key) => {
      if (!fieldValues[key]) {
        fieldSetters[key](true);
      } else {
        fieldSetters[key](false);
      }
    });
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signup",
        {
          name: fullname,
          username: username,
          password: password,
          email: email,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("something went wrong please try again!!");
    }
  };

  const handleSubmitSignin = async (event) => {
    const fieldValues = { username, password };
    const fieldSetters = {
      username: setUsernameValidation,
      password: setPasswordValidation,
    };
    Object.keys(fieldValues).forEach((key) => {
      if (!fieldValues[key]) {
        fieldSetters[key](true);
      } else {
        fieldSetters[key](false);
      }
    });
    event.preventDefault();
    Object.keys;
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signin",
        {
          username: username,
          password: password,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("something went wrong please try again!!");
    }
  };


WE CHANGED THE SIGN IN AND SIGN UP <span>  TO ANCHOR TAGS.

  <p>
              Don't have an account?Click&nbsp;
              <a
                style={{
                  textDecoration: "none",
                  color: "darkorchid",
                  cursor: "pointer",
                }}
                onClick={handleSignupBtn}
              >
                SignUp
              </a>
            </p>


THE FINAL CODE:


import React, { useState } from "react";
import axios from "axios";
import Box from "@mui/material/Box";
import IconButton from "@mui/material/IconButton";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import { useSnackbar } from "notistack";

import "../Auth.css";

export default function Authentication() {
  const [showPassword, setShowPassword] = useState(false);
  const [showSignUp, setShowSignUp] = useState(true);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [fullnameValidation, setFullnameValidation] = useState(false);
  const [usernameValidation, setUsernameValidation] = useState(false);
  const [emailValidation, setEmailValidation] = useState(false);
  const [passwordValidation, setPasswordValidation] = useState(false);

  const { enqueueSnackbar } = useSnackbar();

  const handleSuccess = (message) => {
    enqueueSnackbar(message, {
      variant: "success",
    });
  };
  const handleFailure = (message) => {
    enqueueSnackbar(message, { variant: "error" });
  };
  const handleSignupBtn = () => {
    setShowSignUp(true);
  };
  const handleSignInBtn = () => {
    setShowSignUp(false);
  };

  const handleToggleBtn = () => {
    setShowPassword((prev) => !prev);
  };

  const handleSubmitSignup = async (event) => {
    event.preventDefault();
    const fieldValues = { fullname, email, username, password };
    const fieldSetters = {
      fullname: setFullnameValidation,
      username: setUsernameValidation,
      email: setEmailValidation,
      password: setPasswordValidation,
    };
    Object.keys(fieldValues).forEach((key) => {
      if (!fieldValues[key]) {
        fieldSetters[key](true);
      } else {
        fieldSetters[key](false);
      }
    });
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signup",
        {
          name: fullname,
          username: username,
          password: password,
          email: email,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("something went wrong please try again!!");
    }
  };

  const handleSubmitSignin = async (event) => {
    event.preventDefault();

    const fieldValues = { username, password };
    const fieldSetters = {
      username: setUsernameValidation,
      password: setPasswordValidation,
    };
    Object.keys(fieldValues).forEach((key) => {
      if (!fieldValues[key]) {
        fieldSetters[key](true);
      } else {
        fieldSetters[key](false);
      }
    });
    try {
      const { data } = await axios.post(
        "http://localhost:8080/signin",
        {
          username: username,
          password: password,
        },
        { withCredentials: true }
      );
      console.log(data);
      const { success, message } = data;
      if (success) {
        handleSuccess(message);
        console.log(message);
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("something went wrong please try again!!");
    }
  };
  return (
    <>
      <video autoPlay muted loop playsInline id="bg-video">
        <source src="bg.mp4" type="video/mp4" />
      </video>

      <Box className="box">
        <span className="buttons">
          <ButtonGroup variant="outlined" aria-label="Basic button group">
            <Button onClick={handleSignupBtn}>SIGN UP</Button>
            <Button onClick={handleSignInBtn}>SIGN IN</Button>
          </ButtonGroup>
        </span>
        {showSignUp ? (
          <form onSubmit={handleSubmitSignup} noValidate>
            <div className="inputFields">
              <TextField
                className="inputsRequired"
                required
                fullWidth
                onChange={(event) => setFullname(event.target.value)}
                id="outlined name"
                label="Enter Your Full Name"
                variant="outlined"
                error={fullnameValidation}
                helperText={fullnameValidation ? "Fill this field" : ""}
              />

              <TextField
                className="inputsRequired"
                type="email"
                id="outlined email"
                label="Enter Your mail"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setEmail(event.target.value)}
                error={emailValidation}
                helperText={emailValidation ? "Fill this field" : ""}
              />
              <TextField
                className="inputsRequired"
                id="outlined username"
                label="Enter username"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setUsername(event.target.value)}
                error={usernameValidation}
                helperText={usernameValidation ? "Fill this field" : ""}
              />
              <TextField
                className="inputsRequired"
                id="outlined password"
                label="Enter password"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setPassword(event.target.value)}
                type={showPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={handleToggleBtn}
                        edge="end"
                        style={{ color: "white" }}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
                error={passwordValidation}
                helperText={passwordValidation ? "Fill this field" : ""}
              />
            </div>
            <div className="submitBtn">
              <Button variant="contained" fullWidth type="submit">
                Submit
              </Button>
            </div>

            <p>
              Already have an account click&nbsp;
              <a
                style={{
                  textDecoration: "none",
                  color: "darkorchid",
                  cursor: "pointer",
                }}
                onClick={handleSignInBtn}
              >
                Sign In
              </a>
            </p>
          </form>
        ) : (
          <form onSubmit={handleSubmitSignin} noValidate>
            <div className="inputFields">
              <TextField
                noValidate
                className="inputsRequired"
                id="outlined username"
                label="Enter username"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setUsername(event.target.value)}
                error={usernameValidation}
                helperText={usernameValidation ? "Fill this field!" : ""}
              />
              <TextField
                className="inputsRequired"
                id="outlined password"
                label="Enter password"
                variant="outlined"
                required
                fullWidth
                onChange={(event) => setPassword(event.target.value)}
                error={passwordValidation}
                helperText={passwordValidation ? "Fil this field!" : ""}
                type={showPassword ? "text" : "password"}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={handleToggleBtn}
                        edge="end"
                        style={{ color: "white" }}
                      >
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
            </div>
            <div className="submitBtn">
              <Button variant="contained" fullWidth type="submit">
                Submit
              </Button>
            </div>
            <p>
              Don't have an account?Click&nbsp;
              <a
                style={{
                  textDecoration: "none",
                  color: "darkorchid",
                  cursor: "pointer",
                }}
                onClick={handleSignupBtn}
              >
                SignUp
              </a>
            </p>
          </form>
        )}
      </Box>
    </>
  );
}


TO HANDLE NOTIFICATIONS WE USE SNACKBAR 

IN AUTH.JSX

import { useSnackbar } from "notistack";


  const { enqueueSnackbar } = useSnackbar();

  const handleSuccess = (message) => {
    enqueueSnackbar(message, {
      variant: "success",
    });
  };
  const handleFailure = (message) => {
    enqueueSnackbar(message, { variant: "error" });
  };

IN APP.JSX

import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import LandingPage from "./pages/landingPage";
import Authentication from "./pages/Auth";
import { SnackbarProvider,closeSnackbar } from "notistack";
import { IconButton } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
function App() {
  return (
    <>
      <BrowserRouter>
        <SnackbarProvider
          open={open}
          maxSnack={3}
          anchorOrigin={{ vertical: "top", horizontal: "right" }}
          action={(snackbarId) => (
            <IconButton
              size="small"
              aria-label="close"
              color="inherit"
              onClick={() => closeSnackbar(snackbarId)}
            >
              <CloseIcon fontSize="small" />
            </IconButton>
          )}
        >
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route path="/auth" element={<Authentication />} />
          </Routes>
        </SnackbarProvider>
      </BrowserRouter>
    </>
  );
}

export default App;





























Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more