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 --- .../elements/Navbar/NavbarUserDropdown.jsx | 4 + 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 +-- src/pages/login.jsx | 15 ++- src/pages/register.jsx | 15 ++- src/pages/shop/product/[slug].jsx | 11 +- src/styles/globals.css | 4 +- 16 files changed, 585 insertions(+), 292 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 diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx index fb95c593..b735c13f 100644 --- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx +++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx @@ -1,3 +1,4 @@ +import { deleteAuth } from '@/core/utils/auth' import Link from '../Link/Link' const NavbarUserDropdown = () => { @@ -8,6 +9,9 @@ const NavbarUserDropdown = () => { Invoice & Faktur Pajak Wishlist Pengaturan Akun + + Keluar Akun + ) 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}
diff --git a/src/pages/login.jsx b/src/pages/login.jsx index 03509e93..bd7ec5c1 100644 --- a/src/pages/login.jsx +++ b/src/pages/login.jsx @@ -1,11 +1,22 @@ import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import LoginComponent from '@/lib/auth/components/Login' export default function Login() { return ( <> - - + + + + + + + + + + ) } diff --git a/src/pages/register.jsx b/src/pages/register.jsx index 0ca1e81e..7f5e9f2b 100644 --- a/src/pages/register.jsx +++ b/src/pages/register.jsx @@ -1,11 +1,22 @@ import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter' +import BasicLayout from '@/core/components/layouts/BasicLayout' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' import RegisterComponent from '@/lib/auth/components/Register' export default function Register() { return ( <> - - + + + + + + + + + + ) } diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index cc6924a3..83939291 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -11,11 +11,12 @@ export async function getServerSideProps(context) { let product = await productApi({ id: getIdFromSlug(slug) }) if (product?.length == 1) { product = product[0] - product.description = product.description.replaceAll('

', '||p||') - product.description = product.description.replaceAll('

', '||/p||') - product.description = product.description.replace(/(<([^>]+)>)/gi, ' ') - product.description = product.description.replaceAll('||p||', '

') - product.description = product.description.replaceAll('||/p||', '

') + const regexHtmlTags = /(<([^>]+)>)/gi + const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g + if (product.description.replace(regexHtmlTags, ' ').trim() == '') { + product.description = '' + } + product.description = product.description.replace(regexHtmlTagsExceptP, ' ') product.description = product.description.trim() } return { props: { product } } diff --git a/src/styles/globals.css b/src/styles/globals.css index 06a9420c..de40a21d 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -442,7 +442,7 @@ button { } .navbar-user-dropdown-wrapper a { - @apply text-gray_r-12/80 hover:text-red_r-11 font-medium; + @apply text-gray_r-12/80 hover:text-red_r-11 font-medium py-1; } .navbar-user-dropdown { @@ -453,7 +453,7 @@ button { w-full flex flex-col - gap-y-3 + gap-y-2 shadow; } -- cgit v1.2.3