From aa32d6fe27d3a5b46849d5610364b159d744d34d Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 29 Sep 2021 17:56:41 +0700 Subject: [PATCH] :sparkles: feat: login :%s --- pages/test.tsx | 4 +- .../InputFiledInForm/InputFiledInForm.tsx | 12 +- .../common/MessageCommon/MessageCommon.tsx | 1 + .../MessageItem/MessageItem.module.scss | 3 +- .../MessageCommon/MessageItem/MessageItem.tsx | 2 +- .../components/FormAuthen.module.scss | 2 +- .../components/FormLogin/FormLogin.tsx | 113 ++++++++++++------ .../components/FormRegister/FormRegister.tsx | 8 +- src/components/hooks/useLogin.tsx | 15 ++- src/utils/errrorMapping.ts | 14 +++ 10 files changed, 114 insertions(+), 60 deletions(-) create mode 100644 src/utils/errrorMapping.ts diff --git a/pages/test.tsx b/pages/test.tsx index a140d5aee..b60fe63c7 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -2,10 +2,10 @@ import { Layout } from 'src/components/common' import { useMessage } from 'src/components/contexts' export default function Test() { - const { showMessageSuccess } = useMessage() + const { showMessageError } = useMessage() const handleClick = () => { - showMessageSuccess("Create account successfully") + showMessageError("Create account successfully") } return ( diff --git a/src/components/common/InputFiledInForm/InputFiledInForm.tsx b/src/components/common/InputFiledInForm/InputFiledInForm.tsx index 807aea561..22389b78d 100644 --- a/src/components/common/InputFiledInForm/InputFiledInForm.tsx +++ b/src/components/common/InputFiledInForm/InputFiledInForm.tsx @@ -63,10 +63,14 @@ const InputFiledInForm = forwardRef(({ return <> }, [icon, error, isShowIconSuccess]) - const handleKeyDown = (e: any) => { - if (e.key === KEY.ENTER && onEnter) { - const value = inputElementRef.current?.value || '' - onEnter(value) + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === KEY.ENTER) { + e.stopPropagation() + e.preventDefault() + if (onEnter) { + const value = inputElementRef.current?.value || '' + onEnter(value) + } } } diff --git a/src/components/common/MessageCommon/MessageCommon.tsx b/src/components/common/MessageCommon/MessageCommon.tsx index f53469c50..f15f8f443 100644 --- a/src/components/common/MessageCommon/MessageCommon.tsx +++ b/src/components/common/MessageCommon/MessageCommon.tsx @@ -14,6 +14,7 @@ const MessageCommon = memo(({ messages, onRemove }: Props) => { diff --git a/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss b/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss index f2583810d..bc0ee8e46 100644 --- a/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss +++ b/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss @@ -4,12 +4,11 @@ @apply shadow-sm flex justify-center items-center cursor-default; width: fit-content; padding: 0.8rem 2.4rem; - margin-bottom: .8rem; + margin: 0 auto .8rem; border-radius: 0.8rem; transition: all .5s; animation: showMessage .5s; width: max-content; - margin: 0 1.6rem; &.hide { display: none; diff --git a/src/components/common/MessageCommon/MessageItem/MessageItem.tsx b/src/components/common/MessageCommon/MessageItem/MessageItem.tsx index 89f9b6600..6ed95c1a3 100644 --- a/src/components/common/MessageCommon/MessageItem/MessageItem.tsx +++ b/src/components/common/MessageCommon/MessageItem/MessageItem.tsx @@ -40,7 +40,7 @@ const MessageItem = memo( useEffect(() => { if (isHide && !isMouseOver && onRemove) { - onRemove(id || 0) + // onRemove(id || 0) } }, [isHide, isMouseOver, onRemove, id]) diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss index 2ec8bf91f..eb28ba509 100644 --- a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss +++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss @@ -1,7 +1,7 @@ @import '../../../../styles/utilities'; .formAuthen { - @apply bg-white w-full u-form; + @apply bg-white w-full; .inner { @screen md { width: 60rem; diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 9dd5296f8..5ec394541 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -1,9 +1,13 @@ +import { Form, Formik } from 'formik' import Link from 'next/link' import React, { useEffect, useRef, useState } from 'react' -import { ButtonCommon, Inputcommon, InputPassword } from 'src/components/common' -import { ROUTE } from 'src/utils/constanst.utils' -import { CustomInputCommon } from 'src/utils/type.utils' +import { ButtonCommon, Inputcommon, InputFiledInForm, InputPassword, InputPasswordFiledInForm } from 'src/components/common' +import { useMessage } from 'src/components/contexts' import useLogin from 'src/components/hooks/useLogin' +import { ROUTE } from 'src/utils/constanst.utils' +import { LANGUAGE } from 'src/utils/language.utils' +import { CustomInputCommon } from 'src/utils/type.utils' +import * as Yup from 'yup' import s from '../FormAuthen.module.scss' import SocialAuthen from '../SocialAuthen/SocialAuthen' import styles from './FormLogin.module.scss' @@ -13,15 +17,17 @@ interface Props { onSwitch: () => void } +const DisplayingErrorMessagesSchema = Yup.object().shape({ + email: Yup.string().email('Your email was wrong').required('Required'), + password: Yup.string() + .max(30, 'Password is too long') + .required('Required'), +}) + const FormLogin = ({ onSwitch, isHide }: Props) => { const emailRef = useRef(null) - const { loading, login, error } = useLogin() - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - - const onLogin = () => { - login({ username: email, password }) - } + const { loading, login } = useLogin() + const { showMessageSuccess, showMessageError } = useMessage() useEffect(() => { if (!isHide) { @@ -29,42 +35,71 @@ const FormLogin = ({ onSwitch, isHide }: Props) => { } }, [isHide]) - useEffect(() => { - if (error) { - alert(error.message) + const onLogin = (values: { email: string; password: string }) => { + login({ username: values.email, password: values.password }, onLoginCallBack) + } + + const onLoginCallBack = (isSuccess: boolean, message?: string) => { + if (isSuccess) { + showMessageSuccess("Login successfully!", 4000) + } else { + showMessageError(message || LANGUAGE.MESSAGE.ERROR) } - }, [error]) + } return (
- setEmail(val.toString())} - type="email" - ref={emailRef} - /> + + {({ errors, touched, isValid, submitForm }) => ( +
+
+ + +
+
+ + + Forgot Password? + + + + Sign in + +
+
+ )} +
+
- {/* */} - setPassword(val.toString())} - /> -
-
- - - Forgot Password? - - - - Sign in - -
Don't have an account? diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 9dd1f01ff..7f63ef4e0 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -33,7 +33,7 @@ const DisplayingErrorMessagesSchema = Yup.object().shape({ const FormRegister = ({ onSwitch, isHide }: Props) => { const emailRef = useRef(null) - const { loading, signup, error } = useSignup() + const { loading, signup } = useSignup() const { showMessageSuccess, showMessageError } = useMessage() useEffect(() => { @@ -54,12 +54,6 @@ const FormRegister = ({ onSwitch, isHide }: Props) => { } } - useEffect(() => { - if (error) { - alert(error.message) - } - }, [error]) - return (
{ const [error, setError] = useState(null) const { mutate } = useActiveCustomer() - const login = (options: LoginInput) => { + const login = (options: LoginInput, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { setError(null) setLoading(true) rawFetcher({ @@ -40,15 +43,19 @@ const useLogin = () => { }) .then(({ data, headers }) => { if (data.login.__typename !== 'CurrentUser') { - throw CommonError.create(data.login.message, data.login.errorCode) + throw CommonError.create(errorMapping(data.login.message), data.login.errorCode) } const authToken = headers.get('vendure-auth-token') if (authToken != null) { localStorage.setItem(LOCAL_STORAGE_KEY.TOKEN, authToken) - return mutate() + mutate() } + fCallBack(true) + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) }) - .catch(setError) .finally(() => setLoading(false)) } diff --git a/src/utils/errrorMapping.ts b/src/utils/errrorMapping.ts new file mode 100644 index 000000000..f216e1d57 --- /dev/null +++ b/src/utils/errrorMapping.ts @@ -0,0 +1,14 @@ +import { LANGUAGE } from "./language.utils"; + +export function errorMapping(message?: string) { + if (!message) { + return LANGUAGE.MESSAGE.ERROR + } + + switch (message) { + case 'The provided credentials are invalid': + return 'The email address or password is incorrect!' + default: + return LANGUAGE.MESSAGE.ERROR + } +} \ No newline at end of file