handle double verify email

src/pages/authentication/Verify.js

@@ -16,11 +16,13 @@ const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingCompo
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import {FormattedMessage} from "react-intl";
 
 export default function Verify() {
 
     const [isLoading, setIsLoading] = useState(true)
+    /** null: loading; true: verified; false: API returned false (informational); 'error': network or unexpected */
     const [verifyState, setVerifyState] = useState(null)
     const [enterUseEffect, setEnterUseEffect] = useState(false)
 
@@ -32,18 +34,20 @@ export default function Verify() {
                 email: decodeURIComponent(params.email),
                 emailVerifyHash: decodeURIComponent(params.verifyCode)
             }
-        }).then(
+        }        ).then(
             (response)=>{
-                if (response.status === 200 && response.data) {
+                if (response.status === 200 && response.data === true) {
                     setVerifyState(true)
-                } else {
+                } else if (response.status === 200 && response.data === false) {
                     setVerifyState(false)
+                } else {
+                    setVerifyState('error')
                 }
                 setIsLoading(false)
             }
         ).catch(error => {
             console.log(error)
-            setVerifyState(false)
+            setVerifyState('error')
             setIsLoading(false)
         });
         
@@ -70,7 +74,7 @@ export default function Verify() {
                         </Grid>
                     </Grid> :
                     <Grid item xs={12}>
-                        {verifyState ?
+                        {verifyState === true ?
                             // SUCCESS page
                             <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                 <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
@@ -83,10 +87,22 @@ export default function Verify() {
                                     </Typography>
                                 </Button>
                             </Stack>
+                            : verifyState === false ?
+                            // Informational (verification not completed via this link)
+                            <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
+                                <InfoOutlinedIcon color="info" sx={{ width: "200px", height: "200px" }} />
+                                <Typography display="inline" variant="h4" sx={{ textAlign: 'justify' }}>
+                                    <FormattedMessage id="verifyInfo"/>
+                                </Typography>
+                                <Button variant="outlined" component={Link} to="/login" color="primary">
+                                    <Typography variant="h5">
+                                        <FormattedMessage id="backToLogin"/>
+                                    </Typography>
+                                </Button>
+                            </Stack>
                             :
-                            // ERROR page
+                            // ERROR page (network / server error)
                             <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" sx={{textAlign: 'justify'}}> 
                                     <FormattedMessage id="verifyFail"/>

src/translations/en.json

@@ -304,6 +304,7 @@
   "verifySuccess": "Account verified successfully",
   "passwordExpired": "Your password has expired, please change your password immediately to continue using the system.",
   "verifyFail": "Sorry, verification failed.  Please contact us during office hours for assistance. The contact details can be found in \"About Us\" page (https://pnsps.gld.gov.hk/aboutUs).",
+  "verifyInfo": "Verification already completed or not required. Please contact us during office hours for assistance if needed. The contact details can be found in \"About Us\" page (https://pnsps.gld.gov.hk/aboutUs).",
   "validVerify": "Please enter valid verification",
   "requiredValid": "Please enter valid ",
   "require": "Please enter {fieldname}",

src/translations/zh-CN.json

@@ -291,6 +291,7 @@
   "verifySuccess": "帐户已成功验证。",
   "passwordExpired": "你的密码已过期，请立即更改密码以继续使用系统。",
   "verifyFail": "十分抱歉，验证失败，请在办公时间与我们联络，联络方式可在『关于我们』页面找到(https://pnsps.gld.gov.hk/aboutUs)。",
+  "verifyInfo": "验证已完成或无需验证。如需要，请在办公时间与我们联络，联络方式可在『关于我们』页面找到(https://pnsps.gld.gov.hk/aboutUs)。",
   "dialingCode": "国际区号",
   "phoneCountryCode": "电话区号",
   "faxCountryCode": "传真区号",

src/translations/zh-HK.json

@@ -338,6 +338,7 @@
   "verifySuccess": "帳戶已成功驗證。",
   "passwordExpired": "你的密碼已過期，請立即變更密碼以繼續使用系統。",
   "verifyFail": "十分抱歉，驗證失敗，請在辦公時間與我們聯絡，聯絡方式可在『關於我們』頁面找到(https://pnsps.gld.gov.hk/aboutUs)。",
+  "verifyInfo": "驗證已完成或無需驗證。如需要，請在辦公時間與我們聯絡，聯絡方式可在『關於我們』頁面找到(https://pnsps.gld.gov.hk/aboutUs)。",
   "validVerify": "請輸入有效驗證",
   "requiredValid": "請輸入有效的",
   "require": "請輸入{fieldname}",