diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-17 17:07:50 +0700 |
| commit | f99e0aba70efad0deb907d8e27f09fc9f527c8a4 (patch) | |
| tree | f0ac96e4e736a1d385e32553f0e641ee27e11fd3 /src2/pages/activate.js | |
| parent | 90e1edab9b6a8ccc09a49fed3addbec2cbc4e4c3 (diff) | |
Refactor
Diffstat (limited to 'src2/pages/activate.js')
| -rw-r--r-- | src2/pages/activate.js | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/src2/pages/activate.js b/src2/pages/activate.js new file mode 100644 index 00000000..d9b41bf4 --- /dev/null +++ b/src2/pages/activate.js @@ -0,0 +1,111 @@ +import axios from "axios"; +import Head from "next/head"; +import Image from "next/image"; +import Link from "@/components/elements/Link"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import Alert from "@/components/elements/Alert"; +import Layout from "@/components/layouts/Layout"; +import Spinner from "@/components/elements/Spinner"; +import { setAuth } from "@/core/utils/auth"; +import Logo from "@/images/logo.png"; + +export default function Activate() { + const [email, setEmail] = useState(''); + const [isInputFulfilled, setIsInputFulfilled] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [alert, setAlert] = useState(); + const router = useRouter(); + const { token } = router.query; + + useEffect(() => { + if (router.query.email) setEmail(router.query.email); + }, [router]) + + useEffect(() => { + const activateIfTokenExist = async () => { + if (token) { + let activation = await axios.post(`${process.env.SELF_HOST}/api/activation`, {token}); + if (activation.data.activation) { + setAuth(activation.data.user); + setAlert({ + component: <>Selamat, akun anda berhasil diaktifkan, <Link className="text-gray_r-12" href="/">kembali ke beranda</Link>.</>, + type: 'success' + }); + } else { + setAlert({ + component: <>Mohon maaf token sudah tidak aktif, lakukan permintaan aktivasi akun kembali atau <Link className="text-gray_r-12" href="/login">masuk</Link> jika sudah memiliki akun.</>, + type: 'info' + }); + } + } + } + activateIfTokenExist(); + }, [token]); + + useEffect(() => { + setIsInputFulfilled(email != ''); + }, [email]); + + const activationRequest = async (e) => { + e.preventDefault(); + setIsLoading(true); + let activationRequest = await axios.post(`${process.env.SELF_HOST}/api/activation-request`, {email}); + if (activationRequest.data.activation_request) { + setAlert({ + component: <>Mohon cek email anda untuk aktivasi akun Indoteknik</>, + type: 'success' + }); + } else { + switch (activationRequest.data.reason) { + case 'NOT_FOUND': + setAlert({ + component: <>Email tersebut belum terdaftar, <Link className="text-gray_r-12" href="/register">daftar sekarang</Link>.</>, + type: 'info' + }); + break; + case 'ACTIVE': + setAlert({ + component: <>Email tersebut sudah terdaftar dan sudah aktif, <Link className="text-gray_r-12" href="/login">masuk sekarang</Link>.</>, + type: 'info' + }); + break; + } + } + setIsLoading(false); + } + return ( + <> + <Head> + <title>Aktivasi Akun Indoteknik</title> + </Head> + <Layout 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-2xl text-gray_r-12 mt-4 text-center">Aktivasi Akun Indoteknik Anda</h1> + <h2 className="text-gray-800 mt-2 mb-4 text-center">Link aktivasi akan dikirimkan melalui email</h2> + {alert ? ( + <Alert className="text-center" type={alert.type}>{alert.component}</Alert> + ) : ''} + <form onSubmit={activationRequest} 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)} + autoFocus + /> + <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> + ) : 'Kirim Email'} + </button> + </form> + </Layout> + </> + ) +}
\ No newline at end of file |