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/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" />
diff --git a/generators/react/templates/package.json.ejs b/generators/react/templates/package.json.ejs index 491c577aea9f..b1b8f7fe5acc 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:hide212131/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-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..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 @@ -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({ mode: 'onTouched'}); 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..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 @@ -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({ mode: 'onTouched'}); 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 a85f6bfd0c7d..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 @@ -17,19 +17,20 @@ 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, ValidatedTextInput } from 'react-jhipster'; +import { Button, Col, Form, 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, touchedFields }} = useForm({ mode: 'onTouched'}); useEffect(() => { dispatch(reset()); dispatch(getSession()); @@ -38,12 +39,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 +62,8 @@ export const PasswordPage = () => { dispatch(reset()); }, [successMessage, errorMessage]); + const updateNewPassword = event => { setNewPassword(event.target.value); setValue('newPassword', event.target.value, { shouldValidate: true, shouldDirty: true, shouldTouch: true }); }; + return (
@@ -72,48 +73,56 @@ export const PasswordPage = () => { Password for {account.login} - - + - - - + + v === password || translate('global.messages.error.dontmatch'), + validate: v => v === newPassword || translate('global.messages.error.dontmatch'), }} - data-cy="confirmPassword" + 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..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 @@ -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({ mode: 'onTouched'}); 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" /> - - v === password || translate('global.messages.error.dontmatch'), }} - data-cy="secondPassword" + labelPlaceholderKey="global.form.confirmpassword.label" + inputPlaceholderKey="global.form.confirmpassword.placeholder" /> - +

 

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..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 @@ -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,30 @@ 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 { DefaultValues, FieldValues, 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 }, + reset: resetAsyncForm + } = useForm({ mode: 'onTouched' }); + + useEffect(() => { + resetAsyncForm({ + firstName: account?.firstName, + lastName: account?.lastName, + email: account?.email, +<%_ if (enableTranslation) { _%> + langKey: account?.langKey, +<%_ } _%> + } as FieldValues); + }, [account]); useEffect(() => { dispatch(getSession()); @@ -68,46 +87,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} ))} - + <%_ } _%> - +
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..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 @@ -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, registerReactstrap } from 'react-jhipster'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { FieldValues, useForm } from 'react-hook-form'; <%_ if (enableTranslation) { _%> import { locales, languages } from 'app/config/translation'; @@ -66,6 +67,26 @@ 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 }, + 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 (
@@ -79,108 +100,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'), + }, + }} + labelPlaceholderKey="userManagement.login" + /> + + + isEmail(v) || translate('global.messages.validate.email.invalid'), + }} + labelPlaceholderKey="global.form.email.label" + inputPlaceholderKey="global.form.email.placeholder" /> - ) : 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'), - }} - /> - + + {translate('userManagement.activated')} <%_ if (enableTranslation) { _%> - + {locales.map(locale => ( ))} - + <%_ } _%> - + {authorities.map(role => ( ))} - + - + }
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" />
diff --git a/generators/vue/templates/src/main/webapp/app/account/settings/settings.vue.ejs b/generators/vue/templates/src/main/webapp/app/account/settings/settings.vue.ejs index a41ab7e9a451..2aebfa51c22c 100644 --- a/generators/vue/templates/src/main/webapp/app/account/settings/settings.vue.ejs +++ b/generators/vue/templates/src/main/webapp/app/account/settings/settings.vue.ejs @@ -27,7 +27,7 @@ + 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" />