alex
/
PNSPS-frontend-MaterialUI
1
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

add i am smart pop up

master
Anna Ho 2 年之前
父節點
3a1bf7c5ef
當前提交
cc41020739
共有 1 個檔案被更改，包括 116 行新增 和 55 行删除
統一視圖
Diff Options
Show Stats Download Patch File Download Diff File
  1. +116
    -55
      src/pages/authentication/RegisterCustom.js

+ 116
- 55
src/pages/authentication/RegisterCustom.js 查看文件

@@ -1,76 +1,137 @@




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


import * as React from 'react';

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


const RegisterCustom = () => (
<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" 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="#">了解更多</Link>
</Box>
const RegisterCustom = () => {

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



<Typography m={5}>或</Typography>
const registerWithIAmSmart = () => {
setIsPopUp(true);
}


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>


<Button href="/registerFrom" variant="contained"><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="#">了解更多</Link>
</Box>


<Typography ml={4} mr={4} mt={4} variant="body1" display="block" sx={{fontWeight: 'bold'}} gutterBottom>
需上載身份證明文件數碼檔案以進行網上申請。
<br/>如：香港身份證; 護照; 中國內地身份證; 專業執業証書等
<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>
<Typography style={{ padding: '4px' }}>
- 性別
</Typography> </Typography>
</Grid> </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/>如：商業登記證；專業執業證書
<Grid item xs={6} >
<Typography style={{ padding: '4px' }}>
- 中文姓名
</Typography>
<Typography style={{ padding: '4px' }}>
- 英文姓名
</Typography>
<Typography style={{ padding: '4px' }}>
- 身份證號碼
</Typography>
<Typography style={{ padding: '4px' }}>
- 性別
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
</Box>
</Box>
</Card >
</center>
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>OK</Button>
</DialogActions>
</Dialog>
</Stack>
);


);
};


export default RegisterCustom; export default RegisterCustom;

Write Preview
Loading…
取消
儲存