Skip to content

Commit

Permalink
use new ValidatedTextInput element from react-jhipster
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tcharl
Tcharl committed Sep 4, 2022
1 parent c2e247e commit 186950b
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 69 deletions.
3 changes: 2 additions & 1 deletion generators/client/templates/react/package.json.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'] %>",
Expand Down Expand Up @@ -154,6 +154,7 @@
<%_ } _%>
<%_ if (cypressTests) { _%>
"cypress": "<%= dependabotPackageJson.devDependencies['cypress'] %>",
"cypress-intellij-reporter": "^0.0.7",
<%_ } _%>
"typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
<%_ if (protractorTests) { _%>
Expand Down
111 changes: 46 additions & 65 deletions ...tors/client/templates/react/src/main/webapp/app/modules/account/password/password.tsx.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down Expand Up @@ -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 (
<div>
Expand All @@ -79,65 +75,50 @@ export const PasswordPage = () => {
</h2>
{/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
<Form id="password-form" onSubmit={ handleSubmit(handleValidSubmit) }>
<FormGroup>
<Label id="currentPasswordLabel" for="currentPassword">
{translate('global.form.currentpassword.label')}
</Label>
<Input
id="currentPassword"
name="currentPassword"
placeholder={ translate('global.form.currentpassword.placeholder') }
type="password"
{...register('currentPassword', { required: translate('global.messages.validate.newpassword.required') })}
data-cy="currentPassword"
valid={!errors.currentPassword}
invalid={!!errors.currentPassword}
onChange={updateCurrentPassword}
/>
<FormFeedback hidden={!errors.currentPassword}>{errors.currentPassword?.message}</FormFeedback>
</FormGroup>
<FormGroup>
<Label id="newPasswordLabel" for="newPassword">
{translate('global.form.newpassword.label')}
</Label>
<Input
name="newPassword"
placeholder={translate('global.form.newpassword.placeholder')}
type="password"
{...register('newPassword', {
required: translate('global.messages.validate.newpassword.required'),
minLength: { value: 4, message: translate('global.messages.validate.newpassword.minlength') },
maxLength: { value: 50, message: translate('global.messages.validate.newpassword.maxlength') }
})}
data-cy="newPassword"
valid={!errors.newPassword}
invalid={!!errors.newPassword}
onChange={updateNewPassword}
/>
<FormFeedback hidden={!errors.newPassword}>{errors.newPassword?.message}</FormFeedback>
<PasswordStrengthBar password={newPassword} />
</FormGroup>
<FormGroup>
<Label id="confirmPasswordLabel" for="confirmPassword">
{translate('global.form.confirmpassword.label')}
</Label>
<Input
name="confirmPassword"
placeholder={translate('global.form.confirmpassword.placeholder')}
type="password"
{...register('confirmPassword', {
required: translate('global.messages.validate.confirmpassword.required'),
minLength: { value: 4, message: translate('global.messages.validate.confirmpassword.minlength') },
maxLength: { value: 50, message: translate('global.messages.validate.confirmpassword.maxlength') },
validate: v => v === newPassword || translate('global.messages.error.dontmatch'),
})}
data-cy="confirmPassword"
valid={!errors.confirmPassword}
invalid={!!errors.confirmPassword}
onChange={updateConfirmPassword}
/>
<FormFeedback hidden={!errors.confirmPassword}>{errors.confirmPassword?.message}</FormFeedback>
</FormGroup>
<ValidatedTextInput
register={ register }
touchedFields={ touchedFields }
errors={ errors }
setValue={ setValue }
name="currentPassword"
validation={ { required: translate('global.messages.validate.newpassword.required') } }
labelPlaceholderKey="global.form.currentpassword.label"
inputPlaceholderKey="global.form.currentpassword.placeholder"
type="password"
/>
<ValidatedTextInput
register={ register }
touchedFields={ touchedFields }
errors={ errors }
setValue={ setValue }
name="newPassword"
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') }
} }
labelPlaceholderKey="global.form.newpassword.label"
inputPlaceholderKey="global.form.newpassword.placeholder"
type="password"
updateValueOverrideMethod={ updateNewPassword }
/>
<PasswordStrengthBar password={newPassword} />
<ValidatedTextInput
register={ register }
touchedFields={ touchedFields }
errors={ errors }
setValue={ setValue }
name="confirmPassword"
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 === newPassword || translate('global.messages.error.dontmatch'),
} }
labelPlaceholderKey="global.form.confirmpassword.label"
inputPlaceholderKey="global.form.confirmpassword.placeholder"
type="password"
/>
<Button color="success" type="submit" data-cy="submit">
<Translate contentKey="password.form.button">Save</Translate>
</Button>
Expand Down
6 changes: 3 additions & 3 deletions generators/entity-client/templates/react/src/main/webapp/app/entities/entity-update.tsx.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,11 +296,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 { _%>
Expand Down

0 comments on commit 186950b

Please sign in to comment.