From c849f0db0a948cd9b09465a278e1e8fc7b878d3d Mon Sep 17 00:00:00 2001
From: Alex Cheung <alex.cheung@2fi-solutions.com.hk>
Date: Wed, 30 Aug 2023 11:36:49 +0800
Subject: [PATCH] update login flow

---
 src/layout/MainLayout/Header/index.js         |  10 +-
 .../auth-forms/AuthLoginCustom.js             | 348 ++++++++++--------
 .../auth-forms/BusCustomFormWizard.js         |   2 +-
 .../auth-forms/CustomFormWizard.js            |   9 +-
 4 files changed, 211 insertions(+), 158 deletions(-)

diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index c5aced5..0f28f4a 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -280,9 +280,13 @@ function Header(props) {
             spacing={0}
           >
             <Box sx={{flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
-              <Logo/> 
-              <span id="systemTitle" >公共啟事提交及繳費系統</span>
-            </Box>
+                <Stack direction="row" justifyContent="flex-start" alignItems="center">
+                  <Logo/>
+                  <Stack  justifyContent="flex-start" alignItems="center">
+                    <span id="systemTitle">公共啟事提交及繳費系統</span>
+                  </Stack>
+                </Stack>
+              </Box>
             <IconButton
                 color="inherit"
                 aria-label="open drawer"
diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js
index 2dc4e50..72068fa 100644
--- a/src/pages/authentication/auth-forms/AuthLoginCustom.js
+++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js
@@ -1,8 +1,10 @@
 import React, {
-  // useEffect,
+  useEffect,
   useState} from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import {useNavigate} from 'react-router-dom';
+import {useForm,} from 'react-hook-form'
+
 // material-ui
 import {
   Button,
@@ -21,8 +23,8 @@ import {
 } from '@mui/material';
 
 // third party
-import * as Yup from 'yup';
-import { Formik } from 'formik';
+import * as yup from 'yup';
+import { useFormik,FormikProvider } from 'formik';
 
 // project import
 //import FirebaseSocial from './FirebaseSocial';
@@ -48,8 +50,9 @@ const AuthLoginCustom = () => {
   };
 
   // let [posts, setPosts] = useState([]);
-  let [userName, setUserName] = useState(null);
-  let [userPassword, setUserPassword] = useState(null);
+  const [isValid, setisValid] = useState(false);
+  const [isSuccess, setSuccess] = useState();
+  const [isSumitting, setSumitting] = useState();
 
   // useEffect(() => {
   //   // console.log("POST: " + posts.accessToken);
@@ -60,160 +63,205 @@ const AuthLoginCustom = () => {
   };
 
   const tryLogin = () => {
-    useJwt
-      .login({username: userName, password: userPassword})
-      .then((response) => {
-        const userData = {
-          id: response.data.id,
-          fullName: response.data.name,
-          email: response.data.email,
-          role: response.data.role,
-          abilities: response.data.abilities,
-          //avatar: require('src/assets/images/users/avatar-3.png').default,
-        }
-        const data = {...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken}
-        dispatch(handleLogin(data))
-        //const abilities = response.data.abilities
-        //ability.update(abilities)
-        navigate('/dashboard');
-      })
-      .catch((error) => {
-        console.error(error)
-      });
-}
+    if(isValid){
+      setSumitting(true)
+      useJwt
+        .login({username: values.username, password: values.password})
+        .then((response) => {
+          const userData = {
+            id: response.data.id,
+            fullName: response.data.name,
+            email: response.data.email,
+            role: response.data.role,
+            abilities: response.data.abilities,
+            //avatar: require('src/assets/images/users/avatar-3.png').default,
+          }
+          const data = {...userData, accessToken: response.data.accessToken, refreshToken: response.data.refreshToken}
+          setSuccess(true)
+          dispatch(handleLogin(data))
+          navigate('/dashboard');
+          setSumitting(false)
+          console.log(isSuccess)
+        })
+        .catch((error) => {
+          setSuccess(false)
+          console.error(error)
+        });
+    }
+  }
 
+  const formik = useFormik({
+    initialValues:({
+        username: '',
+        password: '',
+        submit: null
+    }),
+    validationSchema:yup.object().shape({
+        username: yup.string().min(8,'用戶名稱最少8位').required('請輸入用戶名稱'),
+        password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
+            .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
+            .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')
+            .matches(/^(?=.*[0-9])/, '請包括最少1個數字')
+            .matches(/^(?=.*[!@#%&])/, '請包括最少1個特殊字符'),
+    }),
+  });
 
+  const checkDataField = (data)=> {
+    if (data.username !==""&&
+        data.password !==""&&
+        handlePassword(data.password)&&
+        handle8Digi(data.username)
+    )
+    {
+        setisValid(true)
+        return isValid
+    }else{
+        setisValid(false)
+        return isValid
+    }
+  };
 
-  const onUserNameChange = (event) => {
-    setUserName(event.target.value);
+  function handlePassword(password) {
+    let new_pass = password;
+    // regular expressions to validate password
+    var lowerCase = /[a-z]/g;
+    var upperCase = /[A-Z]/g;
+    var numbers = /[0-9]/g;
+    if (!new_pass.match(lowerCase)) {
+        return false;
+    } else if (!new_pass.match(upperCase)) {
+        return false;
+    } else if (!new_pass.match(numbers)) {
+        return false;
+    } else if (new_pass.length < 8) {
+        return false;
+    } else {
+        return true;
+    }
   }
 
-  const onPasswordChange = (event) => {
-     setUserPassword(event.target.value);
+  function handle8Digi(value) {
+        if (value.length < 8) {
+            return false;
+        } else {
+            return true;
+        }
   }
 
+  const { values } = formik
+    useEffect(() => {
+      checkDataField(values)
+    }, [values])
+
+  const {handleSubmit} = useForm({})
+
   return (
-      <Formik
-        initialValues={{
-          username: '',
-          password: '',
-          submit: null
-        }}
-        validationSchema={Yup.object().shape({
-          username: Yup.string().max(255).required('請輸入用戶名稱'),
-          password: Yup.string().max(255).required('請輸入密碼'),
-        })}
-        onSubmit={async (values, { setErrors, setStatus, setSubmitting }) => {
-          try {
-            setStatus({ success: false });
-            setSubmitting(false);
-          } catch (err) {
-            setStatus({ success: false });
-            setErrors({ submit: err.message });
-            setSubmitting(false);
-          }
-        }}
-      >
-        {({ errors, handleBlur, handleSubmit, isSubmitting, touched }) => (
-          <form noValidate onSubmit={handleSubmit}>
-            <Grid container spacing={3}>
-              <Grid item xs={12}>
-                <Stack spacing={1}>
-                  <InputLabel htmlFor="email-login">用戶帳號或別名</InputLabel>
-                  <OutlinedInput
-                    id="username"
-                    name="username"
-                    onBlur={handleBlur}
-                    onChange={onUserNameChange}
-                    placeholder=""
-                    fullWidth
-                    error={Boolean(touched.email && errors.email)}
-                  />
-                  {touched.email && errors.email && (
-                    <FormHelperText error id="standard-weight-helper-text-email-login">
-                      {errors.email}
-                    </FormHelperText>
-                  )}
-                </Stack>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack spacing={1}>
-                  <InputLabel htmlFor="password-login">密碼</InputLabel>
-                  <OutlinedInput
-                    fullWidth
-                    // error={Boolean(touched.password && errors.password)}
-                    id="password-login"
-                    type={showPassword ? 'text' : 'password'}
-                    name="password"
-                    // onBlur={handleBlur}
-                    onChange={onPasswordChange}
-                    endAdornment={
-                      <InputAdornment position="end">
-                        <IconButton
-                          aria-label="toggle password visibility"
-                          onClick={handleClickShowPassword}
-                          onMouseDown={handleMouseDownPassword}
-                          edge="end"
-                          size="large"
-                        >
-                          {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
-                        </IconButton>
-                      </InputAdornment>
-                    }
-                    placeholder=""
-                  />
-                  {/* {touched.password && errors.password && (
-                    <FormHelperText error id="standard-weight-helper-text-password-login">
-                      {errors.password}
-                    </FormHelperText>
-                  )} */}
-                </Stack>
-              </Grid>
-
-              <Grid item xs={12}>
-                <AnimateButton>
-                  <Button disableElevation onClick={tryLogin}
-                          disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
-                    登錄
-                  </Button>
-                </AnimateButton>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Link variant="h6" component={RouterLink} to="" color="text.primary">
-                    <Typography align="center">
-                    忘記密碼?
-                    </Typography> 
-                  </Link>
-                </Stack>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Button fullWidth size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>智方便登入</Button>
-                </Stack>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Link href="#">了解更多智方便</Link>
-                </Stack>
-              </Grid>
-              <Grid item xs={12}>
-                <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
-                  <Button fullWidth size="large" variant="outlined" href="/register" >建立/重新啟動帳戶</Button>
-                </Stack>
-              </Grid>
-              {/* <Grid item xs={12}>*/}
-              {/*  <Divider>*/}
-              {/*    <Typography variant="caption"> Login with</Typography>*/}
-              {/*  </Divider>*/}
-              {/*</Grid>*/}
-              {/*<Grid item xs={12}>*/}
-              {/*  <FirebaseSocial />*/}
-              {/*</Grid> */}
+      <FormikProvider value={formik}>
+        <form onSubmit={handleSubmit(tryLogin)}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <Stack spacing={1}>
+                {!isSuccess && isSumitting && (
+                  <FormHelperText error id="standard-weight-helper-text-username-login">
+                    用戶登入名稱或密碼錯誤
+                  </FormHelperText>
+                )}
+                <InputLabel htmlFor="email-login">用戶登入名稱</InputLabel>
+                <OutlinedInput
+                  id="username"
+                  name="username"
+                  onChange={formik.handleChange}
+                  placeholder=""
+                  fullWidth
+                  value={formik.values.username}
+                  error={Boolean(formik.touched.username && formik.errors.username)}
+                  onBlur={formik.handleBlur}
+                />
+                {formik.touched.username && formik.errors.username && (
+                  <FormHelperText error id="standard-weight-helper-text-username-login">
+                    {formik.errors.username}
+                  </FormHelperText>
+                )}
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>
+              <Stack spacing={1}>
+                <InputLabel htmlFor="password-login">密碼</InputLabel>
+                <OutlinedInput
+                  fullWidth
+                  id="password-login"
+                  type={showPassword ? 'text' : 'password'}
+                  name="password"
+                  value={formik.values.password}
+                  onChange={formik.handleChange}
+                  onBlur={formik.handleBlur}
+                  error={Boolean(formik.touched.password && formik.errors.password)}
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        aria-label="toggle password visibility"
+                        onClick={handleClickShowPassword}
+                        onMouseDown={handleMouseDownPassword}
+                        edge="end"
+                        size="large"
+                      >
+                        {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                  placeholder=""
+                />
+                {formik.touched.password && formik.errors.password && (
+                  <FormHelperText error id="standard-weight-helper-text-password-login">
+                    {formik.errors.password}
+                  </FormHelperText>
+                )}
+              </Stack>
+            </Grid>
+
+            <Grid item xs={12}>
+              <AnimateButton>
+                <Button disableElevation onClick={tryLogin}
+                        fullWidth size="large" type="submit" variant="contained" color="primary">
+                  登錄
+                </Button>
+              </AnimateButton>
+            </Grid>
+            <Grid item xs={12}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Link variant="h6" component={RouterLink} to="" color="text.primary">
+                  <Typography align="center">
+                  忘記密碼?
+                  </Typography> 
+                </Link>
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Button fullWidth size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>智方便登入</Button>
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Link href="#">了解更多智方便</Link>
+              </Stack>
+            </Grid>
+            <Grid item xs={12}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Button fullWidth size="large" variant="outlined" href="/register" >建立/重新啟動帳戶</Button>
+              </Stack>
             </Grid>
-          </form>
-        )}
-      </Formik>
+            {/* <Grid item xs={12}>*/}
+            {/*  <Divider>*/}
+            {/*    <Typography variant="caption"> Login with</Typography>*/}
+            {/*  </Divider>*/}
+            {/*</Grid>*/}
+            {/*<Grid item xs={12}>*/}
+            {/*  <FirebaseSocial />*/}
+            {/*</Grid> */}
+          </Grid>
+        </form>
+      </FormikProvider>
   );
 };
 
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index a8446aa..acea3f7 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -290,7 +290,7 @@ const BusCustomFormWizard = (props) => {
             brNo:'',
         }),
         validationSchema:yup.object().shape({
-            username: yup.string().max(255).required('請輸入用戶名稱'),
+            username: yup.string().min(8,"用戶名稱最少8位").required('請輸入用戶名稱'),
             password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
                 .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
                 .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index f46aa69..79d08d8 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -109,7 +109,8 @@ const CustomFormWizard = (props) => {
             handlePassword(data.password)&&
             handleEmail(data.email)&&
             handleIdNo(data.idNo,selectedIdDocType)&&
-            handlePhone(data.phone)
+            handle8Digi(data.phone)&&
+            handle8Digi(data.username)
         )
         {
             setisValid(true)
@@ -234,8 +235,8 @@ const CustomFormWizard = (props) => {
         }
     }
 
-    function handlePhone(phone) {
-        if (phone.length < 8) {
+    function handle8Digi(value) {
+        if (value.length < 8) {
             return false;
         } else {
             return true;
@@ -305,7 +306,7 @@ const CustomFormWizard = (props) => {
             idDocType:selectedIdDocType
         }),
         validationSchema:yup.object().shape({
-            username: yup.string().max(255).required('請輸入用戶名稱'),
+            username: yup.string().min(8,"用戶名稱最少8位").required('請輸入用戶名稱'),
             password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
                 .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母')
                 .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母')