CREATING AUTHENTICATION PAGE

April 30, 2025

WE USE MATERIAL UI FOR DESIGNING THE PAGE.WE GIVE THE PAGE A BACKGROUND IMAGE

FOR THE BACKGROUND WE USED A MP4 LIVE WALLPAPER TRIED A NEW ONE.(DOWNLOADED FROM THE INTERNET (live))

WE USE VARIOUS COMPONENTS OF MATERIAL UI FOR THIS PAGE.

FOR THE BUTTONS, WE USE BUTTON GROUP IN SUCH A WAY THAT THE UI CHANGES WHEN CLICKED ON THE BUTTONS.

TEXT FIELD IS USED FOR THE INPUTS AND WE USED A PASSWORD ICON THAT DISPLAYS THE REAL INPUT WHEN CLICKED ON IT (EYE ICON).

WE USE REACT HOOK USESTATE TO CHANGE THE SIGNIN AND SIGNUP UI WHEN CLICKED ON THE BUTTONS.

AUTH.JSX

import React, { useState } from "react";
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 "../Auth.css";

export default function Authentication() {
  const [showPassword, setShowPassword] = useState(false);
  const [showSignUp, setShowSignUp] = useState(true);
  const [showSignin, setShowSignIn] = useState(false);

  const handleSignupBtn = () => {
    setShowSignUp(true);
  };
  const handleSignInBtn = () => {
    setShowSignUp(false);
  };

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

  return (
    <div>
      <video autoPlay muted loop playsInline id="bg-video">
        <source src="bg.mp4" type="video/mp4" />          FOR THE BACKGROUND VIDEO
      </video>
      <Box component="form" 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 ? (
          <div className="inputFields">
            <TextField
              className="inputsRequired"
              id="outlined"
              label="Enter Your Full Name"
              variant="outlined"
            />
            <TextField
              className="inputsRequired"
              id="outlined"
              label="Enter username"
              variant="outlined"
            />
            <TextField
              className="inputsRequired"
              id="outlined"
              label="Enter password"
              variant="outlined"
              type={showPassword ? "text" : "password"}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      onClick={handleToggleBtn}
                      edge="end"
                      style={{ color: "white" }}
                    >
                      {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            <p>
              Already have an account click&nbsp;
              <span style={{ color: "darkorchid" }}>Sign In</span>
            </p>
          </div>
        ) : (
          <div className="inputFields">
            <TextField
              className="inputsRequired"
              id="outlined"
              label="Enter username"
              variant="outlined"
            />
            <TextField
              className="inputsRequired"
              id="outlined"
              label="Enter password"
              variant="outlined"
              type={showPassword ? "text" : "password"}
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton
                      onClick={handleToggleBtn}
                      edge="end"
                      style={{ color: "white" }}
                    >
                      {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            <p>
              Don't have an account?Click&nbsp;
              <span style={{ color: "darkorchid" }}>SignUp</span>
            </p>
          </div>
        )}
      </Box>
    </div>
  );
}

AUTH.CSS

body {
  display: flex;
  justify-content: space-evenly;
  background: url("/bg.mp4");
  background-size:cover;
  background-repeat: no-repeat;
}
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
height: 100%;
width: 100%;
  object-fit: cover;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  top: 40%;
  font-size: 2rem;
}

.box {
  background-color: rgb(13, 11, 11);
  height: fit-content;
  width: 27vw;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem;
  margin: 1rem;
}
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputsRequired {
  width: 25rem;
  color: white;
}
.inputsRequired input {
  color: white;
}
.inputsRequired .MuiFormLabel-root {
  color: gray;
  padding: 1rem;
}
.inputsRequired .MuiOutlinedInput-notchedOutline {
  border-color: white;
}
.inputsRequired .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: gray;
}
.inputsRequired .MuiInputBase-root {
  margin: 1rem;
}