handle double verify link

src/pages/authentication/ForgotPassword/AuthCallback/index.js

@@ -33,6 +33,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import axios from 'axios';
 import { useParams,Link } from 'react-router-dom';
 import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -43,6 +44,7 @@ const Index = () => {
     const [showPassword, setShowPassword] = React.useState(false);
     const [showConfirmPassword, setshowConfirmPassword] = React.useState(false);
     const [isLoading, setLoding] = React.useState(true);
+    /** null: loading; true: verified (show password form); false: link invalid/already used (HTTP 200, no username); 'error': network / server error */
     const [verifyState, setVerifyState] = React.useState(null)
     const [enterUseEffect, setEnterUseEffect] = React.useState(false)
     const [username, setUsername] = React.useState("")
@@ -75,14 +77,16 @@ const Index = () => {
                     console.log(response)
                     setUsername(response.data.username)
                     setVerifyState(true)
-                } else {
+                } else if (response.status === 200) {
                     setVerifyState(false)
+                } else {
+                    setVerifyState('error')
                 }
                 setLoding(false)
             }
         ).catch(error => {
             console.log(error)
-            setVerifyState(false)
+            setVerifyState('error')
             setLoding(false)
         });
 
@@ -215,7 +219,7 @@ const Index = () => {
                         boxShadow
                     >
                         <form onSubmit={formik.handleSubmit}>
-                            {verifyState ?
+                            {verifyState === true ?
                                 // SUCCESS page
                                 <Grid container spacing={4} sx={{ minHeight: {xs:"80vh", sm:"50vh", md: "50vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
                                     <Grid container direction="column" alignItems="center">
@@ -387,8 +391,27 @@ const Index = () => {
                                         </ThemeProvider>
                                     </Grid>
                                 </Grid>
+                                : verifyState === false ?
+                                // Link invalid or already used (same as Verify.js informational branch)
+                                <Grid container spacing={4} sx={{ minHeight: {xs:"80vh", sm:"70vh", md: "70vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
+                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
+                                        <InfoOutlinedIcon color="info" sx={{ width: "200px", height: "200px" }} />
+                                    </Grid>
+                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, ml:2}}>
+                                        <Typography display="inline" variant="h4" sx={{textAlign: 'justify'}}>
+                                            <FormattedMessage id="verifyInfo"/>
+                                        </Typography>
+                                    </Grid>
+                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
+                                        <Button variant="outlined" component={Link} to="/login" color="primary">
+                                            <Typography variant="h5">
+                                                <FormattedMessage id="backToLogin"/>
+                                            </Typography>
+                                        </Button>
+                                    </Grid>
+                                </Grid>
                                 :
-                                // ERROR page
+                                // ERROR page (network / server error)
                                 <Grid container spacing={4} sx={{ minHeight: {xs:"80vh", sm:"70vh", md: "70vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />

src/pages/authentication/Verify.js

@@ -36,9 +36,11 @@ export default function Verify() {
             }
         }        ).then(
             (response)=>{
+                // Same idea as forgot-password: only strict true = success. Any other 200 (false, null,
+                // or link already consumed so hash no longer matches) = informational, not failure.
                 if (response.status === 200 && response.data === true) {
                     setVerifyState(true)
-                } else if (response.status === 200 && response.data === false) {
+                } else if (response.status === 200) {
                     setVerifyState(false)
                 } else {
                     setVerifyState('error')