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

update public form

master
jason.lam 1 年之前
父節點
24223c173c
當前提交
b361d34d55
共有 3 個檔案被更改，包括 60 行新增 和 54 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +52
    -52
      src/pages/authentication/auth-forms/CustomFormWizard.js
  2. +3
    -2
      src/themes/themeConst.js
  3. +5
    -0
      src/themes/typography.js

+ 52
- 52
src/pages/authentication/auth-forms/CustomFormWizard.js 查看文件

@@ -659,7 +659,7 @@ const CustomFormWizard = (props) => {
<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 } }}>
<Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="h5">重置</Typography></Button>
<Button variant="outlined" type="reset" onClick={handleReset.bind(null, formik.resetForm)} sx={{ height: '40px' }}><Typography variant="pnspsFormHeader">重置</Typography></Button>
<div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399' }}>成為新的個人用戶</Typography>
</div>
@@ -672,7 +672,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12} >
<Stack spacing={1}>
<InputLabel htmlFor="username-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
用戶登入名稱
{/* <span style={{ color: '#f10000' }}>*</span>
<Button
@@ -723,7 +723,7 @@ const CustomFormWizard = (props) => {
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<Stack direction="row" justifyContent="space-between">
<InputLabel htmlFor="password-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
密碼
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -769,7 +769,7 @@ const CustomFormWizard = (props) => {
</FormHelperText>
)}
</Stack>
<FormControl fullWidth sx={{ mt: 2 }}>
<FormControl fullWidth sx={{ mt: 1 }}>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
@@ -785,7 +785,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6} >
<Stack spacing={1}>
<InputLabel htmlFor="confirmPassword-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
確認密碼
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -831,9 +831,8 @@ const CustomFormWizard = (props) => {
)}
</Stack>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Grid item sx={{mt:1}}>
<Typography variant="subtitle1">
<br />
•至少8個字元，字元越多越好 <br />
•字母和數字的混合<br />
•英文字母大寫與小寫的混合<br />
@@ -856,7 +855,7 @@ const CustomFormWizard = (props) => {
<Grid container sx={{ mb: 1 }}>
<Stack spacing={1}>
<InputLabel htmlFor="idDocType-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
身份證明文件
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -876,23 +875,24 @@ const CustomFormWizard = (props) => {
disablePortal
id="idDocType"
//value={selectedIdDocType}
size="small"
options={idDocTypeComboList}
// getOptionLabel={(idDocTypeComboList) => idDocTypeComboList.label}
onBlur={formik.handleBlur}
filterOptions={(options) => options}
inputValue={selectedIdDocInputType}
onChange={(event, newValue) => {
if (newValue != null && newValue != {}) {
if (newValue != null && newValue !== {}) {
setSelectedIdDocInputType(newValue.label);
setSelectedIdDocType(newValue);
if (newValue.type != "HKID") {
if (newValue.type !== "HKID") {
formik.setFieldValue("checkDigit", "")
}
} else {
setSelectedIdDocInputType("");
}
}}
sx={{ "& .MuiInputBase-root": { height: "41px" }, "#idDocType": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
sx={{ "& .MuiInputBase-root": { minHeight: "46px", maxHeight: "46px" }, /*"#idDocType": { padding: "0px 0px 0px 0px" },*/ "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="證件類別" />}
/>
{formik.touched.idDocType && (
@@ -932,7 +932,7 @@ const CustomFormWizard = (props) => {
error={Boolean(formik.touched.idNo && formik.errors.idNo)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: selectedIdDocType.type == 'HKID' ? 8 : 18,
maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
onKeyDown: (e) => {
console.log(e)
if (e.key === 'Enter') {
@@ -1026,7 +1026,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="enName-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
英文姓名
{selectedIdDocType.type === "CNID" ? "" : <span style={{ color: '#f10000' }}>*</span>}
</Typography>
@@ -1059,7 +1059,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="chName-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
中文姓名
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -1093,7 +1093,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="address1-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
地址
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -1156,7 +1156,7 @@ const CustomFormWizard = (props) => {
onChange={(event, newValue) => {
setSelectedAddress4(newValue);
}}
sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
sx={{ "& .MuiInputBase-root": { height: "48px" }, "#address4-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="區域 (只適用於香港)" />}
/>
<Autocomplete
@@ -1167,7 +1167,7 @@ const CustomFormWizard = (props) => {
onChange={(event, newValue) => {
if (newValue !== null) {
setSelectedAddress5(newValue);
if (newValue == '香港') {
if (newValue === '香港') {
setCheckCountry(false)
} else {
setSelectedAddress4("");
@@ -1179,7 +1179,7 @@ const CustomFormWizard = (props) => {
}
}}

sx={{ "& .MuiInputBase-root": { height: "41px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
sx={{ "& .MuiInputBase-root": { height: "48px" }, "#address5-combo": { padding: "0px 0px 0px 0px" }, "& .MuiAutocomplete-endAdornment": { top: "auto" }, }}
renderInput={(params) => <TextField {...params} placeholder="國家/地區" />}
/>
{formik.touched.address1 && formik.errors.address1 && (
@@ -1209,7 +1209,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="email-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
電郵
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -1247,7 +1247,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={6}>
<Stack spacing={1} >
<InputLabel htmlFor="emailConfirm-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
確認電郵
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -1287,7 +1287,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}>
<Stack direction="column" spacing={1} sx={{ mr: { md: 1 }, mb: 1 }}>
<InputLabel htmlFor="phone-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
聯絡電話
<span style={{ color: '#f10000' }}>*</span>
</Typography>
@@ -1362,7 +1362,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="column">
<InputLabel htmlFor="fax-signup">
<Typography variant="h5">
<Typography variant="pnspsFormHeader">
傳真號碼
</Typography>
</InputLabel>
@@ -1471,7 +1471,7 @@ const CustomFormWizard = (props) => {
<Grid item xs={12} md={12}>
<Grid container>
<Grid item xs={12} md={12}>
<Typography variant="h5" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
<Typography variant="pnspsFormHeader" height="80%" sx={{ textAlign: "left", overflow: "scroll", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
{termsAndCon}
</Typography>
</Grid>
@@ -1488,7 +1488,7 @@ const CustomFormWizard = (props) => {
color="primary"
size="small"
/>
<Typography variant="h5">我接受</Typography>
<Typography variant="pnspsFormHeader">我接受</Typography>
</Grid>
</Grid>
</Grid>
@@ -1502,7 +1502,7 @@ const CustomFormWizard = (props) => {
color="primary"
size="small"
/>
<Typography variant="h5">我不接受</Typography>
<Typography variant="pnspsFormHeader">我不接受</Typography>
</Grid>
</Grid>
</Grid>
@@ -1575,10 +1575,10 @@ const CustomFormWizard = (props) => {
<Grid container spacing={2}>
<Grid item xs={12} >
<Stack spacing={2} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
用戶登入名稱:
</Typography>
<Typography variant="h5" id="preview-username-login">
<Typography variant="pnspsFormHeader" id="preview-username-login">
{formik.values.username}
</Typography>
</Stack>
@@ -1593,7 +1593,7 @@ const CustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
身份證明文件
</Typography>
</Stack>
@@ -1601,20 +1601,20 @@ const CustomFormWizard = (props) => {

<Grid item xs={12} md={6} >
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
證件類別:
</Typography>
<Typography variant="h5" name="preview-idDocType">
<Typography variant="pnspsFormHeader" name="preview-idDocType">
{selectedIdDocType.label}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
證件號碼:
</Typography>
<Typography variant="h5" id="idNo-login">
<Typography variant="pnspsFormHeader" id="idNo-login">
{formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
</Typography>
</Stack>
@@ -1622,56 +1622,56 @@ const CustomFormWizard = (props) => {

<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
英文姓名:
</Typography>
<Typography variant="h5" id="preview-enName-signup">
<Typography variant="pnspsFormHeader" id="preview-enName-signup">
{formik.values.enName}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
中文姓名:
</Typography>
<Typography variant="h5" id="preview-chName-signup">
<Typography variant="pnspsFormHeader" id="preview-chName-signup">
{formik.values.chName}
</Typography>
</Stack>
</Grid>
<Grid item xs={12}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
地址:
</Typography>
<Stack spacing={1} direction="column">
<Typography variant="h5" id="preview-address1-signup">
<Typography variant="pnspsFormHeader" id="preview-address1-signup">
{formik.values.address1}
</Typography>
{formik.values.address2 != null ?
<Typography variant="h5" id="preview-address2-signup">
<Typography variant="pnspsFormHeader" id="preview-address2-signup">
{formik.values.address2}
</Typography>
: null}
{formik.values.address3 != null ?
<Typography variant="h5" id="preview-address3-signup">
<Typography variant="pnspsFormHeader" id="preview-address3-signup">
{formik.values.address3}
</Typography>
: null}
{selectedAddress5 == ("香港") ?
<Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} id="preview-address4-signup">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address4-signup">
區域 (只適用於香港):
</Typography>
<Typography variant="h5">{selectedAddress4}</Typography>
<Typography variant="pnspsFormHeader">{selectedAddress4}</Typography>
</Stack>
: null}
<Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} id="preview-address5-signup">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} id="preview-address5-signup">
國家/地區:
</Typography>
<Typography variant="h5">{selectedAddress5}</Typography>
<Typography variant="pnspsFormHeader">{selectedAddress5}</Typography>
</Stack>
</Stack>
</Stack>
@@ -1683,20 +1683,20 @@ const CustomFormWizard = (props) => {
</Grid>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
電郵:
</Typography>
<Typography variant="h5" id="preview-email-signup">
<Typography variant="pnspsFormHeader" id="preview-email-signup">
{formik.values.email}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
聯絡電話:
</Typography>
<Typography variant="h5" id="preview-phone-signup">
<Typography variant="pnspsFormHeader" id="preview-phone-signup">
+{formik.values.phoneCountryCode} {formik.values.phone}
</Typography>
</Stack>
@@ -1704,10 +1704,10 @@ const CustomFormWizard = (props) => {
{formik.values.faxCountryCode != "" && formik.values.fax != "" ?
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="h5" color={theme.palette.grey[600]}>
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
傳真號碼:
</Typography>
<Typography variant="h5" id="preview-fax-signup">
<Typography variant="pnspsFormHeader" id="preview-fax-signup">
+{formik.values.faxCountryCode} {formik.values.fax}
</Typography>
</Stack>
@@ -1740,7 +1740,7 @@ const CustomFormWizard = (props) => {
<CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
<Typography display="inline" variant="h4">帳戶申請已成功提交。</Typography>
<Typography display="inline" variant="h4">驗證電郵將發送到你的電郵地址，請依指示完成驗證及登入系統。</Typography>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
<Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack>
:
// ERROR page
@@ -1748,7 +1748,7 @@ const CustomFormWizard = (props) => {
{/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
<CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
<Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">返回登入頁面</Typography></Button>
<Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">返回登入頁面</Typography></Button>
</Stack>
}
</Grid>


+ 3
- 2
src/themes/themeConst.js 查看文件

@@ -109,7 +109,7 @@ export const PNSPS_THEME = createTheme({
styleOverrides: {
root: {
color: 'rgba(0, 0, 0, 0.8)',
fontSize: '1rem',
fontSize: '1.15rem',
},
},
},
@@ -178,7 +178,7 @@ export const PNSPS_THEME = createTheme({
MuiOutlinedInput: {
styleOverrides: {
input: {
//padding: '10.5px 14px 10.5px 12px',
padding: '10.5px 14px 10.5px 12px',
'&.MuiOutlinedInput-input.Mui-disabled': {
WebkitTextFillColor: '#888888',
},
@@ -226,6 +226,7 @@ export const PNSPS_THEME = createTheme({
fontSize: FONT_SIZE,
display: 'flex',
alignItems: 'center',
color: 'rgba(0, 0, 0, 0.85)'
},
'& .MuiInputBase-root': {
//height: '40px',


+ 5
- 0
src/themes/typography.js 查看文件

@@ -12,6 +12,11 @@ const Typography = (fontFamily) => ({
fontSize: '1.175rem',
lineHeight: 1.4
},
pnspsFormHeader: {
fontWeight: 600,
fontSize: '1.2rem',
lineHeight: 1.4
},
pnspsHeaderTitle: {
fontSize: '1.15rem',
fontWeight: 600,


Write Preview
Loading…
取消
儲存