update

src/pages/authentication/Verify.js

@@ -0,0 +1,74 @@
+// material-ui
+import { Button, Grid } from '@mui/material';
+import { Link } from 'react-router-dom';
+import Typography from '@mui/material/Typography';
+// import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
+// import banner from 'assets/images/bg_ml.jpg';
+import { Stack } from '../../../node_modules/@mui/material/index';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+import { GET_VERIFY_USER_ACCOUNT } from 'utils/ApiPathConst';
+import Loadable from 'components/Loadable';
+import { lazy } from 'react';
+
+const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+
+export default function Verify() {
+
+    const [isLoading, setIsLoading] = useState(true)
+    const [verifyState, setVerifyState] = useState(null)
+
+    const params = useParams()
+    const handleVerify = async () => {
+        const response = await axios.get(GET_VERIFY_USER_ACCOUNT, {
+            params: {
+                email: decodeURIComponent(params.email),
+                emailVerifyHash: decodeURIComponent(params.verifyCode)
+            }
+        })
+        if (response.status === 200 && response.data) {
+            setVerifyState(true)
+        } else {
+            setVerifyState(false)
+        }
+        setIsLoading(false)
+    }
+
+    let enterUseEffect = false
+    useEffect(() => {
+        if (enterUseEffect) handleVerify()
+        enterUseEffect = true
+    }, [])
+
+    return (
+        <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px' }} alignItems="center">
+            <AuthWrapper>
+                {isLoading || verifyState == null ?
+                    <LoadingComponent /> :
+                    <Grid item xs={12}>
+                        {verifyState ?
+                            // SUCCESS page
+                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
+                                <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
+                                <Typography display="inline" variant="h4">帳戶已成功驗證。</Typography>
+                                <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
+                            </Stack>
+                            :
+                            // ERROR page
+                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
+                                {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
+                                <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
+                                <Typography display="inline" variant="h4">驗證失敗，請聯絡相關的系統管理員協助。</Typography>
+                                <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
+                            </Stack>
+                        }
+                    </Grid>
+                }
+            </AuthWrapper>
+        </Stack>
+    )
+}

src/pages/authentication/auth-forms/PasswordAlertDialog.js

@@ -18,42 +18,47 @@ import {
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
 
 const PasswordAlertDialog = (props) => {
+  console.log(props)
   return (
-      <Dialog
+    <Dialog
       open={props.open}
       onClose={props.handleClose}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">
-          <Stack mt={1} mr={4} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-              <CancelOutlinedIcon color="error" sx={{width:"35px",height:"40px"}}/>
-              {props.errorMassage==='ACCOUNT_LOCKED_ERROR'?
-                <Stack direction="column">
-                  <Typography display="inline">
-                    帳戶將被封鎖
-                  </Typography>
-                  <Typography display="inline">
-                    帳戶連續五次登入錯誤,請與系統管理員聯絡
-                  </Typography>
-                </Stack>:
-                <Typography display="inline">
-                  用戶名或密碼錯誤
-                </Typography>
-              }
-          </Stack>
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            {""}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
-            關閉
-          </Button>
-        </DialogActions>
-      </Dialog>
+    >
+      <DialogTitle id="alert-dialog-title">
+        <Stack mt={1} mr={4} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
+          <CancelOutlinedIcon color="error" sx={{ width: "35px", height: "40px" }} />
+          {props.errorMassage === 'ACCOUNT_LOCKED_ERROR' ?
+            <Stack direction="column">
+              <Typography display="inline">
+                帳戶將被封鎖
+              </Typography>
+              <Typography display="inline">
+                帳戶連續五次登入錯誤,請與系統管理員聯絡
+              </Typography>
+            </Stack> :
+            props.errorMassage === 'ACCOUNT_VERIFIED_ERROR' ?
+              <Typography display="inline">
+                帳戶尚未驗證
+              </Typography> :
+              <Typography display="inline">
+                用戶名或密碼錯誤
+              </Typography>
+          }
+        </Stack>
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          {""}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="error" onClick={props.handleClose} autoFocus>
+          關閉
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
 };
 

src/routes/LoginRoutes.js

@@ -12,6 +12,7 @@ const RegisterForm = Loadable(lazy(() => import('pages/authentication/Register')
 const BusRegisterForm = Loadable(lazy(() => import('pages/authentication/BusRegister')));
 const ErrorPage = Loadable(lazy(() => import('pages/extra-pages/ErrorPage')));
 const TestMailPage = Loadable(lazy(() => import('pages/pnspsNotifyTest')));
+const VerifyPage = Loadable(lazy(() => import('pages/authentication/Verify')));
 
 // ==============================|| AUTH ROUTING ||============================== //
 
@@ -42,6 +43,10 @@ const LoginRoutes = {
     {
       path: 'testMailPage',
       element: <TestMailPage/>
+    },
+    {
+      path: 'verify/:verifyCode/:email',
+      element: <VerifyPage/>
     }
   ]
 };

src/utils/ApiPathConst.js

@@ -45,6 +45,7 @@ export const POST_CAPTCHA = apiPath+'/captcha';
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
 export const GET_USERNAME = apiPath+'/user/username';
 export const GET_USER_EMAIL = apiPath+'/user/email';
+export const GET_VERIFY_USER_ACCOUNT = apiPath+'/user/verifyEmail';
 
 //Public
 export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';