summaryrefslogtreecommitdiff
path: root/src/lib/auth/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/auth/components')
-rw-r--r--src/lib/auth/components/LoginDesktop.jsx57
-rw-r--r--src/lib/auth/components/LoginMobile.jsx57
-rw-r--r--src/lib/auth/components/Menu.jsx50
-rw-r--r--src/lib/auth/components/RegisterDesktop.jsx51
-rw-r--r--src/lib/auth/components/RegisterMobile.jsx50
5 files changed, 254 insertions, 11 deletions
diff --git a/src/lib/auth/components/LoginDesktop.jsx b/src/lib/auth/components/LoginDesktop.jsx
index 8ce2e4e3..838054cd 100644
--- a/src/lib/auth/components/LoginDesktop.jsx
+++ b/src/lib/auth/components/LoginDesktop.jsx
@@ -3,11 +3,46 @@ 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'
const LoginDesktop = () => {
- const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+ 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 handleGoogle = async () => {
+ const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
+ await signIn('google', { callbackUrl: url })
+ }
+ useEffect(() => {
+ if (session) {
+ handleGoogleSubmit(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='container flex justify-center my-4'>
+ <LogoSpinner width={48} height={48} />
+ </div>
+ </BottomPopup>
+ )
+ }
+
return (
<DesktopView>
<div className='container mx-auto'>
@@ -60,6 +95,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-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..2d6501cd 100644
--- a/src/lib/auth/components/LoginMobile.jsx
+++ b/src/lib/auth/components/LoginMobile.jsx
@@ -5,10 +5,45 @@ 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'
+
const LoginMobile = () => {
- const { handleSubmit, handleChangeInput, isLoading, isValid, alert, emailRef, passwordRef } =
+ 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 auth = getAuth()
+
+ const handleGoogle = async () => {
+ const url = query != '/' ? '/login?source=google&next=' + query : '/login?source=google'
+ await signIn('google', { callbackUrl: url })
+ }
+ useEffect(() => {
+ if (session) {
+ handleGoogleSubmit(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='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'>
@@ -56,6 +91,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={() => 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-4'>
Belum punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 386b817c..939a0d5f 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,5 +1,6 @@
import Link from '@/core/components/elements/Link/Link'
import { useRouter } from 'next/router'
+import ImageNext from 'next/image'
const Menu = () => {
const router = useRouter()
@@ -10,30 +11,61 @@ const Menu = () => {
<div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
<div className='mt-4 mb-1 font-medium'>Menu</div>
<LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
- Daftar Quotation
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
+ <p>Daftar Quotation</p>
+ </div>
</LinkItem>
<LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
- Daftar Transaksi
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
+ <p>Daftar Transaksi</p>
+ </div>
+ </LinkItem>
+ <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
+ <p>Daftar Pengiriman</p>
+ </div>
</LinkItem>
<LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
- Invoice & Faktur Pajak
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
+ <p>Invoice & Faktur Pajak</p>
+ </div>
</LinkItem>
<LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
- Wishlist
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
+ <p>Wishlist</p>
+ </div>
</LinkItem>
-
<div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
- <LinkItem href='/'>Layanan Pelanggan</LinkItem>
+ <LinkItem href='/'>
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+ <p>Layanan Pelanggan</p>
+ </div>
+ </LinkItem>
<div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
<LinkItem href='/my/address' active={routeStartWith('/my/address')}>
- Daftar Alamat
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
+ <p>Daftar Alamat</p>
+ </div>
</LinkItem>
<LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
- Profil Saya
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_profile.svg' width={18} height={20} />
+ <p>Profil Saya</p>
+ </div>
</LinkItem>
<button type='button' className='text-gray_r-12/80 p-2 text-left'>
- Keluar Akun
+ <div className='flex gap-x-3 items-center'>
+ <ImageNext src='/images/icon/icon_logout.svg' width={18} height={20} />
+ <p>Keluar Akun</p>
+ </div>
</button>
</div>
)
diff --git a/src/lib/auth/components/RegisterDesktop.jsx b/src/lib/auth/components/RegisterDesktop.jsx
index 93b505ab..6072bfb9 100644
--- a/src/lib/auth/components/RegisterDesktop.jsx
+++ b/src/lib/auth/components/RegisterDesktop.jsx
@@ -5,6 +5,12 @@ import Alert from '@/core/components/elements/Alert/Alert'
import PageContent from '@/lib/content/components/PageContent'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import ReCAPTCHA from 'react-google-recaptcha'
+import Image from 'next/image'
+import { useEffect } from 'react'
+import { setCookie } from 'cookies-next'
+import { signIn, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
const RegisterDesktop = () => {
const {
@@ -21,6 +27,31 @@ const RegisterDesktop = () => {
tnd,
setTnd
} = useRegister()
+
+ const { data: session } = useSession()
+ const router = useRouter()
+
+ const handleGoogle = async () => {
+ await signIn('google', { callbackUrl: '/register?source=google' })
+ }
+
+ useEffect(() => {
+ if(session){
+ setCookie('auth', JSON.stringify(session?.odooUser))
+ router.push('/')
+ }
+ },[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='container flex justify-center my-4'>
+ <LogoSpinner width={48} height={48} />
+ </div>
+ </BottomPopup>
+ )
+ }
return (
<DesktopView>
@@ -121,6 +152,26 @@ const RegisterDesktop = () => {
<PageContent path='/register#tnd'></PageContent>
</BottomPopup>
</div>
+ {/* <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={() => handleGoogle()}
+ >
+ <Image
+ src='/images/icons8-google.svg'
+ alt='google image'
+ className='h-7 w-7'
+ width={10}
+ height={10}
+ />
+ <p>Daftar dengan Google</p>
+ </button> */}
<div className='text-gray_r-11 mt-10'>
Sudah punya akun Indoteknik?{' '}
diff --git a/src/lib/auth/components/RegisterMobile.jsx b/src/lib/auth/components/RegisterMobile.jsx
index da6efaf5..1b0d2adf 100644
--- a/src/lib/auth/components/RegisterMobile.jsx
+++ b/src/lib/auth/components/RegisterMobile.jsx
@@ -7,6 +7,11 @@ import MobileView from '@/core/components/views/MobileView'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import PageContent from '@/lib/content/components/PageContent'
import ReCAPTCHA from 'react-google-recaptcha'
+import { signIn, useSession } from 'next-auth/react'
+import { useRouter } from 'next/router'
+import { setCookie } from 'cookies-next'
+import { useEffect } from 'react'
+import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
const RegisterMobile = () => {
const {
@@ -24,6 +29,30 @@ const RegisterMobile = () => {
setTnd
} = useRegister()
+ const { data: session } = useSession()
+ const router = useRouter()
+
+ const handleGoogle = async () => {
+ await signIn('google', { callbackUrl: '/register?source=google' })
+ }
+
+ useEffect(() => {
+ if(session){
+ setCookie('auth', JSON.stringify(session?.odooUser))
+ router.push('/')
+ }
+ },[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='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'>
@@ -122,6 +151,27 @@ const RegisterMobile = () => {
</BottomPopup>
</div>
+ {/* <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={() => handleGoogle()}
+ >
+ <Image
+ src='/images/icons8-google.svg'
+ alt='google image'
+ className='h-7 w-7'
+ width={10}
+ height={10}
+ />
+ <p>Daftar dengan Google</p>
+ </button> */}
+
<div className='text-gray_r-11 mt-4'>
Sudah punya akun Indoteknik?{' '}
<Link href='/login' className='inline'>