update Organization register

src/auth/jwtApplicationConfig.js

@@ -3,7 +3,7 @@ import {apiPath} from "./utils"
 export default {
     loginEndpoint: `${apiPath}/login`,
     registerEndpoint: `${apiPath}/register`,
-    refreshEndpoint: `${apiPath}/refresh/token`,
+    refreshEndpoint: `${apiPath}/refresh-token`,
     logoutEndpoint: `/jwt/logout`,
 
     // ** This will be prefixed in authorization header with token

src/auth/jwtConfig.js

@@ -3,7 +3,7 @@ import {apiPath} from "./utils"
 export default {
     loginEndpoint: `${apiPath}/login`,
     registerEndpoint: `${apiPath}/register`,
-    refreshEndpoint: `${apiPath}/refresh/token`,
+    refreshEndpoint: `${apiPath}/refresh-token`,
     logoutEndpoint: `/jwt/logout`,
 
     // ** This will be prefixed in authorization header with token

src/pages/authentication/BusRegister.js

@@ -1,205 +1,207 @@
-// import { Link } from 'react-router-dom';
-import React,{useState} from 'react';
-
-// material-ui
-import { 
-  Stepper,
-  Step,
-  StepButton,
-  // Grid, 
-  Stack, 
-  Typography,
-  Button,
-
-} from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-
-// project import
-import BusCustomFormWizard from './auth-forms/BusCustomFormWizard';
-import AuthWrapper from './AuthWrapperCustom';
-
-// ================================|| REGISTER ||================================ //
-const stepStyle = {
-  width:"80%",
-  boxShadow: 2,
-  backgroundColor: "rgba(0,0,0,0.1)",
-  padding: 2,
-  "& .Mui-active": {
-    "&.MuiStepIcon-root": {
-      color: "warning.main",
-      fontSize: "2rem",
+  // import { Link } from 'react-router-dom';
+  import React,{useState} from 'react';
+
+  // material-ui
+  import { 
+    Stepper,
+    Step,
+    StepButton,
+    // Grid, 
+    Stack, 
+    Typography,
+    Button,
+
+  } from '@mui/material';
+  import VisibilityIcon from '@mui/icons-material/Visibility';
+
+  // project import
+  import CustomFormWizard from './auth-forms/BusCustomFormWizard';
+  import AuthWrapper from './AuthWrapperCustom';
+
+  // ================================|| REGISTER ||================================ //
+  const stepStyle = {
+    width:"80%",
+    boxShadow: 2,
+    backgroundColor: "rgba(0,0,0,0.1)",
+    padding: 2,
+    "& .Mui-active": {
+      "&.MuiStepIcon-root": {
+        color: "warning.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "warning.main"
+      }
     },
-    "& .MuiStepConnector-line": {
-      borderColor: "warning.main"
-    }
-  },
-  "& .Mui-completed": {
-    "&.MuiStepIcon-root": {
-      color: "secondary.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "secondary.main"
+    "& .Mui-completed": {
+      "&.MuiStepIcon-root": {
+        color: "secondary.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "secondary.main"
+      }
     }
   }
-}
-const steps = ['個人資料', '預覽', '完成提交'];
-
-const BusRegister = () => {
-  const [activeStep, setActiveStep] = useState(0);
-  const [completed, setCompleted] = useState([false]);
-  const [isValid, setisValid] = useState(null);
-
-  const updateValid = (value) => {
-    setisValid(value);
-    console.log(value)
-  };
-
-  const totalSteps = () => {
-    return steps.length;
-  };
-
-  const completedSteps = () => {
-    return Object.keys(completed).length;
-  };
-
-  const isLastStep = () => {
-    return activeStep === totalSteps() - 1;
-  };
-
-  const allStepsCompleted = () => {
-    return completedSteps() === totalSteps();
-  };
-
-  const handleNext = () => {
-    console.log("test 1")
-    const newActiveStep =
-    isLastStep() && !allStepsCompleted()
-    ? // It's the last step, but not all steps have been completed,
-    // find the first step that has been completed
-    steps.findIndex((step, i) => !(i in completed))
-    : activeStep + 1;
-    setActiveStep(newActiveStep);
-    console.log(newActiveStep)
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleStep = (step) => () => {
-    setActiveStep(step);
-  };
-
-  // const handleComplete = () => {
-  //   const newCompleted = completed;
-  //   newCompleted[activeStep] = true;
-  //   setCompleted(newCompleted);
-  //   handleNext();
-  // };
-
-  const handleReset = () => {
-    setActiveStep(0);
-    setCompleted({});
-  };
-
-  return(
-    // <AuthWrapper>
-    <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
-        {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]}>
-            {
-              index < 2 ?
-                (<StepButton onClick={handleStep(index)}>
-                  {label}
-                </StepButton>) :
-                (<StepButton
-                  sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
-                  icon={<VisibilityIcon />}
-                  onClick={handleStep(index)}
+  const steps = ['個人資料', '預覽', '完成提交'];
+
+  const BusRegister = () => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [completed, setCompleted] = useState([false]);
+    const [isValid, setisValid] = useState(null);
+
+    const updateValid = (value) => {
+      setisValid(value);
+      console.log(value)
+    };
+
+    const totalSteps = () => {
+      return steps.length;
+    };
+
+    const completedSteps = () => {
+      return Object.keys(completed).length;
+    };
+
+    const isLastStep = () => {
+      return activeStep === totalSteps() - 1;
+    };
+
+    const allStepsCompleted = () => {
+      return completedSteps() === totalSteps();
+    };
+
+    const handleNext = () => {
+      console.log("test 1")
+      const newActiveStep =
+      isLastStep() && !allStepsCompleted()
+      ? // It's the last step, but not all steps have been completed,
+      // find the first step that has been completed
+      steps.findIndex((step, i) => !(i in completed))
+      : activeStep + 1;
+      setActiveStep(newActiveStep);
+      console.log(newActiveStep)
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    // const handleStep = (step) => () => {
+    //   setActiveStep(step);
+    // };
+
+    // const handleComplete = () => {
+    //   const newCompleted = completed;
+    //   newCompleted[activeStep] = true;
+    //   setCompleted(newCompleted);
+    //   handleNext();
+    // };
+
+    const handleReset = () => {
+      setActiveStep(0);
+      setCompleted({});
+    };
+
+    return(
+      // <AuthWrapper>
+      <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
+        <Stepper activeStep={activeStep} sx={stepStyle}>
+          {steps.map((label, index) => (
+            <Step key={label} completed={completed[index]} readOnly="true">
+              {
+                index < 2 ?
+                  (<StepButton 
+                    // onClick={handleStep(index)}
+                    >
+                    {label}
+                  </StepButton>) :
+                  (<StepButton
+                    sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
+                    icon={<VisibilityIcon />}
+                    // onClick={handleStep(index)}
+                  >
+                    {label}
+                  </StepButton>)
+              }
+
+            </Step>
+          ))}
+        </Stepper>
+        {allStepsCompleted() ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              All steps completed - you&apos;re finished
+            </Typography>
+            <Stack direction="row" sx={{ pt: 2 }}>
+              <Stack sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleReset}>Reset</Button>
+            </Stack>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <AuthWrapper>
+              <CustomFormWizard updateValid={updateValid} step={activeStep} />
+              {/* <CustomFormWizard step={activeStep} /> */}
+            </AuthWrapper>
+            <Stack direction="row" sx={{ pt: 2 }}>
+              { activeStep === totalSteps() - 1 ? (
+                <Button
+                  color="inherit"
+                  disabled={true}
+                  onClick={handleBack}
+                  sx={{ mr: 1 }}
                 >
-                  {label}
-                </StepButton>)
-            }
-
-          </Step>
-        ))}
-      </Stepper>
-      {allStepsCompleted() ? (
-        <React.Fragment>
-          <Typography sx={{ mt: 2, mb: 1 }}>
-            All steps completed - you&apos;re finished
-          </Typography>
-          <Stack direction="row" sx={{ pt: 2 }}>
-            <Stack sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}>Reset</Button>
-          </Stack>
-        </React.Fragment>
-      ) : (
-        <React.Fragment>
-          <AuthWrapper>
-            <BusCustomFormWizard updateValid={updateValid} step={activeStep} />
-            {/* <CustomFormWizard step={activeStep} /> */}
-          </AuthWrapper>
-          <Stack direction="row" sx={{ pt: 2 }}>
-            { activeStep === totalSteps() - 1 ? (
-              <Button
-                color="inherit"
-                disabled={true}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                返回
-              </Button>
-            ):(
-              <Button
-                color="inherit"
-                disabled={activeStep === 0}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                返回
-              </Button>
-            )
-            }
-            <Stack sx={{ flex: '1 1 auto' }} />
-            {activeStep === totalSteps() - 2 ? 
-              (
-                <Button onClick={handleNext} sx={{ mr: 1 }}>
-                  完成
+                  返回
                 </Button>
-              ) : ( activeStep === totalSteps() - 1 ?
+              ):(
+                <Button
+                  color="inherit"
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  sx={{ mr: 1 }}
+                >
+                  返回
+                </Button>
+              )
+              }
+              <Stack sx={{ flex: '1 1 auto' }} />
+              {activeStep === totalSteps() - 2 ? 
                 (
-                  <Button color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
+                  <Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                     完成
                   </Button>
-                ):
-                (
-                  <Button disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
-                    繼續
-                  </Button>
-                )
+                ) : (  activeStep === totalSteps() - 1 ?
+                  (
+                    <Button variant="outlined" color="inherit"
+                      disabled={true} sx={{ mr: 1 }}>
+                      完成
+                    </Button>
+                  ):
+                  (
+                    <Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
+                      繼續
+                    </Button>
+                  )
               )}
-            {/* {activeStep !== steps.length &&
-              (completed[activeStep] ? (
-                <Typography variant="caption" sx={{ display: 'inline-block' }}>
-                  Step {activeStep + 1} already completed
-                </Typography>
-              ) : (
-                <Button onClick={handleComplete}>
-                  {completedSteps() === totalSteps() - 1
-                    ? 'Finish'
-                    : 'Complete Step'}
-                </Button>
-              ))} */}
-          </Stack>
-        </React.Fragment>
-      )}
-    </Stack >
-    // </AuthWrapper>
-  );
-};
-
-export default BusRegister;
+              {/* {activeStep !== steps.length &&
+                (completed[activeStep] ? (
+                  <Typography variant="caption" sx={{ display: 'inline-block' }}>
+                    Step {activeStep + 1} already completed
+                  </Typography>
+                ) : (
+                  <Button onClick={handleComplete}>
+                    {completedSteps() === totalSteps() - 1
+                      ? 'Finish'
+                      : 'Complete Step'}
+                  </Button>
+                ))} */}
+            </Stack>
+          </React.Fragment>
+        )}
+      </Stack >
+      // </AuthWrapper>
+    );
+  };
+
+  export default BusRegister;

