Login Component

Login.jsx

"use client";

import React, { useState } from "react";
import "./Login.css";
import Link from "next/link";
import { fetchUsername, fetchPassword } from "@/redux/modules/auth";
import { useRouter } from "next/navigation";
import { useDispatch } from "react-redux";

export default function Login() {
  //state management
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [toggleStatus, setToggle] = useState(false);
  //react- currying
  const handleChange = (e, setState) => setState(e.target.value);
  const handleToggle = () => setToggle((prevState) => !prevState);
  //config function
  //Router variable
  const router = useRouter();

  const passwordStyling = {
    visibility: !toggleStatus ? "visible" : "hidden",
    display: !toggleStatus ? "block" : "none",
    transition: "all 0.3s ease",
  };

  const OTPstyling = {
    visibility: toggleStatus ? "visible" : "hidden",
    display: toggleStatus ? "block" : "none",
    transition: "all 0.3s ease",
  };

  const dispatch = useDispatch();

  const Login = () => {
    dispatch(fetchUsername(username));
    dispatch(fetchPassword(password));
  };

  return (
    <div className="container">
      <div className="login-container">
        <h1>Sign in to Explore Web Content</h1>
        <br />
        <div className="group">
          <input
            type="text"
            className="input email"
            id="emailID"
            required
            onChange={(e) => handleChange(e, setUsername)}
          />
          <label htmlFor="emailID">Email ID</label>
        </div>
        <div className="group" style={passwordStyling}>
          <input
            type="password"
            className="input"
            id="password"
            required
            onChange={(e) => handleChange(e, setPassword)}
          />
          <label htmlFor="username">Password</label>
        </div>

        <div className="user-actions">
          <button
            className="closeButton"
            onClick={Login}
            style={{
              visibility: `${toggleStatus ? "hidden" : "visible"}`,
              display: `${toggleStatus ? "none" : "block"}`,
              transition: "all 0.3s ease",
            }}
          >
            <Link href="/Dashboard">Sign in</Link>
          </button>
        </div>
        <br />
        <Link href="/">
          <button className="closeButton">Go Back</button>
        </Link>
      </div>
    </div>
  );
}