1 files changed, 100 insertions, 0 deletions
diff --git a/src2/pages/register.js b/src2/pages/register.js
new file mode 100644
index 00000000..39bd137f
--- /dev/null
+++ b/src2/pages/register.js
@@ -0,0 +1,100 @@
+import axios from "axios";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "@/components/elements/Link";
+import { useEffect, useState } from "react";
+import Alert from "@/components/elements/Alert";
+import Layout from "@/components/layouts/Layout";
+import Spinner from "@/components/elements/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);
+  const [alert, setAlert] = useState();
+
+  useEffect(() => {
+    setIsInputFulfilled(email && name && password);
+  }, [email, name, password]);
+
+  const register = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    let register = await axios.post(`${process.env.SELF_HOST}/api/register`, {email, name, password});
+    if (register.data.register) {
+      await axios.post(`${process.env.SELF_HOST}/api/activation-request`, {email});
+      setAlert({
+        component: <>Berhasil mendaftarkan akun anda, cek email untuk melakukan aktivasi akun</>,
+        type: 'success'
+      });
+      setEmail('');
+      setName('');
+      setPassword('');
+    } else {
+      switch (register.data.reason) {
+        case 'EMAIL_USED':
+          setAlert({
+            component: <>Email telah digunakan</>,
+            type: 'info'
+          });
+          break;
+      }
+    }
+    setIsLoading(false);
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Daftar - 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 mt-4 text-center">Mudahkan Pembelian dengan Indoteknik</h1>
+        <h2 className="text-gray_r-11 font-normal mt-2 mb-4">Daftar untuk melanjutkan belanja</h2>
+        {alert ? (
+          <Alert className="text-center" type={alert.type}>{alert.component}</Alert>
+        ) : ''}
+        <form onSubmit={register} className="w-full">
+          <label className="form-label mt-4 mb-2">Alamat Email</label>
+          <input 
+            type="email"
+            className="form-input bg-gray_r-2" 
+            placeholder="johndoe@gmail.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <label className="form-label mt-4 mb-2">Nama Lengkap</label>
+          <input 
+            type="text"
+            className="form-input bg-gray_r-2" 
+            placeholder="John Doe"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <label className="form-label mt-4 mb-2">Kata Sandi</label>
+          <input 
+            type="password"
+            className="form-input bg-gray_r-2" 
+            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>
+      </Layout>
+    </>
+  )
+}
+\ No newline at end of file