src/pages/authentication/Register.js

@@ -1,205 +1,207 @@
-// import { Link } from 'react-router-dom';
-import React,{useState} from 'react';
-
-// material-ui
-import { 
-  Stepper,
-  Step,
-  StepButton,
-  // Grid, 
-  Stack, 
-  Typography,
-  Button,
-
-} from '@mui/material';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-
-// project import
-import CustomFormWizard from './auth-forms/CustomFormWizard';
-import AuthWrapper from './AuthWrapperCustom';
-
-// ================================|| REGISTER ||================================ //
-const stepStyle = {
-  width:"80%",
-  boxShadow: 2,
-  backgroundColor: "rgba(0,0,0,0.1)",
-  padding: 2,
-  "& .Mui-active": {
-    "&.MuiStepIcon-root": {
-      color: "warning.main",
-      fontSize: "2rem",
+  // import { Link } from 'react-router-dom';
+  import React,{useState} from 'react';
+
+  // material-ui
+  import { 
+    Stepper,
+    Step,
+    StepButton,
+    // Grid, 
+    Stack, 
+    Typography,
+    Button,
+
+  } from '@mui/material';
+  import VisibilityIcon from '@mui/icons-material/Visibility';
+
+  // project import
+  import CustomFormWizard from './auth-forms/CustomFormWizard';
+  import AuthWrapper from './AuthWrapperCustom';
+
+  // ================================|| REGISTER ||================================ //
+  const stepStyle = {
+    width:"80%",
+    boxShadow: 2,
+    backgroundColor: "rgba(0,0,0,0.1)",
+    padding: 2,
+    "& .Mui-active": {
+      "&.MuiStepIcon-root": {
+        color: "warning.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "warning.main"
+      }
     },
-    "& .MuiStepConnector-line": {
-      borderColor: "warning.main"
-    }
-  },
-  "& .Mui-completed": {
-    "&.MuiStepIcon-root": {
-      color: "secondary.main",
-      fontSize: "2rem",
-    },
-    "& .MuiStepConnector-line": {
-      borderColor: "secondary.main"
+    "& .Mui-completed": {
+      "&.MuiStepIcon-root": {
+        color: "secondary.main",
+        fontSize: "2rem",
+      },
+      "& .MuiStepConnector-line": {
+        borderColor: "secondary.main"
+      }
     }
   }
-}
-const steps = ['個人資料', '預覽', '完成提交'];
-
-const Register = () => {
-  const [activeStep, setActiveStep] = useState(0);
-  const [completed, setCompleted] = useState([false]);
-  const [isValid, setisValid] = useState(null);
-
-  const updateValid = (value) => {
-    setisValid(value);
-    console.log(value)
-  };
-
-  const totalSteps = () => {
-    return steps.length;
-  };
-
-  const completedSteps = () => {
-    return Object.keys(completed).length;
-  };
-
-  const isLastStep = () => {
-    return activeStep === totalSteps() - 1;
-  };
-
-  const allStepsCompleted = () => {
-    return completedSteps() === totalSteps();
-  };
-
-  const handleNext = () => {
-    console.log("test 1")
-    const newActiveStep =
-    isLastStep() && !allStepsCompleted()
-    ? // It's the last step, but not all steps have been completed,
-    // find the first step that has been completed
-    steps.findIndex((step, i) => !(i in completed))
-    : activeStep + 1;
-    setActiveStep(newActiveStep);
-    console.log(newActiveStep)
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
-  const handleStep = (step) => () => {
-    setActiveStep(step);
-  };
-
-  // const handleComplete = () => {
-  //   const newCompleted = completed;
-  //   newCompleted[activeStep] = true;
-  //   setCompleted(newCompleted);
-  //   handleNext();
-  // };
-
-  const handleReset = () => {
-    setActiveStep(0);
-    setCompleted({});
-  };
-
-  return(
-    // <AuthWrapper>
-    <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
-      <Stepper activeStep={activeStep} sx={stepStyle}>
-        {steps.map((label, index) => (
-          <Step key={label} completed={completed[index]}>
-            {
-              index < 2 ?
-                (<StepButton onClick={handleStep(index)}>
-                  {label}
-                </StepButton>) :
-                (<StepButton
-                  sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
-                  icon={<VisibilityIcon />}
-                  onClick={handleStep(index)}
+  const steps = ['個人資料', '預覽', '完成提交'];
+
+  const Register = () => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [completed, setCompleted] = useState([false]);
+    const [isValid, setisValid] = useState(null);
+
+    const updateValid = (value) => {
+      setisValid(value);
+      console.log(value)
+    };
+
+    const totalSteps = () => {
+      return steps.length;
+    };
+
+    const completedSteps = () => {
+      return Object.keys(completed).length;
+    };
+
+    const isLastStep = () => {
+      return activeStep === totalSteps() - 1;
+    };
+
+    const allStepsCompleted = () => {
+      return completedSteps() === totalSteps();
+    };
+
+    const handleNext = () => {
+      console.log("test 1")
+      const newActiveStep =
+      isLastStep() && !allStepsCompleted()
+      ? // It's the last step, but not all steps have been completed,
+      // find the first step that has been completed
+      steps.findIndex((step, i) => !(i in completed))
+      : activeStep + 1;
+      setActiveStep(newActiveStep);
+      console.log(newActiveStep)
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    // const handleStep = (step) => () => {
+    //   setActiveStep(step);
+    // };
+
+    // const handleComplete = () => {
+    //   const newCompleted = completed;
+    //   newCompleted[activeStep] = true;
+    //   setCompleted(newCompleted);
+    //   handleNext();
+    // };
+
+    const handleReset = () => {
+      setActiveStep(0);
+      setCompleted({});
+    };
+
+    return(
+      // <AuthWrapper>
+      <Stack sx={{ width: '100%',fontSize: '2rem'}} alignItems="center">
+        <Stepper activeStep={activeStep} sx={stepStyle}>
+          {steps.map((label, index) => (
+            <Step key={label} completed={completed[index]} readOnly="true">
+              {
+                index < 2 ?
+                  (<StepButton 
+                    // onClick={handleStep(index)}
+                    >
+                    {label}
+                  </StepButton>) :
+                  (<StepButton
+                    sx={activeStep === 2 ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } } : allStepsCompleted() ? { "& .MuiSvgIcon-root": { color: "secondary.main", fontSize: "2rem" } } : { color: "rgba(0, 0, 0, 0.38)" }}
+                    icon={<VisibilityIcon />}
+                    // onClick={handleStep(index)}
+                  >
+                    {label}
+                  </StepButton>)
+              }
+
+            </Step>
+          ))}
+        </Stepper>
+        {allStepsCompleted() ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              All steps completed - you&apos;re finished
+            </Typography>
+            <Stack direction="row" sx={{ pt: 2 }}>
+              <Stack sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleReset}>Reset</Button>
+            </Stack>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <AuthWrapper>
+              <CustomFormWizard updateValid={updateValid} step={activeStep} />
+              {/* <CustomFormWizard step={activeStep} /> */}
+            </AuthWrapper>
+            <Stack direction="row" sx={{ pt: 2 }}>
+              { activeStep === totalSteps() - 1 ? (
+                <Button
+                  color="inherit"
+                  disabled={true}
+                  onClick={handleBack}
+                  sx={{ mr: 1 }}
                 >
-                  {label}
-                </StepButton>)
-            }
-
-          </Step>
-        ))}
-      </Stepper>
-      {allStepsCompleted() ? (
-        <React.Fragment>
-          <Typography sx={{ mt: 2, mb: 1 }}>
-            All steps completed - you&apos;re finished
-          </Typography>
-          <Stack direction="row" sx={{ pt: 2 }}>
-            <Stack sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}>Reset</Button>
-          </Stack>
-        </React.Fragment>
-      ) : (
-        <React.Fragment>
-          <AuthWrapper>
-            <CustomFormWizard updateValid={updateValid} step={activeStep} />
-            {/* <CustomFormWizard step={activeStep} /> */}
-          </AuthWrapper>
-          <Stack direction="row" sx={{ pt: 2 }}>
-            { activeStep === totalSteps() - 1 ? (
-              <Button
-                color="inherit"
-                disabled={true}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                返回
-              </Button>
-            ):(
-              <Button
-                color="inherit"
-                disabled={activeStep === 0}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                返回
-              </Button>
-            )
-            }
-            <Stack sx={{ flex: '1 1 auto' }} />
-            {activeStep === totalSteps() - 2 ? 
-              (
-                <Button onClick={handleNext} sx={{ mr: 1 }}>
-                  完成
+                  返回
                 </Button>
-              ) : ( activeStep === totalSteps() - 1 ?
+              ):(
+                <Button
+                  color="inherit"
+                  disabled={activeStep === 0}
+                  onClick={handleBack}
+                  sx={{ mr: 1 }}
+                >
+                  返回
+                </Button>
+              )
+              }
+              <Stack sx={{ flex: '1 1 auto' }} />
+              {activeStep === totalSteps() - 2 ? 
                 (
-                  <Button color="inherit"
-                    disabled={true} sx={{ mr: 1 }}>
+                  <Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                     完成
                   </Button>
-                ):
-                (
-                  <Button disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
-                    繼續
-                  </Button>
-                )
+                ) : (  activeStep === totalSteps() - 1 ?
+                  (
+                    <Button variant="outlined" color="inherit"
+                      disabled={true} sx={{ mr: 1 }}>
+                      完成
+                    </Button>
+                  ):
+                  (
+                    <Button variant="outlined" disabled={isValid===false} onClick={handleNext} sx={{ mr: 1 }}>
+                      繼續
+                    </Button>
+                  )
               )}
-            {/* {activeStep !== steps.length &&
-              (completed[activeStep] ? (
-                <Typography variant="caption" sx={{ display: 'inline-block' }}>
-                  Step {activeStep + 1} already completed
-                </Typography>
-              ) : (
-                <Button onClick={handleComplete}>
-                  {completedSteps() === totalSteps() - 1
-                    ? 'Finish'
-                    : 'Complete Step'}
-                </Button>
-              ))} */}
-          </Stack>
-        </React.Fragment>
-      )}
-    </Stack >
-    // </AuthWrapper>
-  );
-};
-
-export default Register;
+              {/* {activeStep !== steps.length &&
+                (completed[activeStep] ? (
+                  <Typography variant="caption" sx={{ display: 'inline-block' }}>
+                    Step {activeStep + 1} already completed
+                  </Typography>
+                ) : (
+                  <Button onClick={handleComplete}>
+                    {completedSteps() === totalSteps() - 1
+                      ? 'Finish'
+                      : 'Complete Step'}
+                  </Button>
+                ))} */}
+            </Stack>
+          </React.Fragment>
+        )}
+      </Stack >
+      // </AuthWrapper>
+    );
+  };
+
+  export default Register;

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

