WIP - update password reset page to use only react-form capabilities

generators/client/templates/angular/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs

@@ -41,7 +41,7 @@
  name="email"
  placeholder="{{ 'global.form.email.placeholder' | translate }}"
  formControlName="email"
- data-cy="emailResetPassword"
+ data-cy="email"
  #email
  />
 

generators/client/templates/angular/src/main/webapp/app/account/settings/settings.component.html.ejs

@@ -39,7 +39,7 @@
  name="firstName"
  placeholder="{{ 'settings.form.firstname.placeholder' | translate }}"
  formControlName="firstName"
- data-cy="firstname"
+ data-cy="firstName"
  />
 
  <div
@@ -83,7 +83,7 @@
  name="lastName"
  placeholder="{{ 'settings.form.lastname.placeholder' | translate }}"
  formControlName="lastName"
- data-cy="lastname"
+ data-cy="lastName"
  />
 
  <div

generators/client/templates/react/package.json.ejs

@@ -41,7 +41,7 @@
  "react": "<%= dependabotPackageJson.dependencies['react'] %>",
  "react-dom": "<%= dependabotPackageJson.dependencies['react-dom'] %>",
  "react-hook-form": "<%= dependabotPackageJson.dependencies['react-hook-form'] %>",
- "react-jhipster": "<%= dependabotPackageJson.dependencies['react-jhipster'] %>",
+ "react-jhipster": "github:Tcharl/react-jhipster#namedJsxElements",
  "react-loadable": "<%= dependabotPackageJson.dependencies['react-loadable'] %>",
  "react-redux": "<%= dependabotPackageJson.dependencies['react-redux'] %>",
  "react-redux-loading-bar": "<%= dependabotPackageJson.dependencies['react-redux-loading-bar'] %>",
@@ -154,6 +154,7 @@
 <%_ } _%>
 <%_ if (cypressTests) { _%>
  "cypress": "<%= dependabotPackageJson.devDependencies['cypress'] %>",
+ "cypress-intellij-reporter": "^0.0.7",
 <%_ } _%>
  "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
 <%_ if (protractorTests) { _%>

generators/client/templates/react/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
- name="newPassword"
- label={translate('global.form.newpassword.label')}
- placeholder={translate('global.form.newpassword.placeholder')}
- type="password"
+ // eslint-disable-next-line @typescript-eslint/no-misused-promises
+ <Form onSubmit={ handleSubmit(handleValidSubmit) }>
+ <ValidatedTextInput
+ register={ register }
+ touchedFields={ touchedFields }
+ errors={ errors }
+ setValue={ setValue }
+ nameIdCy="newPassword"
  validate={{
- required: { value: true, message: translate('global.messages.validate.newpassword.required') },
+ 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
- name="confirmPassword"
- label={translate('global.form.confirmpassword.label')}
- placeholder={translate('global.form.confirmpassword.placeholder')}
- type="password"
+ <ValidatedTextInput
+ register={ register }
+ touchedFields={ touchedFields }
+ errors={ errors }
+ setValue={ setValue }
+ nameIdCy="confirmPassword"
  validate={{
- required: { value: true, message: translate('global.messages.validate.confirmpassword.required') },
+ 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">

generators/client/templates/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 }
+ nameIdCy="email"
+ validate={ {
+ 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;