PNSPS-frontend-MaterialUI/src/pages/iAmSmart/AuthCallback/index.js

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Card,
    FormHelperText,
    InputLabel, OutlinedInput,
} from '@mui/material';
import * as React from "react";
import { useFormik, FormikProvider } from 'formik';
import * as yup from 'yup';
import { useParams } from "react-router-dom";
//import { iAmSmartPath, clientId, getBowerType , iAmSmartCallbackPath} from 'auth/utils'

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {

    const params = useParams();
    const [onReady, setOnReady] = React.useState(false);
    const [checkUsername, setCheckUsername] = React.useState(false);
    const [props, setProps] = React.useState({});

    React.useEffect(() => {
        if(params.code){
            setOnReady(true);
            setProps({});
        }
    }, []);

    // function loadIAmSmartProfile(){

    // }

    function displayErrorMsg(errorMsg) {
        return <Typography variant="errorMessage1">{errorMsg}</Typography>
    }

    const formik = useFormik({
        initialValues: ({
            username: '',
            enName: '',
            email: '',
            address1: '',
            address2: '',
            address3: '',
            password: '',
            phone: '',
            phoneCountryCode: '852',
        }),

        validationSchema: yup.object().shape({
            username: yup.string().min(6, displayErrorMsg('用戶名稱最少6位')).required(displayErrorMsg('請輸入用戶名稱'))
                .matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg("用戶名稱不包含特殊字符") })
                .matches(/^\S*$/, { message: displayErrorMsg('用戶名稱不包含空格') }),
            enName: yup.string().max(255).required(displayErrorMsg('請輸入英文姓名')),
            chName: yup.string().max(255).required(displayErrorMsg('請輸入中文姓名')),
            address1: yup.string().max(255).required(displayErrorMsg('請輸入第一行地址')),
            address2: yup.string().max(255).required(displayErrorMsg('請輸入第二行地址')),
            address3: yup.string().max(255).required(displayErrorMsg('請輸入第三行地址')),
            email: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')),
            phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
            phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
        }, ['username']),

    });


    return (
        !onReady ?
            <LoadingComponent />
            :
            <FormikProvider value={formik}>
                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" style={{ backgroundColor: "#F2F2F2" }} >
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>iAmSmart 登記</Typography>
                            </Stack>
                        </div>
                    </Grid>
                    {/*row 1*/}
                    <Grid item xs={12} md={12}>
                        <Grid container justifyContent="flex-start" alignItems="center" >
                            <Card
                                sx={{
                                    maxWidth: { xs: 1, lg: 1000 },
                                    margin: { xs: 2.5, md: 3 },
                                    '& > *': {
                                        flexGrow: 1,
                                        flexBasis: '50%'
                                    },
                                    backgroundColor: "secondary",
                                    p:8,
                                    pl:16,
                                    pr:16
                                }}
                            >
                                    <Grid container spacing={3} >
                                        <Grid item xs={12} md={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={{ 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} md={12}>
                                            <Grid container spacing={1}>
                                                <Grid item xs={12} md={12} >
                                                    <Stack spacing={1}>
                                                        <InputLabel htmlFor="username-signup">
                                                            <Typography variant="h5">
                                                                用戶登入名稱
                                                                <span style={{ color: '#f10000' }}>*</span>
                                                            </Typography>
                                                        </InputLabel>
                                                        <OutlinedInput
                                                            id="username-login"
                                                            type="text"
                                                            value={formik.values.username.trim()}
                                                            name="username"
                                                            onChange={(e) => {
                                                                setCheckUsername(false)
                                                                props.username = e.target.value
                                                                formik.handleChange(e)
                                                            }}
                                                            placeholder="用戶登入名稱"
                                                            fullWidth
                                                            error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                                            onBlur={formik.handleBlur}
                                                            inputProps={{
                                                                onKeyDown: (e) => {
                                                                    if (e.key === 'Enter') {
                                                                        e.preventDefault();
                                                                    }
                                                                },
                                                            }}
                                                        />
                                                        {formik.touched.username && formik.errors.username && (
                                                            <FormHelperText error id="helper-text-username-signup">
                                                                {formik.errors.username}
                                                            </FormHelperText>
                                                        )}
                                                        {checkUsername && (
                                                            <FormHelperText error id="helper-text-username-signup">
                                                                此用戶登入名稱已被注冊，請使用其他用戶登入名稱
                                                            </FormHelperText>
                                                        )}
                                                    </Stack>
                                                </Grid>

                                            </Grid>
                                        </Grid>
                                    </Grid>
                            </Card>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >
            </FormikProvider>

    );
};

export default Index;