update password reset page to use only react-form capabilities

jhipster · Aug 28, 2022 · c2e247e · c2e247e
1 parent babe685
commit c2e247e
Showing 1 changed file with 75 additions and 47 deletions.
diff --git a/...tors/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs b/...tors/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs
@@ -17,19 +17,22 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Translate, translate, ValidatedField, ValidatedForm } from 'react-jhipster';
-import { Row, Col, Button } from 'reactstrap';
+import { Translate, translate } from 'react-jhipster';
+import { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row } from 'reactstrap';
 import { toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { getSession } from 'app/shared/reducers/authentication';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { savePassword, reset } from './password.reducer';
+import { useForm } from 'react-hook-form';
 
 export const PasswordPage = () => {
- const [password, setPassword] = useState('');
+ const [newPassword, setNewPassword] = useState('');
  const dispatch = useAppDispatch();
-
+ const { register, handleSubmit, setValue, formState: { errors }} = useForm({
+ mode: 'onTouched'
+ });
  useEffect(() => {
  dispatch(reset());
  dispatch(getSession());
@@ -38,12 +41,10 @@ export const PasswordPage = () => {
  };
  }, []);
 
- const handleValidSubmit = ({ currentPassword, newPassword }) => {
- dispatch(savePassword({ currentPassword, newPassword }));
+ const handleValidSubmit = data => {
+ dispatch(savePassword({ currentPassword: data.currentPassword, newPassword: data.newPassword }));
  };
 
- const updatePassword = event => setPassword(event.target.value);
-
  const account = useAppSelector(state => state.authentication.account);
  const successMessage = useAppSelector(state => state.password.successMessage);
  const errorMessage = useAppSelector(state => state.password.errorMessage);
@@ -63,6 +64,10 @@ export const PasswordPage = () => {
  dispatch(reset());
  }, [successMessage, errorMessage]);
 
+ const updateCurrentPassword = event => { setValue('currentPassword', event.target.value); };
+ const updateNewPassword = event => { setNewPassword(event.target.value); setValue('newPassword', event.target.value); };
+ const updateConfirmPassword = event => { setValue('confirmPassword', event.target.value); };
+
  return (
  <div>
  <Row className="justify-content-center">
@@ -72,48 +77,71 @@ export const PasswordPage = () => {
  Password for {account.login}
  </Translate>
  </h2>
- <ValidatedForm id="password-form" onSubmit={handleValidSubmit}>
- <ValidatedField
- name="currentPassword"
- label={translate('global.form.currentpassword.label')}
- placeholder={translate('global.form.currentpassword.placeholder')}
- type="password"
- validate={{
- required: { value: true, message: translate('global.messages.validate.newpassword.required') },
- }}
- data-cy="currentPassword"
- />
- <ValidatedField
- name="newPassword"
- label={translate('global.form.newpassword.label')}
- placeholder={translate('global.form.newpassword.placeholder')}
- type="password"
- validate={{
- required: { value: true, message: translate('global.messages.validate.newpassword.required') },
- minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') },
- maxLength: { value: 50, message: translate('global.messages.validate.newpassword.maxlength') },
- }}
- onChange={updatePassword}
- data-cy="newPassword"
- />
- <PasswordStrengthBar password={password} />
- <ValidatedField
- name="confirmPassword"
- label={translate('global.form.confirmpassword.label')}
- placeholder={translate('global.form.confirmpassword.placeholder')}
- type="password"
- validate={{
- required: { value: true, message: translate('global.messages.validate.confirmpassword.required') },
- minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') },
- maxLength: { value: 50, message: translate('global.messages.validate.confirmpassword.maxlength') },
- validate: v => v === password || translate('global.messages.error.dontmatch'),
- }}
- data-cy="confirmPassword"
- />
+ {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+ <Form id="password-form" onSubmit={ handleSubmit(handleValidSubmit) }>
+ <FormGroup>
+ <Label id="currentPasswordLabel" for="currentPassword">
+ {translate('global.form.currentpassword.label')}
+ </Label>
+ <Input
+ id="currentPassword"
+ name="currentPassword"
+ placeholder={ translate('global.form.currentpassword.placeholder') }
+ type="password"
+ {...register('currentPassword', { required: translate('global.messages.validate.newpassword.required') })}
+ data-cy="currentPassword"
+ valid={!errors.currentPassword}
+ invalid={!!errors.currentPassword}
+ onChange={updateCurrentPassword}
+ />
+ <FormFeedback hidden={!errors.currentPassword}>{errors.currentPassword?.message}</FormFeedback>
+ </FormGroup>
+ <FormGroup>
+ <Label id="newPasswordLabel" for="newPassword">
+ {translate('global.form.newpassword.label')}
+ </Label>
+ <Input
+ name="newPassword"
+ placeholder={translate('global.form.newpassword.placeholder')}
+ type="password"
+ {...register('newPassword', {
+ required: translate('global.messages.validate.newpassword.required'),
+ minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') },
+ maxLength: { value: 50, message: translate('global.messages.validate.newpassword.maxlength') }
+ })}
+ data-cy="newPassword"
+ valid={!errors.newPassword}
+ invalid={!!errors.newPassword}
+ onChange={updateNewPassword}
+ />
+ <FormFeedback hidden={!errors.newPassword}>{errors.newPassword?.message}</FormFeedback>
+ <PasswordStrengthBar password={newPassword} />
+ </FormGroup>
+ <FormGroup>
+ <Label id="confirmPasswordLabel" for="confirmPassword">
+ {translate('global.form.confirmpassword.label')}
+ </Label>
+ <Input
+ name="confirmPassword"
+ placeholder={translate('global.form.confirmpassword.placeholder')}
+ type="password"
+ {...register('confirmPassword', {
+ required: translate('global.messages.validate.confirmpassword.required'),
+ minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') },
+ maxLength: { value: 50, message: translate('global.messages.validate.confirmpassword.maxlength') },
+ validate: v => v === newPassword || translate('global.messages.error.dontmatch'),
+ })}
+ data-cy="confirmPassword"
+ valid={!errors.confirmPassword}
+ invalid={!!errors.confirmPassword}
+ onChange={updateConfirmPassword}
+ />
+ <FormFeedback hidden={!errors.confirmPassword}>{errors.confirmPassword?.message}</FormFeedback>
+ </FormGroup>
  <Button color="success" type="submit" data-cy="submit">
  <Translate contentKey="password.form.button">Save</Translate>
  </Button>
- </ValidatedForm>
+ </Form>
  </Col>
  </Row>
  </div>