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

change menu bar with login status

master
Alex Cheung 2 years ago
parent
8f91d6480d
commit
bcd1d9e951
5 changed files with 179 additions and 269 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -1
      src/assets/style/styles.css
  2. +70
    -1
      src/layout/MainLayout/Header/index.js
  3. +6
    -5
      src/pages/authentication/AuthWrapperCustom.js
  4. +99
    -261
      src/pages/authentication/auth-forms/CustomFormWizard.js
  5. +0
    -1
      src/pages/pnspsUserSearchPage/UserSearchForm.js

+ 4
- 1
src/assets/style/styles.css View File

@@ -1,4 +1,7 @@
body{ body{
padding-top: 43px; padding-top: 43px;
font-family: 微軟正黑體; font-family: 微軟正黑體;
}
}
/* main{
padding-top: 43px;
} */

+ 70
- 1
src/layout/MainLayout/Header/index.js View File

@@ -36,6 +36,8 @@ import Logo from 'components/Logo';
import MobileLogo from 'components/MobileLogo'; import MobileLogo from 'components/MobileLogo';
import Profile from './HeaderContent/Profile'; import Profile from './HeaderContent/Profile';
import "assets/style/navbarStyles.css"; import "assets/style/navbarStyles.css";
import {isUserLoggedIn} from "utils/Utils";

// assets // assets
// import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons'; // import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons';
// import { AppBar } from '../../../../node_modules/@mui/material/index'; // import { AppBar } from '../../../../node_modules/@mui/material/index';
@@ -68,12 +70,79 @@ function Header(props) {
</li> </li>
</ul> </ul>
<Divider /> <Divider />
{}
<Profile /> <Profile />
</Box> </Box>
); );