@@ -30,11 +30,14 @@ import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 import {apiPath} from "auth/utils";
 import axios from "axios";
 import {POST_PUBLIC_USER_REGISTER} from "utils/ApiPathConst";
+import * as HttpUtils from 'utils/HttpUtils';
+import UploadFileTable from './UploadFileTable';
 
 // assets
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 // import { Paper } from '../../../../node_modules/@mui/material/index';
-
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import { Link } from 'react-router-dom';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const BusCustomFormWizard = (props) => {
@@ -42,6 +45,8 @@ const BusCustomFormWizard = (props) => {
     const [level, setLevel] = useState();
     const [showPassword, setShowPassword] = useState(false);
     const [showConfirmPassword, setshowConfirmPassword] = useState(false);
+    const [fileList, setFileList] = useState([]);
+    const [fileListData, setFileListData] = useState([]);
 
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
@@ -65,7 +70,7 @@ const BusCustomFormWizard = (props) => {
     const [termsAndConAccept, setTermsAndConAccept] = useState(false);
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     
-    const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"];
+    const idDocTypeComboList = ["BR","otherCert"];
     const address4ComboList = 
         ["北區","長洲區","大埔區","大嶼山區","東區","觀塘區","黃大仙區","九龍城區","葵青區","南區","南丫島區",
          "坪洲區","荃灣區","沙田區","深水埗區","屯門區","灣仔區","西貢區","油尖旺區","元朗區","中西區"];
@@ -78,8 +83,8 @@ const BusCustomFormWizard = (props) => {
                         +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                         +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
 
-                        useEffect(() => {
-                    changePassword('');
+    useEffect(() => {
+        changePassword('');
     }, []);
 
     const checkDataField = (data)=> {
@@ -105,7 +110,31 @@ const BusCustomFormWizard = (props) => {
             setTermsAndConNotAccept(event.target.checked)
             setTermsAndConAccept(!event.target.checked)
         }
-      };
+    };
+
+    const handleFileUpload = (event)=>{
+        const uploadFileList = event.target.files;
+        const saveFileList = [];
+        var currentIndex = 0;
+
+        if (!fileList.length==null){
+            currentIndex = fileList.length;
+        }
+
+        for (let i = 0; i < uploadFileList.length; i++){
+            const file = event.target.files[i]
+            file.id = currentIndex+i+1
+            saveFileList.push(file)
+        }
+
+        setFileListData(saveFileList)
+        setFileList(uploadFileList);
+    };
+
+    useEffect(() => {
+        console.log(props.step);
+        _onSubmit();
+      }, [props.step])
 
     const {handleSubmit} = useForm({})
     const _onSubmit = () => {
@@ -134,7 +163,7 @@ const BusCustomFormWizard = (props) => {
         if (termsAndConNotAccept){
             tncFlag = false
         }
-        console.log(tncFlag)
+
         if (checkDataField(values)){
             axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
                 username: values.username,
@@ -152,13 +181,21 @@ const BusCustomFormWizard = (props) => {
                 tncFlag:tncFlag
             })
             .then((response) => {
-                console.log("Success")
-                console.log(response)
+                HttpUtils.fileUpload(
+                    {
+                        refType:"identification",
+                        refId: response.data.id,
+                        file: fileList[0],
+                        onSuccess: (response)=>{
+                            console.log(response);
+                            // setOpen(true);
+                        }
+                    }
+                );
             })
             .catch(error => {
                 console.error(error);
-            });  
-
+            });
         }
     }
 
@@ -185,8 +222,8 @@ const BusCustomFormWizard = (props) => {
             username: Yup.string().max(255).required('請輸入用戶名稱'),
             password: Yup.string().max(255).required('請輸入密碼'),
             confirmPassword: Yup.string().max(255).required('請確認密碼'),
-            enName: Yup.string().max(255).required('請輸入英文姓名'),
-            chName: Yup.string().max(255).required('請輸入中文姓名'),
+            enName: Yup.string().max(255).required('請輸入英文名稱'),
+            chName: Yup.string().max(255).required('請輸入中文名稱'),
             address1: Yup.string().max(255).required('請輸入第一行地址'),
             address2: Yup.string().max(255).required('請輸入第二行地址'),
             address3: Yup.string().max(255).required('請輸入第三行地址'),
@@ -198,7 +235,6 @@ const BusCustomFormWizard = (props) => {
     });
     const { values } = formik
     useEffect(() => {
-        // console.log(values)
       }, [values])
 
     return (
@@ -362,7 +398,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography>          
+                                        <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>公司/機構資料</Typography>          
                                         {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                             Already have an account?
                                         </Typography> */}
@@ -371,7 +407,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12} >
                                     <Grid container sx={{mb:1}}>
                                         <Stack spacing={1}>
-                                            <InputLabel htmlFor="idDocType-signup">身份證明文件
+                                            <InputLabel htmlFor="idDocType-signup">公司證明文件
                                                 <span style={{color: '#f10000'}}>*</span>
                                             </InputLabel>
                                             {/* {formik.touched.enName && formik.errors.enName && (
@@ -415,7 +451,7 @@ const BusCustomFormWizard = (props) => {
                                                             sx={{mr:1}}
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                             inputProps={{
-                                                                maxLength: selectedIdDocType =='HKID'?7:18,
+                                                                maxLength: selectedIdDocType =='BR'?8:18,
                                                                 onKeyDown: (e) => {
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
@@ -491,7 +527,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
-                                        <InputLabel htmlFor="enName-signup">英文姓名
+                                        <InputLabel htmlFor="enName-signup">英文名稱
                                             <span style={{color: '#f10000'}}>*</span>
                                         </InputLabel>
                                         <OutlinedInput
@@ -500,7 +536,7 @@ const BusCustomFormWizard = (props) => {
                                             value={formik.values.enName}
                                             name="enName"
                                             onChange={formik.handleChange}
-                                            placeholder="與你的身份證明文件相同"
+                                            placeholder="與公司證明文件相同"
                                             fullWidth
                                             error={Boolean(formik.touched.enName && formik.errors.enName)}
                                             inputProps={{
@@ -520,7 +556,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1}>
-                                        <InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
+                                        <InputLabel htmlFor="chName-signup">中文名稱</InputLabel>
                                         <OutlinedInput
                                             fullWidth
                                             error={Boolean(formik.touched.chName && formik.errors.chName)}
@@ -529,7 +565,7 @@ const BusCustomFormWizard = (props) => {
                                             value={formik.values.chName}
                                             name="chName"
                                             onChange={formik.handleChange}
-                                            placeholder="與你的身份證明文件相同"
+                                            placeholder="與公司證明文件相同"
                                             inputProps={{
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -645,7 +681,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>          
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>聯絡資料</Typography>          
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
@@ -823,21 +859,29 @@ const BusCustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={12}>
                                             <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>          
-                                                <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
+                                                <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>公司證明文件</Typography>          
+                                                <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效公司證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                                 <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
-                                                        <input type="file" accept=".csv" hidden />
+                                                    <Button variant="contained" component="label" sx={{ fontSize: 12,height:'40px'}}>上傳公司證明文件
+                                                        <input
+                                                        accept="image/*"
+                                                        //className={classes.input}
+                                                        id="contained-button-file"
+                                                        multiple
+                                                        type="file"
+                                                        onChange={handleFileUpload}
+                                                        style={{display: 'none'}}
+                                                        />
                                                     </Button>
-                                                    {/* <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}} onClick={test123}>test
-                                                    </Button> */}
-                                                    <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
+                                                    {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography>           */}
                                                 </Stack>
-                                                <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
+                                                {fileList !=null?
+                                                    <UploadFileTable recordList={fileListData} />:null}
+                                                {/* <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
-                                                    {/* <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
-                                                </Stack>
+                                                    <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
+                                                </Stack> */}
                                             </Stack>
                                         </Grid>
                                     </Grid>
@@ -903,7 +947,7 @@ const BusCustomFormWizard = (props) => {
                         <Grid item xs={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
-                                <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography>          
+                                <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的公司/機構用戶</Typography>          
                                 </div>
                                 {/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
                                 <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
@@ -926,7 +970,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                    <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography>          
+                                    <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>公司/機構資料</Typography>          
                                     {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                         Already have an account?
                                     </Typography> */}
@@ -935,7 +979,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={12} >
                                     <Stack spacing={1}>
                                         <Typography>
-                                            身份證明文件
+                                            公司證明文件
                                         </Typography>
                                     </Stack>
                                 </Grid>
@@ -964,7 +1008,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography>
-                                            英文姓名:
+                                            英文名稱:
                                         </Typography>
                                         <Typography id="preview-enName-signup">
                                             {formik.values.enName}
@@ -974,7 +1018,7 @@ const BusCustomFormWizard = (props) => {
                                 <Grid item xs={12} md={6}>
                                     <Stack spacing={1} direction="row">
                                         <Typography>
-                                            中文姓名:
+                                            中文名稱:
                                         </Typography>
                                         <Typography id="preview-chName-signup">
                                             {formik.values.chName}
@@ -1007,7 +1051,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                    <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>          
+                                    <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>聯絡資料</Typography>          
                                     </Stack>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
@@ -1042,11 +1086,11 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
                                 <Grid item xs={12} mt={1} mb={1}>
                                     <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
-                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>          
-                                        <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>          
+                                        <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>公司證明文件</Typography>          
+                                        <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效公司證明文件 的數碼檔案，以驗證你的身份。</Typography>          
                                         <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                         <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                                            <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳身份證明文件
+                                            <Button variant="contained" component="label" sx={{ fontSize: 12,height:'25px'}}>上傳公司證明文件
                                             <input type="file" accept=".csv" hidden />
                                             </Button>
                                             <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
@@ -1061,14 +1105,15 @@ const BusCustomFormWizard = (props) => {
                 <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
                     <Grid container spacing={3}>
                         <Grid item xs={12}>
-                            <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                                <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
-                                {/* <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
+                            <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> */}
+                                <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'}}>返回登入頁面</Button>
                             </Stack>
                         </Grid>
                     </Grid>
                 </FormGroup>
-                    
             </form>
         </FormikProvider>
     );

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

@@ -36,7 +36,8 @@ import UploadFileTable from './UploadFileTable';
 // assets
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 // import { Paper } from '../../../../node_modules/@mui/material/index';
-
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import { Link } from 'react-router-dom';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
@@ -82,8 +83,8 @@ const CustomFormWizard = (props) => {
                         +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
                         +"Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy Dummy \n"
 
-                        useEffect(() => {
-                    changePassword('');
+    useEffect(() => {
+        changePassword('');
     }, []);
 
     const checkDataField = (data)=> {
@@ -115,10 +116,6 @@ const CustomFormWizard = (props) => {
         const uploadFileList = event.target.files;
         const saveFileList = [];
         var currentIndex = 0;
-        // var index = 0;
-        console.log(uploadFileList);
-        console.log(uploadFileList.length);
-        console.log(fileList);
 
         if (!fileList.length==null){
             currentIndex = fileList.length;
@@ -129,13 +126,16 @@ const CustomFormWizard = (props) => {
             file.id = currentIndex+i+1
             saveFileList.push(file)
         }
-        
-        console.log(saveFileList);
-        console.log(uploadFileList);
+
         setFileListData(saveFileList)
         setFileList(uploadFileList);
     };
 
+    useEffect(() => {
+        console.log(props.step);
+        _onSubmit();
+      }, [props.step])
+
     const {handleSubmit} = useForm({})
     const _onSubmit = () => {
         values.idDocType = selectedIdDocType
@@ -163,7 +163,7 @@ const CustomFormWizard = (props) => {
         if (termsAndConNotAccept){
             tncFlag = false
         }
-        console.log(tncFlag)
+
         if (checkDataField(values)){
             axios.post(`${apiPath}${POST_PUBLIC_USER_REGISTER}`, {
                 username: values.username,
@@ -181,8 +181,6 @@ const CustomFormWizard = (props) => {
                 tncFlag:tncFlag
             })
             .then((response) => {
-                console.log("Success")
-                console.log(response)
                 HttpUtils.fileUpload(
                     {
                         refType:"identification",
@@ -237,7 +235,6 @@ const CustomFormWizard = (props) => {
     });
     const { values } = formik
     useEffect(() => {
-        // console.log(values)
       }, [values])
 
     return (
@@ -1108,14 +1105,15 @@ const CustomFormWizard = (props) => {
                 <FormGroup id={"submitForm"} sx={{ display: props.step === 2 ? "" : "none"}}>
                     <Grid container spacing={3}>
                         <Grid item xs={12}>
-                            <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
-                                <Button variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
-                                {/* <Button disabled={!formik.isValid} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
+                            <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> */}
+                                <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'}}>返回登入頁面</Button>
                             </Stack>
                         </Grid>
                     </Grid>
                 </FormGroup>
-                    
             </form>
         </FormikProvider>
     );