various changes

src/components/RegisterStepIcon.js

@@ -0,0 +1,55 @@
+import { Box, useTheme } from '@mui/material';
+
+/** Darker green for completed register steps (matches PAY button hover). */
+export const REGISTER_STEP_COMPLETED_COLOR = '#488F52';
+
+export const registerStepStyle = {
+  width: { lg: '40%', md: '70%', xs: '100%' },
+  boxShadow: 1,
+  backgroundColor: '#FFFFFF',
+  padding: 2,
+  '& .MuiStepLabel-label': { color: '#424242' },
+  '& .MuiStepConnector-line': { borderColor: '#9E9E9E' },
+  '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': {
+    borderColor: REGISTER_STEP_COMPLETED_COLOR,
+  },
+  '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': {
+    borderColor: 'warning.main',
+  },
+};
+
+const RegisterStepIcon = ({ active, completed, className, icon }) => {
+  const theme = useTheme();
+  let circleColor = '#757575';
+  let textColor = '#FFFFFF';
+
+  if (completed) {
+    circleColor = REGISTER_STEP_COMPLETED_COLOR;
+  } else if (active) {
+    circleColor = theme.palette.warning.main;
+    textColor = '#1A1A1A';
+  }
+
+  return (
+    <Box
+      className={className}
+      sx={{
+        width: '2rem',
+        height: '2rem',
+        borderRadius: '50%',
+        backgroundColor: circleColor,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: textColor,
+        fontSize: '1rem',
+        fontWeight: 600,
+        lineHeight: 1,
+      }}
+    >
+      {icon}
+    </Box>
+  );
+};
+
+export default RegisterStepIcon;

src/pages/authentication/BusRegister.js

@@ -12,7 +12,8 @@ import {
   Button, StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -21,7 +22,6 @@ import { notifyActionError } from 'utils/CommonFunction';
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 import axios from "axios";
-import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
 import {FormattedMessage, useIntl} from "react-intl";
 import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // import CustomFormWizard from './auth-forms/BusCustomFormWizard';
@@ -38,6 +38,7 @@ const BusRegister = () => {
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const intl = useIntl();
   const steps = [
     intl.formatMessage({id: 'personalInformation'}),
@@ -45,30 +46,6 @@ const BusRegister = () => {
     intl.formatMessage({id: 'finishSubmission'})
   ];
 
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
-    }
-  };
-
   const totalSteps = () => {
     return steps.length;
   };
@@ -148,51 +125,30 @@ const BusRegister = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                // onClick={handleStep(index)}
-              >
-                <StepLabel
-                  sx={{
-                    flexDirection: "column",
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? "step" : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: "column",
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                }}
               >
-                <StepLabel
-                  sx={{
-                    flexDirection: "column",
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            )}
+                <Typography variant="step1">{label}</Typography>
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -216,6 +172,7 @@ const BusRegister = () => {
               setUsername={setUsername}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>

src/pages/authentication/IAmSmartRegister.js

@@ -13,10 +13,11 @@ import {
   Stack,
   Typography,
   Button,
+  StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -24,32 +25,10 @@ import { lazy } from 'react';
 import { notifyActionError } from 'utils/CommonFunction';
 import axios from "axios";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/IAmSmartFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 // ================================|| REGISTER ||================================ //
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
-    }
-  };
 
 const Register = () => {
   const [activeStep, setActiveStep] = useState(0);
@@ -61,6 +40,7 @@ const Register = () => {
   const [checkCode, setCheckCode] = useState("")
   const [idNo, setIdNo] = useState("");
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const intl = useIntl();
   const steps = [
     intl.formatMessage({id: 'personalInformation'}),
@@ -152,37 +132,30 @@ const Register = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                // onClick={handleStep(index)}
-              >
-                <Typography variant="step1">{label}</Typography>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? "step" : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? "step" : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: "column",
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                }}
               >
                 <Typography variant="step1">{label}</Typography>
-              </StepButton>
-            )}
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -207,6 +180,7 @@ const Register = () => {
               setIdNo={setIdNo}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
@@ -239,33 +213,33 @@ const Register = () => {
             {activeStep === totalSteps() - 2 ?
               (
                 <Button
-                  variant="outlined"
+                  variant="contained"
                   disabled={isNextBusy}
                   onClick={handleNext}
                   aria-busy={isNextBusy}
-                  sx={{ mr: 1, minWidth: 120 }}
+                  sx={{ mr: 1, minWidth: 120, ...PRIMARY_CONTAINED_BUTTON_SX }}
                 >
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5">
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
                 </Button>
               ) : (activeStep === totalSteps() - 1 ?
                 (
-                  <Button variant="outlined" color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button variant="contained" color="inherit"
+                    disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
                 ) :
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                  <Button disabled={!updateValid || isNextBusy} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
-                    <Typography variant="h5">
+                  <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
+                    <Typography variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>

src/pages/authentication/Register.js

@@ -15,8 +15,8 @@ import {
   Button, StepLabel,
   CircularProgress,
 } from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import { POST_USERNAME, POST_VERIFY_CAPTCHA  } from "utils/ApiPathConst";
+import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';
 
 // project import
 import Loadable from 'components/Loadable';
@@ -39,6 +39,7 @@ const Register = () => {
   const [base64Url, setBase64Url] = useState("")
   const [checkCode, setCheckCode] = useState("")
   const [isNextBusy, setIsNextBusy] = useState(false);
+  const [registrationComplete, setRegistrationComplete] = useState(false);
   const nextBusyRef = useRef(false);
   const intl = useIntl();
   // Localized document title/meta for register flow
@@ -49,30 +50,6 @@ const Register = () => {
     intl.formatMessage({id: 'finishSubmission'})
   ];
 
-  const stepStyle = {
-    width: { lg: "40%", md: "70%", xs: "100%" },
-    boxShadow: 1,
-    backgroundColor: "#FFFFFF",
-    padding: 2,
-
-    /* Inactive (default) */
-    "& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" },          // darker grey
-    "& .MuiStepLabel-label": { color: "#424242" },                           // label darker
-    "& .MuiStepConnector-line": { borderColor: "#9E9E9E" },                  // connector darker
-
-    /* Active */
-    "& .Mui-active": {
-      "&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
-      "& .MuiStepConnector-line": { borderColor: "warning.main" }
-    },
-
-    /* Completed */
-    "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
-    }
-  };
-
   const totalSteps = () => {
     return steps.length;
   };
@@ -154,51 +131,30 @@ const Register = () => {
   const handleReset = () => {
     setActiveStep(0);
     setCompleted({});
+    setRegistrationComplete(false);
   };
 
+  const isStepCompleted = (index) => index < activeStep || registrationComplete;
+
   return (
     // <AuthWrapper>
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
+      <Stepper activeStep={activeStep} sx={registerStepStyle}>
         {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]} readOnly={true}>
-            {index < 2 ? (
-              <StepButton
-                aria-current={activeStep === index ? 'step' : undefined}
-                // onClick={handleStep(index)}
+          <Step key={label} completed={isStepCompleted(index)} readOnly={true}>
+            <StepButton
+              aria-current={activeStep === index ? 'step' : undefined}
+            >
+              <StepLabel
+                StepIconComponent={RegisterStepIcon}
+                sx={{
+                  flexDirection: 'column',
+                  "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
+                }}
               >
-                <StepLabel
-                  sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            ) : (
-              <StepButton
-                aria-current={activeStep === index ? 'step' : undefined}
-                sx={
-                  activeStep === 2
-                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                    : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
-                      : { color: "rgba(0,0,0,0.6)" }
-                }
-                icon={<VisibilityIcon />}
-                // onClick={handleStep(index)}
-              >
-                <StepLabel
-                  sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
-                  }}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepLabel>
-              </StepButton>
-            )}
+                <Typography variant="step1">{label}</Typography>
+              </StepLabel>
+            </StepButton>
           </Step>
         ))}
       </Stepper>
