login and register

6 files changed, 380 insertions, 262 deletions

diff --git a/src/lib/auth/components/Login.jsx b/src/lib/auth/components/Login.jsx
index 6fbc1475..171ff4c8 100644
--- a/src/lib/auth/components/Login.jsx
+++ b/src/lib/auth/components/Login.jsx
@@ -1,124 +1,12 @@
-import Image from 'next/image'
-import IndoteknikLogo from '@/images/logo.png'
-import Link from '@/core/components/elements/Link/Link'
-import { useState } from 'react'
-import loginApi from '../api/loginApi'
-import { useRouter } from 'next/router'
-import Alert from '@/core/components/elements/Alert/Alert'
-import { setAuth } from '@/core/utils/auth'
+import LoginDesktop from "./LoginDesktop"
+import LoginMobile from "./LoginMobile"
 
 const Login = () => {
-  const router = useRouter()
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [isLoading, setIsLoading] = useState(false)
-  const [alert, setAlert] = useState(null)
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setAlert(null)
-    setIsLoading(true)
-    const login = await loginApi({ email, password })
-    setIsLoading(false)
-
-    if (login.isAuth) {
-      setAuth(login.user)
-      router.push('/')
-      return
-    }
-    switch (login.reason) {
-      case 'NOT_FOUND':
-        setAlert({
-          children: 'Email atau password tidak cocok',
-          type: 'info'
-        })
-        break
-      case 'NOT_ACTIVE':
-        setAlert({
-          children: (
-            <>
-              Email belum diaktivasi,
-              <Link
-                className='text-gray-900'
-                href={`/activate?email=${email}`}
-              >
-                aktivasi sekarang
-              </Link>
-            </>
-          ),
-          type: 'info'
-        })
-        break
-    }
-  }
-
   return (
-    <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
-      <Link href='/'>
-        <Image
-          src={IndoteknikLogo}
-          alt='Logo Indoteknik'
-          width={150}
-          height={50}
-        />
-      </Link>
-      <h1 className='text-2xl mt-4 font-semibold'>Mulai Belanja Sekarang</h1>
-      <h2 className='text-gray_r-11 font-normal mt-1 mb-4'>Masuk ke akun kamu untuk belanja</h2>
-
-      {alert && (
-        <Alert
-          className='text-center'
-          type={alert.type}
-        >
-          {alert.children}
-        </Alert>
-      )}
-
-      <form
-        className='w-full mt-6 flex flex-col gap-y-4'
-        onSubmit={handleSubmit}
-      >
-        <div>
-          <label htmlFor='email'>Alamat Email</label>
-          <input
-            type='email'
-            id='email'
-            className='form-input w-full mt-3'
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder='contoh@email.com'
-          />
-        </div>
-        <div>
-          <label htmlFor='password'>Kata Sandi</label>
-          <input
-            type='password'
-            id='password'
-            className='form-input w-full mt-3'
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder='••••••••••••'
-          />
-        </div>
-        <button
-          type='submit'
-          className='btn-yellow w-full mt-2'
-          disabled={!email || !password || isLoading}
-        >
-          {!isLoading ? 'Masuk' : 'Loading...'}
-        </button>
-      </form>
-
-      <div className='text-gray_r-11 mt-4'>
-        Belum punya akun Indoteknik?{' '}
-        <Link
-          href='/register'
-          className='inline'
-        >
-          Daftar
-        </Link>
-      </div>
-    </div>
+    <>
+      <LoginMobile />
+      <LoginDesktop />
+    </>
   )
 }
 
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
new file mode 100644
index 00000000..7b71b9a6
--- /dev/null
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -0,0 +1,77 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import useLogin from '../hooks/useLogin'
+import Link from '@/core/components/elements/Link/Link'
+import PageContent from '@/lib/content/components/PageContent'
+import Alert from '@/core/components/elements/Alert/Alert'
+
+const LoginDesktop = () => {
+  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+    useLogin()
+
+  return (
+    <DesktopView>
+      <div className='container mx-auto'>
+        <div className='grid grid-cols-2 gap-x-10 pt-16'>
+          <div>
+            <h1 className='text-2xl font-semibold'>Selamat Datang di Indoteknik</h1>
+            <h2 className='text-gray_r-11 font-normal mt-1 mb-4'>
+              Masuk ke akun kamu untuk mulai transaksi!
+            </h2>
+
+            {alert && (
+              <Alert className='text-center' type={alert.type}>
+                {alert.children}
+              </Alert>
+            )}
+
+            <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+              <div>
+                <label htmlFor='email'>Alamat Email</label>
+                <input
+                  type='email'
+                  name='email'
+                  id='email'
+                  className='form-input w-full mt-3'
+                  ref={emailRef}
+                  onChange={handleChangeInput}
+                  placeholder='contoh@email.com'
+                />
+              </div>
+              <div>
+                <label htmlFor='password'>Kata Sandi</label>
+                <input
+                  type='password'
+                  name='password'
+                  id='password'
+                  className='form-input w-full mt-3'
+                  ref={passwordRef}
+                  onChange={handleChangeInput}
+                  placeholder='••••••••••••'
+                />
+              </div>
+              <button
+                type='submit'
+                className='btn-yellow w-full mt-2'
+                disabled={!isValid || isLoading}
+              >
+                {!isLoading ? 'Masuk' : 'Loading...'}
+              </button>
+            </form>
+
+            <div className='text-gray_r-11 mt-10'>
+              Belum punya akun Indoteknik?{' '}
+              <Link href='/register' className='inline'>
+                Daftar akun baru
+              </Link>
+            </div>
+          </div>
+          <div>
+            <PageContent path='/login' />
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default LoginDesktop
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
new file mode 100644
index 00000000..78584a1c
--- /dev/null
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -0,0 +1,68 @@
+import Image from 'next/image'
+import IndoteknikLogo from '@/images/logo.png'
+import Link from '@/core/components/elements/Link/Link'
+import Alert from '@/core/components/elements/Alert/Alert'
+import MobileView from '@/core/components/views/MobileView'
+import useLogin from '../hooks/useLogin'
+
+const LoginMobile = () => {
+  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+    useLogin()
+
+  return (
+    <MobileView>
+      <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
+        <Link href='/'>
+          <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
+        </Link>
+        <h1 className='text-2xl mt-4 font-semibold'>Mulai Belanja Sekarang</h1>
+        <h2 className='text-gray_r-11 font-normal mt-1 mb-4'>Masuk ke akun kamu untuk belanja</h2>
+
+        {alert && (
+          <Alert className='text-center' type={alert.type}>
+            {alert.children}
+          </Alert>
+        )}
+
+        <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor='email'>Alamat Email</label>
+            <input
+              type='email'
+              name='email'
+              id='email'
+              className='form-input w-full mt-3'
+              ref={emailRef}
+              onChange={handleChangeInput}
+              placeholder='contoh@email.com'
+            />
+          </div>
+          <div>
+            <label htmlFor='password'>Kata Sandi</label>
+            <input
+              type='password'
+              name='password'
+              id='password'
+              className='form-input w-full mt-3'
+              ref={passwordRef}
+              onChange={handleChangeInput}
+              placeholder='••••••••••••'
+            />
+          </div>
+          <button type='submit' className='btn-yellow w-full mt-2' disabled={!isValid || isLoading}>
+            {!isLoading ? 'Masuk' : 'Loading...'}
+          </button>
+        </form>
+
+        <div className='text-gray_r-11 mt-4'>
+          Belum punya akun Indoteknik?{' '}
+          <Link href='/register' className='inline'>
+            Daftar
+          </Link>
+        </div>
+      </div>
+    </MobileView>
+  )
+}
+
+export default LoginMobile
diff --git a/src/lib/auth/components/Register.jsx b/src/lib/auth/components/Register.jsx
index 4ea62899..6c0152dc 100644
--- a/src/lib/auth/components/Register.jsx
+++ b/src/lib/auth/components/Register.jsx
@@ -1,150 +1,12 @@
-import Image from 'next/image'
-import Link from '@/core/components/elements/Link/Link'
-import IndoteknikLogo from '@/images/logo.png'
-import { useState } from 'react'
-import registerApi from '../api/registerApi'
-import Alert from '@/core/components/elements/Alert/Alert'
-import axios from 'axios'
+import RegisterDesktop from './RegisterDesktop'
+import RegisterMobile from './RegisterMobile'
 
 const Register = () => {
-  const [fullname, setFullname] = useState('')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [companyName, setCompanyName] = useState('')
-  const [isLoading, setIsLoading] = useState('')
-  const [alert, setAlert] = useState(null)
-
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setAlert(null)
-    setIsLoading(true)
-    const data = {
-      name: fullname,
-      company: companyName,
-      email,
-      password
-    }
-    const isRegistered = await registerApi({ data })
-    setIsLoading(false)
-    if (isRegistered.register) {
-      await axios.post(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/activation-request`, { email })
-      setAlert({
-        children: 'Berhasil mendaftarkan akun anda, cek email untuk melakukan aktivasi akun',
-        type: 'success'
-      })
-      setCompanyName('')
-      setFullname('')
-      setEmail('')
-      setPassword('')
-    } else {
-      switch (isRegistered.reason) {
-        case 'EMAIL_USED':
-          setAlert({
-            children: 'Email telah digunakan',
-            type: 'info'
-          })
-          break
-      }
-    }
-  }
-
   return (
-    <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
-      <Link href='/'>
-        <Image
-          src={IndoteknikLogo}
-          alt='Logo Indoteknik'
-          width={150}
-          height={50}
-        />
-      </Link>
-
-      <h1 className='text-2xl mt-4 font-semibold'>Daftar Akun Indoteknik</h1>
-      <h2 className='text-gray_r-11 font-normal mt-1 mb-4 text-center'>
-        Buat akun sekarang lebih mudah dan terverifikasi
-      </h2>
-
-      {alert && (
-        <Alert
-          className='text-center'
-          type={alert.type}
-        >
-          {alert.children}
-        </Alert>
-      )}
-
-      <form
-        className='w-full mt-6 flex flex-col gap-y-4'
-        onSubmit={handleSubmit}
-      >
-        <div>
-          <label htmlFor='companyName'>
-            Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
-          </label>
-          <input
-            type='text'
-            id='companyName'
-            className='form-input w-full mt-3'
-            value={companyName}
-            onChange={(e) => setCompanyName(e.target.value.toUpperCase())}
-            placeholder='cth: INDOTEKNIK DOTCOM GEMILANG'
-            autoCapitalize='true'
-          />
-        </div>
-
-        <div>
-          <label htmlFor='fullname'>Nama Lengkap</label>
-          <input
-            type='text'
-            id='fullname'
-            className='form-input w-full mt-3'
-            value={fullname}
-            onChange={(e) => setFullname(e.target.value)}
-            placeholder='John Doe'
-          />
-        </div>
-        <div>
-          <label htmlFor='email'>Alamat Email</label>
-          <input
-            type='email'
-            id='email'
-            className='form-input w-full mt-3'
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder='contoh@email.com'
-          />
-        </div>
-        <div>
-          <label htmlFor='password'>Kata Sandi</label>
-          <input
-            type='password'
-            id='password'
-            className='form-input w-full mt-3'
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder='••••••••••••'
-          />
-        </div>
-
-        <button
-          type='submit'
-          className='btn-yellow w-full mt-2'
-          disabled={!email || !password || !fullname || isLoading}
-        >
-          {!isLoading ? 'Daftar' : 'Loading...'}
-        </button>
-      </form>
-
-      <div className='text-gray_r-11 mt-4'>
-        Sudah punya akun Indoteknik?{' '}
-        <Link
-          href='/login'
-          className='inline'
-        >
-          Masuk
-        </Link>
-      </div>
-    </div>
+    <>
+      <RegisterMobile />
+      <RegisterDesktop />
+    </>
   )
 }
 
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
new file mode 100644
index 00000000..71cc29d8
--- /dev/null
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -0,0 +1,114 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import useRegister from '../hooks/useRegister'
+import Link from '@/core/components/elements/Link/Link'
+import Alert from '@/core/components/elements/Alert/Alert'
+import PageContent from '@/lib/content/components/PageContent'
+
+const RegisterDesktop = () => {
+  const {
+    handleChangeInput,
+    handleSubmit,
+    isLoading,
+    isValid,
+    alert,
+    companyNameRef,
+    fullnameRef,
+    emailRef,
+    passwordRef
+  } = useRegister()
+
+  return (
+    <DesktopView>
+      <div className='container mx-auto'>
+        <div className='grid grid-cols-2 gap-x-10 pt-16'>
+          <div>
+            <h1 className='text-2xl font-semibold'>Daftar Akun Indoteknik</h1>
+            <h2 className='text-gray_r-11 font-normal mt-1 mb-4'>
+              Buat akun sekarang lebih mudah dan terverifikasi
+            </h2>
+
+            {alert && (
+              <Alert className='text-center' type={alert.type}>
+                {alert.children}
+              </Alert>
+            )}
+
+            <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+              <div>
+                <label htmlFor='companyName'>
+                  Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+                </label>
+                <input
+                  type='text'
+                  id='companyName'
+                  name='companyName'
+                  className='form-input w-full mt-3'
+                  ref={companyNameRef}
+                  onChange={handleChangeInput}
+                  placeholder='cth: INDOTEKNIK DOTCOM GEMILANG'
+                  autoCapitalize='true'
+                />
+              </div>
+
+              <div>
+                <label htmlFor='fullname'>Nama Lengkap</label>
+                <input
+                  type='text'
+                  id='fullname'
+                  name='fullname'
+                  className='form-input w-full mt-3'
+                  ref={fullnameRef}
+                  onChange={handleChangeInput}
+                  placeholder='John Doe'
+                />
+              </div>
+              <div>
+                <label htmlFor='email'>Alamat Email</label>
+                <input
+                  type='email'
+                  name='email'
+                  id='email'
+                  className='form-input w-full mt-3'
+                  ref={emailRef}
+                  onChange={handleChangeInput}
+                  placeholder='contoh@email.com'
+                />
+              </div>
+              <div>
+                <label htmlFor='password'>Kata Sandi</label>
+                <input
+                  type='password'
+                  name='password'
+                  id='password'
+                  className='form-input w-full mt-3'
+                  ref={passwordRef}
+                  onChange={handleChangeInput}
+                  placeholder='••••••••••••'
+                />
+              </div>
+              <button
+                type='submit'
+                className='btn-yellow w-full mt-2'
+                disabled={!isValid || isLoading}
+              >
+                {!isLoading ? 'Masuk' : 'Loading...'}
+              </button>
+            </form>
+
+            <div className='text-gray_r-11 mt-10'>
+              Sudah punya akun Indoteknik?{' '}
+              <Link href='/login' className='inline'>
+                Masuk
+              </Link>
+            </div>
+          </div>
+          <div>
+            <PageContent path='/register' />
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default RegisterDesktop
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
new file mode 100644
index 00000000..007b127c
--- /dev/null
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -0,0 +1,109 @@
+import IndoteknikLogo from '@/images/logo.png'
+import Alert from '@/core/components/elements/Alert/Alert'
+import Image from 'next/image'
+import Link from '@/core/components/elements/Link/Link'
+import useRegister from '../hooks/useRegister'
+import MobileView from '@/core/components/views/MobileView'
+
+const RegisterMobile = () => {
+  const {
+    handleChangeInput,
+    handleSubmit,
+    isLoading,
+    isValid,
+    alert,
+    companyNameRef,
+    fullnameRef,
+    emailRef,
+    passwordRef
+  } = useRegister()
+
+  return (
+    <MobileView>
+      <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
+        <Link href='/'>
+          <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
+        </Link>
+
+        <h1 className='text-2xl mt-4 font-semibold'>Daftar Akun Indoteknik</h1>
+        <h2 className='text-gray_r-11 font-normal mt-1 mb-4 text-center'>
+          Buat akun sekarang lebih mudah dan terverifikasi
+        </h2>
+
+        {alert && (
+          <Alert className='text-center' type={alert.type}>
+            {alert.children}
+          </Alert>
+        )}
+
+        <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor='companyName'>
+              Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+            </label>
+            <input
+              type='text'
+              id='companyName'
+              name='companyName'
+              className='form-input w-full mt-3'
+              ref={companyNameRef}
+              onChange={handleChangeInput}
+              placeholder='cth: INDOTEKNIK DOTCOM GEMILANG'
+              autoCapitalize='true'
+            />
+          </div>
+
+          <div>
+            <label htmlFor='fullname'>Nama Lengkap</label>
+            <input
+              type='text'
+              id='fullname'
+              name='fullname'
+              className='form-input w-full mt-3'
+              ref={fullnameRef}
+              onChange={handleChangeInput}
+              placeholder='John Doe'
+            />
+          </div>
+          <div>
+            <label htmlFor='email'>Alamat Email</label>
+            <input
+              type='email'
+              id='email'
+              name='email'
+              className='form-input w-full mt-3'
+              ref={emailRef}
+              onChange={handleChangeInput}
+              placeholder='contoh@email.com'
+            />
+          </div>
+          <div>
+            <label htmlFor='password'>Kata Sandi</label>
+            <input
+              type='password'
+              id='password'
+              name='password'
+              className='form-input w-full mt-3'
+              ref={passwordRef}
+              onChange={handleChangeInput}
+              placeholder='••••••••••••'
+            />
+          </div>
+
+          <button type='submit' className='btn-yellow w-full mt-2' disabled={!isValid || isLoading}>
+            {!isLoading ? 'Daftar' : 'Loading...'}
+          </button>
+        </form>
+
+        <div className='text-gray_r-11 mt-4'>
+          Sudah punya akun Indoteknik?{' '}
+          <Link href='/login' className='inline'>
+            Masuk
+          </Link>
+        </div>
+      </div>
+    </MobileView>
+  )
+}
+
+export default RegisterMobile