PNSPS-frontend-MaterialUI/src/pages/authentication/auth-forms/CustomFormWizard.js

import { useEffect, useState } from 'react';
// import { Link as RouterLink } from 'react-router-dom';

// material-ui
import {
  Box,
  Button,
  FormControl,
  FormHelperText,
  Grid, IconButton,
  InputAdornment,
  InputLabel, OutlinedInput,
  Stack,
  Typography,
  Select,
  FormGroup,
//   Paper
  // MenuItem
} from '@mui/material';
import {useForm,} from 'react-hook-form'

// third party
import { Formik } from 'formik';
import * as Yup from 'yup';
// import axios from "axios";

// project import
// import AnimateButton from 'components/@extended/AnimateButton';
import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
import {apiPath} from "auth/utils";
import axios from "axios";

// assets
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { Paper } from '../../../../node_modules/@mui/material/index';

// ============================|| FIREBASE - REGISTER ||============================ //

const CustomFormWizard = (props) => {
    
    const [level, setLevel] = useState();
    const [showPassword, setShowPassword] = useState(false);
    const [showConfirmPassword, setshowConfirmPassword] = useState(false);
    const handleClickShowPassword = () => {
        setShowPassword(!showPassword);
    };
    const handleClickShowConfirmPassword = () => {
        setshowConfirmPassword(!showConfirmPassword);
    };

    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };

    const changePassword = (value) => {
        const temp = strengthIndicator(value);
        setLevel(strengthColorChi(temp));
    };

    useEffect(() => {
        changePassword('');
    }, []);

    // useEffect(() => {
    //     tryAPI();
    // }, []);

    const {handleSubmit,register} = useForm({})

    const _onSubmit = (data) => {
        console.log("test")
        console.log(data)
        console.log(data.fax)
        console.log(data.phone)
        const name = data.ehName +" "+ data.enName
        console.log(name)
        if (data.username !==""){
            axios.post(`${apiPath}/user/register`, {
                username: data.username,
                password: data.password,
                name: data.username,
                fullname: name,
                enName: data.enName,
                chName: data.chName,
                email: data.email,
                fax: data.fax,
                address1: data.address1,
                address2: data.address2,
                address3: data.address3,
                address4: data.address4,
                address5: data.address5
            })
            .then((response) => {
                console.log("Success")
                console.log(response)
            })
            .catch(error => {
                console.error(error);
            });  

        }
    }
    
    return (
        <Formik
            initialValues={{
            username:'',
            enName: '',
            chName: '',
            email: '',
            address1: '',
            address2: '',
            address3: '',
            address4: '',
            address5: '',
            password: '',
            confirmPassword: '',
            phone:'',
            idNo:'',
            submit: null
            }}
            validationSchema={Yup.object().shape({
            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('請輸入中文姓名'),
            address1: Yup.string().max(255).required('請輸入第一行地址'),
            address2: Yup.string().max(255).required('請輸入第二行地址'),
            address3: Yup.string().max(255).required('請輸入第三行地址'),
            email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
            idNo: Yup.string().max(255).required('請輸入身證件號碼'),
            idType: Yup.string().max(255).required('請輸入第三行地址'),
            })}
        >
            {({ errors, handleBlur, handleChange, touched, values }) => (
            // <Paper>
                <form onSubmit={handleSubmit(_onSubmit)}>
                    <FormGroup id={"inputForm"} sx={{ display: props.step === 0 ? "" : "none" }}>
                        <Grid container spacing={3}>
                            <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>          
                                </div>
                                <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
                                {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                Already have an account?
                                </Typography> */}
                            </Stack>
                            </Grid>
                            <Grid item xs={12}>
                                <Grid container spacing={1}>
                                <Grid item xs={12} >
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="username-signup">用戶登入名稱
                                        <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="username-login"
                                            type="text"
                                            value={values.username}
                                            name="username"
                                            {...register("username")}
                                            onChange={handleChange}
                                            placeholder="用戶登入名稱"
                                            fullWidth
                                            error={Boolean(touched.username && errors.username)}
                                        />
                                        {touched.username && errors.username && (
                                            <FormHelperText error id="helper-text-username-signup">
                                            {errors.username}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <Stack direction="row" justifyContent="space-between">
                                            <InputLabel htmlFor="password-signup">密碼
                                            <span style={{color: '#f10000'}}>*</span>
                                            </InputLabel>
                                            <InputLabel htmlFor="password-rule">密碼規則</InputLabel>
                                        </Stack>
                                        <OutlinedInput
                                            fullWidth
                                            error={Boolean(touched.password && errors.password)}
                                            id="password-signup"
                                            type={showPassword ? 'text' : 'password'}
                                            value={values.password}
                                            name="password"
                                            {...register("password")}
                                            onChange={(e) => {
                                            handleChange(e);
                                            changePassword(e.target.value);
                                            }}
                                            endAdornment={
                                            <InputAdornment position="end">
                                                <IconButton
                                                aria-label="toggle password visibility"
                                                onClick={handleClickShowPassword}
                                                onMouseDown={handleMouseDownPassword}
                                                edge="end"
                                                size="large"
                                                >
                                                {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                </IconButton>
                                            </InputAdornment>
                                            }
                                            placeholder="密碼"
                                            inputProps={{}}
                                        />
                                        {touched.password && errors.password && (
                                            <FormHelperText error id="helper-text-password-signup">
                                            {errors.password}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                    <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" fontSize="0.75rem">
                                            {level?.label}
                                        </Typography>
                                        </Grid>
                                    </Grid>
                                    </FormControl>
                                </Grid>
                                <Grid item xs={12} md={6} >
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="confirmPassword-signup">確認密碼
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="confirmPassword-login"
                                            type={showConfirmPassword ? 'text' : 'password'}
                                            value={values.confirmPassword}
                                            name="confirmPassword"
                                            {...register("confirmPassword")}
                                            onChange={(e) => {
                                            handleChange(e);
                                            changePassword(e.target.value);
                                            }}
                                            endAdornment={
                                            <InputAdornment position="end">
                                            <IconButton
                                                aria-label="toggle password visibility"
                                                onClick={handleClickShowConfirmPassword}
                                                onMouseDown={handleMouseDownPassword}
                                                edge="end"
                                                size="large"
                                            >
                                                {showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                            </IconButton>
                                            </InputAdornment>
                                            }
                                            placeholder="確認密碼"
                                            fullWidth
                                            error={Boolean(touched.confirmPassword && errors.confirmPassword)}
                                        />
                                        {touched.confirmPassword && errors.confirmPassword && (
                                            <FormHelperText error id="helper-text-confirmPassword-signup">
                                            {errors.confirmPassword}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </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 component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={12} >
                                    <Grid container xs={12} md={12} sx={{mb:1}}>
                                        <Stack spacing={1}>
                                            <InputLabel htmlFor="idDocType-signup">身份證明文件
                                                <span style={{color: '#f10000'}}>*</span>
                                            </InputLabel>
                                            {/* {touched.enName && errors.enName && (
                                                <FormHelperText error id="helper-text-enName-signup">
                                                {errors.enName}
                                                </FormHelperText>
                                            )} */}
                                        </Stack>
                                    </Grid>

                                    <Grid container xs={12} md={12}>
                                        <Grid item xs={12} md={6} >
                                            <Stack spacing={1}  sx={{mr:{md:1},mb:{xs:1}}}>
                                                <Select
                                                    name = "idDocType"
                                                    multiple
                                                    displayEmpty
                                                    value={""}
                                                    onChange={handleChange}
                                                    input={<OutlinedInput />}
                                                    {...register("idDocType")}
                                                    renderValue={(selected) => {
                                                    if (selected.length === 0) {
                                                        return "證件類別";
                                                    }
                                                    return selected.join(', ');
                                                    }}
                                                    // MenuProps={MenuProps}
                                                    inputProps={{ 'aria-label': 'Without label' }}
                                                >
                                                </Select>
                                            </Stack>
                                        </Grid>
                                        <Grid item xs={12} md={6}>
                                            <Stack spacing={1}>
                                                <OutlinedInput
                                                    id="idNo-login"
                                                    type="text"
                                                    value={values.idNo}
                                                    name="idNo"
                                                    {...register("idNo")}
                                                    onChange={handleChange}
                                                    placeholder="證件號碼"
                                                    fullWidth
                                                    error={Boolean(touched.idNo && errors.idNo)}
                                                />
                                                {touched.idNo && errors.idNo && (
                                                    <FormHelperText error id="helper-text-enName-signup">
                                                    {errors.idNo}
                                                    </FormHelperText>
                                                )}
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                        <InputLabel htmlFor="enName-signup">英文姓名
                                            <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <OutlinedInput
                                            id="enName-login"
                                            type="enName"
                                            value={values.enName}
                                            name="enName"
                                            {...register("enName")}
                                            onChange={handleChange}
                                            placeholder="與你的身份證明文件相同"
                                            fullWidth
                                            error={Boolean(touched.enName && errors.enName)}
                                        />
                                        {touched.enName && errors.enName && (
                                            <FormHelperText error id="helper-text-enName-signup">
                                            {errors.enName}
                                            </FormHelperText>
                                        )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.chName && errors.chName)}
                                        id="chName-signup"
                                        type="text"
                                        {...register("chName")}
                                        value={values.chName}
                                        name="chName"
                                        onChange={handleChange}
                                        placeholder="與你的身份證明文件相同"
                                        inputProps={{}}
                                    />
                                    {touched.chName && errors.chName && (
                                        <FormHelperText error id="helper-text-chName-signup">
                                        {errors.chName}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="address1-signup">地址
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address1 && errors.address1)}
                                        id="address1-signup"
                                        value={values.address1}
                                        name="address1"
                                        {...register("address1")}
                                        onChange={handleChange}
                                        placeholder="第一行"
                                        inputProps={{}}
                                    />
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address2 && errors.address2)}
                                        id="address2-signup"
                                        value={values.address2}
                                        name="address2"
                                        {...register("address2")}
                                        onChange={handleChange}
                                        placeholder="第二行"
                                        inputProps={{}}
                                    />
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address3 && errors.address3)}
                                        id="address3-signup"
                                        value={values.address3}
                                        name="address3"
                                        {...register("address3")}
                                        onChange={handleChange}
                                        placeholder="第三行"
                                        inputProps={{}}
                                    />
                                    <Select
                                        name ="address4"
                                        multiple
                                        displayEmpty
                                        value={""}
                                        onChange={handleChange}
                                        input={<OutlinedInput />}
                                        {...register("address4")}
                                        renderValue={(selected) => {
                                        if (selected.length === 0) {
                                            return "區域 (只適用於香港)";
                                        }

                                        return selected.join(', ');
                                        }}
                                        // MenuProps={MenuProps}
                                        inputProps={{ 'aria-label': 'Without label' }}
                                    >
                                    </Select>
                                    <Select
                                        name = "address5"
                                        multiple
                                        displayEmpty
                                        value={""}
                                        onChange={handleChange}
                                        input={<OutlinedInput />}
                                        {...register("address5")}
                                        renderValue={(selected) => {
                                        if (selected.length === 0) {
                                            return "國家/地區";
                                        }

                                        return selected.join(', ');
                                        }}
                                        // MenuProps={MenuProps}
                                        inputProps={{ 'aria-label': 'Without label' }}
                                    >
                                    </Select>
                                    {touched.address1 && errors.address1 && (
                                        <FormHelperText error id="helper-text-address1-signup">
                                        {errors.address1}
                                        </FormHelperText>
                                    )}
                                    {touched.address2 && errors.address2 && (
                                        <FormHelperText error id="helper-text-address2-signup">
                                        {errors.address2}
                                        </FormHelperText>
                                    )}
                                    {touched.address3 && errors.address3 && (
                                        <FormHelperText error id="helper-text-address3-signup">
                                        {errors.address3}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </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>          
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="email-signup">電郵
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.email && errors.email)}
                                        id="email-login"
                                        type="email"
                                        value={values.email}
                                        name="email"
                                        {...register("email")}
                                        onChange={handleChange}
                                        placeholder="電郵"
                                        inputProps={{}}
                                    />
                                    {touched.email && errors.email && (
                                        <FormHelperText error id="helper-text-email-signup">
                                        {errors.email}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="emailConfirm-signup">確認電郵
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.emailConfirm && errors.emailConfirm)}
                                        id="emailConfirm-login"
                                        type="emailConfirm"
                                        value={values.emailConfirm}
                                        name="emailConfirm"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="確認電郵"
                                        inputProps={{}}
                                    />
                                    {touched.emailConfirm && errors.emailConfirm && (
                                        <FormHelperText error id="helper-text-emailConfirm-signup">
                                        {errors.emailConfirm}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="phone-signup">聯絡電話
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.phone && errors.phone)}
                                        id="phone-login"
                                        type="phone"
                                        value={values.phone}
                                        name="phone"
                                        {...register("phone")}
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="聯絡電話"
                                        inputProps={{}}
                                    />
                                    {touched.phone && errors.phone && (
                                        <FormHelperText error id="helper-text-phone-signup">
                                        {errors.phone}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="fax-signup">傳真號碼</InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        id="fax-login"
                                        type="fax"
                                        value={values.fax}
                                        name="fax"
                                        {...register("fax")}
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="傳真號碼"
                                        inputProps={{}}
                                    />
                                    </Stack>
                                </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="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>
                                        <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}>
                                        <Button variant="contained" type="submit"   sx={{ fontSize: 12,height:'25px'}}>Submit</Button>
                                    </Stack>
                                    </Stack>
                                </Grid>
                                {/* <Grid item xs={12}>
                                    <Typography variant="body2">
                                    By Signing up, you agree to our &nbsp;
                                    <Link variant="subtitle2" component={RouterLink} to="#">
                                        Terms of Service
                                    </Link>
                                    &nbsp; and &nbsp;
                                    <Link variant="subtitle2" component={RouterLink} to="#">
                                        Privacy Policy
                                    </Link>
                                    </Typography>
                                </Grid> */}
                                {errors.submit && (
                                    <Grid item xs={12}>
                                    <FormHelperText error>{errors.submit}</FormHelperText>
                                    </Grid>
                                )}
                                </Grid>
                            </Grid>
                        </Grid>
                    </FormGroup>
                    <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
                        <Grid container spacing={3}>
                            <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>          
                                </div>
                                <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
                                <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
                                {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                Already have an account?
                                </Typography> */}
                            </Stack>
                            </Grid>
                            <Grid item xs={12}>
                                <Grid container spacing={1}>
                                <Grid item xs={12} >
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="username-signup">用戶登入名稱
                                    <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        id="username-login"
                                        type="username"
                                        value={values.username}
                                        name="username"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="用戶登入名稱"
                                        fullWidth
                                        error={Boolean(touched.username && errors.username)}
                                    />
                                    {touched.username && errors.username && (
                                        <FormHelperText error id="helper-text-username-signup">
                                        {errors.username}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <Stack direction="row" justifyContent="space-between">
                                        <InputLabel htmlFor="password-signup">密碼
                                        <span style={{color: '#f10000'}}>*</span>
                                        </InputLabel>
                                        <InputLabel htmlFor="password-rule">密碼規則</InputLabel>
                                    </Stack>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.password && errors.password)}
                                        id="password-signup"
                                        type={showPassword ? 'text' : 'password'}
                                        value={values.password}
                                        name="password"
                                        onBlur={handleBlur}
                                        onChange={(e) => {
                                        handleChange(e);
                                        changePassword(e.target.value);
                                        }}
                                        endAdornment={
                                        <InputAdornment position="end">
                                            <IconButton
                                            aria-label="toggle password visibility"
                                            onClick={handleClickShowPassword}
                                            onMouseDown={handleMouseDownPassword}
                                            edge="end"
                                            size="large"
                                            >
                                            {showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                            </IconButton>
                                        </InputAdornment>
                                        }
                                        placeholder="密碼"
                                        inputProps={{}}
                                    />
                                    {touched.password && errors.password && (
                                        <FormHelperText error id="helper-text-password-signup">
                                        {errors.password}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                    <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" fontSize="0.75rem">
                                            {level?.label}
                                        </Typography>
                                        </Grid>
                                    </Grid>
                                    </FormControl>
                                </Grid>
                                <Grid item xs={12} md={6} >
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="confirmPassword-signup">確認密碼
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        id="confirmPassword-login"
                                        type={showConfirmPassword ? 'text' : 'password'}
                                        value={values.confirmPassword}
                                        name="confirmPassword"
                                        onBlur={handleBlur}
                                        onChange={(e) => {
                                        handleChange(e);
                                        changePassword(e.target.value);
                                        }}
                                        endAdornment={
                                        <InputAdornment position="end">
                                        <IconButton
                                            aria-label="toggle password visibility"
                                            onClick={handleClickShowConfirmPassword}
                                            onMouseDown={handleMouseDownPassword}
                                            edge="end"
                                            size="large"
                                        >
                                            {showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                        </IconButton>
                                        </InputAdornment>
                                        }
                                        placeholder="確認密碼"
                                        fullWidth
                                        error={Boolean(touched.confirmPassword && errors.confirmPassword)}
                                    />
                                    {touched.confirmPassword && errors.confirmPassword && (
                                        <FormHelperText error id="helper-text-confirmPassword-signup">
                                        {errors.confirmPassword}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </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 component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
                                        Already have an account?
                                    </Typography> */}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="enName-signup">英文姓名
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        id="enName-login"
                                        type="enName"
                                        value={values.enName}
                                        name="enName"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="與你的身份證明文件相同"
                                        fullWidth
                                        error={Boolean(touched.enName && errors.enName)}
                                    />
                                    {touched.enName && errors.enName && (
                                        <FormHelperText error id="helper-text-enName-signup">
                                        {errors.enName}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.chName && errors.chName)}
                                        id="chName-signup"
                                        type="text"
                                        value={values.chName}
                                        name="chName"
                                        onChange={handleChange}
                                        placeholder="與你的身份證明文件相同"
                                        inputProps={{}}
                                    />
                                    {touched.chName && errors.chName && (
                                        <FormHelperText error id="helper-text-chName-signup">
                                        {errors.chName}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="address1-signup">地址
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address1 && errors.address1)}
                                        id="address1-signup"
                                        value={values.address1}
                                        name="address1"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="第一行"
                                        inputProps={{}}
                                    />
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address2 && errors.address2)}
                                        id="address2-signup"
                                        value={values.address2}
                                        name="address2"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="第二行"
                                        inputProps={{}}
                                    />
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.address3 && errors.address3)}
                                        id="address3-signup"
                                        value={values.address3}
                                        name="address3"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="第三行"
                                        inputProps={{}}
                                    />
                                    <Select
                                        name ="adress4"
                                        multiple
                                        displayEmpty
                                        value={""}
                                        onChange={handleChange}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => {
                                        if (selected.length === 0) {
                                            return "區域 (只適用於香港)";
                                        }

                                        return selected.join(', ');
                                        }}
                                        // MenuProps={MenuProps}
                                        inputProps={{ 'aria-label': 'Without label' }}
                                    >
                                    </Select>
                                    <Select
                                        name = "adress5"
                                        multiple
                                        displayEmpty
                                        value={""}
                                        onChange={handleChange}
                                        input={<OutlinedInput />}
                                        renderValue={(selected) => {
                                        if (selected.length === 0) {
                                            return "國家/地區";
                                        }

                                        return selected.join(', ');
                                        }}
                                        // MenuProps={MenuProps}
                                        inputProps={{ 'aria-label': 'Without label' }}
                                    >
                                    </Select>
                                    {touched.address1 && errors.address1 && (
                                        <FormHelperText error id="helper-text-address1-signup">
                                        {errors.address1}
                                        </FormHelperText>
                                    )}
                                    {touched.address2 && errors.address2 && (
                                        <FormHelperText error id="helper-text-address2-signup">
                                        {errors.address2}
                                        </FormHelperText>
                                    )}
                                    {touched.address3 && errors.address3 && (
                                        <FormHelperText error id="helper-text-address3-signup">
                                        {errors.address3}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </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>          
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="email-signup">電郵
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.email && errors.email)}
                                        id="email-login"
                                        type="email"
                                        value={values.email}
                                        name="email"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="電郵"
                                        inputProps={{}}
                                    />
                                    {touched.email && errors.email && (
                                        <FormHelperText error id="helper-text-email-signup">
                                        {errors.email}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="emailConfirm-signup">確認電郵
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.emailConfirm && errors.emailConfirm)}
                                        id="emailConfirm-login"
                                        type="email"
                                        value={values.emailConfirm}
                                        name="emailConfirm"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="確認電郵"
                                        inputProps={{}}
                                    />
                                    {touched.emailConfirm && errors.emailConfirm && (
                                        <FormHelperText error id="helper-text-emailConfirm-signup">
                                        {errors.emailConfirm}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="phone-signup">聯絡電話
                                        <span style={{color: '#f10000'}}>*</span>
                                    </InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        error={Boolean(touched.phone && errors.phone)}
                                        id="phone-login"
                                        type="tel"
                                        value={values.phone}
                                        name="phone"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="聯絡電話"
                                        inputProps={{}}
                                    />
                                    {touched.phone && errors.phone && (
                                        <FormHelperText error id="helper-text-phone-signup">
                                        {errors.phone}
                                        </FormHelperText>
                                    )}
                                    </Stack>
                                </Grid>
                                <Grid item xs={12} md={6}>
                                    <Stack spacing={1}>
                                    <InputLabel htmlFor="fax-signup">傳真號碼</InputLabel>
                                    <OutlinedInput
                                        fullWidth
                                        id="fax-login"
                                        type="tel"
                                        value={values.fax}
                                        name="fax"
                                        onBlur={handleBlur}
                                        onChange={handleChange}
                                        placeholder="聯絡電話"
                                        inputProps={{}}
                                    />
                                    </Stack>
                                </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="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>
                                        <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>          
                                    </Stack>
                                    </Stack>
                                </Grid>
                                {/* <Grid item xs={12}>
                                    <Typography variant="body2">
                                    By Signing up, you agree to our &nbsp;
                                    <Link variant="subtitle2" component={RouterLink} to="#">
                                        Terms of Service
                                    </Link>
                                    &nbsp; and &nbsp;
                                    <Link variant="subtitle2" component={RouterLink} to="#">
                                        Privacy Policy
                                    </Link>
                                    </Typography>
                                </Grid> */}
                                {errors.submit && (
                                    <Grid item xs={12}>
                                    <FormHelperText error>{errors.submit}</FormHelperText>
                                    </Grid>
                                )}
                                </Grid>
                            </Grid>
                        </Grid>
                    </FormGroup>
                     
                </form>
            // </Paper>
            )}
        </Formik>
    );
}

export default CustomFormWizard;