1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- import { Button, TextField } from "@mui/material"
- import { useEffect, useState } from "react";
- import { connect } from "react-redux";
- import { actionCheckPassword } from "../../../actions/actionLogin";
- import { actionUpsertUser } from "../../../actions/actionsForUser";
- import { UserEditorSubModalsTitle, UserEditorSubModalsWrap, UserEditorSubModalsFooter } from "./UserEditorSubModals.style"
- const UserPasswordEditor = ({login, disabled, handleClose, updateUser, checkPassword}) => {
- const [currPassword, setCurrPassword] = useState('');
- const [newPassword, setNewPassword] = useState('');
-
- const [errorP, setErrorP] = useState('')
- useEffect(() => {
- checkPassword(login, currPassword);
-
- }, [currPassword])
- useEffect(() => {
- if(errorP === false) {
- handleClose()
- updateUser(null, null, newPassword, null)
- }
- }, [errorP]);
- function validatePassword(p){
-
- let errorsP = [];
- if (p.length < 4 || p.length > 12) {
- errorsP.push("Your password must be at least 4 and no more than 12 characters");
- }
- if (!/[a-z]/.test(p)) {
- errorsP.push("Your password must contain at least one letter.");
- }
- if (!/[0-9]/.test(p)) {
- errorsP.push("Your password must contain at least one digit.");
- }
- if (errorsP.length > 0) {
- setErrorP(errorsP.join('/'))
- } else {
- setErrorP(false)
- }
- }
- return(
- <UserEditorSubModalsWrap>
- <UserEditorSubModalsTitle>Edit your password</UserEditorSubModalsTitle>
- <TextField
- autoFocus
- sx={{width: '100%', mt: '20px'}}
- id="standard-basic"
- label="Password"
- variant="standard"
- value={currPassword}
- onChange={(e) => setCurrPassword(e.target.value)}
- />
- <TextField
- autoFocus
- error={!!errorP}
- helperText={errorP}
- sx={{width: '100%', mt: '20px'}}
- id="standard-basic"
- label="New Password"
- variant="standard"
- disabled={!disabled}
- value={newPassword}
- onChange={(e) => setNewPassword(e.target.value)}
- />
- <UserEditorSubModalsFooter>
- <Button variant="text" onClick={handleClose}>Cancel</Button>
- <Button variant="text" disabled={newPassword ? false : true} onClick={() => {validatePassword(newPassword); }}>Save</Button>
- </UserEditorSubModalsFooter>
- </UserEditorSubModalsWrap>
- )
- }
- export default connect(state =>
- ({login: state?.promise?.aboutMe?.payload?.login || '', disabled: state?.promise?.checkedPassword?.payload || null}),
- {updateUser: actionUpsertUser, checkPassword: actionCheckPassword})(UserPasswordEditor);
|