const container = window !== undefined ? () => window().document.body : undefined; const container = window !== undefined ? () => window().document.body : undefined;
return ( return (
isUserLoggedIn() ?
<Box>
<AppBar component="nav">
<Toolbar id ="nav" width="100%">
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={0}
>
<Box sx={{flexGrow: 1,display: { xs: 'none', sm: 'block' } }}>
<Logo/>
<span id="systemTitle" >公共啟事提交及繳費系統</span>
</Box>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon style={{ color: '#0C489E' }} />
</IconButton>
<Box sx={{mr: 2, display: { sm: 'none' } }}>
<MobileLogo/>
<span id="mobileTitle" >公共啟事提交及繳費系統</span>
</Box>
</Stack>
<Box sx={{display: { xs: 'none', sm: 'block' } ,width:"75%"}}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
spacing={1}
>
<ul id="navbar" width="100%" >
<li>
<Link className="usersetting" to='/usersetting'>User</Link>
</li>
<li>
<Link className="usergroupSearchview" to='/usergroupSearchview'>User Group</Link>
</li>
</ul>
<Profile />
</Stack>
</Box>
</Toolbar>
</AppBar>
<Box component="nav">
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</Box>
</Box>:
<Box> <Box>
<AppBar component="nav"> <AppBar component="nav">
<Toolbar id ="nav" width="100%"> <Toolbar id ="nav" width="100%">
@@ -116,7 +185,7 @@ function Header(props) {
<Link className="register" to='/register'>申請</Link> <Link className="register" to='/register'>申請</Link>
</li> </li>
</ul> </ul>
<Profile />
{/* <Profile /> */}
</Stack> </Stack>
</Box> </Box>
</Toolbar> </Toolbar>


+ 6
- 5
src/pages/authentication/AuthWrapperCustom.js View File

@@ -14,14 +14,15 @@ import AuthBackground from 'assets/images/auth/AuthBackground';
// ==============================|| AUTHENTICATION - WRAPPER ||============================== // // ==============================|| AUTHENTICATION - WRAPPER ||============================== //


const AuthWrapperCustom = ({ children }) => ( const AuthWrapperCustom = ({ children }) => (
<Box sx={{ minHeight: '100vh' }}>
<Box sx={{ minHeight: '80vh' }}>
<AuthBackground /> <AuthBackground />
<Grid <Grid
container container
direction="column" direction="column"
justifyContent="flex-end"
justifyContent="center"
alignItems="flex-start"
sx={{ sx={{
minHeight: '100vh'
minHeight: '80vh'
}} }}
> >
{/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}> {/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
@@ -33,8 +34,8 @@ const AuthWrapperCustom = ({ children }) => (
xs={12} xs={12}
container container
justifyContent="center" justifyContent="center"
alignItems="center"
sx={{ minHeight: { xs: 'calc(100vh - 134px)', md: 'calc(100vh - 112px)' }}}
alignItems="flex-start"
sx={{ minHeight: { xs: 'calc(80vh - 134px)', md: 'calc(80vh - 112px)' }}}
> >
<Grid item> <Grid item>
<AuthCard>{children}</AuthCard> <AuthCard>{children}</AuthCard>


+ 99
- 261
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -149,8 +149,8 @@ const CustomFormWizard = (props) => {
address2: Yup.string().max(255).required('請輸入第二行地址'), address2: Yup.string().max(255).required('請輸入第二行地址'),
address3: Yup.string().max(255).required('請輸入第三行地址'), address3: Yup.string().max(255).required('請輸入第三行地址'),
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'), email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
idNo: Yup.string().max(255).required('請輸入身證件號碼'),
checkDigit:Yup.string().max(1).required('請輸入身證件號碼'),
idNo: Yup.string().max(255).required('請輸入證件號碼'),
checkDigit:Yup.string().max(1).required('請輸入證件號碼'),
idType: Yup.string().max(255).required('請輸入第三行地址'), idType: Yup.string().max(255).required('請輸入第三行地址'),
})} })}
> >
@@ -774,7 +774,7 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>
@@ -811,13 +811,13 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
</FormGroup> </FormGroup>
<FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}> <FormGroup id={"previewForm"} sx={{ display: props.step === 1 ? "" : "none"}}>
<Grid container spacing={3}>
<Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <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"}}> <div style={{borderBottom: "3px solid #1A4399", width:"100%", margin_right: "15px"}}>
<Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography> <Typography display="inline" variant="h3" sx={{ color: '#1A4399'}}>成為新的個人用戶</Typography>
</div> </div>
<Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography>
{/* <Typography mt={0.25} variant="h6" sx={{ fontSize: 12,color: '#f10000'}}>註有*的項目必須輸入資料</Typography> */}
<Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography> <Typography mt={0.25} variant="h4" sx={{ color: 'primary.primary'}}>你的登入資料</Typography>
{/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary"> {/* <Typography component={Link} to="/login" variant="body1" sx={{ textDecoration: 'none' }} color="primary">
Already have an account? Already have an account?
@@ -827,103 +827,15 @@ const CustomFormWizard = (props) => {
<Grid item xs={12}> <Grid item xs={12}>
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} > <Grid item xs={12} >
<Stack spacing={1}>
<InputLabel htmlFor="username-signup">用戶登入名稱
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
id="username-login"
type="username"
value={values.username}
name="username"
onBlur={handleBlur}
onChange={handleChange}
placeholder="用戶登入名稱"
fullWidth
readOnly
/>
<Stack spacing={1} direction="row">
<Typography>
用戶登入名稱:
</Typography>
<Typography id="preview-username-login">
{values.username}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12}>
<Grid container>
<Grid item xs={12} md={6} >
<Stack spacing={1} sx={{mr:{md:1},mb:1}}>
<Stack direction="row" justifyContent="space-between">
<InputLabel htmlFor="password-signup">密碼
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<InputLabel htmlFor="password-rule">密碼規則</InputLabel>
</Stack>
<OutlinedInput
fullWidth
id="preview-password-signup"
type={showPassword ? 'text' : 'password'}
value={values.password}
name="preview-password"
onChange={(e) => {
handleChange(e);
changePassword(e.target.value);
}}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
}
placeholder="密碼"
readOnly
/>
</Stack>
</Grid>
<Grid item xs={12} md={6} >
<Stack spacing={1}>
<InputLabel htmlFor="confirmPassword-signup">確認密碼
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
id="preview-confirmPassword-login"
type={showConfirmPassword ? 'text' : 'password'}
value={values.confirmPassword}
name="preview-confirmPassword"
onChange={(e) => {
handleChange(e);
changePassword(e.target.value);
}}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowConfirmPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
}
placeholder="確認密碼"
fullWidth
readOnly
/>
</Stack>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography> <Typography display="inline" variant="h4" sx={{ color: '#1A4399'}}>你的個人資料</Typography>
@@ -932,111 +844,77 @@ const CustomFormWizard = (props) => {
</Typography> */} </Typography> */}
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}>
<Grid item xs={12} md={12} >
<Stack spacing={1}> <Stack spacing={1}>
<InputLabel htmlFor="enName-signup">英文姓名
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
id="enName-login"
type="enName"
value={values.enName}
name="enName"
onBlur={handleBlur}
onChange={handleChange}
placeholder="與你的身份證明文件相同"
fullWidth
readOnly
/>
<Typography>
身份證明文件
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6} >
<Stack spacing={1} direction="row">
<Typography>
證件類別:
</Typography>
<Typography name = "preview-idDocType">
{values.idDocType}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="chName-signup">中文姓名</InputLabel>
<OutlinedInput
fullWidth
id="chName-signup"
type="text"
value={values.chName}
name="chName"
onChange={handleChange}
placeholder="與你的身份證明文件相同"
readOnly
/>
<Stack spacing={1} direction="row">
<Typography>
證件號碼:
</Typography>
<Typography id="idNo-login">
{values.idNo} ({values.checkDigit})
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
英文姓名:
</Typography>
<Typography id="preview-enName-signup">
{values.enName}
</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography>
中文姓名:
</Typography>
<Typography id="preview-chName-signup">
{values.chName}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Stack spacing={1}>
<InputLabel htmlFor="address1-signup">地址
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
fullWidth
id="address1-signup"
value={values.address1}
name="address1"
onBlur={handleBlur}
onChange={handleChange}
placeholder="第一行"
readOnly
/>
<OutlinedInput
fullWidth
id="address2-signup"
value={values.address2}
name="address2"
onBlur={handleBlur}
onChange={handleChange}
placeholder="第二行"
readOnly
/>
<OutlinedInput
fullWidth
id="address3-signup"
value={values.address3}
name="address3"
onBlur={handleBlur}
onChange={handleChange}
placeholder="第三行"
readOnly
/>
<Select
name ="adress4"
multiple
displayEmpty
value={""}
onChange={handleChange}
input={<OutlinedInput />}
readOnly
renderValue={(selected) => {
if (selected.length === 0) {
return "區域 (只適用於香港)";
}

return selected.join(', ');
}}
// MenuProps={MenuProps}
inputProps={{ 'aria-label': 'Without label' }}
>
</Select>
<Select
name = "adress5"
multiple
displayEmpty
value={""}
onChange={handleChange}
input={<OutlinedInput />}
readOnly
renderValue={(selected) => {
if (selected.length === 0) {
return "國家/地區";
}
return selected.join(', ');
}}
// MenuProps={MenuProps}
inputProps={{ 'aria-label': 'Without label' }}
>
</Select>
<Stack spacing={1} direction="row">
<Typography>
地址:
</Typography>
<Stack spacing={1} direction="column">
<Typography id="preview-address1-signup">
{values.address1}
</Typography>
<Typography id="preview-address2-signup">
{values.address2}
</Typography>
<Typography id="preview-address3-signup">
{values.address3}
</Typography>
<Typography id="preview-address4-signup">
{values.address4}
</Typography>
<Typography id="preview-address5-signup">
{values.address5}
</Typography>
</Stack>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
@@ -1044,78 +922,38 @@ const CustomFormWizard = (props) => {
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>你的聯絡資料</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="email-signup">電郵
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
fullWidth
id="email-login"
type="email"
value={values.email}
name="email"
onBlur={handleBlur}
onChange={handleChange}
placeholder="電郵"
readOnly
/>
</Stack>
</Grid>
<Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="emailConfirm-signup">確認電郵
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
fullWidth
id="emailConfirm-login"
type="email"
value={values.emailConfirm}
name="emailConfirm"
onBlur={handleBlur}
onChange={handleChange}
placeholder="確認電郵"
readOnly
/>
<Grid item xs={12} md={12}>
<Stack spacing={1} direction="row">
<Typography>
電郵:
</Typography>
<Typography id="preview-email-signup">
{values.email}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="phone-signup">聯絡電話
<span style={{color: '#f10000'}}>*</span>
</InputLabel>
<OutlinedInput
fullWidth
id="phone-login"
type="tel"
value={values.phone}
name="phone"
onBlur={handleBlur}
onChange={handleChange}
placeholder="聯絡電話"
readOnly
/>
<Stack spacing={1} direction="row">
<Typography>
聯絡電話:
</Typography>
<Typography id="preview-phone-signup">
+{values.phoneCountryCode} {values.phone}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1}>
<InputLabel htmlFor="fax-signup">傳真號碼</InputLabel>
<OutlinedInput
fullWidth
id="fax-login"
type="tel"
value={values.fax}
name="fax"
onBlur={handleBlur}
onChange={handleChange}
placeholder="聯絡電話"
readOnly
/>
<Stack spacing={1} direction="row">
<Typography>
傳真號碼:
</Typography>
<Typography id="preview-fax-signup">
+{values.faxCountryCode} {values.fax}
</Typography>
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} mt={1} mb={1}> <Grid item xs={12} mt={1} mb={1}>
<Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
<Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography> <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。</Typography>
<Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography> <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>


+ 0
- 1
src/pages/pnspsUserSearchPage/UserSearchForm.js View File

@@ -191,7 +191,6 @@ const UserSearchForm = ({applySearch}) => {


</Grid> </Grid>



{/*last row*/} {/*last row*/}
<Grid container maxWidth justifyContent="flex-end"> <Grid container maxWidth justifyContent="flex-end">




Write Preview
Loading…
Cancel
Save