add change password page

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/src"
+        }
+    ]
+}

src/components/AutoLogoutProvider.js

@@ -5,7 +5,8 @@ import { handleLogoutFunction } from 'auth/index';
 import { useDispatch } from "react-redux";
 import { 
     isUserLoggedIn, 
-    isGLDLoggedIn, 
+    isGLDLoggedIn,
+    isPasswordExpiry
 } from "utils/Utils";
 
 const TimerContext = createContext();
@@ -81,6 +82,9 @@ const AutoLogoutProvider = ({ children }) => {
         // console.log(logoutInterval)
         const interval = setInterval(async () => {
             const currentTime = Date.now();
+            if (isPasswordExpiry()){
+                navigate('/user/changePassword');
+            }
             // getRemainingTime();
             if(state !== "Active" && lastActiveTab){
                 const timeElapsed = currentTime - lastRequestTime;

src/layout/MainLayout/Header/index.js

@@ -366,6 +366,13 @@ function Header(props) {
                     </Typography>
                   </Link>
                 </li>
+                <li>
+                  <Link className="manageUser" to={'/user/changePassword'}>
+                    <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                      <FormattedMessage id="userChangePassword" />
+                    </Typography>
+                  </Link>
+                </li>
                 <li>
                   <Link className="manageUser" to={'/org'}>
                     <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
@@ -394,6 +401,13 @@ function Header(props) {
                       </Typography>
                     </Link>
                   </li>
+                  <li>
+                    <Link className="manageUser" to={'/user/changePassword'}>
+                      <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                        <FormattedMessage id="userChangePassword" />
+                      </Typography>
+                    </Link>
+                  </li>
                 </ul>
               </>
               :
@@ -412,6 +426,13 @@ function Header(props) {
                       </Typography>
                     </Link>
                   </li>
+                  <li>
+                    <Link className="manageUser" to={'/user/changePassword'}>
+                      <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
+                        <FormattedMessage id="userChangePassword" />
+                      </Typography>
+                    </Link>
+                  </li>
                 </ul>
               </>
           }

src/pages/User/ChangePasswordPage/index.js

@@ -4,11 +4,6 @@ import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
 import { useNavigate } from "react-router-dom";
-import { useDispatch } from "react-redux";
-import { handleLogoutFunction,
-    //  handleLogin
-     } from 'auth/index';
-import useJwt from "auth/jwt/useJwt";
 
 import {
     Grid,
@@ -34,96 +29,41 @@ import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
 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 LocaleContext from "components/I18nProvider";
 
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import { useDispatch } from "react-redux";
+import { handleLogoutFunction} from 'auth/index';
+import { isPasswordExpiry } from "utils/Utils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
     const dispatch = useDispatch()
     const navigate = useNavigate()
     const [showPassword, setShowPassword] = React.useState(false);
+    const [showNewPassword, setShowNewPassword] = React.useState(false);
     const [showConfirmPassword, setshowConfirmPassword] = React.useState(false);
     const [isLoading, setLoding] = React.useState(true);
-    const [verifyState, setVerifyState] = React.useState(null)
-    const [enterUseEffect, setEnterUseEffect] = React.useState(false)
-    const [username, setUsername] = React.useState("")
-    // const { setLocale } = React.useContext(LocaleContext);
-    
-    const params = useParams()
+    const [isChanged, setIsChanged] = React.useState(false);
+
     const intl = useIntl();
     
     React.useEffect(() => {
-        console.log(params);
-        setEnterUseEffect(true)
+        setLoding(false)
     }, []);
 
-    React.useEffect(() => {
-        // console.log("if (enterUseEffect) handleVerify()");
-        if (enterUseEffect){
-            handleVerify()
-        } 
-    }, [enterUseEffect])
-
-    const handleVerify = async () => {
-        console.log(params);
-        await axios.get(UrlUtils.GET_FORGOT_PASSWORD_VERIFY_USER_ACCOUNT, {
-            params: {
-                email: decodeURIComponent(params.email),
-                emailVerifyHash: decodeURIComponent(params.verifyCode)
-            }
-        }).then(
-            (response)=>{
-                if (response.status === 200 && response.data) {
-                    console.log(response)
-                    setUsername(response.data.username)
-                    setVerifyState(true)
-                } else {
-                    setVerifyState(false)
-                }
-                setLoding(false)
-            }
-        ).catch(error => {
-            console.log(error)
-            setVerifyState(false)
-            setLoding(false)
-        });
-
-        
-    }
-
-    const goLogin = async (values) =>{
-        dispatch(handleLogoutFunction());
+    const goLogin = (values) =>{
+        console.log(values)
         HttpUtils.post({
-            url: UrlUtils.POST_FORGOT_PASSWORD_NEW_PASSWORD,
+            url: UrlUtils.PATCH_CHANGE_PASSWORD,
             params:{
-                username: username,
-                newPassword: values.password
-            },
-            onSuccess: () => {
-                useJwt
-                .login({ username: username, password: values.password })
-                .then((
-                    // response
-                    ) => {
-                // console.log(response)
-                    navigate('/forgot/password/success');
-                    location.reload()
-                    // setSumitting(false)
-                    })
-                    .catch((error) => {
-                    console.error(error)
-                    });
+                password: values.password,
+                newPassword: values.newPassword
             },
-            onFail: (response)=>{
-                console.log("Fail");
-                console.log(response);
-                // window.location.assign("/iamsmart/loginFail");
+            onSuccess: function (){
+                setIsChanged(true);
             },
-            onError:(error)=>{
-                console.log(error);
+            onError:function (error) {
+                console.log(error.response.data);
                 // window.location.assign("/iamsmart/loginFail");
             }
         });
@@ -143,6 +83,10 @@ const Index = () => {
         setShowPassword(!showPassword);
     };
 
+    const handleClickShowNewPassword = () => {
+        setShowNewPassword(!showNewPassword);
+    };
+
     const handleClickShowConfirmPassword = () => {
         setshowConfirmPassword(!showConfirmPassword);
     };
@@ -151,6 +95,10 @@ const Index = () => {
         event.preventDefault();
     };
 
+    const handleMouseDownNewPassword = (event) => {
+        event.preventDefault();
+    };
+
     const changePassword = (
         // value
         ) => {
@@ -158,11 +106,17 @@ const Index = () => {
         // setLevel(strengthColorChi(temp));
     };
 
+    const logout = () => {
+        dispatch(handleLogoutFunction());
+        navigate('/login');
+    };
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: {
             // username: '',
             password: '',
+            newPassword: '',
             confirmPassword: '',
             // emailVerifyHash: '',
         },
@@ -176,9 +130,16 @@ const Index = () => {
             .matches(/^(?=.*[A-Z])/, { message: intl.formatMessage({id: 'atLeastOneCapLetter'})})
             .matches(/^(?=.*[0-9])/, { message: intl.formatMessage({id: 'atLeast1Number'})})
             .matches(/^(?=.*[!@#%&])/, { message: intl.formatMessage({id: 'atLeast1SpecialChar'})}),
+            newPassword: yup.string().min(8, intl.formatMessage({id: 'atLeast8CharPassword'}))
+            .required(intl.formatMessage({id: 'requirePassword'}))
+            .matches(/^\S*$/, { message: (intl.formatMessage({id: 'noSpacePassword'}))})
+            .matches(/^(?=.*[a-z])/, { message: intl.formatMessage({id: 'atLeastOneSmallLetter'})})
+            .matches(/^(?=.*[A-Z])/, { message: intl.formatMessage({id: 'atLeastOneCapLetter'})})
+            .matches(/^(?=.*[0-9])/, { message: intl.formatMessage({id: 'atLeast1Number'})})
+            .matches(/^(?=.*[!@#%&])/, { message: intl.formatMessage({id: 'atLeast1SpecialChar'})}),
             confirmPassword: yup.string().min(8, intl.formatMessage({id: 'atLeast8CharPassword'}))
             .required(intl.formatMessage({id: 'pleaseConfirmPassword'}))
-            .oneOf([yup.ref('password'), null], intl.formatMessage({id: 'samePassword'})),
+            .oneOf([yup.ref('newPassword'), null], intl.formatMessage({id: 'samePassword'})),
         }),
         onSubmit: values => {
             // console.log(values)
@@ -187,7 +148,7 @@ const Index = () => {
     });
 
     return (
-        isLoading || verifyState == null ?
+        isLoading ?
             <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                 <Grid item>
                     <LoadingComponent />
@@ -199,23 +160,11 @@ const Index = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
-                                <FormattedMessage id="forgotUserPassword"/>
+                                <FormattedMessage id="userChangePassword"/>
                             </Typography>
                         </Stack>
                     </div>
                 </Grid>
-                {/* <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
-                    <Button
-                        aria-label={intl.formatMessage({id: 'back'})}
-                        title={intl.formatMessage({id: 'back'})}
-                        sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
-                    >
-                        <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
-                    </Button>
-                </Grid> */}
-                {/* <Grid item xs={12}>
-                        <Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
-                    </Grid> */}
                 <Grid item xs={12} md={12} width={{ sx:"90%", sm:"90%",md: "60%", xs: "90%" }}>
                     <MainCard
                         sx={{
@@ -230,16 +179,20 @@ const Index = () => {
                         border={false}
                         boxShadow
                     >
-                        <form onSubmit={formik.handleSubmit}>
-                            {verifyState ?
-                                // SUCCESS page
+                    {
+                        !isChanged ?
+                            <form onSubmit={formik.handleSubmit}>
                                 <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">
-                                        <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, }}>
-                                            <Typography display="inline" variant="h4">
-                                                <FormattedMessage id="verifySuccess"/>
-                                            </Typography>
+                                    {isPasswordExpiry()?    
+                                        <Grid container direction="column" alignItems="center">
+                                                <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, }}>
+                                                    <Typography display="inline" variant="h4">
+                                                        <FormattedMessage id="passwordExpired"/>
+                                                    </Typography>
+                                                </Grid>
+                                                
                                         </Grid>
+                                        : 
                                         <Grid item xs={12} md={12} lg={12} sx={{ mb: 1,}}>
                                             <InputLabel htmlFor="email-login-title3">
                                                 <Typography variant="h5" >
@@ -247,23 +200,27 @@ const Index = () => {
                                                 </Typography>
                                             </InputLabel>
                                         </Grid>
-                                    </Grid>
-                                    {/* <Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
+                                    }
+                                    <Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
                                         <Grid container direction="row" justifyContent="flex-start">
                                             <Grid item xs={12} md={12} lg={12}>
                                                 <TextField
                                                     fullWidth
-                                                    onChange={formik.handleChange}
-                                                    id="emailVerifyHash"
-                                                    name="emailVerifyHash"
-                                                    label={intl.formatMessage({id: 'securityCode'}) + ":"}
-                                                    placeholder={intl.formatMessage({id: 'securityCode'})}
-                                                    defaultValue={formik.values.emailVerifyHash}
-                                                    value={formik.values.emailVerifyHash}
-                                                    error={Boolean(formik.touched.emailVerifyHash && formik.errors.emailVerifyHash)}
+                                                    autoFocus
+                                                    onChange={(e) => {
+                                                        formik.handleChange(e);
+                                                        changePassword(e.target.value);
+                                                    }}
+                                                    id="password"
+                                                    type={showPassword ? 'text' : 'password'}
+                                                    name="password"
+                                                    label={intl.formatMessage({id: 'oldPassword'}) + ":"}
+                                                    placeholder={intl.formatMessage({id: 'oldPassword'})}
+                                                    // defaultValue={formik.values.password.trim()}
+                                                    value={formik.values.password.trim()}
+                                                    error={Boolean(formik.touched.password && formik.errors.password)}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
-                                                        maxLength: 50,
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                             e.preventDefault();
@@ -273,29 +230,29 @@ const Index = () => {
                                                     InputLabelProps={{
                                                         shrink: true
                                                     }}
+                                                    InputProps={{
+                                                        endAdornment:(
+                                                            <InputAdornment position="end">
+                                                                <IconButton
+                                                                    aria-label="toggle password visibility"
+                                                                    onClick={handleClickShowPassword}
+                                                                    onMouseDown={handleMouseDownPassword}
+                                                                    edge="end"
+                                                                    size="large"
+                                                                >
+                                                                    {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                                </IconButton>
+                                                            </InputAdornment>
+                                                        )
+                                                    }}
                                                 />
                                             </Grid>
-                                            {formik.touched.emailVerifyHash && formik.errors.emailVerifyHash && (
-                                                <FormHelperText error id="standard-weight-helper-text-username-login">
-                                                {formik.errors.emailVerifyHash}
+                                            {formik.touched.password && formik.errors.password && (
+                                                <FormHelperText error id="helper-text-password-signup">
+                                                    {formik.errors.password}
                                                 </FormHelperText>
                                             )}
                                         </Grid>
-                                    </Grid> */}
-                                    <Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
-                                        <Grid container direction="row" justifyContent="flex-start">
-                                            <Grid item xs={12} md={12} lg={12}>
-                                                <TextField
-                                                    fullWidth
-                                                    id="username"
-                                                    name="username"
-                                                    label={intl.formatMessage({id: 'userLoginName'}) + ":"}
-                                                    placeholder={intl.formatMessage({id: 'userLoginName'})}
-                                                    // defaultValue={username}
-                                                    value={username}
-                                                    disabled={true}                                                />
-                                            </Grid>
-                                        </Grid>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
                                         <Grid container direction="row" justifyContent="flex-start">
@@ -307,14 +264,14 @@ const Index = () => {
                                                         formik.handleChange(e);
                                                         changePassword(e.target.value);
                                                     }}
-                                                    id="password"
-                                                    type={showPassword ? 'text' : 'password'}
-                                                    name="password"
+                                                    id="newPassword"
+                                                    type={showNewPassword ? 'text' : 'password'}
+                                                    name="newPassword"
                                                     label={intl.formatMessage({id: 'newPassword'}) + ":"}
                                                     placeholder={intl.formatMessage({id: 'newPassword'})}
                                                     // defaultValue={formik.values.password.trim()}
-                                                    value={formik.values.password.trim()}
-                                                    error={Boolean(formik.touched.password && formik.errors.password)}
+                                                    value={formik.values.newPassword.trim()}
+                                                    error={Boolean(formik.touched.newPassword && formik.errors.newPassword)}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
                                                         onKeyDown: (e) => {
@@ -330,34 +287,22 @@ const Index = () => {
                                                         endAdornment:(
                                                             <InputAdornment position="end">
                                                                 <IconButton
-                                                                    aria-label="toggle password visibility"
-                                                                    onClick={handleClickShowPassword}
-                                                                    onMouseDown={handleMouseDownPassword}
+                                                                    aria-label="toggle new password visibility"
+                                                                    onClick={handleClickShowNewPassword}
+                                                                    onMouseDown={handleMouseDownNewPassword}
                                                                     edge="end"
                                                                     size="large"
                                                                 >
-                                                                    {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
+                                                                    {showNewPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                                 </IconButton>
                                                             </InputAdornment>
                                                         )
                                                     }}
                                                 />
                                             </Grid>
-                                            {/* <FormControl fullWidth sx={{ mt: 2 }}>
-                                                <Grid container spacing={2} alignItems="center">
-                                                    <Grid item>
-                                                        <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
-                                                    </Grid>
-                                                    <Grid item>
-                                                        <Typography variant="subtitle1">
-                                                            <FormattedMessage id={level ? level?.label : "pwWeak" }/>
-                                                        </Typography>
-                                                    </Grid>
-                                                </Grid>
-                                            </FormControl> */}
-                                            {formik.touched.password && formik.errors.password && (
-                                                <FormHelperText error id="helper-text-password-signup">
-                                                    {formik.errors.password}
+                                            {formik.touched.newPassword && formik.errors.newPassword && (
+                                                <FormHelperText error id="helper-text-newPassword-signup">
+                                                    {formik.errors.newPassword}
                                                 </FormHelperText>
                                             )}
                                         </Grid>
@@ -374,8 +319,8 @@ const Index = () => {
                                                     id="confirmPassword"
                                                     type={showConfirmPassword ? 'text' : 'password'}
                                                     name="confirmPassword"
-                                                    label={intl.formatMessage({id: 'confirmPassword'}) + ":"}
-                                                    placeholder={intl.formatMessage({id: 'confirmPassword'})}
+                                                    label={intl.formatMessage({id: 'confirmOldPassword'}) + ":"}
+                                                    placeholder={intl.formatMessage({id: 'confirmOldPassword'})}
                                                     // defaultValue={formik.values.confirmPassword.trim()}
                                                     value={formik.values.confirmPassword.trim()}
                                                     error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
@@ -428,28 +373,28 @@ const Index = () => {
                                         </ThemeProvider>
                                     </Grid>
                                 </Grid>
-                                :
-                                // ERROR page
-                                <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,}}>
-                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
-                                        <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                    </Grid>  
-                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
-                                        <Typography display="inline" variant="h4">
-                                            <FormattedMessage id="verifyFail"/>
+                            </form>
+                        :
+                            <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, }}>
+                                        {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
+                                    <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
+                                    <Typography display="inline" variant="h4">
+                                        <FormattedMessage id="resetPasswordSuccess"/>
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
+                                    <Button color="success" variant="outlined" onClick={()=>logout()}>
+                                        <Typography variant="h5">
+                                            <FormattedMessage id="backToLogin"/>
                                         </Typography>
-                                    </Grid>
-                                    <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5,}}>
-                                        <Button color="error" variant="outlined" component={Link} to="/login">
-                                            <Typography variant="h5">
-                                                <FormattedMessage id="backToLogin"/>
-                                            </Typography>
-                                        </Button>
-                                    </Grid>
+                                    </Button>
                                 </Grid>
-                            }
-                        </form>
+                            </Grid>
+                    }
+                        
                     </MainCard>
                 </Grid>
             </Grid>

src/routes/GLDUserRoutes.js

@@ -5,7 +5,7 @@ import Loadable from 'components/Loadable';
 // import MainLayout from 'layout/MainLayout';
 const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 import {isGranted, isGrantedAny} from "auth/utils";
-import { isPasswordExpiry } from "utils/Utils";
+// import { isPasswordExpiry } from "utils/Utils";
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD')));
 const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD')));
@@ -40,163 +40,159 @@ const GLDUserRoutes = {
   path: '/',
   element: <MainLayout />,
   children: [
-    (
-      isPasswordExpiry()?
-      {
-        path: '/',
-        element: <ChangePasswordPage />
-      }:
-      {
-        path: '/',
-        element: <DashboardDefault />
-      }
-    ),
     {
-        path: '/',
-        children: [
-          {
-            path: '/dashboard',
-            element: <DashboardDefault />
-          },
-          {
-            path: '/application/:id',
-            element: <ApplicationDetail/>
-          },
-          {
-            path: '/application/search',
-            element: <ApplicationSearch/>
-          },
-          
-          isGranted(["MAINTAIN_PAYMENT"])?
-          {
-            path: '/application/markAsPaid/search',
-            element: <ApplicationMarkAsPaidSearch/>
-          }:{},
-  
-          isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{
-            path: '/proof/search',
-            element: <ProofSearch/>
-          }:{},
-  
-          isGranted("MAINTAIN_PROOF")?
-          {
-            path: '/proof/create/:id',
-            element: <ProofCreate_FromApp/>
-          }:{},
-  
-          isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{
-            path: '/proof/reply/:id',
-            element: <ProofReply_GLD/>
-          }:{},
-  
-          isGranted(["MAINTAIN_PAYMENT"])?
-          {
-            path: '/paymentPage/search',
-            element: <PaymentSearch_GLD/>
-          }:{},
-          
-          isGranted(["MAINTAIN_PAYMENT"])?
-          {
-            path: '/paymentPage/details/:id',
-            element: <PaymentDetails_GLD/>
-          }:{},
-  
-          isGranted(["MAINTAIN_DEMANDNOTE"])?
-          {
-            path: '/paymentPage/createDemandNote',
-            element: <DemandNote_Create/>
-          }:{},
-  
-          isGranted(["MAINTAIN_DEMANDNOTE"])?
-          {
-            path: '/paymentPage/exportGDN',
-            element: <DemandNote_Export/>
-          }:{},
-  
-          isGrantedAny(["VIEW_DEMANDNOTE","MAINTAIN_DEMANDNOTE"])?
-          {
-            path: '/paymentPage/demandNote',
-            element: <DemandNote_Search/>
-          }:{},
-  
-          isGrantedAny(["VIEW_DEMANDNOTE","MAINTAIN_DEMANDNOTE"])?
-          {
-            path: '/paymentPage/demandNote/details/:id',
-            element: <DemandNote_Details/>
-          }:{},
-  
-          isGranted("MAINTAIN_RECON") ?
-          {
-            path: '/paymentPage/reconReport',
-            element: <ReconReportPage/>
-          }:{},
-  
-          isGranted("MAINTAIN_RECON") ?
-          {
-            path: '/gfmis/search',
-            element: <GFMIS_Search/>
-          }:{},
-  
-  
-          {
-            path: '/user/profile',
-            element: <UserMaintainPage />
-          },
-  
-          isGranted("MAINTAIN_SETTING") ?
-          {
-            path: '/setting/sys',
-            element: <SystemSetting />
-          }:{},
-  
-          isGranted("MAINTAIN_ANNOUNCEMENT") ?
-          {
-            path: '/setting/announcement',
-            element: <AnnouncementSearch />
-          }:{},
-  
-          isGranted("MAINTAIN_ANNOUNCEMENT")?
-          {
-            path: '/setting/announcement/details/:id',
-            element: <AnnouncementDetails />
-          }:{},
-  
-          isGranted("MAINTAIN_EMAIL")?
-          {
-            path: '/setting/emailTemplate',
-            element: <EmailTemplatePage/>
-          }:{},
-  
-          isGranted("MAINTAIN_EMAIL")?
-          {
-              path: '/setting/emailTemplate/:id',
-              element: <EmailTemplateDetailPage/>
-          }:{},
-  
-          isGranted("MAINTAIN_GAZETTE_ISSUE")?
-          {
-              path: '/setting/holiday',
-              element: <HolidayPage/>
-          }:{},
-  
-          isGranted("MAINTAIN_GAZETTE_ISSUE")?
-          {
-              path: '/setting/gazetteissuepage',
-              element: <GazetteIssuePage/>
-          }:{},
-  
-          isGranted("MAINTAIN_DR")?
-          {
-            path: '/setting/drImport',
-            element: <DrImport />
-          }:{},
-          {
-            path: '/setting/auditLog',
-            element: <AuditLogPage />
-          },
-        ]
-      },
-    
+      path: '/',
+      element: <DashboardDefault />
+    },
+    {
+      path: '/',
+      children: [
+        {
+          path: '/dashboard',
+          element: <DashboardDefault />
+        },
+        {
+          path: '/application/:id',
+          element: <ApplicationDetail/>
+        },
+        {
+          path: '/application/search',
+          element: <ApplicationSearch/>
+        },
+        
+        isGranted(["MAINTAIN_PAYMENT"])?
+        {
+          path: '/application/markAsPaid/search',
+          element: <ApplicationMarkAsPaidSearch/>
+        }:{},
+
+        isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{
+          path: '/proof/search',
+          element: <ProofSearch/>
+        }:{},
+
+        isGranted("MAINTAIN_PROOF")?
+        {
+          path: '/proof/create/:id',
+          element: <ProofCreate_FromApp/>
+        }:{},
+
+        isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{
+          path: '/proof/reply/:id',
+          element: <ProofReply_GLD/>
+        }:{},
+
+        isGranted(["MAINTAIN_PAYMENT"])?
+        {
+          path: '/paymentPage/search',
+          element: <PaymentSearch_GLD/>
+        }:{},
+        
+        isGranted(["MAINTAIN_PAYMENT"])?
+        {
+          path: '/paymentPage/details/:id',
+          element: <PaymentDetails_GLD/>
+        }:{},
+
+        isGranted(["MAINTAIN_DEMANDNOTE"])?
+        {
+          path: '/paymentPage/createDemandNote',
+          element: <DemandNote_Create/>
+        }:{},
+
+        isGranted(["MAINTAIN_DEMANDNOTE"])?
+        {
+          path: '/paymentPage/exportGDN',
+          element: <DemandNote_Export/>
+        }:{},
+
+        isGrantedAny(["VIEW_DEMANDNOTE","MAINTAIN_DEMANDNOTE"])?
+        {
+          path: '/paymentPage/demandNote',
+          element: <DemandNote_Search/>
+        }:{},
+
+        isGrantedAny(["VIEW_DEMANDNOTE","MAINTAIN_DEMANDNOTE"])?
+        {
+          path: '/paymentPage/demandNote/details/:id',
+          element: <DemandNote_Details/>
+        }:{},
+
+        isGranted("MAINTAIN_RECON") ?
+        {
+          path: '/paymentPage/reconReport',
+          element: <ReconReportPage/>
+        }:{},
+
+        isGranted("MAINTAIN_RECON") ?
+        {
+          path: '/gfmis/search',
+          element: <GFMIS_Search/>
+        }:{},
+
+
+        {
+          path: '/user/profile',
+          element: <UserMaintainPage />
+        },
+
+        isGranted("MAINTAIN_SETTING") ?
+        {
+          path: '/setting/sys',
+          element: <SystemSetting />
+        }:{},
+
+        isGranted("MAINTAIN_ANNOUNCEMENT") ?
+        {
+          path: '/setting/announcement',
+          element: <AnnouncementSearch />
+        }:{},
+
+        isGranted("MAINTAIN_ANNOUNCEMENT")?
+        {
+          path: '/setting/announcement/details/:id',
+          element: <AnnouncementDetails />
+        }:{},
+
+        isGranted("MAINTAIN_EMAIL")?
+        {
+          path: '/setting/emailTemplate',
+          element: <EmailTemplatePage/>
+        }:{},
+
+        isGranted("MAINTAIN_EMAIL")?
+        {
+            path: '/setting/emailTemplate/:id',
+            element: <EmailTemplateDetailPage/>
+        }:{},
+
+        isGranted("MAINTAIN_GAZETTE_ISSUE")?
+        {
+            path: '/setting/holiday',
+            element: <HolidayPage/>
+        }:{},
+
+        isGranted("MAINTAIN_GAZETTE_ISSUE")?
+        {
+            path: '/setting/gazetteissuepage',
+            element: <GazetteIssuePage/>
+        }:{},
+
+        isGranted("MAINTAIN_DR")?
+        {
+          path: '/setting/drImport',
+          element: <DrImport />
+        }:{},
+        {
+          path: '/setting/auditLog',
+          element: <AuditLogPage />
+        },
+        {
+          path: '/user/changePassword',
+          element: <ChangePasswordPage />
+        }
+      ]
+    }
   ]
 };
 

src/routes/PublicUserRoutes.js

@@ -4,7 +4,7 @@ import { lazy } from 'react';
 import Loadable from 'components/Loadable';
 // import MainLayout from 'layout/MainLayout';
 const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
-import { isPasswordExpiry } from "utils/Utils";
+// import { isPasswordExpiry } from "utils/Utils";
 
 // render - dashboard
 const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/Public')));
@@ -33,24 +33,16 @@ const AnnouncementSearch = Loadable(lazy(() => import('pages/Announcement/Search
 const IAmSmart_SuccessCallback = Loadable(lazy(() => import('pages/iAmSmart/SuccessCallback')));
 const ChangePasswordPage = Loadable(lazy(() => import('pages/User/ChangePasswordPage')));
 
-
 // ==============================|| MAIN ROUTING ||============================== //
 
 const PublicDashboard = {
   path: '/',
   element: <MainLayout />,
   children: [
-    (
-      isPasswordExpiry()?
-      {
-        path: '/',
-        element: <ChangePasswordPage />
-      }:
-      {
-        path: '/',
-        element: <DashboardDefault />
-      }
-    ),
+    {
+      path: '/',
+      element: <DashboardDefault />
+    },
     {
       path: '/',
       children: [

src/translations/en.json

@@ -161,6 +161,7 @@
   "loginSuccessMessage2":"You are our existing user and successfully linked your existing account.<br/>From now on, you can log in through \"iAm Smart\".",
   "loginSuccessMessage3":"Continue to use e-Service",
 
+  "oldPassword": "Old Password",
   "newPassword": "New Password",
   "setNewPassword": "Please enter new password",
   "forgotUserPassword": "Forgot Password",
@@ -237,6 +238,7 @@
   "reset": "Reset",
   "requireString": "Items marked with * must be filled in",
   "confirmPassword": "Confirm password",
+  "confirmOldPassword": "Confirm old password",
   "pleaseConfirmPassword": "Please confirm password",
   "pleaseEnterOrgOrCompName": "Please enter the English/Chinese name of the organisation/company",
   "sameAsBusinessRegistrationCert": "Same as Business Registration Certificate",
@@ -258,6 +260,7 @@
   "rejectTerms": "I do not accept",
   "verify": "Verify",
   "verifySuccess": "Account verified successfully",
+  "passwordExpired": "Your password has expired, please change your password immediately to continue using the system.",
   "verifyFail": "Verification failed, please contact the relevant system administrator for assistance.",
   "validVerify": "Please enter valid verification",
   "requiredValid": "Please enter valid ",
@@ -497,6 +500,7 @@
 
   "userDetail": "User Details",
   "userProfile": "My Profile",
+  "userChangePassword": "Change Password",
   "primaryUser": "Primary User",
   "resetAndBack": "Reset & Back",
   "edit": "Edit",

src/translations/zh-CN.json

@@ -188,6 +188,7 @@
   "loginSuccessMessage2":"你是我们的现有用户，已成功连结现有帐户。<br/>以后可以透过「智方便」登入。",
   "loginSuccessMessage3":"继续使用e-Service",
 
+  "oldPassword": "旧密码",
   "newPassword": "新密码",
   "setNewPassword": "请输入新密码",
   "forgotUserPassword": "忘记密码",
@@ -241,6 +242,7 @@
   "requireDialingCode": "请输入国际区号",
   "requireVerify": "请输入验证",
   "verifySuccess": "帐户已成功验证。",
+  "passwordExpired": "您的密码已过期，请立即更改密码以继续使用系统。",
   "verifyFail": "验证失败，请联络相关的系统管理员协助。",
   "dialingCode": "国际区号",
   "userFaxNumber": "传真号码",
@@ -261,6 +263,7 @@
   "reset": "重置",
   "requireString": "注有*的项目必须输入资料",
   "confirmPassword": "确认密码",
+  "confirmOldPassword": "确认旧密码",
   "pleaseConfirmPassword": "请确认密码",
   "pleaseEnterOrgOrCompName": "请输入机构/公司英文名称或中文名称",
   "sameAsBusinessRegistrationCert": "与商业登记证相同",
@@ -488,6 +491,7 @@
 
   "userDetail": "用户详细信息",
   "userProfile": "我的个人资料",
+  "userChangePassword": "更改密码",
   "primaryUser": "主要用户",
   "resetAndBack": "重置并返回",
   "edit": "编辑",

src/translations/zh-HK.json

@@ -188,6 +188,7 @@
   "loginSuccessMessage2":"你是我們的現有用戶，已成功連結現有帳戶。<br/>以後可以透過「智方便」登入。",
   "loginSuccessMessage3":"繼續使用e-Service",
 
+  "oldPassword": "舊密碼",
   "newPassword": "新密碼",
   "setNewPassword": "請輸入新密碼",
   "forgotUserPassword": "忘記密碼",
@@ -262,6 +263,7 @@
   "reset": "重置",
   "requireString": "註有*的項目必須輸入資料",
   "confirmPassword": "確認密碼",
+  "confirmOldPassword": "確認舊密碼",
   "pleaseConfirmPassword": "請確認密碼",
   "pleaseEnterOrgOrCompName": "請輸入機構/公司英文名稱或中文名稱",
   "sameAsBusinessRegistrationCert": "與商業登記證相同",
@@ -283,6 +285,7 @@
   "rejectTerms": "我不接受",
   "verify": "驗證",
   "verifySuccess": "帳戶已成功驗證。",
+  "passwordExpired": "您的密碼已過期，請立即變更密碼以繼續使用系統。",
   "verifyFail": "驗證失敗，請聯絡相關的系統管理員協助。",
   "validVerify": "請輸入有效驗證",
   "requiredValid": "請輸入有效的",
@@ -493,6 +496,7 @@
 
   "userDetail": "使用者詳細資料",
   "userProfile": "我的個人資料",
+  "userChangePassword": "更改密碼",
   "primaryUser": "主要使用者",
   "resetAndBack": "重置並返回",
   "edit": "編輯",

src/utils/ApiPathConst.js

@@ -95,6 +95,8 @@ export const POST_FORGOT_PASSWORD_NEW_PASSWORD = apiPath+'/user/forgotPasswordNe
 export const POST_FORGOT_PASSWORD_EMAIL = apiPath+'/user/sendForgotPasswordEmail';
 export const POST_FORGOT_USERNAME_EMAIL = apiPath+'/user/sendForgotUserameEmail';
 
+export const PATCH_CHANGE_PASSWORD = apiPath+'/user/change-password';
+
 
 //Public
 export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg';

src/utils/Utils.js

@@ -160,10 +160,10 @@ export const isPasswordExpiry = () =>{
         var expirationDate = DateUtils.convertToDate(date);
     
         if (expirationDate < currentDate) {
-            console.log(true)
+            // console.log(true)
             return true; // The date has expired
         } else {
-            console.log(false)
+            // console.log(false)
             return false; // The date is still valid
         }
     }else{