From 6b221cccd58710682c99db7afbc29322da042880 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 31 Oct 2023 10:44:25 +0700
Subject: - Add redirect after activation - Add register form validation

---
 src/lib/auth/components/LoginDesktop.jsx | 82 +++++++++++++++-----------
 src/lib/auth/components/LoginMobile.jsx  | 99 +++++++++++++++++++-------------
 2 files changed, 109 insertions(+), 72 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index d22da6f8..1333db14 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -1,46 +1,54 @@
-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'
-import { useSession, signIn, SignOut } from 'next-auth/react'
-import Image from 'next/image'
-import { useRouter } from 'next/router'
-import { useContext, useEffect, useState } from 'react'
-import { getAuth, setAuth } from '@/core/utils/auth'
-import { setCookie } from 'cookies-next'
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import Spinner from '@/core/components/elements/Spinner/Spinner'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import odooApi from '@/core/api/odooApi'
+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';
+import { useSession, signIn, SignOut } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner';
 
 const LoginDesktop = () => {
-  const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef, handleGoogleSubmit } =
-    useLogin()
+  const {
+    handleSubmit,
+    handleChangeInput,
+    isLoading,
+    isValid,
+    alert,
+    emailRef,
+    passwordRef,
+    handleGoogleSubmit,
+  } = useLogin();
 
-  const router = useRouter()
-  const [query, setQuery] = useState(router?.query?.next || '/')
-  const { data: session } = useSession()
+  const router = useRouter();
+  const [query, setQuery] = useState(router?.query?.next || '/');
+  const { data: session } = useSession();
 
   const handleGoogle = async () => {
-    const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
-    await signIn('google', { callbackUrl: url })
-  }
+    const url =
+      query != '/'
+        ? '/login?source=google&next=' + query
+        : '/login?source=google';
+    await signIn('google', { callbackUrl: url });
+  };
   useEffect(() => {
     if (session) {
-      handleGoogleSubmit(session)
+      handleGoogleSubmit(session);
     }
-  }, [session])
+  }, [session]);
 
   if (router.query.source) {
     return (
       <BottomPopup active={true} close=''>
-        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>
+          Mohon Tunggu
+        </div>
         <div className='container flex justify-center my-4'>
           <LogoSpinner width={48} height={48} />
         </div>
       </BottomPopup>
-    )
+    );
   }
 
   return (
@@ -48,7 +56,9 @@ const LoginDesktop = () => {
       <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>
+            <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>
@@ -59,7 +69,10 @@ const LoginDesktop = () => {
               </Alert>
             )}
 
-            <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+            <form
+              className='w-full mt-6 flex flex-col gap-y-4'
+              onSubmit={handleSubmit}
+            >
               <div>
                 <label htmlFor='email'>Alamat Email</label>
                 <input
@@ -118,7 +131,10 @@ const LoginDesktop = () => {
 
             <div className='text-gray_r-11 mt-10'>
               Belum punya akun Indoteknik?{' '}
-              <Link href='/register' className='inline'>
+              <Link
+                href={`/register?${new URLSearchParams(router.query)}`}
+                className='inline'
+              >
                 Daftar akun baru
               </Link>
             </div>
@@ -129,7 +145,7 @@ const LoginDesktop = () => {
         </div>
       </div>
     </DesktopView>
-  )
-}
+  );
+};
 
-export default LoginDesktop
+export default LoginDesktop;
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
index 6e1831d4..58ae4e6e 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -1,19 +1,17 @@
-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'
+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';
 
-import { useSession, signIn, SignOut } from 'next-auth/react'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { setCookie } from 'cookies-next'
-import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
-import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
-import odooApi from '@/core/api/odooApi'
-import { getAuth } from '@/core/utils/auth'
-import PageContent from '@/lib/content/components/PageContent'
+import { useSession, signIn, SignOut } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner';
+import { getAuth } from '@/core/utils/auth';
+import PageContent from '@/lib/content/components/PageContent';
 
 const LoginMobile = () => {
   const {
@@ -24,43 +22,55 @@ const LoginMobile = () => {
     alert,
     emailRef,
     passwordRef,
-    handleGoogleSubmit
-  } = useLogin()
+    handleGoogleSubmit,
+  } = useLogin();
 
-  const router = useRouter()
-  const [query, setQuery] = useState(router?.query?.next || '/')
-  const { data: session } = useSession()
-  const auth = getAuth()
+  const router = useRouter();
+  const [query, setQuery] = useState(router?.query?.next || '/');
+  const { data: session } = useSession();
+  const auth = getAuth();
 
   const handleGoogle = async () => {
-    const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
-    await signIn('google', { callbackUrl: url })
-  }
+    const url =
+      query != '/'
+        ? '/login?source=google&next=' + query
+        : '/login?source=google';
+    await signIn('google', { callbackUrl: url });
+  };
   useEffect(() => {
     if (session) {
-      handleGoogleSubmit(session)
+      handleGoogleSubmit(session);
     }
-  }, [session])
+  }, [session]);
 
   if (router.query.source) {
     return (
       <BottomPopup active={true} close={true}>
-        <div className='leading-7 text-gray_r-12/80 flex justify-center'>Mohon Tunggu</div>
+        <div className='leading-7 text-gray_r-12/80 flex justify-center'>
+          Mohon Tunggu
+        </div>
         <div className='container flex justify-center my-4'>
           <LogoSpinner width={48} height={48} />
         </div>
       </BottomPopup>
-    )
+    );
   }
 
   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} />
+          <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>
+        <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}>
@@ -68,7 +78,10 @@ const LoginMobile = () => {
           </Alert>
         )}
 
-        <form className='w-full mt-6 flex flex-col gap-y-4' onSubmit={handleSubmit}>
+        <form
+          className='w-full mt-6 flex flex-col gap-y-4'
+          onSubmit={handleSubmit}
+        >
           <div>
             <label htmlFor='email'>Alamat Email</label>
             <input
@@ -96,7 +109,11 @@ const LoginMobile = () => {
               placeholder='••••••••••••'
             />
           </div>
-          <button type='submit' className='btn-yellow w-full mt-2' disabled={!isValid || isLoading}>
+          <button
+            type='submit'
+            className='btn-yellow w-full mt-2'
+            disabled={!isValid || isLoading}
+          >
             {!isLoading ? 'Masuk' : 'Loading...'}
           </button>
         </form>
@@ -123,16 +140,20 @@ const LoginMobile = () => {
 
         <div className='text-gray_r-11 mt-4'>
           Belum punya akun Indoteknik?{' '}
-          <Link href='/register' className='inline'>
+          <Link
+            href={`/register?${new URLSearchParams(router.query)}`}
+            className='inline'
+          >
             Daftar
           </Link>
         </div>
-        {/* <div className='mt-5'>
-          <PageContent path='/login' />
-        </div> */}
+
+        <section className='my-10 md:my-0'>
+          <PageContent path='/register' />
+        </section>
       </div>
     </MobileView>
-  )
-}
+  );
+};
 
-export default LoginMobile
+export default LoginMobile;
-- 
cgit v1.2.3