IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Forms migration: Change password (#23623)

Browse Source 
* Migrate ChangePassword

* Add validation
This commit is contained in:
Tobias Skarhed 2020-04-17 11:24:21 +02:00 committed by GitHub
parent f023e7a399
commit a9e408fecf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/Forms/Form.mdx
View File

@ -29,8 +29,8 @@ const defaultUser: Partial<UserDTO> = {
>{({register, errors}) => {
return (
<Field>
<Forms.Input name="name" ref={register}/>
<Forms.Input type="email" name="email" ref={register({required: true})}/>
<Input name="name" ref={register}/>
<Input type="email" name="email" ref={register({required: true})}/>
<Button type="submit">Create User</Button>
</Field>
)
@ -46,13 +46,13 @@ const defaultUser: Partial<UserDTO> = {
`register` allows to register form elements(inputs, selects, radios, etc) in the form. In order to do that you need to pass `register` as a `ref` property to the form input. For example:
```jsx
<Forms.Input name="inputName" ref={register} />
<Input name="inputName" ref={register} />
```
Register accepts an object which describes validation rules for a given input:
```jsx
<Forms.Input
<Input
name="inputName"
ref={register({
required: true,
@ -70,7 +70,7 @@ See [Validation](#validation) for examples on validation and validation rules.
```jsx
<Field label="Name" invalid={!!errors.name} error="Name is required">
<Forms.Input name="name" ref={register({ required: true })} />
<Input name="name" ref={register({ required: true })} />
</Field>
```
@ -179,7 +179,7 @@ const defaultValues: FormDto {
<Form ...>{
({register}) => (
<>
<Forms.Input defaultValue={default.name} name="name" ref={register} />
<Input defaultValue={default.name} name="name" ref={register} />
</>
)}
</Form>
@ -196,7 +196,7 @@ Validation can be performed either synchronously or asynchronously. What's impor
({register, errors}) => (
<>
<Field invalid={!!errors.name} error={errors.name && 'Name is required'}
<Forms.Input
<Input
defaultValue={default.name}
name="name"
ref={register({ required: true })}
@ -215,7 +215,7 @@ One important thing to note is that if you want to provide different error messa
({register, errors}) => (
<>
<Field invalid={!!errors.name} error={errors.name?.message }
<Forms.Input
<Input
defaultValue={default.name}
name="name"
ref={register({
@ -256,7 +256,7 @@ validateAsync = (newValue: string) => {
({register, errors}) => (
<>
<Field invalid={!!errors.name} error={errors.name?.message}
<Forms.Input
<Input
defaultValue={default.name}
name="name"
ref={register({

21
public/app/core/components/PasswordInput/PasswordInput.tsx
View File

@ -1,21 +0,0 @@
import React, { ChangeEvent, forwardRef } from 'react';
import { LegacyForms, FormLabel } from '@grafana/ui';
const { Input } = LegacyForms;
export interface Props {
label: string;
value: string | undefined;
onChange: (value: string) => void;
}
export const PasswordInput = forwardRef<HTMLInputElement, Props>((props, ref) => (
<>
<FormLabel className="width-8">{props.label}</FormLabel>
<Input
className="gf-form-input max-width-22"
type="password"
onChange={(event: ChangeEvent<HTMLInputElement>) => props.onChange(event.target.value)}
value={props.value}
/>
</>
));

123
public/app/features/profile/ChangePasswordForm.tsx
View File

@ -1,75 +1,70 @@
import React, { PureComponent, MouseEvent } from 'react';
import React, { FC } from 'react';
import config from 'app/core/config';
import { Button, LinkButton } from '@grafana/ui';
import { Button, LinkButton, Form, Field, Input, HorizontalGroup } from '@grafana/ui';
import { ChangePasswordFields } from 'app/core/utils/UserProvider';
import { PasswordInput } from 'app/core/components/PasswordInput/PasswordInput';
import { css } from 'emotion';
export interface Props {
isSaving: boolean;
onChangePassword: (payload: ChangePasswordFields) => void;
}
export interface State {
oldPassword: string;
newPassword: string;
confirmNew: string;
}
export const ChangePasswordForm: FC<Props> = ({ onChangePassword, isSaving }) => {
const { ldapEnabled, authProxyEnabled } = config;
export class ChangePasswordForm extends PureComponent<Props, State> {
state: State = {
oldPassword: '',
newPassword: '',
confirmNew: '',
};
onOldPasswordChange = (oldPassword: string) => {
this.setState({ oldPassword });
};
onNewPasswordChange = (newPassword: string) => {
this.setState({ newPassword });
};
onConfirmPasswordChange = (confirmNew: string) => {
this.setState({ confirmNew });
};
onSubmitChangePassword = (event: MouseEvent<HTMLInputElement>) => {
event.preventDefault();
this.props.onChangePassword({ ...this.state });
};
render() {
const { oldPassword, newPassword, confirmNew } = this.state;
const { isSaving } = this.props;
const { ldapEnabled, authProxyEnabled } = config;
if (ldapEnabled || authProxyEnabled) {
return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
}
return (
<form name="userForm" className="gf-form-group">
<div className="gf-form max-width-30">
<PasswordInput label="Old Password" onChange={this.onOldPasswordChange} value={oldPassword} />
</div>
<div className="gf-form max-width-30">
<PasswordInput label="New Password" onChange={this.onNewPasswordChange} value={newPassword} />
</div>
<div className="gf-form max-width-30">
<PasswordInput label="Confirm Password" onChange={this.onConfirmPasswordChange} value={confirmNew} />
</div>
<div className="gf-form-button-row">
<Button variant="primary" onClick={this.onSubmitChangePassword} disabled={isSaving}>
Change Password
</Button>
<LinkButton variant="secondary" href={`${config.appSubUrl}/profile`}>
Cancel
</LinkButton>
</div>
</form>
);
if (ldapEnabled || authProxyEnabled) {
return <p>You cannot change password when ldap or auth proxy authentication is enabled.</p>;
}
}
return (
<div
className={css`
max-width: 400px;
`}
>
<Form onSubmit={onChangePassword}>
{({ register, errors, getValues }) => {
return (
<>
<Field label="Old password" invalid={!!errors.oldPassword} error={errors?.oldPassword?.message}>
<Input type="password" name="oldPassword" ref={register({ required: 'Old password is required' })} />
</Field>
export default ChangePasswordForm;
<Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}>
<Input
type="password"
name="newPassword"
ref={register({
required: 'New password is required',
validate: {
confirm: v => v === getValues().confirmNew || 'Passwords must match',
old: v => v !== getValues().oldPassword || `New password can't be the same as the old one.`,
},
})}
/>
</Field>
<Field label="Confirm password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}>
<Input
type="password"
name="confirmNew"
ref={register({
required: 'New password confirmation is required',
validate: v => v === getValues().newPassword || 'Passwords must match',
})}
/>
</Field>
<HorizontalGroup>
<Button variant="primary" disabled={isSaving}>
Change Password
</Button>
<LinkButton variant="secondary" href={`${config.appSubUrl}/profile`}>
Cancel
</LinkButton>
</HorizontalGroup>
</>
);
}}
</Form>
</div>
);
};