update reset password using validatedinputform

jhipster · Sep 5, 2022 · 41a57c3 · 41a57c3
1 parent 6a3f650
commit 41a57c3
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 78 deletions.
diff --git a/...t/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/...t/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs
@@ -17,21 +17,21 @@
  limitations under the License.
 -%>
 import React, { useState, useEffect } from 'react';
-import { Col, Row, Button } from 'reactstrap';
-import { Translate, translate, ValidatedField, ValidatedForm } from 'react-jhipster';
-import { useSearchParams } from 'react-router-dom';
+import { Col, Row, Button, Form } from 'reactstrap';
+import { Translate, translate, ValidatedTextInput } from 'react-jhipster';
 import { toast } from 'react-toastify';
-
+import { useSearchParams } from 'react-router-dom';
 import { handlePasswordResetFinish, reset } from '../password-reset.reducer';
 import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
+import { useForm } from 'react-hook-form';
 
 export const PasswordResetFinishPage = () => {
  const dispatch = useAppDispatch();
 
  const [searchParams] = useSearchParams();
  const key = searchParams.get('key');
-
+ const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm();
  const [password, setPassword] = useState('');
 
  useEffect(
@@ -40,60 +40,71 @@ export const PasswordResetFinishPage = () => {
  },
  []
  );
+ const successMessage = useAppSelector(state => state.passwordReset.successMessage);
+
+ useEffect(() => {
+ if (successMessage) {
+<%_ if (enableTranslation) { _%>
+ toast.success(translate(successMessage));
+<%_ } else { _%>
+ toast.success(successMessage);
+<%_ } _%>
+ }
+ }, [successMessage]);
 
- const handleValidSubmit = ({ newPassword }) => dispatch(handlePasswordResetFinish({ key, newPassword }));
+ const handleValidSubmit = data => {
+ dispatch(handlePasswordResetFinish({ key: data.key, newPassword: data.newPassword }));
+ }
 
- const updatePassword = event => setPassword(event.target.value);
+ const updatePassword = event => {
+ setPassword(event.target.value);
+ setValue('newPassword', event.target.value, { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+ }
 
  const getResetForm = () => {
  return (
- <ValidatedForm onSubmit={handleValidSubmit}>
- <ValidatedField
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ <Form onSubmit={ handleSubmit(handleValidSubmit) }>
+ <ValidatedTextInput
+ register={ register }
+ touchedFields={ touchedFields }
+ errors={ errors }
+ setValue={ setValue }
  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') },
+ validation={ {
+ 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') },
- }}
- onChange={updatePassword}
- data-cy="resetPassword"
+ } }
+ labelPlaceholderKey="global.form.newpassword.label"
+ inputPlaceholderKey="global.form.newpassword.placeholder"
+ type="password"
+ updateValueOverrideMethod={ updatePassword }
  />
  <PasswordStrengthBar password={password} />
- <ValidatedField
+ <ValidatedTextInput
+ register={ register }
+ touchedFields={ touchedFields }
+ errors={ errors }
+ setValue={ setValue }
  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') },
+ validation={ {
+ 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 === password || translate('global.messages.error.dontmatch'),
- }}
- data-cy="confirmResetPassword"
+ } }
+ labelPlaceholderKey="global.form.confirmpassword.label"
+ inputPlaceholderKey="global.form.confirmpassword.placeholder"
+ type="password"
  />
  <Button color="success" type="submit" data-cy="submit">
  <Translate contentKey="reset.finish.form.button">Validate new password</Translate>
  </Button>
- </ValidatedForm>
+ </Form>
  );
  };
 
