alex
/
PNSPS-frontend-MaterialUI
2
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

various changes

web-access-fix-2
Jason Chuang hace 10 horas
padre
d9ce1032d5
commit
55178dffe1
Se han modificado 7 ficheros con 143 adiciones y 184 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +55
    -0
      src/components/RegisterStepIcon.js
  2. +21
    -64
      src/pages/authentication/BusRegister.js
  3. +29
    -55
      src/pages/authentication/IAmSmartRegister.js
  4. +20
    -63
      src/pages/authentication/Register.js
  5. +1
    -0
      src/pages/authentication/auth-forms/BusCustomFormWizard.js
  6. +1
    -0
      src/pages/authentication/auth-forms/CustomFormWizard.js
  7. +16
    -2
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js

+ 55
- 0
src/components/RegisterStepIcon.js Ver fichero

@@ -0,0 +1,55 @@
import { Box, useTheme } from '@mui/material';

/** Darker green for completed register steps (matches PAY button hover). */
export const REGISTER_STEP_COMPLETED_COLOR = '#488F52';

export const registerStepStyle = {
width: { lg: '40%', md: '70%', xs: '100%' },
boxShadow: 1,
backgroundColor: '#FFFFFF',
padding: 2,
'& .MuiStepLabel-label': { color: '#424242' },
'& .MuiStepConnector-line': { borderColor: '#9E9E9E' },
'& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': {
borderColor: REGISTER_STEP_COMPLETED_COLOR,
},
'& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': {
borderColor: 'warning.main',
},
};

const RegisterStepIcon = ({ active, completed, className, icon }) => {
const theme = useTheme();
let circleColor = '#757575';
let textColor = '#FFFFFF';

if (completed) {
circleColor = REGISTER_STEP_COMPLETED_COLOR;
} else if (active) {
circleColor = theme.palette.warning.main;
textColor = '#1A1A1A';
}

return (
<Box
className={className}
sx={{
width: '2rem',
height: '2rem',
borderRadius: '50%',
backgroundColor: circleColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: textColor,
fontSize: '1rem',
fontWeight: 600,
lineHeight: 1,
}}
>
{icon}
</Box>
);
};

export default RegisterStepIcon;

+ 21
- 64
src/pages/authentication/BusRegister.js Ver fichero

