PNSPS-frontend-MaterialUI/src/pages/authentication/IAmSmartRegister.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';
import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";

// project import
import Loadable from 'components/Loadable';
import { lazy } from 'react';
import { notifyActionError } from 'utils/CommonFunction';
import axios from "axios";
const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/IAmSmartFormWizard')));
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 [idNo, setIdNo] = useState("");

  const totalSteps = () => {
    return steps.length;
  };

  const completedSteps = () => {
    return Object.keys(completed).length;
  };

  const isLastStep = () => {
    return activeStep === totalSteps() - 1;
  };

  const allStepsCompleted = () => {
    return completedSteps() === totalSteps();
  };

  const handleCheckID = async () => {
    const response = await axios.get(`${GET_ID}`, {
      params: {
        idNo: idNo,
      }
    })
    return Number(response.data[0]) === 1
  }

  const handleCaptcha = async () => {
    const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, {
        captcha: base64Url,
        checkCode: checkCode,
    })
    return Boolean(response.data["success"]);
  }

  const handleNext = async () => {
    if (!idNo) {
      notifyActionError("資料，請返回注冊頁面。")
      return;
    }
    const captchaTest = await handleCaptcha();
    if (!captchaTest) {
      notifyActionError("請輸入有效驗證")
      return;
    }
    const test = await handleCheckID()
    if (test) {
      notifyActionError("此用戶已注冊，請返回登入頁面並進行登入流程。")
    } else {
      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', bgcolor: 'backgroundColor.default' }} 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)}
                >
                  <Typography variant="step1">{label}</Typography>
                </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)}
                >
                  <Typography variant="step1">{label}</Typography>
                </StepButton>)
            }

          </Step>
        ))}
      </Stepper>
      {allStepsCompleted() ? (
        <React.Fragment>
          <Typography variant="h4" 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}><Typography variant="h5">Reset</Typography></Button>
          </Stack>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <AuthWrapper>
            <CustomFormWizard
              setUpdateValid={setUpdateValid}
              step={activeStep}
              setIdNo={setIdNo}
              setBase64Url={setBase64Url}
              setCheckCode={setCheckCode}
            />
            {/* <CustomFormWizard step={activeStep} /> */}
          </AuthWrapper>
          <Stack direction="row" sx={{ pb: 2 }}>
            {activeStep === 2 || activeStep === 0 ? (
              <Button
                color="inherit"
                disabled={true}
                onClick={handleBack}
                sx={{ mr: 1 }}
              >
                <Typography variant="h5">返回</Typography>
              </Button>
            ) : (
              <Button
                color="inherit"
                disabled={activeStep === 0}
                onClick={handleBack}
                sx={{ mr: 1 }}
              >
                <Typography variant="h5">返回</Typography>
              </Button>
            )
            }
            <Stack sx={{ flex: '1 1 auto' }} />
            {activeStep === totalSteps() - 2 ?
              (
                <Button variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                  <Typography variant="h5">提交</Typography>
                </Button>
              ) : (activeStep === totalSteps() - 1 ?
                (
                  <Button variant="outlined" color="inherit"
                    disabled={true} sx={{ mr: 1 }}>
                    <Typography variant="h5">提交</Typography>
                  </Button>
                ) :
                (
                  // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                  <Button disabled={!updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                    <Typography variant="h5">繼續</Typography>
                  </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;