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

// material-ui
import {
  Dialog, DialogTitle, DialogContent,
  Link, Button, Card, Box, Grid
} from '@mui/material';
import Typography from '@mui/material/Typography';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import banner from 'assets/images/bg_ml.jpg';
import { Stack } from '../../../node_modules/@mui/material/index';
import { iAmSmartPath, clientId, getBowserType , iAmSmartCallbackPath} from 'auth/utils'

import * as React from 'react';

// ================================|| LOGIN ||================================ //

const RegisterCustom = () => {

  const [isPopUp, setIsPopUp] = React.useState(false);


  const registerWithIAmSmart = () => {
    setIsPopUp(true);
  }

  const getQRWithIAmSmart = () => {
    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
    let url = iAmSmartPath + "/api/v1/auth/getQR"
      + "?clientID=" + clientId
      + "&responseType=code"
      +"&source=" + getBowserType()
      +"&redirectURI="+encodeURIComponent(callbackUrl)
      +"&scope="+encodeURIComponent("eidapi_auth eidapi_profiles")
      +"&lang=zh-HK"//en-US, zh-HK, or zh-CN
      //+"&state="
      +"&brokerPage=false"
    window.location.assign(url);
  }


  return (
    <Stack justifyContent="center" sx={{ minHeight: '100vh', bgcolor: 'backgroundColor.default' }}>
      <img src={banner} alt="banner" width="100%" height="200px" />
      <center>
        <Card
          sx={{
            maxWidth: { xs: 1, lg: 1000 },
            margin: { xs: 2.5, md: 3 },
            '& > *': {
              flexGrow: 1,
              flexBasis: '50%'
            },
            backgroundColor: "secondary"
          }}

        >
          <Box alignItems="center">
            <Grid container>
              <Grid item xs={12} md={12}>
                <Typography mt={4} variant="h2">立即成為<strong style={{ color: '#FF5733' }}>憲報刊登公告</strong>用戶</Typography>
                <Typography variant="body1">只需4-5分鐘</Typography>
              </Grid>
            </Grid>
            <Box mt={3} mb={3}>
              <Grid container >
                <Grid item xs={12} md={6} sx={{ borderRight: 1, borderColor: 'grey.500' }}>
                  <Typography mb={4} variant="h3">個人用戶</Typography>
                  <Button variant="outlined" onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">以「智方便」繼續</Typography></Button>

                  <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                    <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
                      你可點擊「智方便」按鈕，系統會自動輸入個人資料，或自行輸入個人資料，以即時啟動憲報刊登公告帳戶。
                      <br />如欲使用「智方便」提供個人資料，請先下載「智方便」流動應用程式並登記成為「智方便」用戶。
                    </Typography>
                    <Link href="https://www.iamsmart.gov.hk/tc/">了解更多</Link>
                  </Box>

                  <Typography m={5}>或</Typography>

                  <Button href="/registerFrom" variant="contained"><Typography variant="h5">申請個人用戶</Typography></Button>

                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    需上載身份證明文件數碼檔案以進行網上申請。
                    <br />如：香港身份證; 護照; 中國內地身份證; 專業執業証書等
                  </Typography>
                </Grid>
                <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
                  <Typography mb={4} variant="h3">機構／公司用戶</Typography>
                  <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">申請機構／公司用戶</Typography></Button>
                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                    需上載以下任何一份證明文件以進行網上申請。
                    <br />如：商業登記證；專業執業證書
                  </Typography>
                </Grid>
              </Grid>
            </Box>
          </Box>
        </Card >
      </center>
      <Dialog open={isPopUp} onClose={() => setIsPopUp(false)}  >
        <DialogTitle></DialogTitle>
        <DialogContent>
          <Typography variant="h3" >
            授權「智方便」提供個人資料
          </Typography>
          <Typography variant="h5" style={{ padding: '4px' }}>
            為完成開戶並建立與「智方便」的連接，請授權「智方便」提供以下個人資料：
          </Typography>
        </DialogContent>
        <DialogContent >
          <Grid container style={{ paddingLeft: '16px' }}>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                - 中文姓名
              </Typography>
              <Typography style={{ padding: '4px' }}>
                - 英文姓名
              </Typography>
              <Typography style={{ padding: '4px' }}>
                - 身份證號碼
              </Typography>
            </Grid>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                - 電郵地址
              </Typography>
              <Typography style={{ padding: '4px' }}>
                - 手機號碼
              </Typography>
              <Typography style={{ padding: '4px' }}>
                - 住宅地址
              </Typography>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogContent align="right">
          <Button variant="outlined" onClick={getQRWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">使用「智方便」自動填表</Typography></Button>
          <br />
          <Link href="https://www.iamsmart.gov.hk/tc/">了解更多</Link>
        </DialogContent>
      </Dialog>
    </Stack>
  );

};

export default RegisterCustom;