alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add authcallback

master
Anna Ho 1 year ago
parent
3da91d4232
commit
a7518f504c
4 changed files with 185 additions and 3 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      src/auth/utils.js
  2. +2
    -1
      src/pages/authentication/RegisterCustom.js
  3. +176
    -0
      src/pages/iAmSmart/AuthCallback/index.js
  4. +5
    -0
      src/routes/LoginRoutes.js

+ 2
- 2
src/auth/utils.js View File

@@ -10,8 +10,8 @@ export const hostname = 'localhost';
const hostPort = '8090';
export const hostPath = `http://${hostname}:${hostPort}`;
//export const apiPath = `http://192.168.0.112:8090/api`;
export const apiPath = `${hostPath}/api`;
// export const apiPath = `/api`;
//export const apiPath = `${hostPath}/api`;
export const apiPath = `/api`;
export const paymentPath = `http://pnspsdev.gld.gov.hk/payment`;

export const iAmSmartPath = `https://apigw-isit.staging-eid.gov.hk`;


+ 2
- 1
src/pages/authentication/RegisterCustom.js View File

@@ -25,11 +25,12 @@ const RegisterCustom = () => {
}

const getQRWithIAmSmart = () => {
let callbackUrl = "https://"+window.location.hostname+"/iamsmart/logincallback";
let url = iAmSmartPath + "/api/v1/auth/getQR"
+ "?clientID=" + clientId
+ "&responseType=code"
+"&source=" + getBowerType()
+"&redirectURI="
+"&redirectURI="+encodeURIComponent(callbackUrl)
+"&scope=eidapi_formFilling"
+"&lang=zh-HK"//en-US, zh-HK, or zh-CN
//+"&state="


+ 176
- 0
src/pages/iAmSmart/AuthCallback/index.js View File

@@ -0,0 +1,176 @@
// 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 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 [onReady, setOnReady] = React.useState(false);
const [checkUsername, setCheckUsername] = React.useState(false);
const [props, setProps] = React.useState({});

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

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;

+ 5
- 0
src/routes/LoginRoutes.js View File

@@ -13,6 +13,7 @@ const BusRegisterForm = Loadable(lazy(() => import('pages/authentication/BusRegi
const ErrorPage = Loadable(lazy(() => import('pages/extra-pages/ErrorPage')));
const IAmSmart_FailCallback = Loadable(lazy(() => import('pages/iAmSmart/FailCallback')));
const IAmSmart_SuccessCallback = Loadable(lazy(() => import('pages/iAmSmart/SuccessCallback')));
const IAmSmart_AuthCallback = Loadable(lazy(() => import('pages/iAmSmart/AuthCallback')));

//TODO: this page for testing only, please remove at prod
const TestMailPage = Loadable(lazy(() => import('pages/pnspsNotifyTest')));
@@ -48,6 +49,10 @@ const LoginRoutes = {
path: 'error',
element: <ErrorPage/>
},
{
path: 'iamsmart/authcallback',
element: <IAmSmart_AuthCallback/>
},
{
path: 'iamsmart/loginfailback',
element: <IAmSmart_FailCallback/>


Write Preview
Loading…
Cancel
Save