From a7518f504c8bbfe18e706f3160955692f5406d41 Mon Sep 17 00:00:00 2001 From: anna Date: Tue, 14 Nov 2023 17:09:04 +0800 Subject: [PATCH] add authcallback --- src/auth/utils.js | 4 +- src/pages/authentication/RegisterCustom.js | 3 +- src/pages/iAmSmart/AuthCallback/index.js | 176 +++++++++++++++++++++ src/routes/LoginRoutes.js | 5 + 4 files changed, 185 insertions(+), 3 deletions(-) create mode 100644 src/pages/iAmSmart/AuthCallback/index.js diff --git a/src/auth/utils.js b/src/auth/utils.js index c37cbb6..5fa664e 100644 --- a/src/auth/utils.js +++ b/src/auth/utils.js @@ -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`; diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js index 47d5f3f..33f1558 100644 --- a/src/pages/authentication/RegisterCustom.js +++ b/src/pages/authentication/RegisterCustom.js @@ -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=" diff --git a/src/pages/iAmSmart/AuthCallback/index.js b/src/pages/iAmSmart/AuthCallback/index.js new file mode 100644 index 0000000..404fe2c --- /dev/null +++ b/src/pages/iAmSmart/AuthCallback/index.js @@ -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 {errorMsg} + } + + 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 ? + + : + + + +
+ + iAmSmart 登記 + +
+ + {/*row 1*/} + + + *': { + flexGrow: 1, + flexBasis: '50%' + }, + backgroundColor: "secondary", + p:8, + pl:16, + pr:16 + }} + > + + + +
+ 成為個人用戶 +
+ 註有*的項目必須輸入資料 + 用戶資料 + {/* + Already have an account? + */} + + + + + + + + + 用戶登入名稱 + * + + + { + 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 && ( + + {formik.errors.username} + + )} + {checkUsername && ( + + 此用戶登入名稱已被注冊，請使用其他用戶登入名稱 + + )} + + + + + + + + + + {/*row 2*/} + + + + ); +}; + +export default Index; \ No newline at end of file diff --git a/src/routes/LoginRoutes.js b/src/routes/LoginRoutes.js index 87f0fc9..3fc8167 100644 --- a/src/routes/LoginRoutes.js +++ b/src/routes/LoginRoutes.js @@ -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: }, + { + path: 'iamsmart/authcallback', + element: + }, { path: 'iamsmart/loginfailback', element: