alex
/
PNSPS-frontend-MaterialUI
1
0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

fix button color and add forgot password page

master
Alex Cheung 1 рік тому
джерело
ab6f683834
коміт
1373618710
14 змінених файлів з 856 додано та 56 видалено
Об'єднаний перегляд
Параметри порівняння
Показати статистику Завантажити патч Завантажити файл різниці
  1. BIN
      build20240126.zip
  2. +1
    -2
      src/layout/MainLayout/Header/index.js
  3. +24
    -22
      src/pages/Organization/DetailPage/OrganizationCard.js
  4. +29
    -27
      src/pages/Organization/DetailPage/OrganizationPubCard.js
  5. +391
    -0
      src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js
  6. +86
    -0
      src/pages/authentication/ForgotPassword/AuthCallback/index.js
  7. +229
    -0
      src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
  8. +46
    -0
      src/pages/authentication/ForgotPassword/index.js
  9. +1
    -1
      src/pages/authentication/auth-forms/AuthLoginCustom.js
  10. +12
    -1
      src/routes/LoginRoutes.js
  11. +19
    -3
      src/themes/buttonConst.js
  12. +6
    -0
      src/translations/en.json
  13. +6
    -0
      src/translations/zh-CN.json
  14. +6
    -0
      src/translations/zh-HK.json

BIN
build20240126.zip Переглянути файл


+ 1
- 2
src/layout/MainLayout/Header/index.js Переглянути файл

@@ -263,8 +263,7 @@ function Header(props) {
<li> <li>
<Link className="manageUser" to={'/orgUser'}> <Link className="manageUser" to={'/orgUser'}>
<Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}> <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>
{/* <FormattedMessage id="companyOrUserRecord" /> */}
User Profile
<FormattedMessage id="userProfile" />
</Typography> </Typography>
</Link> </Link>
</li> </li>


+ 24
- 22
src/pages/Organization/DetailPage/OrganizationCard.js Переглянути файл

