login and register

16 files changed, 585 insertions, 292 deletions

diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index fb95c593..b735c13f 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -1,3 +1,4 @@
+import { deleteAuth } from '@/core/utils/auth'
 import Link from '../Link/Link'
 
 const NavbarUserDropdown = () => {
@@ -8,6 +9,9 @@ const NavbarUserDropdown = () => {
         <Link href='/'>Invoice & Faktur Pajak</Link>
         <Link href='/'>Wishlist</Link>
         <Link href='/'>Pengaturan Akun</Link>
+        <Link href='/login' onClick={deleteAuth}>
+          Keluar Akun
+        </Link>
       </div>
     </div>
   )
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
diff --git a/src/lib/auth/hooks/useLogin.js b/src/lib/auth/hooks/useLogin.js
new file mode 100644
index 00000000..bef36053
--- /dev/null
+++ b/src/lib/auth/hooks/useLogin.js
@@ -0,0 +1,74 @@
+import Link from '@/core/components/elements/Link/Link'
+import { setAuth } from '@/core/utils/auth'
+import { useRouter } from 'next/router'
+import { useRef, useState } from 'react'
+import loginApi from '../api/loginApi'
+
+const useLogin = () => {
+  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(null)
+  const [isValid, setIsValid] = useState(false)
+
+  const emailRef = useRef(null)
+  const passwordRef = useRef(null)
+
+  const inputVal = () => ({
+    email: emailRef.current.value,
+    password: passwordRef.current.value
+  })
+
+  const handleChangeInput = () => {
+    const { email, password } = inputVal()
+    const isValidInput = email && password
+    setIsValid(isValidInput)
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setAlert(null)
+    setIsLoading(true)
+    const { email, password } = inputVal()
+    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 {
+    handleChangeInput,
+    handleSubmit,
+    isLoading,
+    isValid,
+    alert,
+    emailRef,
+    passwordRef
+  }
+}
+
+export default useLogin
diff --git a/src/lib/auth/hooks/useRegister.js b/src/lib/auth/hooks/useRegister.js
new file mode 100644
index 00000000..7642a666
--- /dev/null
+++ b/src/lib/auth/hooks/useRegister.js
@@ -0,0 +1,80 @@
+import axios from 'axios'
+import { useRef, useState } from 'react'
+import registerApi from '../api/registerApi'
+
+const useRegister = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [alert, setAlert] = useState(null)
+  const [isValid, setIsValid] = useState(false)
+
+  const fullnameRef = useRef(null)
+  const emailRef = useRef(null)
+  const passwordRef = useRef(null)
+  const companyNameRef = useRef(null)
+
+  const inputVal = () => ({
+    fullname: fullnameRef.current.value,
+    email: emailRef.current.value,
+    password: passwordRef.current.value,
+    companyName: companyNameRef.current.value
+  })
+
+  const handleChangeInput = () => {
+    const { fullname, email, password } = inputVal()
+    const isValidInput = email && password && fullname
+    setIsValid(isValidInput)
+  }
+
+  const resetInput = () => {
+    fullnameRef.current.value = ''
+    emailRef.current.value = ''
+    passwordRef.current.value = ''
+    companyNameRef.current.value = ''
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setAlert(null)
+    setIsLoading(true)
+    const { fullname, email, password, companyName } = inputVal()
+    
+    const isRegistered = await registerApi({
+      name: fullname,
+      company: companyName,
+      email,
+      password
+    })
+    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'
+      })
+      resetInput()
+    } else {
+      switch (isRegistered.reason) {
+        case 'EMAIL_USED':
+          setAlert({
+            children: 'Email telah digunakan',
+            type: 'info'
+          })
+          break
+      }
+    }
+  }
+
+  return {
+    handleChangeInput,
+    handleSubmit,
+    isLoading,
+    isValid,
+    alert,
+    companyNameRef,
+    fullnameRef,
+    emailRef,
+    passwordRef
+  }
+}
+
+export default useRegister
diff --git a/src/lib/content/components/PageContent.jsx b/src/lib/content/components/PageContent.jsx
index 4c17ab54..f7c2f467 100644
--- a/src/lib/content/components/PageContent.jsx
+++ b/src/lib/content/components/PageContent.jsx
@@ -5,15 +5,14 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 const PageContent = ({ path }) => {
   const fetchContent = async () => await pageContentApi({ path })
   const content = useQuery(`content-${path}`, fetchContent)
-
-  if (content.data) {
+  
+  if (content.data?.id) {
     let parsedContent = content.data.content
     parsedContent = parsedContent.replaceAll(
       'src="/web/image',
       `src="${process.env.NEXT_PUBLIC_ODOO_HOST}/web/image`
     )
-    const contentClassNames = `
-      p-4 
+    const contentClassNames = ` 
       prose 
       prose-gray 
       prose-a:text-red_r-10 
@@ -26,12 +25,7 @@ const PageContent = ({ path }) => {
       prose-hr:my-3
     `
 
-    return (
-      <div
-        className={contentClassNames}
-        dangerouslySetInnerHTML={{ __html: parsedContent }}
-      />
-    )
+    return <div className={contentClassNames} dangerouslySetInnerHTML={{ __html: parsedContent }} />
   }
 
   if (content.isLoading) {
diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
index 9b41f5c3..9521cbe4 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -21,7 +21,7 @@ const Product = ({ product }) => {
     if (wishlist?.data?.productTotal > 0) {
       toast.success('Berhasil menghapus dari wishlist')
     } else {
-      toast.error('Terjadi kesalahan internal, gagal menambahkan ke wishlist')
+      toast.success('Berhasil menambahkan ke wishlist')
     }
     wishlist.refetch()
   }
diff --git a/src/lib/product/components/ProductDesktop.jsx b/src/lib/product/components/ProductDesktop.jsx
index f37d900c..55d44212 100644
--- a/src/lib/product/components/ProductDesktop.jsx
+++ b/src/lib/product/components/ProductDesktop.jsx
@@ -225,9 +225,9 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               </TabButton>
             ))}
           </div>
-          <div className='flex rounded'>
-            <TabContent active={informationTab == 'description'}>
-              <div className='w-3/4 leading-7 product__description'>
+          <div className='flex'>
+            <div className='w-3/4 leading-7 product__description'>
+              <TabContent active={informationTab == 'description'}>
                 <span
                   dangerouslySetInnerHTML={{
                     __html:
@@ -236,10 +236,10 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         : 'Belum ada deskripsi produk.'
                   }}
                 />
-              </div>
-            </TabContent>
-
-            <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
+              </TabContent>
+              
+              <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
+            </div>
           </div>
         </div>
 
@@ -270,7 +270,7 @@ const TabButton = ({ children, active, ...props }) => {
   )
 }
 
-const TabContent = ({ children, active, className, ...props }) => (
+const TabContent = ({ children, active, className = '', ...props }) => (
   <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
     {children}
   </div>
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 03509e93..bd7ec5c1 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -1,11 +1,22 @@
 import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
 import LoginComponent from '@/lib/auth/components/Login'
 
 export default function Login() {
   return (
     <>
-      <LoginComponent />
-      <SimpleFooter />
+      <DesktopView>
+        <BasicLayout>
+          <LoginComponent />
+        </BasicLayout>
+      </DesktopView>
+
+      <MobileView>
+        <LoginComponent />
+        <SimpleFooter />
+      </MobileView>
     </>
   )
 }
diff --git a/src/pages/register.jsx b/src/pages/register.jsx
index 0ca1e81e..7f5e9f2b 100644
--- a/src/pages/register.jsx
+++ b/src/pages/register.jsx
@@ -1,11 +1,22 @@
 import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
 import RegisterComponent from '@/lib/auth/components/Register'
 
 export default function Register() {
   return (
     <>
-      <RegisterComponent />
-      <SimpleFooter />
+      <DesktopView>
+        <BasicLayout>
+          <RegisterComponent />
+        </BasicLayout>
+      </DesktopView>
+
+      <MobileView>
+        <RegisterComponent />
+        <SimpleFooter />
+      </MobileView>
     </>
   )
 }
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index cc6924a3..83939291 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -11,11 +11,12 @@ export async function getServerSideProps(context) {
   let product = await productApi({ id: getIdFromSlug(slug) })
   if (product?.length == 1) {
     product = product[0]
-    product.description = product.description.replaceAll('<p>', '||p||')
-    product.description = product.description.replaceAll('</p>', '||/p||')
-    product.description = product.description.replace(/(<([^>]+)>)/gi, ' ')
-    product.description = product.description.replaceAll('||p||', '<p>')
-    product.description = product.description.replaceAll('||/p||', '</p>')
+    const regexHtmlTags = /(<([^>]+)>)/gi
+    const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g
+    if (product.description.replace(regexHtmlTags, ' ').trim() == '') {
+      product.description = ''
+    }
+    product.description = product.description.replace(regexHtmlTagsExceptP, ' ')
     product.description = product.description.trim()
   }
   return { props: { product } }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 06a9420c..de40a21d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -442,7 +442,7 @@ button {
 }
 
 .navbar-user-dropdown-wrapper a {
-    @apply text-gray_r-12/80 hover:text-red_r-11 font-medium;
+    @apply text-gray_r-12/80 hover:text-red_r-11 font-medium py-1;
 }
 
 .navbar-user-dropdown {
@@ -453,7 +453,7 @@ button {
         w-full
         flex
         flex-col
-        gap-y-3
+        gap-y-2
         shadow;
 }