@@ -222,6 +178,7 @@ const Register = () => {
               setUsername={setUsername}
               setBase64Url={setBase64Url}
               setCheckCode={setCheckCode}
+              onRegistrationComplete={() => setRegistrationComplete(true)}
             />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>

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

@@ -500,6 +500,7 @@ const BusCustomFormWizard = (props) => {
                 ) => {
                     // console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {

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

@@ -592,6 +592,7 @@ const CustomFormWizard = (props) => {
                 ) => {
                     // console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {

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

@@ -40,7 +40,7 @@ import LoopIcon from '@mui/icons-material/Loop';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -431,6 +431,7 @@ const CustomFormWizard = (props) => {
                 .then((response) => {
                     console.log(response)
                     setCheckUpload(true)
+                    props.onRegistrationComplete?.();
                     setLoding(false);
                 })
                 .catch(error => {
@@ -584,8 +585,11 @@ const CustomFormWizard = (props) => {
                                                         {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                     </Typography>
                                                     <IconButton
+                                                        role="button"
+                                                        tabIndex={0}
                                                         aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                         onClick={handleClickShowId}
+                                                        onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
                                                         onMouseDown={handleMouseDownId}
                                                         edge="end"
                                                         size="medium"
@@ -1089,7 +1093,14 @@ const CustomFormWizard = (props) => {
                                                     <img src={captchaImg} alt="" />
                                                 </Grid>
                                                 <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                    <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                    <IconButton
+                                                        role="button"
+                                                        tabIndex={0}
+                                                        aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                        size="large"
+                                                        onClick={() => { onCaptchaChange() }}
+                                                        onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                    >
                                                         <LoopIcon fontSize="inherit" />
                                                     </IconButton>
                                                 </Grid>
@@ -1175,8 +1186,11 @@ const CustomFormWizard = (props) => {
                                                 {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                             </Typography>
                                             <IconButton
+                                                role="button"
+                                                tabIndex={0}
                                                 aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                 onClick={handleClickShowComId}
+                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowComId)}
                                                 onMouseDown={handleMouseDownComId}
                                                 edge="end"
                                                 size="medium"