login and register

1 files changed, 109 insertions, 0 deletions

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