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

  // import { Link } from 'react-router-dom';
  import React,{useState
    // ,useEffect
  } 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 Loadable from 'components/Loadable';
  import { lazy } from 'react';
  const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard')));
  const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
  // ================================|| REGISTER ||================================ //
  const stepStyle = {
    width:"40%",
    boxShadow: 1,
    backgroundColor: "#FFFFFF",
    padding: 2,
    "& .Mui-active": {
      "&.MuiStepIcon-root": {
        color: "warning.main",
        fontSize: "2rem",
      },
      "& .MuiStepConnector-line": {
        borderColor: "warning.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 [updateValid, setUpdateValid] = useState(false);

    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 = () => {
      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);
      scrollToTop();
    };

    const handleBack = () => {
      scrollToTop();
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const scrollToTop = () => {
      window.scrollTo(0,0);
    };

    const handleReset = () => {
      setActiveStep(0);
      setCompleted({});
    };

    return(
      // <AuthWrapper>
      <Stack sx={{ width: '100%',fontSize: '2rem',paddingTop: '65px'}} 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 setUpdateValid={setUpdateValid} step={activeStep} />
              {/* <CustomFormWizard step={activeStep} /> */}
            </AuthWrapper>
            <Stack direction="row" sx={{ pb: 2 }}>
              { activeStep === 2|| activeStep === 0? (
                <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 variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                    提交
                  </Button>
                ) : (  activeStep === totalSteps() - 1 ?
                  (
                    <Button variant="outlined" color="inherit"
                      disabled={true} sx={{ mr: 1 }}>
                      提交
                    </Button>
                  ):
                  (
                    // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                    <Button disabled={!updateValid} variant="outlined" 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;