From 833488811b4164d7fbdce9bd70e171f06d62bf8d Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Mar 2023 14:33:21 +0700 Subject: login and register --- src/lib/auth/components/Login.jsx | 124 ++------------------- src/lib/auth/components/LoginDesktop.jsx | 77 +++++++++++++ src/lib/auth/components/LoginMobile.jsx | 68 ++++++++++++ src/lib/auth/components/Register.jsx | 150 ++------------------------ src/lib/auth/components/RegisterDesktop.jsx | 114 ++++++++++++++++++++ src/lib/auth/components/RegisterMobile.jsx | 109 +++++++++++++++++++ src/lib/auth/hooks/useLogin.js | 74 +++++++++++++ src/lib/auth/hooks/useRegister.js | 80 ++++++++++++++ src/lib/content/components/PageContent.jsx | 14 +-- src/lib/product/components/Product.jsx | 2 +- src/lib/product/components/ProductDesktop.jsx | 16 +-- 11 files changed, 547 insertions(+), 281 deletions(-) create mode 100644 src/lib/auth/components/LoginDesktop.jsx create mode 100644 src/lib/auth/components/LoginMobile.jsx create mode 100644 src/lib/auth/components/RegisterDesktop.jsx create mode 100644 src/lib/auth/components/RegisterMobile.jsx create mode 100644 src/lib/auth/hooks/useLogin.js create mode 100644 src/lib/auth/hooks/useRegister.js (limited to 'src/lib') 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, - - aktivasi sekarang - - - ), - type: 'info' - }) - break - } - } - return ( -
- - Logo Indoteknik - -

Mulai Belanja Sekarang

-

Masuk ke akun kamu untuk belanja

- - {alert && ( - - {alert.children} - - )} - -
-
- - setEmail(e.target.value)} - placeholder='contoh@email.com' - /> -
-
- - setPassword(e.target.value)} - placeholder='••••••••••••' - /> -
- -
- -
- Belum punya akun Indoteknik?{' '} - - Daftar - -
-
+ <> + + + ) } 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 ( + +
+
+
+

Selamat Datang di Indoteknik

+

+ Masuk ke akun kamu untuk mulai transaksi! +

+ + {alert && ( + + {alert.children} + + )} + +
+
+ + +
+
+ + +
+ +
+ +
+ Belum punya akun Indoteknik?{' '} + + Daftar akun baru + +
+
+
+ +
+
+
+ + ) +} + +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 ( + +
+ + Logo Indoteknik + +

Mulai Belanja Sekarang

+

Masuk ke akun kamu untuk belanja

+ + {alert && ( + + {alert.children} + + )} + +
+
+ + +
+
+ + +
+ +
+ +
+ Belum punya akun Indoteknik?{' '} + + Daftar + +
+
+ + ) +} + +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 ( -
- - Logo Indoteknik - - -

Daftar Akun Indoteknik

-

- Buat akun sekarang lebih mudah dan terverifikasi -

- - {alert && ( - - {alert.children} - - )} - -
-
- - setCompanyName(e.target.value.toUpperCase())} - placeholder='cth: INDOTEKNIK DOTCOM GEMILANG' - autoCapitalize='true' - /> -
- -
- - setFullname(e.target.value)} - placeholder='John Doe' - /> -
-
- - setEmail(e.target.value)} - placeholder='contoh@email.com' - /> -
-
- - setPassword(e.target.value)} - placeholder='••••••••••••' - /> -
- - -
- -
- Sudah punya akun Indoteknik?{' '} - - Masuk - -
-
+ <> + + + ) } 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 ( + +
+
+
+

Daftar Akun Indoteknik

+

+ Buat akun sekarang lebih mudah dan terverifikasi +

+ + {alert && ( + + {alert.children} + + )} + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ +
+ +
+ Sudah punya akun Indoteknik?{' '} + + Masuk + +
+
+
+ +
+
+
+ + ) +} + +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 ( + +
+ + Logo Indoteknik + + +

Daftar Akun Indoteknik

+

+ Buat akun sekarang lebih mudah dan terverifikasi +

+ + {alert && ( + + {alert.children} + + )} + +
+
+ + +
+ +
+ + +
+
+ + +
+
+ + +
+ + +
+ +
+ Sudah punya akun Indoteknik?{' '} + + Masuk + +
+
+ + ) +} + +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, + + aktivasi sekarang + + + ), + 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 ( -
- ) + return
} 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 }) => { ))}
-
- -
+
+
+ { : 'Belum ada deskripsi produk.' }} /> -
- - - Belum ada informasi. + + + Belum ada informasi. +
@@ -270,7 +270,7 @@ const TabButton = ({ children, active, ...props }) => { ) } -const TabContent = ({ children, active, className, ...props }) => ( +const TabContent = ({ children, active, className = '', ...props }) => (
{children}
-- cgit v1.2.3