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, isAppBowser, iAmSmartCallbackPath} from 'auth/utils'

import * as React from 'react';
import {FormattedMessage, useIntl} from "react-intl";

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

const RegisterCustom = () => {

  const [isPopUp, setIsPopUp] = React.useState(false);
  const intl = useIntl();
  const { locale } = intl;

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

  const getQRWithIAmSmart = () => {
    if ((isAppBowser())) {
      openApp();
    } else {
      openQR();
    }
  }

  const openQR =()=>{
    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="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
      //+"&state="
      +"&brokerPage=false"
    window.location.assign(url);
  }

  const openApp = () => {
    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="+(locale === 'en' ?"en-US":locale === 'zh-HK' ?"zh-HK":"zh-CN")
      //+"&state="
      +"&brokerPage=true"
    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="h3">
                  <FormattedMessage id="registerTitle1"/>
                  <strong style={{ color: '#FF5733' }}>
                    {" " + intl.formatMessage({id: 'registerTitle2'}) + " "}
                  </strong>
                  <FormattedMessage id="registerTitle3"/>
                </Typography>
                <Typography variant="body1">
                  {intl.formatMessage({id: 'registerSubTitle'})}
                </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">
                    <FormattedMessage id="personalUser"/>
                  </Typography>
                  <Button variant="outlined" color="iAmSmart" sx={{textTransform: 'none'}} onClick={registerWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
                    <Typography variant="h5">
                      <FormattedMessage id="continueWithIAmSmart"/>
                    </Typography>
                  </Button>

                  <Box mt={4} ml={2} mr={2} bgcolor="grey.100" p={1.5} >
                    <Typography textAlign='justify' variant="body1" display="block" gutterBottom>
                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerIAmSmart'}) }} />
                    </Typography>
                    <Link href="https://www.iamsmart.gov.hk/tc/">
                      <FormattedMessage id="learnMore"/>
                    </Link>
                  </Box>

                  <Typography m={5}>
                    <FormattedMessage id="or"/>
                  </Typography>

                  <Button href="/registerFrom" variant="contained"><Typography variant="h5">
                    <FormattedMessage id="registerNewPersonalUser"/>
                  </Typography></Button>

                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerPersonal'}) }} />
                  </Typography>
                </Grid>
                <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
                  <Typography mb={4} variant="h3">
                    <FormattedMessage id="businessUser"/>
                  </Typography>
                  <Button href="/registerFromOrganization" variant="contained" sx={{ mt: 0.5 }}><Typography variant="h5">
                    <FormattedMessage id="registerNewBusinessUser"/>
                  </Typography></Button>
                  <Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{ fontWeight: 'bold' }} gutterBottom>
                  <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({id: 'MSG.registerOrg'}) }} />
                  </Typography>
                </Grid>
              </Grid>
            </Box>
          </Box>
        </Card >
      </center>
      <Dialog
          open={isPopUp}
          onClose={() => setIsPopUp(false)}
          PaperProps={{
            sx: {
              minWidth: '40vw',
              maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
              maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
            }
          }}
      >
        <DialogTitle></DialogTitle>
        <DialogContent>
          <Typography variant="h3" >
            <FormattedMessage id="authorizeIAmSmartForInfo"/>
          </Typography>
          <Typography variant="h5" style={{ padding: '4px' }}>
            <FormattedMessage id="iAmSmartSubTitle"/>
          </Typography>
        </DialogContent>
        <DialogContent >
          <Grid container style={{ paddingLeft: '16px' }}>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userChineseName'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userEnglishName'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userIDNo'})}
              </Typography>
            </Grid>
            <Grid item xs={6} >
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userEmailAddress'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userPhoneNumber'})}
              </Typography>
              <Typography style={{ padding: '4px' }}>
                {"- " + intl.formatMessage({id: 'userAddress'})}
              </Typography>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogContent align="right">
          <Button variant="outlined" onClick={getQRWithIAmSmart} startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}><Typography variant="h5">
            <FormattedMessage id="iAmSmartAutoFillIn"/>
          </Typography></Button>
          <br/>
          <Link href="https://www.iamsmart.gov.hk/tc/">
            <FormattedMessage id="learnMore"/>
          </Link>
        </DialogContent>
      </Dialog>
    </Stack>
  );

};

export default RegisterCustom;