diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-11-17 17:30:03 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-11-17 17:30:03 +0700 |
| commit | d19b40f2972cc74105cfb8390a3b0fe3a4695b3a (patch) | |
| tree | b2c00656d07774c36ee1046267e35663a968d7d9 /src/pages/login.js | |
| parent | b01a5a7de6303c2752358f970e8d71daa1a16596 (diff) | |
Login process to Odoo Api
Diffstat (limited to 'src/pages/login.js')
| -rw-r--r-- | src/pages/login.js | 51 |
1 files changed, 43 insertions, 8 deletions
diff --git a/src/pages/login.js b/src/pages/login.js index 971dc38e..315146a5 100644 --- a/src/pages/login.js +++ b/src/pages/login.js @@ -2,39 +2,74 @@ import axios from "axios"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { toast } from "react-toastify"; +import Spinner from "../components/Spinner"; +import { setAuth } from "../helpers/auth"; import Logo from "../images/logo.png"; export default function Login() { - const login = (e) => { + const router = useRouter(); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isInputFulfilled, setIsInputFulfilled] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + setIsInputFulfilled(email && password); + }, [email, password]); + + const login = async (e) => { e.preventDefault(); - // axios.post(`${process.env.SELF_HOST}/api/login`, {email: 'it@fixcomart.co', password: 'Fixcomart378'}); + setIsLoading(true); + let login = await axios.post(`${process.env.SELF_HOST}/api/login`, {email, password}); + if (login.data.is_auth) { + setAuth(login.data.user); + router.push('/'); + } else { + toast.info('Email atau Password tidak cocok'); + toast.clearWaitingQueue(); + setIsLoading(false); + } } + return ( <> <Head> <title>Masuk - Indoteknik</title> </Head> - <main className="max-w-lg mx-auto flex flex-col items-center px-4"> + <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8"> <Link href="/" className="mt-16"> <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} /> </Link> - <h1 className="text-xl sm:text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1> + <h1 className="text-2xl text-gray-900 mt-4">Mulai Belanja Sekarang</h1> <h2 className="text-gray-800 mt-2 mb-4">Masuk ke akun kamu untuk belanja</h2> - <form onSubmit={login}> + <form onSubmit={login} className="w-full"> <input type="text" className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" placeholder="johndoe@gmail.com" + value={email} + onChange={(e) => setEmail(e.target.value)} /> <input type="password" className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" - placeholder="**********" + placeholder="••••••••" + value={password} + onChange={(e) => setPassword(e.target.value)} /> <div className="flex justify-end mt-4 w-full"> - <Link href="/forgot-password" className="text-sm">Lupa kata sandi</Link> + <Link href="/forgot-password">Lupa kata sandi</Link> </div> - <button type="submit" className="btn-yellow font-semibold mt-4 w-full">Masuk</button> + <button type="submit" disabled={!isInputFulfilled} className="btn-yellow font-semibold mt-4 w-full"> + {isLoading ? ( + <div className="flex justify-center items-center gap-x-2"> + <Spinner className="w-4 h-4 text-gray-600 fill-gray-900" /> <span>Loading...</span> + </div> + ) : 'Masuk'} + </button> </form> <p className="text-gray-700 mt-4">Belum punya akun Indoteknik? <Link href="/register">Daftar</Link></p> </main> |