diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 5 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarUserDropdown.jsx | 8 | ||||
| -rw-r--r-- | src/core/components/layouts/BasicLayout.jsx | 93 | ||||
| -rw-r--r-- | src/core/utils/auth.js | 4 | ||||
| -rw-r--r-- | src/lib/auth/components/LoginDesktop.jsx | 66 | ||||
| -rw-r--r-- | src/lib/auth/components/LoginMobile.jsx | 32 | ||||
| -rw-r--r-- | src/pages/api/auth/[...nextauth].js | 13 | ||||
| -rw-r--r-- | src/pages/my/menu.jsx | 4 |
8 files changed, 167 insertions, 58 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index ea4b03ae..c6575831 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -17,9 +17,10 @@ import { getCountCart } from '@/core/utils/cart' import TopBanner from './TopBanner' import whatsappUrl from '@/core/utils/whatsappUrl' import { useRouter } from 'next/router' -import { getAuth } from '@/core/utils/auth' +import { getAuth, setAuth } from '@/core/utils/auth' import { createSlug, getIdFromSlug } from '@/core/utils/slug' import productApi from '@/lib/product/api/productApi' +import { useSession } from 'next-auth/react' const Search = dynamic(() => import('./Search')) @@ -33,7 +34,7 @@ const NavbarDesktop = () => { const [payloadWA, setPayloadWa] = useState(null) const router = useRouter() - + useEffect(() => { const handleCartChange = () => { const cart = async () => { diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index 7848124c..b58be493 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -1,13 +1,15 @@ import { deleteAuth } from '@/core/utils/auth' import Link from '../Link/Link' import { useRouter } from 'next/router' +import { signOut, useSession } from 'next-auth/react' const NavbarUserDropdown = () => { const router = useRouter() - const logout = () => { - deleteAuth() - router.push('/login') + const logout = async () => { + deleteAuth().then(() => { + router.push('/login') + }) } return ( diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 073303fe..e8f6434b 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -6,10 +6,11 @@ import { useEffect, useState } from 'react' import axios from 'axios' import odooApi from '@/core/api/odooApi' import { useRouter } from 'next/router' -import { getURL } from 'next/dist/shared/lib/utils' import productApi from '@/lib/product/api/productApi' -import { getAuth } from '@/core/utils/auth' +import { getAuth, setAuth } from '@/core/utils/auth' import { createSlug, getIdFromSlug } from '@/core/utils/slug' +import { useSession } from 'next-auth/react' +import { setCookie } from 'cookies-next' const Navbar = dynamic(() => import('../elements/Navbar/Navbar')) const AnimationLayout = dynamic(() => import('./AnimationLayout')) @@ -17,10 +18,26 @@ const AnimationLayout = dynamic(() => import('./AnimationLayout')) const BasicLayout = ({ children }) => { const [templateWA, setTemplateWA] = useState(null) const [payloadWA, setPayloadWa] = useState(null) + const [isLoading, setIsloading] = useState(false) const router = useRouter() + const { data: session } = useSession() + const auth = getAuth() + const setting = async () => { + if (!auth && session) { + setCookie('auth', JSON.stringify(session?.odooUser)) + setIsloading(false) + } + } + + useEffect(() => { + setting() + }, [session]) useEffect(() => { + setting() + console.log('ini session', session) + console.log('ini auth', getAuth()) const getIP = async () => { const ip = await odooApi('GET', '/api/ip-address') const data = { @@ -46,42 +63,46 @@ const BasicLayout = ({ children }) => { } getProduct() setTemplateWA('product') - } }, []) - return ( - <> - <Navbar /> - <AnimationLayout> - {children} - <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> - <a - href={whatsappUrl(templateWA, payloadWA)} - className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' - rel='noopener noreferrer' - target='_blank' - > - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='block sm:hidden' - width={36} - height={36} - /> - <Image - src='/images/socials/WHATSAPP.svg' - alt='Whatsapp' - className='hidden sm:block' - width={44} - height={44} - /> - <span className='text-white font-bold ml-1.5'>Whatsapp</span> - </a> - </div> - </AnimationLayout> - <BasicFooter /> - </> - ) + if(isLoading){ + + }else{ + return ( + <> + <Navbar /> + <AnimationLayout> + {children} + <div className='fixed bottom-4 right-4 sm:bottom-14 sm:right-10 z-50'> + <a + href={whatsappUrl(templateWA, payloadWA)} + className='py-2 pl-3 pr-4 rounded-full bg-[#4FB84A] border border-green-300 flex items-center' + rel='noopener noreferrer' + target='_blank' + > + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='block sm:hidden' + width={36} + height={36} + /> + <Image + src='/images/socials/WHATSAPP.svg' + alt='Whatsapp' + className='hidden sm:block' + width={44} + height={44} + /> + <span className='text-white font-bold ml-1.5'>Whatsapp</span> + </a> + </div> + </AnimationLayout> + <BasicFooter /> + </> + ) + } + } export default BasicLayout diff --git a/src/core/utils/auth.js b/src/core/utils/auth.js index cddff2b8..03b20ae2 100644 --- a/src/core/utils/auth.js +++ b/src/core/utils/auth.js @@ -1,4 +1,5 @@ import { deleteCookie, getCookie, setCookie } from 'cookies-next' +import { signOut } from 'next-auth/react' /** * Retrieves authentication data from cookie and returns it as an object. @@ -27,7 +28,8 @@ const setAuth = (user) => { * * @returns {boolean} - Returns `true`. */ -const deleteAuth = () => { +const deleteAuth = async() => { + await signOut() deleteCookie('auth') return true } 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?{' '} diff --git a/src/pages/api/auth/[...nextauth].js b/src/pages/api/auth/[...nextauth].js index 6cc8a101..b11ed097 100644 --- a/src/pages/api/auth/[...nextauth].js +++ b/src/pages/api/auth/[...nextauth].js @@ -1,3 +1,4 @@ +import odooApi from '@/core/api/odooApi' import NextAuth from 'next-auth/next' import GoogleProvider from 'next-auth/providers/google' @@ -10,20 +11,20 @@ export default NextAuth({ ], callbacks: { async jwt({ token, account }) { - // Persist the OAuth access_token to the token right after signin if (account) { token.accessToken = account.access_token } return token }, async session({ session, token, user }) { - // Send properties to the client, like an access_token from a provider. session.accessToken = token.accessToken + const params = { + access_token: session.accessToken + } + const data = await odooApi('POST', '/api/v1/user/validate-sso', params) + session.odooUser = data.user return session } }, - secret:process.env.JWT_SECRET - // pages:{ - // signIn: '/login', - // } + secret: process.env.JWT_SECRET }) diff --git a/src/pages/my/menu.jsx b/src/pages/my/menu.jsx index c8e1e7e9..bd20e2eb 100644 --- a/src/pages/my/menu.jsx +++ b/src/pages/my/menu.jsx @@ -5,11 +5,13 @@ import useAuth from '@/core/hooks/useAuth' import { deleteAuth } from '@/core/utils/auth' import IsAuth from '@/lib/auth/components/IsAuth' import { ChevronRightIcon, UserIcon } from '@heroicons/react/24/solid' +import { signOut, useSession } from 'next-auth/react' import { useRouter } from 'next/router' export default function Menu() { const auth = useAuth() const router = useRouter() + const {data : session} = useSession() const logout = () => { deleteAuth() @@ -62,7 +64,7 @@ export default function Menu() { <LinkItem href='/my/address'>Daftar Alamat</LinkItem> </div> - <div onClick={logout} className='p-4 mt-2'> + <div onClick={() => (logout, signOut)} className='p-4 mt-2'> <button className='w-full btn-red'>Keluar Akun</button> </div> </div> |
