kazi331/login.js

## login.js
import axios from "axios";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { Toaster } from 'react-hot-toast';
import Icon from "../utils/icons";


const Login = () => {
  const [errors, setErrors] = useState({});
  const [loading, setLoading] = useState(false);
  const [values, setValues] = useState({})
  const [visible, setVisible] = useState(false)
  const { push } = useRouter();
  const handleChange = (e) => setValues({ ...values, [e.target.name]: e.target.value });


  return (
    <>
      <Head>
        <title>Login</title>
      </Head>
      <div className="container mx-auto" >
        <div className="flex items-center justify-center min-h-screen py-10" >
          <form onSubmit={handleSubmit} className="bg-gray-900 w-80 p-6 border-t-8 border-t-indigo-500 rounded-lg" >
            <h2 className="text-center font-bold text-2xl" > Login </h2>
            <div className="flex flex-col mt-3" >
              <label htmlFor="phone"> Phone </label>
              <input onChange={handleChange} className="input-style appearance-none " type="number" name="phone" id="phone" placeholder="016**** (11 digits )" required />
              <span className="text-red-500">{errors.phone}</span>
            </div>
            <div className="flex flex-col mt-3 relative" >
              <label htmlFor="password" > Password </label>
              <input onChange={handleChange} className="input-style pr-10" type={visible ? 'text' : 'password'} name="password" id="password" placeholder="●●●●●●●●●●●●" required />
              {/* <span className="absolute cursor-pointer top-7 right-0 p-1 px-2 text-gray-400" onClick={(e) => { e.preventDefault(); setVisible(!visible) }}>{visible ? <Icon.eye /> : <Icon.eyeAlt />}</span> */}
              <span className="text-red-500">{errors.password}</span>
            </div>
            <button type="submit" disabled={loading} className={`py-2 px-4 w-full mt-6 rounded bg-indigo-500 font-bold ${loading && 'opacity-50'}`}> {loading ? 'loging in...' : 'Login'} {loading && spinner} </button>
            <div className="mt-4 text-sm">New to Blood? <Link className="text-indigo-400" href="/register">Register Now </Link> </div>
          </form>
        </div>
      </div>
      <Toaster />
    </>
  )
}

export default Login;
	import axios from "axios";
	import Head from "next/head";
	import Link from "next/link";
	import { useRouter } from "next/router";
	import { useState } from "react";
	import { Toaster } from 'react-hot-toast';
	import Icon from "../utils/icons";


	const Login = () => {
	const [errors, setErrors] = useState({});
	const [loading, setLoading] = useState(false);
	const [values, setValues] = useState({})
	const [visible, setVisible] = useState(false)
	const { push } = useRouter();
	const handleChange = (e) => setValues({ ...values, [e.target.name]: e.target.value });


	return (
	<>
	<Head>
	<title>Login</title>
	</Head>
	<div className="container mx-auto" >
	<div className="flex items-center justify-center min-h-screen py-10" >
	<form onSubmit={handleSubmit} className="bg-gray-900 w-80 p-6 border-t-8 border-t-indigo-500 rounded-lg" >
	<h2 className="text-center font-bold text-2xl" > Login </h2>
	<div className="flex flex-col mt-3" >
	<label htmlFor="phone"> Phone </label>
	<input onChange={handleChange} className="input-style appearance-none " type="number" name="phone" id="phone" placeholder="016**** (11 digits )" required />
	<span className="text-red-500">{errors.phone}</span>
	</div>
	<div className="flex flex-col mt-3 relative" >
	<label htmlFor="password" > Password </label>
	<input onChange={handleChange} className="input-style pr-10" type={visible ? 'text' : 'password'} name="password" id="password" placeholder="●●●●●●●●●●●●" required />
	{/* <span className="absolute cursor-pointer top-7 right-0 p-1 px-2 text-gray-400" onClick={(e) => { e.preventDefault(); setVisible(!visible) }}>{visible ? <Icon.eye /> : <Icon.eyeAlt />}</span> */}
	<span className="text-red-500">{errors.password}</span>
	</div>
	<button type="submit" disabled={loading} className={`py-2 px-4 w-full mt-6 rounded bg-indigo-500 font-bold ${loading && 'opacity-50'}`}> {loading ? 'loging in...' : 'Login'} {loading && spinner} </button>
	<div className="mt-4 text-sm">New to Blood? <Link className="text-indigo-400" href="/register">Register Now </Link> </div>
	</form>
	</div>
	</div>
	<Toaster />
	</>
	)
	}

	export default Login;