@@ -12,7 +12,8 @@ import {
Button, StepLabel,
CircularProgress,
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';

// project import
import Loadable from 'components/Loadable';
@@ -21,7 +22,6 @@ import { notifyActionError } from 'utils/CommonFunction';
const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard')));
const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
import axios from "axios";
import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
import {FormattedMessage, useIntl} from "react-intl";
import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
// import CustomFormWizard from './auth-forms/BusCustomFormWizard';
@@ -38,6 +38,7 @@ const BusRegister = () => {
const [base64Url, setBase64Url] = useState("")
const [checkCode, setCheckCode] = useState("")
const [isNextBusy, setIsNextBusy] = useState(false);
const [registrationComplete, setRegistrationComplete] = useState(false);
const intl = useIntl();
const steps = [
intl.formatMessage({id: 'personalInformation'}),
@@ -45,30 +46,6 @@ const BusRegister = () => {
intl.formatMessage({id: 'finishSubmission'})
];

const stepStyle = {
width: { lg: "40%", md: "70%", xs: "100%" },
boxShadow: 1,
backgroundColor: "#FFFFFF",
padding: 2,

/* Inactive (default) */
"& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" }, // darker grey
"& .MuiStepLabel-label": { color: "#424242" }, // label darker
"& .MuiStepConnector-line": { borderColor: "#9E9E9E" }, // connector darker

/* Active */
"& .Mui-active": {
"&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
"& .MuiStepConnector-line": { borderColor: "warning.main" }
},

/* Completed */
"& .Mui-completed": {
"&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" }, // use your strong blue
"& .MuiStepConnector-line": { borderColor: "#1976d2" }
}
};

const totalSteps = () => {
return steps.length;
};
@@ -148,51 +125,30 @@ const BusRegister = () => {
const handleReset = () => {
setActiveStep(0);
setCompleted({});
setRegistrationComplete(false);
};

const isStepCompleted = (index) => index < activeStep || registrationComplete;

return (
// <AuthWrapper>
<Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
<Stepper activeStep={activeStep} sx={registerStepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly={true}>
{index < 2 ? (
<StepButton
aria-current={activeStep === index ? "step" : undefined}
// onClick={handleStep(index)}
>
<StepLabel
sx={{
flexDirection: "column",
"& .MuiStepLabel-iconContainer": { paddingRight: 0 },
}}
>
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
) : (
<StepButton
aria-current={activeStep === index ? "step" : undefined}
sx={
activeStep === 2
? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
: allStepsCompleted()
? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
: { color: "rgba(0,0,0,0.6)" }
}
icon={<VisibilityIcon />}
// onClick={handleStep(index)}
<Step key={label} completed={isStepCompleted(index)} readOnly={true}>
<StepButton
aria-current={activeStep === index ? "step" : undefined}
>
<StepLabel
StepIconComponent={RegisterStepIcon}
sx={{
flexDirection: "column",
"& .MuiStepLabel-iconContainer": { paddingRight: 0 },
}}
>
<StepLabel
sx={{
flexDirection: "column",
"& .MuiStepLabel-iconContainer": { paddingRight: 0 },
}}
>
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
)}
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
</Step>
))}
</Stepper>
@@ -216,6 +172,7 @@ const BusRegister = () => {
setUsername={setUsername}
setBase64Url={setBase64Url}
setCheckCode={setCheckCode}
onRegistrationComplete={() => setRegistrationComplete(true)}
/>
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>


+ 29
- 55
src/pages/authentication/IAmSmartRegister.js Ver fichero

@@ -13,10 +13,11 @@ import {
Stack,
Typography,
Button,
StepLabel,
CircularProgress,
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';

// project import
import Loadable from 'components/Loadable';
@@ -24,32 +25,10 @@ import { lazy } from 'react';
import { notifyActionError } from 'utils/CommonFunction';
import axios from "axios";
import {FormattedMessage, useIntl} from "react-intl";
import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/IAmSmartFormWizard')));
const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
// ================================|| REGISTER ||================================ //
const stepStyle = {
width: { lg: "40%", md: "70%", xs: "100%" },
boxShadow: 1,
backgroundColor: "#FFFFFF",
padding: 2,

/* Inactive (default) */
"& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" }, // darker grey
"& .MuiStepLabel-label": { color: "#424242" }, // label darker
"& .MuiStepConnector-line": { borderColor: "#9E9E9E" }, // connector darker

/* Active */
"& .Mui-active": {
"&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
"& .MuiStepConnector-line": { borderColor: "warning.main" }
},

/* Completed */
"& .Mui-completed": {
"&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" }, // use your strong blue
"& .MuiStepConnector-line": { borderColor: "#1976d2" }
}
};

const Register = () => {
const [activeStep, setActiveStep] = useState(0);
@@ -61,6 +40,7 @@ const Register = () => {
const [checkCode, setCheckCode] = useState("")
const [idNo, setIdNo] = useState("");
const [isNextBusy, setIsNextBusy] = useState(false);
const [registrationComplete, setRegistrationComplete] = useState(false);
const intl = useIntl();
const steps = [
intl.formatMessage({id: 'personalInformation'}),
@@ -152,37 +132,30 @@ const Register = () => {
const handleReset = () => {
setActiveStep(0);
setCompleted({});
setRegistrationComplete(false);
};

const isStepCompleted = (index) => index < activeStep || registrationComplete;

return (
// <AuthWrapper>
<Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '65px', bgcolor: 'backgroundColor.default' }} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
<Stepper activeStep={activeStep} sx={registerStepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly={true}>
{index < 2 ? (
<StepButton
aria-current={activeStep === index ? "step" : undefined}
// onClick={handleStep(index)}
>
<Typography variant="step1">{label}</Typography>
</StepButton>
) : (
<StepButton
aria-current={activeStep === index ? "step" : undefined}
sx={
activeStep === 2
? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
: allStepsCompleted()
? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
: { color: "rgba(0,0,0,0.6)" }
}
icon={<VisibilityIcon />}
// onClick={handleStep(index)}
<Step key={label} completed={isStepCompleted(index)} readOnly={true}>
<StepButton
aria-current={activeStep === index ? "step" : undefined}
>
<StepLabel
StepIconComponent={RegisterStepIcon}
sx={{
flexDirection: "column",
"& .MuiStepLabel-iconContainer": { paddingRight: 0 },
}}
>
<Typography variant="step1">{label}</Typography>
</StepButton>
)}
</StepLabel>
</StepButton>
</Step>
))}
</Stepper>
@@ -207,6 +180,7 @@ const Register = () => {
setIdNo={setIdNo}
setBase64Url={setBase64Url}
setCheckCode={setCheckCode}
onRegistrationComplete={() => setRegistrationComplete(true)}
/>
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>
@@ -239,33 +213,33 @@ const Register = () => {
{activeStep === totalSteps() - 2 ?
(
<Button
variant="outlined"
variant="contained"
disabled={isNextBusy}
onClick={handleNext}
aria-busy={isNextBusy}
sx={{ mr: 1, minWidth: 120 }}
sx={{ mr: 1, minWidth: 120, ...PRIMARY_CONTAINED_BUTTON_SX }}
>
{isNextBusy ? (
<CircularProgress size={22} color="inherit" aria-hidden />
) : (
<Typography variant="h5">
<Typography variant="h5" sx={{ color: 'inherit' }}>
<FormattedMessage id="submit"/>
</Typography>
)}
</Button>
) : (activeStep === totalSteps() - 1 ?
(
<Button variant="outlined" color="inherit"
disabled={true} sx={{ mr: 1 }}>
<Typography variant="h5">
<Button variant="contained" color="inherit"
disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
<Typography variant="h5" sx={{ color: 'inherit' }}>
<FormattedMessage id="submit"/>
</Typography>
</Button>
) :
(
// <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
<Button disabled={!updateValid || isNextBusy} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
<Typography variant="h5">
<Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
<Typography variant="h5" sx={{ color: 'inherit' }}>
<FormattedMessage id="continue"/>
</Typography>
</Button>


+ 20
- 63
src/pages/authentication/Register.js Ver fichero

@@ -15,8 +15,8 @@ import {
Button, StepLabel,
CircularProgress,
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { POST_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
import RegisterStepIcon, { registerStepStyle } from 'components/RegisterStepIcon';

// project import
import Loadable from 'components/Loadable';
@@ -39,6 +39,7 @@ const Register = () => {
const [base64Url, setBase64Url] = useState("")
const [checkCode, setCheckCode] = useState("")
const [isNextBusy, setIsNextBusy] = useState(false);
const [registrationComplete, setRegistrationComplete] = useState(false);
const nextBusyRef = useRef(false);
const intl = useIntl();
// Localized document title/meta for register flow
@@ -49,30 +50,6 @@ const Register = () => {
intl.formatMessage({id: 'finishSubmission'})
];

const stepStyle = {
width: { lg: "40%", md: "70%", xs: "100%" },
boxShadow: 1,
backgroundColor: "#FFFFFF",
padding: 2,

/* Inactive (default) */
"& .MuiStepIcon-root": { color: "#757575", fontSize: "2rem" }, // darker grey
"& .MuiStepLabel-label": { color: "#424242" }, // label darker
"& .MuiStepConnector-line": { borderColor: "#9E9E9E" }, // connector darker

/* Active */
"& .Mui-active": {
"&.MuiStepIcon-root": { color: "warning.main", fontSize: "2rem" },
"& .MuiStepConnector-line": { borderColor: "warning.main" }
},

/* Completed */
"& .Mui-completed": {
"&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" }, // use your strong blue
"& .MuiStepConnector-line": { borderColor: "#1976d2" }
}
};

const totalSteps = () => {
return steps.length;
};
@@ -154,51 +131,30 @@ const Register = () => {
const handleReset = () => {
setActiveStep(0);
setCompleted({});
setRegistrationComplete(false);
};

const isStepCompleted = (index) => index < activeStep || registrationComplete;

return (
// <AuthWrapper>
<Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
<Stepper activeStep={activeStep} sx={stepStyle}>
<Stepper activeStep={activeStep} sx={registerStepStyle}>
{steps.map((label, index) => (
<Step key={label} completed={completed[index]} readOnly={true}>
{index < 2 ? (
<StepButton
aria-current={activeStep === index ? 'step' : undefined}
// onClick={handleStep(index)}
<Step key={label} completed={isStepCompleted(index)} readOnly={true}>
<StepButton
aria-current={activeStep === index ? 'step' : undefined}
>
<StepLabel
StepIconComponent={RegisterStepIcon}
sx={{
flexDirection: 'column',
"& .MuiStepLabel-iconContainer": { paddingRight: 0 }
}}
>
<StepLabel
sx={{
flexDirection: 'column',
"& .MuiStepLabel-iconContainer": { paddingRight: 0 }
}}
>
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
) : (
<StepButton
aria-current={activeStep === index ? 'step' : undefined}
sx={
activeStep === 2
? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
: allStepsCompleted()
? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
: { color: "rgba(0,0,0,0.6)" }
}
icon={<VisibilityIcon />}
// onClick={handleStep(index)}
>
<StepLabel
sx={{
flexDirection: 'column',
"& .MuiStepLabel-iconContainer": { paddingRight: 0 }
}}
>
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
)}
<Typography variant="step1">{label}</Typography>
</StepLabel>
</StepButton>
</Step>
))}
</Stepper>
@@ -222,6 +178,7 @@ const Register = () => {
setUsername={setUsername}
setBase64Url={setBase64Url}
setCheckCode={setCheckCode}
onRegistrationComplete={() => setRegistrationComplete(true)}
/>
{/* <CustomFormWizard step={activeStep} /> */}
</AuthWrapper>


+ 1
- 0
src/pages/authentication/auth-forms/BusCustomFormWizard.js Ver fichero

@@ -500,6 +500,7 @@ const BusCustomFormWizard = (props) => {
) => {
// console.log(response)
setCheckUpload(true)
props.onRegistrationComplete?.();
setLoding(false);
})
.catch(error => {


+ 1
- 0
src/pages/authentication/auth-forms/CustomFormWizard.js Ver fichero

@@ -592,6 +592,7 @@ const CustomFormWizard = (props) => {
) => {
// console.log(response)
setCheckUpload(true)
props.onRegistrationComplete?.();
setLoding(false);
})
.catch(error => {


+ 16
- 2
src/pages/authentication/auth-forms/IAmSmartFormWizard.js Ver fichero

@@ -40,7 +40,7 @@ import LoopIcon from '@mui/icons-material/Loop';
import { useTheme } from '@mui/material/styles';
import { useLocation } from "react-router-dom";
import { FormattedMessage, useIntl } from "react-intl";
import { notifyActionError } from 'utils/CommonFunction';
import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';

// ============================|| FIREBASE - REGISTER ||============================ //

@@ -431,6 +431,7 @@ const CustomFormWizard = (props) => {
.then((response) => {
console.log(response)
setCheckUpload(true)
props.onRegistrationComplete?.();
setLoding(false);
})
.catch(error => {
@@ -584,8 +585,11 @@ const CustomFormWizard = (props) => {
{iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
</Typography>
<IconButton
role="button"
tabIndex={0}
aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
onClick={handleClickShowId}
onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
onMouseDown={handleMouseDownId}
edge="end"
size="medium"
@@ -1089,7 +1093,14 @@ const CustomFormWizard = (props) => {
<img src={captchaImg} alt="" />
</Grid>
<Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
<IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
<IconButton
role="button"
tabIndex={0}
aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
size="large"
onClick={() => { onCaptchaChange() }}
onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
>
<LoopIcon fontSize="inherit" />
</IconButton>
</Grid>
@@ -1175,8 +1186,11 @@ const CustomFormWizard = (props) => {
{/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
</Typography>
<IconButton
role="button"
tabIndex={0}
aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
onClick={handleClickShowComId}
onKeyDown={(event) => handleActionKeyDown(event, handleClickShowComId)}
onMouseDown={handleMouseDownComId}
edge="end"
size="medium"


Escribir Vista previa
Cargando…
Cancelar
Guardar