diff options
| author | Rafi Zadanly <rafizadanly@gmail.com> | 2022-11-18 11:48:10 +0700 |
|---|---|---|
| committer | Rafi Zadanly <rafizadanly@gmail.com> | 2022-11-18 11:48:10 +0700 |
| commit | 2c0e4a977cc4fadcc0af507b7c9d28a3824f5323 (patch) | |
| tree | dde8fd3b07587e64bab3890e61e44d4cb46ebd96 /src/pages/register.js | |
| parent | b554b29e1ed7f52e07143f22c9cf14ac36a589d0 (diff) | |
Register process
Diffstat (limited to 'src/pages/register.js')
| -rw-r--r-- | src/pages/register.js | 73 |
1 files changed, 57 insertions, 16 deletions
diff --git a/src/pages/register.js b/src/pages/register.js index 38ea972f..8c499b32 100644 --- a/src/pages/register.js +++ b/src/pages/register.js @@ -1,9 +1,36 @@ +import axios from "axios"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; +import { useEffect, useState } from "react"; +import { toast } from "react-toastify"; +import Spinner from "../components/Spinner"; import Logo from "../images/logo.png"; export default function Login() { + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const [password, setPassword] = useState(''); + const [isInputFulfilled, setIsInputFulfilled] = useState(false); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + setIsInputFulfilled(email && name && password); + }, [email, name, password]); + + const register = async (e) => { + e.preventDefault(); + setIsLoading(true); + let login = await axios.post(`${process.env.SELF_HOST}/api/register`, {email, name, password}); + if (login.data.register) { + toast.success('Berhasil mendaftarkan akun anda, cek email untuk melakukan aktivasi akun'); + } else { + toast.info('Email telah digunakan'); + toast.clearWaitingQueue(); + setIsLoading(false); + } + } + return ( <> <Head> @@ -15,22 +42,36 @@ export default function Login() { </Link> <h1 className="text-2xl text-gray-900 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1> <h2 className="text-gray-800 mt-2 mb-4">Daftar untuk melanjutkan</h2> - <input - type="text" - className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" - placeholder="johndoe@gmail.com" - /> - <input - type="text" - className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" - placeholder="John Doe" - /> - <input - type="password" - className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" - placeholder="••••••••" - /> - <button className="btn-yellow font-semibold mt-4 w-full">Daftar</button> + <form onSubmit={register} 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="text" + className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" + placeholder="John Doe" + value={name} + onChange={(e) => setName(e.target.value)} + /> + <input + type="password" + className="form-input bg-gray-100 mt-4 focus:ring-1 focus:ring-yellow-900" + placeholder="••••••••" + value={password} + onChange={(e) => setPassword(e.target.value)} + /> + <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> + ) : 'Daftar'} + </button> + </form> <p className="text-gray-700 mt-4">Sudah punya akun Indoteknik? <Link href="/login">Masuk</Link></p> </main> </> |