- const successMessage = useAppSelector(state => state.passwordReset.successMessage);
-
- useEffect(() => {
- if (successMessage) {
-<%_ if (enableTranslation) { _%>
- toast.success(translate(successMessage));
-<%_ } else { _%>
- toast.success(successMessage);
-<%_ } _%>
- }
- }, [successMessage]);
-
  return (
  <div>
  <Row className="justify-content-center">

diff --git a/...react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/...react/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs
@@ -17,15 +17,17 @@
  limitations under the License.
 -%>
 import React, { useEffect } from 'react';
-import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster';
-import { Button, Alert, Col, Row } from 'reactstrap';
+import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster';
+import { Button, Alert, Col, Row, Form } from 'reactstrap';
 import { toast } from 'react-toastify';
 
 import { handlePasswordResetInit, reset } from '../password-reset.reducer';
 import { useAppDispatch, useAppSelector } from 'app/config/store';
+import { useForm } from 'react-hook-form';
 
 export const PasswordResetInit = () => {
  const dispatch = useAppDispatch();
+ const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm();
 
  useEffect(
  () => () => {
@@ -34,9 +36,9 @@ export const PasswordResetInit = () => {
  []
  );
 
- const handleValidSubmit = ({ email }) => {
- dispatch(handlePasswordResetInit(email));
- };
+ const handleValidSubmit = data => {
+ dispatch(handlePasswordResetInit(data.email));
+ }
 
  const successMessage = useAppSelector(state => state.passwordReset.successMessage);
 
@@ -50,38 +52,44 @@ export const PasswordResetInit = () => {
  }
  }, [successMessage]);
 
- return (
- <div>
- <Row className="justify-content-center">
- <Col md="8">
- <h1><Translate contentKey="reset.request.title">Reset your password</Translate></h1>
- <Alert color="warning">
- <p><Translate contentKey="reset.request.messages.info">Enter the email address you used to register</Translate></p>
- </Alert>
- <ValidatedForm onSubmit={handleValidSubmit}>
- <ValidatedField
- name="email"
- label={translate('global.form.email.label')}
- placeholder={translate('global.form.email.placeholder')}
- type="email"
- validate={{
- required: { value: true, message: translate('global.messages.validate.email.required') },
- minLength: { value: 5, message: translate('global.messages.validate.email.minlength') },
- maxLength: { value: 254, message: translate('global.messages.validate.email.maxlength') },
- validate: v => isEmail(v) || translate('global.messages.validate.email.invalid'),
- }}
- data-cy="emailResetPassword"
- />
- <Button color="primary" type="submit" data-cy="submit">
- <Translate contentKey="reset.request.form.button">
- Reset password
- </Translate>
- </Button>
- </ValidatedForm>
- </Col>
- </Row>
- </div>
- );
-}
+ return (
+ <div>
+ <Row className="justify-content-center">
+ <Col md="8">
+ <h1>
+ <Translate contentKey="reset.request.title">Reset your password</Translate>
+ </h1>
+ <Alert color="warning">
+ <p>
+ <Translate contentKey="reset.request.messages.info">Enter the email address you used to register</Translate>
+ </p>
+ </Alert>
+ {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+ <Form onSubmit={ handleSubmit(handleValidSubmit) }>
+ <ValidatedTextInput
+ register={ register }
+ touchedFields={ touchedFields }
+ errors={ errors }
+ setValue={ setValue }
+ name="email"
+ validation={ {
+ required: translate('global.messages.validate.email.required'),
+ minLength: { value: 5, message: translate('global.messages.validate.email.minlength') },
+ maxLength: { value: 254, message: translate('global.messages.validate.email.maxlength') },
+ validate: v => isEmail(v) || translate('global.messages.validate.email.invalid'),
+ }}
+ labelPlaceholderKey="global.form.email.label"
+ inputPlaceholderKey="global.form.email.placeholder"
+ type="email"
+ />
+ <Button color="primary" type="submit" data-cy="submit">
+ <Translate contentKey="reset.request.form.button">Reset password</Translate>
+ </Button>
+ </Form>
+ </Col>
+ </Row>
+ </div>
+ );
+};
 
 export default PasswordResetInit;
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
@@ -18,7 +18,7 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Translate, translate, ValidatedTextInput } from 'react-jhipster';
-import { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row } from 'reactstrap';
+import { Button, Col, Form, Row } from 'reactstrap';
 import { toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';

diff --git a/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs b/generators/cypress/templates/src/test/javascript/cypress/support/commands.ts.ejs
@@ -77,7 +77,7 @@ export const confirmPasswordSelector = '[data-cy="confirmPassword"]';
 export const submitPasswordSelector = '[data-cy="submit"]';
 
 // Reset Password
-export const emailResetPasswordSelector = '[data-cy="emailResetPassword"]';
+export const emailResetPasswordSelector = '[data-cy="email"]';
 export const submitInitResetPasswordSelector = '[data-cy="submit"]';
 <%_ } _%>