@@ -18,7 +18,7 @@ import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
import { notifySaveSuccess } from 'utils/CommonFunction'; import { notifySaveSuccess } from 'utils/CommonFunction';
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react"; import {ThemeProvider} from "@emotion/react";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -173,14 +173,15 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
{createMode ? {createMode ?
<> <>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
type="submit"
>
Create
</Button>
</Grid>
<Grid item sx={{ ml: 0, mr: 3 }}>
<Button
variant="contained"
type="submit"
color="success"
>
Create
</Button>
</Grid>
</ThemeProvider> </ThemeProvider>
</> : </> :
<> <>
@@ -211,12 +212,13 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
<> <>
<Grid item sx={{ ml: 0, mr: 3 }}> <Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onEditClick}
>
Edit
</Button>
<Button
variant="contained"
onClick={onEditClick}
color="success"
>
Edit
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>


@@ -236,13 +238,13 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
: :
<Grid item sx={{ ml: 3, mr: 3 }}> <Grid item sx={{ ml: 3, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="orange"
onClick={() => setCreditorConfirmPopUp(true)}
>
Mark as Creditor
</Button>
<Button
variant="contained"
color="orange"
onClick={() => setCreditorConfirmPopUp(true)}
>
Mark as Creditor
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
} }


+ 29
- 27
src/pages/Organization/DetailPage/OrganizationPubCard.js Переглянути файл

@@ -20,7 +20,7 @@ import Loadable from 'components/Loadable';
import { lazy } from 'react'; import { lazy } from 'react';
import { notifySaveSuccess } from 'utils/CommonFunction'; import { notifySaveSuccess } from 'utils/CommonFunction';
import {FormattedMessage, useIntl} from "react-intl"; import {FormattedMessage, useIntl} from "react-intl";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react"; import {ThemeProvider} from "@emotion/react";


// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -129,36 +129,37 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
<> <>
<Grid item sx={{ ml: 0, mr: 3 }}> <Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
type="submit"
>
<FormattedMessage id="create" />
</Button>
<Button
variant="contained"
type="submit"
color="success"
>
<FormattedMessage id="create" />
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
</> : </> :
<> <>
<Grid item sx={{ ml: 0, mr: 3 }}> <Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
color="cancel"
onClick={loadDataFun}
>
<FormattedMessage id="resetAndBack" />
</Button>
<Button
variant="contained"
color="cancel"
onClick={loadDataFun}
>
<FormattedMessage id="resetAndBack" />
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
<Grid item sx={{ ml: 3, mr: 3 }}> <Grid item sx={{ ml: 3, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
type="submit"
color="success"
>
<FormattedMessage id="save" />
</Button>
<Button
variant="contained"
type="submit"
color="success"
>
<FormattedMessage id="save" />
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
</> </>
@@ -168,12 +169,13 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
<> <>
<Grid item sx={{ ml: 0, mr: 3 }}> <Grid item sx={{ ml: 0, mr: 3 }}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}> <ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Button
variant="contained"
onClick={onEditClick}
>
<FormattedMessage id="edit" />
</Button>
<Button
variant="contained"
onClick={onEditClick}
color="success"
>
< FormattedMessage id="edit" />
</Button>
</ThemeProvider> </ThemeProvider>
</Grid> </Grid>
</> </>


+ 391
- 0
src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js Переглянути файл

@@ -0,0 +1,391 @@
// material-ui
import {
Grid,
Typography,
Button,
// RadioGroup,
Dialog, DialogTitle, DialogContent, DialogActions,
Stack,
InputLabel,
// OutlinedInput,
FormHelperText,
TextField,
IconButton, InputAdornment,
// Box,
// FormControl
} from '@mui/material';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// import { strengthColorChi, strengthIndicator } from 'utils/password-strength';

import { useFormik } from 'formik';
import * as yup from 'yup';
import * as React from "react";
// import * as HttpUtils from "utils/HttpUtils";
// import * as UrlUtils from "utils/ApiPathConst";
// import * as FieldUtils from "utils/FieldUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import ForwardIcon from '@mui/icons-material/Forward';
import MainCard from 'components/MainCard';


import { useNavigate } from "react-router-dom";
// import { notifyActionSuccess } from 'utils/CommonFunction';
import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage, useIntl} from "react-intl";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const AfterForgotPasswordPage = () => {
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
const [showPassword, setShowPassword] = React.useState(false);
const [showConfirmPassword, setshowConfirmPassword] = React.useState(false);
// const [level, setLevel] = React.useState();
const intl = useIntl();

// const [issueId, setIssueId] = React.useState(loadedData.issueId);
const navigate = useNavigate();

const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: 'auto',
height: 'auto',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};

const handleClickShowConfirmPassword = () => {
setshowConfirmPassword(!showConfirmPassword);
};

const handleMouseDownPassword = (event) => {
event.preventDefault();
};

const changePassword = (
// value
) => {
// const temp = strengthIndicator(value);
// setLevel(strengthColorChi(temp));
};

const formik = useFormik({
enableReinitialize: true,
initialValues: {
username: '',
password: '',
confirmPassword: '',
emailVerifyHash: '',
},
validationSchema: yup.object().shape({
emailVerifyHash: yup.string().required(intl.formatMessage({id: 'requireSecurityCode'})),
username: yup.string().required(intl.formatMessage({id: 'requireUsername'})),
password: yup.string().min(8, (intl.formatMessage({id: 'atLeast8CharPassword'}))).required(intl.formatMessage({id: 'requirePassword'}))
.matches(/^\S*$/, { message: (intl.formatMessage({id: 'noSpacePassword'})) })
.matches(/^(?=.*[a-z])/, { message: (intl.formatMessage({id: 'atLeastOneSmallLetter'})) })
.matches(/^(?=.*[A-Z])/, { message: (intl.formatMessage({id: 'atLeastOneCapLetter'})) })
.matches(/^(?=.*[0-9])/, { message: (intl.formatMessage({id: 'atLeast1Number'})) })
.matches(/^(?=.*[!@#%&])/, { message: (intl.formatMessage({id: 'atLeast1SpecialChar'})) }),
confirmPassword: yup.string().min(8, (intl.formatMessage({id: 'atLeast8CharPassword'}))).required((intl.formatMessage({id: 'pleaseConfirmPassword'}))).oneOf([yup.ref('password'), null], (intl.formatMessage({id: 'samePassword'}))),
}),
onSubmit: values => {
console.log(values)
}
});

return (
<Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
<Grid item xs={12} md={12} width="100%" >
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
<FormattedMessage id="forgotUserPassword"/>
</Typography>
</Stack>
</div>
</Grid>
<Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
<Button
aria-label={intl.formatMessage({id: 'back'})}
title={intl.formatMessage({id: 'back'})}
sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
>
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
</Button>
</Grid>
{/* <Grid item xs={12}>
<Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
</Grid> */}
<Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
<MainCard
sx={{
maxWidth: { xs: 400, sm:600, md:800, lg: 1000 },
margin: { xs: 2.5, md: 3 },
'& > *': {
flexGrow: 1,
flexBasis: '50%'
}
}}
content={false}
border={false}
boxShadow
>
<form onSubmit={formik.handleSubmit}>
<Grid container spacing={4} sx={{ minHeight: {xs:"75vh", sm:"75vh", md: "70vh", lg:"70vh", xl:"50vh"} }} direction="column" justifyContent="flex-start" alignItems="center">
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { xs: 'none', sm: 'none', md: 'block' } }}>
<InputLabel htmlFor="email-login-title">
<Typography variant="h5" >
<FormattedMessage id="forgotPasswordSubTitle"/>
</Typography>
</InputLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { md: 'none', xl: 'none', lg: 'none' } }}>
<InputLabel htmlFor="email-login-title">
<Typography variant="h6" >
<FormattedMessage id="forgotPasswordSubTitle1"/>
</Typography>
<Typography variant="h6" >
<FormattedMessage id="forgotPasswordSubTitle2"/>
</Typography>
</InputLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={12} lg={12}>
<TextField
fullWidth
onChange={formik.handleChange}
id="emailVerifyHash"
name="emailVerifyHash"
placeholder={intl.formatMessage({id: 'securityCode'})}
label={intl.formatMessage({id: 'securityCode'}) + ":"}
defaultValue={formik.values.emailVerifyHash}
value={formik.values.emailVerifyHash}
error={Boolean(formik.touched.emailVerifyHash && formik.errors.emailVerifyHash)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: 50,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
{formik.touched.emailVerifyHash && formik.errors.emailVerifyHash && (
<FormHelperText error id="standard-weight-helper-text-username-login">
{formik.errors.emailVerifyHash}
</FormHelperText>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={12} lg={12}>
<TextField
fullWidth
onChange={formik.handleChange}
id="username"
name="username"
placeholder={intl.formatMessage({id: 'userLoginName'})}
label={intl.formatMessage({id: 'userLoginName'}) + ":"}
defaultValue={formik.values.username}
value={formik.values.username}
error={Boolean(formik.touched.username && formik.errors.username)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: 50,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
{formik.touched.username && formik.errors.username && (
<FormHelperText error id="standard-weight-helper-text-username-login">
{formik.errors.username}
</FormHelperText>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={12} lg={12}>
<TextField
fullWidth
onChange={(e) => {
formik.handleChange(e);
changePassword(e.target.value);
}}
id="password"
type={showPassword ? 'text' : 'password'}
name="password"
placeholder={intl.formatMessage({id: 'userPassword'})}
label={intl.formatMessage({id: 'userPassword'}) + ":"}
// defaultValue={formik.values.password.trim()}
value={formik.values.password.trim()}
error={Boolean(formik.touched.password && formik.errors.password)}
onBlur={formik.handleBlur}
inputProps={{
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
InputLabelProps={{
shrink: true
}}
InputProps={{
endAdornment:(
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
)
}}
/>
</Grid>
{/* <FormControl fullWidth sx={{ mt: 2 }}>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
</Grid>
<Grid item>
<Typography variant="subtitle1">
<FormattedMessage id={level ? level?.label : "pwWeak" }/>
</Typography>
</Grid>
</Grid>
</FormControl> */}
{formik.touched.password && formik.errors.password && (
<FormHelperText error id="helper-text-password-signup">
{formik.errors.password}
</FormHelperText>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={12} lg={12}>
<TextField
fullWidth
onChange={(e) => {
formik.handleChange(e);
// changePassword(e.target.value);
}}
id="confirmPassword"
type={showConfirmPassword ? 'text' : 'password'}
name="confirmPassword"
placeholder={intl.formatMessage({id: 'confirmPassword'})}
label={intl.formatMessage({id: 'confirmPassword'}) + ":"}
defaultValue={formik.values.confirmPassword.trim()}
value={formik.values.confirmPassword.trim()}
error={Boolean(formik.touched.confirmPassword && formik.errors.confirmPassword)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: 50,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
InputLabelProps={{
shrink: true
}}
InputProps={{
endAdornment:(
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowConfirmPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
size="large"
>
{showConfirmPassword ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputAdornment>
)
}}
/>
</Grid>
{formik.touched.confirmPassword && formik.errors.confirmPassword && (
<FormHelperText error id="helper-text-confirmPassword-signup">
{formik.errors.confirmPassword}
</FormHelperText>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12} mt={1} >
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button
aria-label={intl.formatMessage({id: 'continue'})}
variant="contained"
type="submit"
>
<FormattedMessage id="continue"/>
</Button>
</ThemeProvider>
</Grid>
</Grid>
</form>
</MainCard>
</Grid>
<div>
<Dialog
open={isWarningPopUp}
onClose={() => setIsWarningPopUp(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
}
}}
>
<DialogTitle>
<FormattedMessage id="attention"/>
</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
{/* <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> */}
</DialogContent>
<DialogActions>
<Button
aria-label={intl.formatMessage({id: 'ok'})}
onClick={() => setIsWarningPopUp(false)}
>
<FormattedMessage id="ok" />
</Button>
</DialogActions>
</Dialog>
</div>
</Grid>
);
};


export default AfterForgotPasswordPage;

+ 86
- 0
src/pages/authentication/ForgotPassword/AuthCallback/index.js Переглянути файл

@@ -0,0 +1,86 @@

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { handleLogoutFunction, handleLogin } from 'auth/index';

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {

const dispatch = useDispatch()
const navigate = useNavigate()

React.useEffect(() => {
goLogin();
}, []);

function goLogin(){
dispatch(handleLogoutFunction());

let params = new URLSearchParams(window.location.search)
if(params.get("code")){
HttpUtils.post({
url: UrlUtils.GET_SMART_LOGIN,
params:{
code: params.get("code")
},
onSuccess: (responseData) => {
console.log("responseData");
console.log(responseData);
const userData = {
id: responseData.id,
fullenName: responseData.name,
fullchName: responseData.chName,
email: responseData.email,
type: responseData.type,
role: responseData.role,
abilities: responseData.abilities,
creditor: responseData.creditor,
locale: responseData.preferLocale,
//avatar: require('src/assets/images/users/avatar-3.png').default,
}
const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken }
if(responseData.type === "GLD"){
setLocale("en");
localStorage.setItem('locale','en');
}else{
if (responseData.preferLocale ==="zh_HK"){
setLocale("zh-HK");
localStorage.setItem('locale','zh-HK');
}
if (responseData.preferLocale ==="zh-CN"){
setLocale("zh-CN");
localStorage.setItem('locale','zh-CN');
}
}
dispatch(handleLogin(data))
navigate('/dashboard');
},
onFail: (response)=>{
console.log("Fail");
console.log(response);
window.location.assign("/iamsmart/loginFail");
},
onError:(error)=>{
console.log(error);
window.location.assign("/iamsmart/loginFail");
}
});
}else{
window.location.assign("/iamsmart/loginFail");
}
}

return (
<LoadingComponent />
);
};

export default Index;

+ 229
- 0
src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js Переглянути файл

@@ -0,0 +1,229 @@
// material-ui
import {
Grid,
Typography,
Button,
// RadioGroup,
Dialog, DialogTitle, DialogContent, DialogActions,
Stack,
InputLabel,
// OutlinedInput,
FormHelperText,
TextField,
// Box
} from '@mui/material';
import { useFormik } from 'formik';
import * as yup from 'yup';
import * as React from "react";
// import * as HttpUtils from "utils/HttpUtils";
// import * as UrlUtils from "utils/ApiPathConst";
// import * as FieldUtils from "utils/FieldUtils";
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
import ForwardIcon from '@mui/icons-material/Forward';
import MainCard from 'components/MainCard';


import { useNavigate } from "react-router-dom";
// import { notifyActionSuccess } from 'utils/CommonFunction';
import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage, useIntl} from "react-intl";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ForgotPasswordApplyForm = () => {
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
// const [warningText, setWarningText] = React.useState("");s
// const [attachment, setAttachment] = React.useState({});
const intl = useIntl();

// const [issueId, setIssueId] = React.useState(loadedData.issueId);
const navigate = useNavigate();

const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: 'auto',
height: 'auto',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

const formik = useFormik({
enableReinitialize: true,
initialValues: {
username: '',
},
validationSchema: yup.object().shape({
username: yup.string().required(intl.formatMessage({id: 'requireUsername'})),
}),
onSubmit: values => {
console.log(values)
// HttpUtils.postWithFiles({
// url: UrlUtils.POST_PUBLIC_NOTICE_APPLY,
// params: {
// id: 0,
// contactPerson: values.contactPerson,
// contactTelNo: {
// countryCode: values.tel_countryCode,
// phoneNumber: values.phoneNumber
// },
// contactFaxNo: {
// countryCode: values.fax_countryCode,
// faxNumber: values.faxNumber
// },
// issueId: issueId,
// careOf: values.careOf ? values.careOf: "",
// remarks: values.remarks ? values.remarks : "",
// },
// // files: [attachment],
// onSuccess: function () {
// notifyActionSuccess(intl.formatMessage({id: 'submissionSuccess'}) + '!')
// navigate("/publicNotice");
// // location.reload();
// }
// });
}
});

return (
<Grid container sx={{ minHeight: '95vh', mb: 3 }} direction="column" alignItems="center">
<Grid item xs={12} md={12} width="100%" >
<div style={BackgroundHead}>
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
<Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
<FormattedMessage id="forgotUserPassword"/>
</Typography>
</Stack>
</div>
</Grid>
<Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
<Button
aria-label={intl.formatMessage({id: 'back'})}
title={intl.formatMessage({id: 'back'})}
sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
>
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
</Button>
</Grid>
{/* <Grid item xs={12}>
<Typography variant="pnspsFormParagraphBold">申請公共啟事</Typography>
</Grid> */}
<Grid item xs={12} md={12} width={{ md: "60%", xs: "90%" }}>
<MainCard
sx={{
maxWidth: { xs: 400, sm:600, md:800, lg: 1000 },
margin: { xs: 2.5, md: 3 },
'& > *': {
flexGrow: 1,
flexBasis: '50%'
}
}}
content={false}
border={false}
boxShadow
>
<form onSubmit={formik.handleSubmit}>
<Grid container spacing={2} sx={{ minHeight: '40vh' }} direction="column" justifyContent="flex-start" alignItems="center">
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { xs: 'none', sm: 'none', md: 'block' } }}>
<InputLabel htmlFor="email-login-title">
<Typography variant="h5" >
<FormattedMessage id="forgotPasswordSubTitle"/>
</Typography>
</InputLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} sx={{ mb: 1, mt:5, display: { md: 'none', xl: 'none', lg: 'none' } }}>
<InputLabel htmlFor="email-login-title">
<Typography variant="h6" >
<FormattedMessage id="forgotPasswordSubTitle1"/>
</Typography>
<Typography variant="h6" >
<FormattedMessage id="forgotPasswordSubTitle2"/>
</Typography>
</InputLabel>
</Grid>
<Grid item xs={12} md={12} lg={12} width={{xs:"70%", sm:"60%",md:"50%", lg:"50%"}}>
<Grid container direction="row" justifyContent="flex-start">
<Grid item xs={12} md={12} lg={12} sx={{ mb: 3}} >
<TextField
fullWidth
onChange={formik.handleChange}
id="username"
name="username"
placeholder={intl.formatMessage({id: 'userLoginName'})}
label={intl.formatMessage({id: 'userLoginName'}) + ":"}
defaultValue={formik.values.username}
value={formik.values.username}
error={Boolean(formik.touched.username && formik.errors.username)}
onBlur={formik.handleBlur}
inputProps={{
maxLength: 50,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
{formik.touched.username && formik.errors.username && (
<FormHelperText error id="standard-weight-helper-text-username-login">
{formik.errors.username}
</FormHelperText>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} lg={12} mt={1}>
<ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
<Button
aria-label={intl.formatMessage({id: 'continue'})}
variant="contained"
type="submit"
>
<FormattedMessage id="continue"/>
</Button>
</ThemeProvider>
</Grid>
</Grid>
</form>
</MainCard>
</Grid>
<div>
<Dialog
open={isWarningPopUp}
onClose={() => setIsWarningPopUp(false)}
PaperProps={{
sx: {
minWidth: '40vw',
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
}
}}
>
<DialogTitle>
<FormattedMessage id="attention"/>
</DialogTitle>
<DialogContent style={{ display: 'flex', }}>
{/* <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography> */}
</DialogContent>
<DialogActions>
<Button
aria-label={intl.formatMessage({id: 'ok'})}
onClick={() => setIsWarningPopUp(false)}
>
<FormattedMessage id="ok" />
</Button>
</DialogActions>
</Dialog>
</div>
</Grid>
);
};


export default ForgotPasswordApplyForm;

+ 46
- 0
src/pages/authentication/ForgotPassword/index.js Переглянути файл

@@ -0,0 +1,46 @@
// material-ui
import * as React from "react";
// import * as HttpUtils from "utils/HttpUtils";
// import * as UrlUtils from "utils/ApiPathConst";
// import * as DateUtils from "utils/DateUtils";
// import * as FormatUtils from "utils/FormatUtils";

// import {
// Radio,
// FormControlLabel
// } from '@mui/material';

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
const ForgotPasswordApplyForm = Loadable(lazy(() => import('./ForgotPasswordApplyForm')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const ApplyForm = () => {
// const [userData, setUserData] = React.useState(null);
// const [selections, setSelection] = React.useState([]);
const [isLoading, setLoding] = React.useState(true);

React.useEffect(() => {
loadUserData();
}, []);

const loadUserData = () => {
setLoding(false);
};

return (
isLoading ?
<LoadingComponent />
:
<ForgotPasswordApplyForm
// loadedData={userData}
// selections={selections}
/>
);
};


export default ApplyForm;

+ 1
- 1
src/pages/authentication/auth-forms/AuthLoginCustom.js Переглянути файл

@@ -337,7 +337,7 @@ const AuthLoginCustom = () => {
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}> <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
<Link component={RouterLink} to="" color="primary">
<Link component={RouterLink} to="/forgot/password" color="primary">
<Typography align="center" variant="h6"> <Typography align="center" variant="h6">
<FormattedMessage id="forgotUserPassword"/>? <FormattedMessage id="forgotUserPassword"/>?
</Typography> </Typography>


+ 12
- 1
src/routes/LoginRoutes.js Переглянути файл

@@ -12,6 +12,9 @@ const RegisterForm = Loadable(lazy(() => import('pages/authentication/Register')
const BusRegisterForm = Loadable(lazy(() => import('pages/authentication/BusRegister'))); const BusRegisterForm = Loadable(lazy(() => import('pages/authentication/BusRegister')));
const IAmSmartRegister = Loadable(lazy(() => import('pages/authentication/IAmSmartRegister'))); const IAmSmartRegister = Loadable(lazy(() => import('pages/authentication/IAmSmartRegister')));
const ErrorPage = Loadable(lazy(() => import('pages/extra-pages/ErrorPage'))); const ErrorPage = Loadable(lazy(() => import('pages/extra-pages/ErrorPage')));
const ForgotPassword = Loadable(lazy(() => import('pages/authentication/ForgotPassword')));
const AfterForgotPasswordPage = Loadable(lazy(() => import('pages/authentication/ForgotPassword/AfterForgotPasswordPage')));

const IAmSmart_DirectLoginCallback = Loadable(lazy(() => import('pages/iAmSmart/DirectLoginCallback'))); const IAmSmart_DirectLoginCallback = Loadable(lazy(() => import('pages/iAmSmart/DirectLoginCallback')));
//const IAmSmart_FallCallback = Loadable(lazy(() => import('pages/iAmSmart/FallCallback'))); //const IAmSmart_FallCallback = Loadable(lazy(() => import('pages/iAmSmart/FallCallback')));
const IAmSmart_FailCallback = Loadable(lazy(() => import('pages/iAmSmart/FailCallback'))); const IAmSmart_FailCallback = Loadable(lazy(() => import('pages/iAmSmart/FailCallback')));
@@ -98,7 +101,15 @@ const LoginRoutes = {
{ {
path: 'testfpscallback', path: 'testfpscallback',
element: <Payment_FPS_CallBack/> element: <Payment_FPS_CallBack/>
}
},
{
path: 'forgot/password',
element: <ForgotPassword/>
},
{
path: 'forgot/password/verify',
element: <AfterForgotPasswordPage/>
},
] ]
}; };




+ 19
- 3
src/themes/buttonConst.js Переглянути файл

@@ -44,9 +44,15 @@ export const PNSPS_BUTTON_THEME = createTheme({
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}, },
success:{ success:{
main: '#6A8B9E',
main: '#448DF2',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}
},
orange: {
main: '#ed9740',
light: '#ff5e5e',
dark: '#b0671e',
contrastText: '#fff',
},
}, },
components: { components: {
MuiDataGrid: { MuiDataGrid: {
@@ -129,7 +135,17 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
exportExcel:{ exportExcel:{
main: '#60667E', main: '#60667E',
contrastText: '#FFFFFF', contrastText: '#FFFFFF',
}
},
success:{
main: '#3f50b5',
contrastText: '#FFFFFF',
},
orange: {
main: '#ed9740',
light: '#ff5e5e',
dark: '#b0671e',
contrastText: '#fff',
},
}, },
components: { components: {
MuiDataGrid: { MuiDataGrid: {


+ 6
- 0
src/translations/en.json Переглянути файл

@@ -70,6 +70,12 @@
"userLoginName": "Username", "userLoginName": "Username",
"userPassword": "Password", "userPassword": "Password",
"forgotUserPassword": "Forgot Password", "forgotUserPassword": "Forgot Password",
"forgotPasswordTitle": "Find Your Account",
"forgotPasswordSubTitle": "Please enter your username to receive the code to reset your password",
"forgotPasswordSubTitle1": "Please enter your username to receive",
"forgotPasswordSubTitle2": "the code to reset your password",
"securityCode": "Security Code",
"requireSecurityCode": "Please enter security code",
"learnMore": "Learn More", "learnMore": "Learn More",
"createOrReActivate": "Create account", "createOrReActivate": "Create account",
"usernameTaken": "This user login name has been registered, please use another user login name", "usernameTaken": "This user login name has been registered, please use another user login name",


+ 6
- 0
src/translations/zh-CN.json Переглянути файл

@@ -70,6 +70,12 @@
"userLoginName": "用户登入名称", "userLoginName": "用户登入名称",
"userPassword": "密码", "userPassword": "密码",
"forgotUserPassword": "忘记密码", "forgotUserPassword": "忘记密码",
"forgotPasswordTitle": "寻找你的帐号",
"forgotPasswordSubTitle": "请输入你的用户登入名称以重设密码",
"forgotPasswordSubTitle1": "请输入你的用户登入名称收",
"forgotPasswordSubTitle2": "以重设密码",
"securityCode": "安全验证码",
"requireSecurityCode": "请输入安全验证码",
"learnMore": "了解更多", "learnMore": "了解更多",
"createOrReActivate": "建立帐户", "createOrReActivate": "建立帐户",
"usernameTaken": "此用户登入名称已被注册，请使用其他用户登入名称", "usernameTaken": "此用户登入名称已被注册，请使用其他用户登入名称",


+ 6
- 0
src/translations/zh-HK.json Переглянути файл

@@ -70,6 +70,12 @@
"userLoginName": "用戶登入名稱", "userLoginName": "用戶登入名稱",
"userPassword": "密碼", "userPassword": "密碼",
"forgotUserPassword": "忘記密碼", "forgotUserPassword": "忘記密碼",
"forgotPasswordTitle": "尋找你的帳號",
"forgotPasswordSubTitle": "請輸入你的用戶登入名稱以重設密碼",
"forgotPasswordSubTitle1": "請輸入你的用戶登入名稱",
"forgotPasswordSubTitle2": "以重設密碼",
"securityCode": "安全驗證碼",
"requireSecurityCode": "請輸入安全驗證碼",
"learnMore": "了解更多", "learnMore": "了解更多",
"createOrReActivate": "建立帳戶", "createOrReActivate": "建立帳戶",
"usernameTaken": "此用戶登入名稱已被注冊，請使用其他用戶登入名稱", "usernameTaken": "此用戶登入名稱已被注冊，請使用其他用戶登入名稱",


Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти