From a6f2d21ea50230bf2d62d5cd17cc8fd188482a75 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Sun, 28 Aug 2022 19:00:58 +0200 Subject: [PATCH 01/12] update password reset page to use only react-form capabilities --- .../modules/account/password/password.tsx.ejs | 122 +++++++++++------- 1 file changed, 75 insertions(+), 47 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index a85f6bfd0c7d..25a5ba489980 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/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 (
@@ -72,48 +77,71 @@ export const PasswordPage = () => { Password for {account.login} - - - - - v === password || translate('global.messages.error.dontmatch'), - }} - data-cy="confirmPassword" - /> + {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} +
+ + + + + + + + + + + + + + v === newPassword || translate('global.messages.error.dontmatch'), + })} + data-cy="confirmPassword" + valid={!errors.confirmPassword} + invalid={!!errors.confirmPassword} + onChange={updateConfirmPassword} + /> + + - +
From 420fe0184470379112a68205bc93abd5faa451bf Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Sun, 4 Sep 2022 21:10:45 +0200 Subject: [PATCH 02/12] use new ValidatedTextInput element from react-jhipster --- generators/react/templates/package.json.ejs | 3 +- .../_entityFolder/_entityFile-update.tsx.ejs | 6 +- .../modules/account/password/password.tsx.ejs | 113 ++++++++---------- 3 files changed, 52 insertions(+), 70 deletions(-) diff --git a/generators/react/templates/package.json.ejs b/generators/react/templates/package.json.ejs index 491c577aea9f..ede9ebf99463 100644 --- a/generators/react/templates/package.json.ejs +++ b/generators/react/templates/package.json.ejs @@ -41,7 +41,7 @@ "react": "<%= nodeDependencies['react'] %>", "react-dom": "<%= nodeDependencies['react-dom'] %>", "react-hook-form": "<%= nodeDependencies['react-hook-form'] %>", - "react-jhipster": "<%= nodeDependencies['react-jhipster'] %>", + "react-jhipster": "github:Tcharl/react-jhipster#namedJsxElements", "react-loadable": "<%= nodeDependencies['react-loadable'] %>", "react-redux": "<%= nodeDependencies['react-redux'] %>", "react-redux-loading-bar": "<%= nodeDependencies['react-redux-loading-bar'] %>", @@ -132,6 +132,7 @@ "ts-loader": "<%= nodeDependencies['ts-loader'] %>", <%_ if (cypressTests) { _%> "cypress": "<%= nodeDependencies['cypress'] %>", + "cypress-intellij-reporter": "^0.0.7", <%_ } _%> "typescript": "<%= nodeDependencies['typescript'] %>", "webpack": "<%= nodeDependencies['webpack'] %>", diff --git a/generators/react/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-update.tsx.ejs b/generators/react/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-update.tsx.ejs index 81ef827d9c1c..4bf4c8335aba 100644 --- a/generators/react/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-update.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-update.tsx.ejs @@ -288,11 +288,11 @@ _%> /> <%_ } else if (field.fieldTypeBinary) { _%> <%_ if (!field.blobContentTypeText) { _%> - <%_ if (field.blobContentTypeImage) {_%> + <%_ if (field.blobContentTypeImage) {_%> isImage accept="image/*" - <%_ } else { _%> + <%_ } else { _%> openActionLabel={translate('entity.action.open')} - <%_ } _%> + <%_ } _%> <%- include('react_validators'); %> /> <%_ } else { _%> diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index 25a5ba489980..19e45950b9b3 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs @@ -17,7 +17,7 @@ limitations under the License. -%> import React, { useState, useEffect } from 'react'; -import { Translate, translate } from 'react-jhipster'; +import { Translate, translate, ValidatedTextInput } from 'react-jhipster'; import { Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row } from 'reactstrap'; import { toast } from 'react-toastify'; @@ -30,9 +30,7 @@ import { useForm } from 'react-hook-form'; export const PasswordPage = () => { const [newPassword, setNewPassword] = useState(''); const dispatch = useAppDispatch(); - const { register, handleSubmit, setValue, formState: { errors }} = useForm({ - mode: 'onTouched' - }); + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); useEffect(() => { dispatch(reset()); dispatch(getSession()); @@ -64,9 +62,7 @@ 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); }; + const updateNewPassword = event => { setNewPassword(event.target.value); setValue('newPassword', event.target.value, { shouldValidate: true, shouldDirty: true, shouldTouch: true }); }; return (
@@ -79,65 +75,50 @@ export const PasswordPage = () => { {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
- - - - - - - - - - - - - - v === newPassword || translate('global.messages.error.dontmatch'), - })} - data-cy="confirmPassword" - valid={!errors.confirmPassword} - invalid={!!errors.confirmPassword} - onChange={updateConfirmPassword} - /> - - + + + + v === newPassword || translate('global.messages.error.dontmatch'), + } } + labelPlaceholderKey="global.form.confirmpassword.label" + inputPlaceholderKey="global.form.confirmpassword.placeholder" + type="password" + /> From 5a8d32eeb56482cbbba0725b751c01ec4872aceb Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Mon, 5 Sep 2022 22:02:26 +0200 Subject: [PATCH 03/12] update reset password using validatedinputform --- .../cypress/support/commands.ts.ejs | 2 +- .../finish/password-reset-finish.tsx.ejs | 87 +++++++++++-------- .../init/password-reset-init.tsx.ejs | 84 ++++++++++-------- .../modules/account/password/password.tsx.ejs | 2 +- 4 files changed, 97 insertions(+), 78 deletions(-) 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 index b7f1c53847fc..fc4770d5161f 100644 --- 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"]'; <%_ } _%> diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs index bcdecf88af11..7a646dace0a8 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs +++ b/generators/react/templates/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 ( - - + - v === password || translate('global.messages.error.dontmatch'), - }} - data-cy="confirmResetPassword" + } } + labelPlaceholderKey="global.form.confirmpassword.label" + inputPlaceholderKey="global.form.confirmpassword.placeholder" + type="password" /> - + ); }; - const successMessage = useAppSelector(state => state.passwordReset.successMessage); - - useEffect(() => { - if (successMessage) { -<%_ if (enableTranslation) { _%> - toast.success(translate(successMessage)); -<%_ } else { _%> - toast.success(successMessage); -<%_ } _%> - } - }, [successMessage]); - return (
diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs index 08c996b4eadb..652a983e692d 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs +++ b/generators/react/templates/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 ( -
- - -

Reset your password

- -

Enter the email address you used to register

- - - isEmail(v) || translate('global.messages.validate.email.invalid'), - }} - data-cy="emailResetPassword" - /> - - - - -
- ); -} + return ( +
+ + +

+ Reset your password +

+ +

+ Enter the email address you used to register +

+ + {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} +
+ isEmail(v) || translate('global.messages.validate.email.invalid'), + }} + labelPlaceholderKey="global.form.email.label" + inputPlaceholderKey="global.form.email.placeholder" + type="email" + /> + + + +
+
+ ); +}; export default PasswordResetInit; diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index 19e45950b9b3..7bf64894831d 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/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'; From 964ed63ff6ab7d8c258b6f4444b08f7c1d434027 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Tue, 6 Sep 2022 08:40:14 +0200 Subject: [PATCH 04/12] use the same data-cy handle for email in the reset password form --- .../password-reset/init/password-reset-init.component.html.ejs | 2 +- .../app/account/reset-password/init/reset-password-init.vue.ejs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/generators/angular/templates/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs b/generators/angular/templates/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs index cd42d32daa65..a08283ea12fb 100644 --- a/generators/angular/templates/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs +++ b/generators/angular/templates/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 /> diff --git a/generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs b/generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs index 19e2607ae6f3..b3190b2715d7 100644 --- a/generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs +++ b/generators/vue/templates/src/main/webapp/app/account/reset-password/init/reset-password-init.vue.ejs @@ -20,7 +20,7 @@ + v-model="v$.resetAccount.email.$model" minlength="5" maxlength="254" email required data-cy="email" />
From 76a5c8a435c1f7c7ee2cd09d3429c30dbdde6496 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Sat, 10 Sep 2022 01:15:33 +0200 Subject: [PATCH 05/12] register form using validatetextinput --- .../finish/password-reset-finish.tsx.ejs | 4 +- .../init/password-reset-init.tsx.ejs | 2 +- .../modules/account/password/password.tsx.ejs | 10 +-- .../modules/account/register/register.tsx.ejs | 75 +++++++++++-------- 4 files changed, 53 insertions(+), 38 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs index 7a646dace0a8..8763bdcc4a53 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs @@ -71,7 +71,7 @@ export const PasswordResetFinishPage = () => { errors={ errors } setValue={ setValue } name="newPassword" - validation={ { + validate={ { 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') }, @@ -88,7 +88,7 @@ export const PasswordResetFinishPage = () => { errors={ errors } setValue={ setValue } name="confirmPassword" - validation={ { + validate={ { 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') }, diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs index 652a983e692d..b5f0fb21010e 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs @@ -72,7 +72,7 @@ export const PasswordResetInit = () => { errors={ errors } setValue={ setValue } name="email" - validation={ { + 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') }, diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index 7bf64894831d..e33f9f5536aa 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs @@ -81,7 +81,7 @@ export const PasswordPage = () => { errors={ errors } setValue={ setValue } name="currentPassword" - validation={ { required: translate('global.messages.validate.newpassword.required') } } + validate={{ required: translate('global.messages.validate.newpassword.required') }} labelPlaceholderKey="global.form.currentpassword.label" inputPlaceholderKey="global.form.currentpassword.placeholder" type="password" @@ -92,11 +92,11 @@ export const PasswordPage = () => { errors={ errors } setValue={ setValue } name="newPassword" - validation={ { + validate={{ 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') } - } } + }} labelPlaceholderKey="global.form.newpassword.label" inputPlaceholderKey="global.form.newpassword.placeholder" type="password" @@ -109,12 +109,12 @@ export const PasswordPage = () => { errors={ errors } setValue={ setValue } name="confirmPassword" - validation={ { + validate={{ 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'), - } } + }} labelPlaceholderKey="global.form.confirmpassword.label" inputPlaceholderKey="global.form.confirmpassword.placeholder" type="password" diff --git a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs index 0b2501f71a0e..a9b3569e3f20 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs @@ -17,15 +17,18 @@ limitations under the License. -%> import React, { useState, useEffect } from 'react'; -import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster'; -import { Row, Col, Alert, Button } from 'reactstrap'; +import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster'; +import { Row, Col, Alert, Button, Form } from 'reactstrap'; import { toast } from 'react-toastify'; import PasswordStrengthBar from 'app/shared/layout/password/password-strength-bar'; import { useAppDispatch, useAppSelector } from 'app/config/store'; import { handleRegister, reset } from './register.reducer'; +import { useForm } from 'react-hook-form'; export const RegisterPage = () => { + + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); const [password, setPassword] = useState(''); const dispatch = useAppDispatch(); @@ -40,16 +43,15 @@ export const RegisterPage = () => { const currentLocale = useAppSelector(state => state.locale.currentLocale); <%_ } _%> - const handleValidSubmit = ({ username, email, firstPassword }) => { + const handleValidSubmit = data => { <%_ if (enableTranslation) { _%> - dispatch(handleRegister({ login: username, email, password: firstPassword, langKey: currentLocale })); + dispatch(handleRegister({ login: data.username, email: data.email, password: data.firstPassword, langKey: currentLocale })); <%_ } else { _%> - dispatch(handleRegister({ login: username, email, password: firstPassword, langKey: 'en' })); + dispatch(handleRegister({ login: data.username, email: data.email, password: data.firstPassword, langKey: 'en' })); <%_ } _%> }; - const updatePassword = event => setPassword(event.target.value); - + const updatePassword = event => { setPassword(event.target.value); setValue('firstPassword', event.target.value, { shouldValidate: true, shouldDirty: true, shouldTouch: true }); }; const successMessage = useAppSelector(state => state.register.successMessage); useEffect(() => { @@ -73,13 +75,16 @@ export const RegisterPage = () => { - - + { minLength: { value: 1, message: translate('register.messages.validate.login.minlength') }, maxLength: { value: 50, message: translate('register.messages.validate.login.maxlength') }, }} - data-cy="username" + labelPlaceholderKey="global.form.username.label" + inputPlaceholderKey="global.form.username.placeholder" /> - isEmail(v) || translate('global.messages.validate.email.invalid'), }} - data-cy="email" + labelPlaceholderKey="global.form.email.label" + inputPlaceholderKey="global.form.email.placeholder" /> - - { maxLength: { value: 50, message: translate('global.messages.validate.confirmpassword.maxlength') }, validate: v => v === password || translate('global.messages.error.dontmatch'), }} - data-cy="secondPassword" + labelPlaceholderKey="global.form.confirmpassword.label" + inputPlaceholderKey="global.form.confirmpassword.placeholder" /> - +

 

From caf27e2b576f29a8a27aa2002ae4bd9aecc59f86 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Sat, 10 Sep 2022 23:34:53 +0200 Subject: [PATCH 06/12] use react form for all react-cli account related forms --- .../finish/password-reset-finish.tsx.ejs | 8 +-- .../modules/account/register/register.tsx.ejs | 4 +- .../modules/account/settings/settings.tsx.ejs | 62 ++++++++++++------- 3 files changed, 45 insertions(+), 29 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs index 8763bdcc4a53..350a4014906c 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs @@ -71,11 +71,11 @@ export const PasswordResetFinishPage = () => { errors={ errors } setValue={ setValue } name="newPassword" - validate={ { + validate={{ 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') }, - } } + }} labelPlaceholderKey="global.form.newpassword.label" inputPlaceholderKey="global.form.newpassword.placeholder" type="password" @@ -88,12 +88,12 @@ export const PasswordResetFinishPage = () => { errors={ errors } setValue={ setValue } name="confirmPassword" - validate={ { + validate={{ 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'), - } } + }} labelPlaceholderKey="global.form.confirmpassword.label" inputPlaceholderKey="global.form.confirmpassword.placeholder" type="password" diff --git a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs index a9b3569e3f20..c7ccede6a9fa 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs @@ -84,7 +84,7 @@ export const RegisterPage = () => { setValue={ setValue } name="username" validate={{ - required: 'register.messages.validate.login.required', + required: translate('register.messages.validate.login.required'), pattern: { value: /^[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$|^[_.@A-Za-z0-9-]+$/, message: translate('register.messages.validate.login.pattern'), @@ -136,7 +136,7 @@ export const RegisterPage = () => { name="secondPassword" type="password" 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'), diff --git a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs index b377d9383aff..eebe3ca66f3f 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs @@ -17,8 +17,8 @@ limitations under the License. -%> import React, { useEffect } from 'react'; -import { Button, Col, Row } from 'reactstrap'; -import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster'; +import { Button, Col, Row, Form, Input } from 'reactstrap'; +import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster'; import { toast } from 'react-toastify'; <%_ if (enableTranslation) { _%> @@ -27,11 +27,18 @@ import { locales, languages } from 'app/config/translation'; import { useAppDispatch, useAppSelector } from 'app/config/store'; import { getSession } from 'app/shared/reducers/authentication'; import { saveAccountSettings, reset } from './settings.reducer'; +import { useForm } from 'react-hook-form'; export const SettingsPage = () => { const dispatch = useAppDispatch(); const account = useAppSelector(state => state.authentication.account); const successMessage = useAppSelector(state => state.settings.successMessage); + const { + register, + handleSubmit, + setValue, + formState: { errors, touchedFields }, + } = useForm(); useEffect(() => { dispatch(getSession()); @@ -68,46 +75,55 @@ export const SettingsPage = () => { User settings for {account.login} - - + - - isEmail(v) || translate('global.messages.validate.email.invalid'), }} - data-cy="email" + labelPlaceholderKey="global.form.email.label" + inputPlaceholderKey="global.form.email.placeholder" /> + <%_ if (enableTranslation) { _%> - { {languages[locale].name} ))} - + <%_ } _%> - +
From 6276e3c5349798231e6a2ae9094ced9787566f23 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Sun, 11 Sep 2022 21:40:51 +0200 Subject: [PATCH 07/12] all react-client using the new ValidatedTextInput --- .../finish/password-reset-finish.tsx.ejs | 4 +- .../init/password-reset-init.tsx.ejs | 2 +- .../modules/account/password/password.tsx.ejs | 6 +- .../modules/account/register/register.tsx.ejs | 8 +- .../modules/account/settings/settings.tsx.ejs | 21 +- .../user-management-update.tsx.ejs | 211 ++++++++++-------- 6 files changed, 145 insertions(+), 107 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs index 350a4014906c..41956aaa96d9 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs @@ -70,7 +70,7 @@ export const PasswordResetFinishPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="newPassword" + nameIdCy="newPassword" validate={{ required: translate('global.messages.validate.newpassword.required') , minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') }, @@ -87,7 +87,7 @@ export const PasswordResetFinishPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="confirmPassword" + nameIdCy="confirmPassword" validate={{ required: translate('global.messages.validate.confirmpassword.required'), minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') }, diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs index b5f0fb21010e..617aaa44da79 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs @@ -71,7 +71,7 @@ export const PasswordResetInit = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="email" + nameIdCy="email" validate={ { required: translate('global.messages.validate.email.required'), minLength: { value: 5, message: translate('global.messages.validate.email.minlength') }, diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index e33f9f5536aa..52e78112d12b 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs @@ -80,7 +80,7 @@ export const PasswordPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="currentPassword" + nameIdCy="currentPassword" validate={{ required: translate('global.messages.validate.newpassword.required') }} labelPlaceholderKey="global.form.currentpassword.label" inputPlaceholderKey="global.form.currentpassword.placeholder" @@ -91,7 +91,7 @@ export const PasswordPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="newPassword" + nameIdCy="newPassword" validate={{ required: translate('global.messages.validate.newpassword.required'), minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') }, @@ -108,7 +108,7 @@ export const PasswordPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="confirmPassword" + nameIdCy="confirmPassword" validate={{ required: translate('global.messages.validate.confirmpassword.required'), minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') }, diff --git a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs index c7ccede6a9fa..a4c45b161b55 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs @@ -82,7 +82,7 @@ export const RegisterPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="username" + nameIdCy="username" validate={{ required: translate('register.messages.validate.login.required'), pattern: { @@ -100,7 +100,7 @@ export const RegisterPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="email" + nameIdCy="email" type="email" validate={{ required: translate('global.messages.validate.email.required'), @@ -116,7 +116,7 @@ export const RegisterPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="firstPassword" + nameIdCy="firstPassword" type="password" validate={{ required: translate('global.messages.validate.newpassword.required'), @@ -133,7 +133,7 @@ export const RegisterPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="secondPassword" + nameIdCy="secondPassword" type="password" validate={{ required: translate('global.messages.validate.confirmpassword.required'), diff --git a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs index eebe3ca66f3f..067dc580299c 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs @@ -27,7 +27,7 @@ import { locales, languages } from 'app/config/translation'; import { useAppDispatch, useAppSelector } from 'app/config/store'; import { getSession } from 'app/shared/reducers/authentication'; import { saveAccountSettings, reset } from './settings.reducer'; -import { useForm } from 'react-hook-form'; +import { DefaultValues, FieldValues, useForm } from 'react-hook-form'; export const SettingsPage = () => { const dispatch = useAppDispatch(); @@ -38,7 +38,16 @@ export const SettingsPage = () => { handleSubmit, setValue, formState: { errors, touchedFields }, - } = useForm(); + } = useForm({ + defaultValues: { + firstName: account?.firstName, + lastName: account?.lastName, + email: account?.email, +<%_ if (enableTranslation) { _%> + langKey: account?.langKey, +<%_ } _%> + } as DefaultValues + }); useEffect(() => { dispatch(getSession()); @@ -76,13 +85,13 @@ export const SettingsPage = () => { {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */} -
+ { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="lastName" + nameIdCy="lastName" validate={{ required: translate('settings.messages.validate.lastname.required'), minLength: { value: 1, message: translate('settings.messages.validate.lastname.minlength') }, @@ -110,7 +119,7 @@ export const SettingsPage = () => { touchedFields={ touchedFields } errors={ errors } setValue={ setValue } - name="email" + nameIdCy="email" type="email" validate={{ required: translate('global.messages.validate.email.required'), diff --git a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs index 18db32e4d2b5..d4e29da597c8 100644 --- a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs @@ -16,11 +16,12 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { Link, useNavigate, useParams } from 'react-router-dom'; -import { Button, Row, Col, FormText } from 'reactstrap'; -import { Translate, translate, ValidatedField, ValidatedForm, isEmail } from 'react-jhipster'; +import { Button, Row, Col, Form, Input } from 'reactstrap'; +import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { DefaultValues, FieldValues, useForm } from 'react-hook-form'; <%_ if (enableTranslation) { _%> import { locales, languages } from 'app/config/translation'; @@ -66,6 +67,23 @@ export const UserManagementUpdate = () => { const loading = useAppSelector(state => state.userManagement.loading); const updating = useAppSelector(state => state.userManagement.updating); const authorities = useAppSelector(state => state.userManagement.authorities); + const { + register, + handleSubmit, + setValue, + formState: { errors, touchedFields }, + } = useForm({ + defaultValues: { + id: user?.id, + login: user?.login, + firstName: user?.firstName, + lastName: user?.lastName, + email: user?.email, + activated: user?.activated, + langKey: user?.langKey, + authorities: user?.authorities, + } as DefaultValues + }); return (
@@ -79,108 +97,119 @@ export const UserManagementUpdate = () => { { loading ?

Loading...

- : + /* eslint-disable-next-line @typescript-eslint/no-misused-promises */ + : {user.id ? ( - - ) : null} - /, - message: translate('register.messages.validate.login.pattern'), - }, - minLength: { - value: 1, - message: translate('register.messages.validate.login.minlength'), - }, - maxLength: { - value: 50, - message: translate('register.messages.validate.login.maxlength'), - }, - }} - /> - - - This field cannot be longer than 50 characters. - isEmail(v) || translate('global.messages.validate.email.invalid'), - }} - /> - + ) : null} + /, + message: translate('register.messages.validate.login.pattern'), + }, + minLength: { + value: 1, + message: translate('register.messages.validate.login.minlength'), + }, + maxLength: { + value: 50, + message: translate('register.messages.validate.login.maxlength'), + }, + }} + labelPlaceholderKey="userManagement.login" + /> + + + isEmail(v) || translate('global.messages.validate.email.invalid'), + }} + labelPlaceholderKey="global.form.email.label" + inputPlaceholderKey="global.form.email.placeholder" + /> + <%_ if (enableTranslation) { _%> - + {locales.map(locale => ( ))} - + <%_ } _%> - + {authorities.map(role => ( ))} - + - + } From 96ba18346d96aa41088555a1af0b2505c9e43359 Mon Sep 17 00:00:00 2001 From: Charlie Mordant Date: Mon, 12 Sep 2022 12:15:44 +0200 Subject: [PATCH 08/12] rebase from main --- .../webapp/app/account/settings/settings.component.html.ejs | 4 ++-- .../src/test/javascript/cypress/support/commands.ts.ejs | 4 ++-- .../src/main/webapp/app/account/settings/settings.vue.ejs | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/generators/angular/templates/src/main/webapp/app/account/settings/settings.component.html.ejs b/generators/angular/templates/src/main/webapp/app/account/settings/settings.component.html.ejs index 8d315e1eebed..6451e1ed030e 100644 --- a/generators/angular/templates/src/main/webapp/app/account/settings/settings.component.html.ejs +++ b/generators/angular/templates/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" />
+ v-model="v$.settingsAccount.firstName.$model" minlength="1" maxlength="50" required data-cy="firstName" />
@@ -48,7 +48,7 @@ + v-model="v$.settingsAccount.lastName.$model" minlength="1" maxlength="50" required data-cy="lastName" />
From ce08ae6165f2b12e3ea9b298eaa1fac8037a725d Mon Sep 17 00:00:00 2001 From: Hideyuki Kagami Date: Sun, 9 Jul 2023 16:02:57 +0900 Subject: [PATCH 09/12] add behavior for onTouched (same as JHipster7) --- .../account/password-reset/finish/password-reset-finish.tsx.ejs | 2 +- .../account/password-reset/init/password-reset-init.tsx.ejs | 2 +- .../main/webapp/app/modules/account/password/password.tsx.ejs | 2 +- .../main/webapp/app/modules/account/register/register.tsx.ejs | 2 +- .../main/webapp/app/modules/account/settings/settings.tsx.ejs | 1 + .../user-management/user-management-update.tsx.ejs | 1 + 6 files changed, 6 insertions(+), 4 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs index 41956aaa96d9..7ed150281852 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/finish/password-reset-finish.tsx.ejs @@ -31,7 +31,7 @@ export const PasswordResetFinishPage = () => { const [searchParams] = useSearchParams(); const key = searchParams.get('key'); - const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm({ mode: 'onTouched'}); const [password, setPassword] = useState(''); useEffect( diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs index 617aaa44da79..6d17a22ae902 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password-reset/init/password-reset-init.tsx.ejs @@ -27,7 +27,7 @@ import { useForm } from 'react-hook-form'; export const PasswordResetInit = () => { const dispatch = useAppDispatch(); - const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm({ mode: 'onTouched'}); useEffect( () => () => { diff --git a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs index 52e78112d12b..4ba2cd57a1f3 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/password/password.tsx.ejs @@ -30,7 +30,7 @@ import { useForm } from 'react-hook-form'; export const PasswordPage = () => { const [newPassword, setNewPassword] = useState(''); const dispatch = useAppDispatch(); - const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm({ mode: 'onTouched'}); useEffect(() => { dispatch(reset()); dispatch(getSession()); diff --git a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs index a4c45b161b55..76119be80733 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/register/register.tsx.ejs @@ -28,7 +28,7 @@ import { useForm } from 'react-hook-form'; export const RegisterPage = () => { - const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm(); + const { register, handleSubmit, setValue, formState: { errors, touchedFields }} = useForm({ mode: 'onTouched'}); const [password, setPassword] = useState(''); const dispatch = useAppDispatch(); diff --git a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs index 067dc580299c..b4fcb5de8c22 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs @@ -39,6 +39,7 @@ export const SettingsPage = () => { setValue, formState: { errors, touchedFields }, } = useForm({ + mode: 'onTouched', defaultValues: { firstName: account?.firstName, lastName: account?.lastName, diff --git a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs index d4e29da597c8..c543662f6cd4 100644 --- a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs @@ -73,6 +73,7 @@ export const UserManagementUpdate = () => { setValue, formState: { errors, touchedFields }, } = useForm({ + mode: 'onTouched', defaultValues: { id: user?.id, login: user?.login, From d79419840ce76745e6a6e8f379ded0b46d2f2f95 Mon Sep 17 00:00:00 2001 From: Hideyuki Kagami Date: Sun, 9 Jul 2023 17:19:16 +0900 Subject: [PATCH 10/12] fix async process causing empty defaultValue. --- .../modules/account/settings/settings.tsx.ejs | 20 +++++++------ .../user-management-update.tsx.ejs | 30 ++++++++++--------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs index b4fcb5de8c22..d22692c7669b 100644 --- a/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/account/settings/settings.tsx.ejs @@ -38,17 +38,19 @@ export const SettingsPage = () => { handleSubmit, setValue, formState: { errors, touchedFields }, - } = useForm({ - mode: 'onTouched', - defaultValues: { - firstName: account?.firstName, - lastName: account?.lastName, - email: account?.email, + reset: resetAsyncForm + } = useForm({ mode: 'onTouched' }); + + useEffect(() => { + resetAsyncForm({ + firstName: account?.firstName, + lastName: account?.lastName, + email: account?.email, <%_ if (enableTranslation) { _%> - langKey: account?.langKey, + langKey: account?.langKey, <%_ } _%> - } as DefaultValues - }); + } as FieldValues); + }, [account]); useEffect(() => { dispatch(getSession()); diff --git a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs index c543662f6cd4..5b337cae4c4a 100644 --- a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs @@ -21,7 +21,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import { Button, Row, Col, Form, Input } from 'reactstrap'; import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { DefaultValues, FieldValues, useForm } from 'react-hook-form'; +import { FieldValues, useForm } from 'react-hook-form'; <%_ if (enableTranslation) { _%> import { locales, languages } from 'app/config/translation'; @@ -72,19 +72,21 @@ export const UserManagementUpdate = () => { handleSubmit, setValue, formState: { errors, touchedFields }, - } = useForm({ - mode: 'onTouched', - defaultValues: { - id: user?.id, - login: user?.login, - firstName: user?.firstName, - lastName: user?.lastName, - email: user?.email, - activated: user?.activated, - langKey: user?.langKey, - authorities: user?.authorities, - } as DefaultValues - }); + reset: resetAsyncForm + } = useForm({ mode: 'onTouched'}); + + useEffect(() => { + resetAsyncForm({ + id: user?.id, + login: user?.login, + firstName: user?.firstName, + lastName: user?.lastName, + email: user?.email, + activated: user?.activated, + langKey: user?.langKey, + authorities: user?.authorities, + } as FieldValues); + }, [user]); return (
From 1f341fd2077ec9dcb0da9c57cd854c89fa92f36b Mon Sep 17 00:00:00 2001 From: Hideyuki Kagami Date: Sat, 12 Aug 2023 11:10:55 +0900 Subject: [PATCH 11/12] adapt to reactstrap component. --- .../user-management/user-management-update.tsx.ejs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs index 5b337cae4c4a..f74dccf0542e 100644 --- a/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs +++ b/generators/react/templates/src/main/webapp/app/modules/administration/user-management/user-management-update.tsx.ejs @@ -19,7 +19,7 @@ import React, { useEffect } from 'react'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Button, Row, Col, Form, Input } from 'reactstrap'; -import { Translate, translate, ValidatedTextInput, isEmail } from 'react-jhipster'; +import { Translate, translate, ValidatedTextInput, isEmail, registerReactstrap } from 'react-jhipster'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FieldValues, useForm } from 'react-hook-form'; @@ -193,12 +193,12 @@ export const UserManagementUpdate = () => { type="checkbox" name="activated" check - {...register('activated')} + {...registerReactstrap(register, 'activated')} disabled={!user.id} - label={translate('userManagement.activated')} /> + {translate('userManagement.activated')} <%_ if (enableTranslation) { _%> - + {locales.map(locale => (