google sign in

2 files changed, 89 insertions, 9 deletions

diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index f5aa0018..e3bff492 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -3,15 +3,50 @@ 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 { useSession, signIn, SignOut } from 'next-auth/react'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 
 const LoginDesktop = () => {
   const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
     useLogin()
 
-  const { data } = useSession()
-  console.log('ini google', data)
+  const router = useRouter()
+  const [query, setQuery] = useState(router?.query?.next || '/')
+  const { data: session } = useSession()
+  const [googleLoading, setGoogleloading] = useState(true)
 
+  useEffect(() => {
+    // Simulate loading for 2 seconds
+    const delay = setTimeout(() => {
+      setGoogleloading(false);
+    }, 3000);
+
+    return () => {
+      clearTimeout(delay); // Clear the timeout if the component unmounts
+    };
+  }, []);
+
+
+  const handleGoogle = async () => {
+    await signIn('google', { callbackUrl: '/login' })
+  }
+
+  useEffect(() => {
+    if (session) {
+      router.push(query)
+    }
+  }, [session, query])
+
+  if (googleLoading) {
+    return (
+      <div className='flex justify-center my-6'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
   return (
     <DesktopView>
       <div className='container mx-auto'>
@@ -64,13 +99,26 @@ const LoginDesktop = () => {
                 {!isLoading ? 'Masuk' : 'Loading...'}
               </button>
             </form>
+            <div className='flex  items-center mt-3 mb-3'>
+              <hr className='flex-1' />
+              <p className='text-gray-400'>ATAU</p>
+              <hr className='flex-1' />
+            </div>
+
             <button
-                type='submit'
-                className='border border-gray-500 p-3 rounded-md hover:bg-gray-100  w-full mt-2'
-                onClick={() => signIn('google')}
-              >
-                Masuk dengan Google
-              </button>
+              type='submit'
+              className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+              onClick={() => handleGoogle()}
+            >
+              <Image
+                src='/images/icons8-google.svg'
+                alt='google image'
+                className='h-7 w-7'
+                width={10}
+                height={10}
+              />
+              <p>Masuk dengan Google</p>
+            </button>
 
             <div className='text-gray_r-11 mt-10'>
               Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/LoginMobile.jsx b/src/lib/auth/components/LoginMobile.jsx
index b365330b..c5177625 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -5,10 +5,22 @@ 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 { useState } from 'react'
+
 const LoginMobile = () => {
   const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
     useLogin()
 
+  const router = useRouter()
+  const [query, setQuery] = useState(router?.query?.next || '/')
+  const { data: session } = useSession()
+
+  if (session) {
+    router.push(query)
+  }
+
   return (
     <MobileView>
       <div className='p-6 pt-10 flex flex-col items-center min-h-screen'>
@@ -56,6 +68,26 @@ const LoginMobile = () => {
             {!isLoading ? 'Masuk' : 'Loading...'}
           </button>
         </form>
+        <div className='flex  items-center mt-3 mb-3'>
+          <hr className='flex-1' />
+          <p className='text-gray-400'>ATAU</p>
+          <hr className='flex-1' />
+        </div>
+
+        <button
+          type='submit'
+          className='border border-gray-500 p-2 rounded-md hover:bg-gray-100  w-full mt-2 flex items-center justify-center gap-x-2'
+          onClick={() => signIn('google',  { callbackUrl: '/login' })}
+        >
+          <Image
+            src='/images/icons8-google.svg'
+            alt='google image'
+            className='h-7 w-7'
+            width={10}
+            height={10}
+          />
+          <p>Masuk dengan Google</p>
+        </button>
 
         <div className='text-gray_r-11 mt-4'>
           Belum punya akun Indoteknik?{' '}