PNSPS-frontend-MaterialUI/src/pages/authentication/Verify.js

// 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>
    )
}