1import React, { FC } from 'react'; 2import { css } from '@emotion/css'; 3import { Button, Field, Form, HorizontalGroup, LinkButton } from '@grafana/ui'; 4 5import config from 'app/core/config'; 6import { UserDTO } from 'app/types'; 7import { ChangePasswordFields } from './types'; 8import { PasswordField } from '../../core/components/PasswordField/PasswordField'; 9 10export interface Props { 11 user: UserDTO; 12 isSaving: boolean; 13 onChangePassword: (payload: ChangePasswordFields) => void; 14} 15 16export const ChangePasswordForm: FC<Props> = ({ user, onChangePassword, isSaving }) => { 17 const { ldapEnabled, authProxyEnabled, disableLoginForm } = config; 18 const authSource = user.authLabels?.length && user.authLabels[0]; 19 20 if (ldapEnabled || authProxyEnabled) { 21 return <p>You cannot change password when LDAP or auth proxy authentication is enabled.</p>; 22 } 23 if (authSource && disableLoginForm) { 24 return <p>Password cannot be changed here.</p>; 25 } 26 27 return ( 28 <div 29 className={css` 30 max-width: 400px; 31 `} 32 > 33 <Form onSubmit={onChangePassword}> 34 {({ register, errors, getValues }) => { 35 return ( 36 <> 37 <Field label="Old password" invalid={!!errors.oldPassword} error={errors?.oldPassword?.message}> 38 <PasswordField 39 id="current-password" 40 autoComplete="current-password" 41 {...register('oldPassword', { required: 'Old password is required' })} 42 /> 43 </Field> 44 45 <Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}> 46 <PasswordField 47 id="new-password" 48 autoComplete="new-password" 49 {...register('newPassword', { 50 required: 'New password is required', 51 validate: { 52 confirm: (v) => v === getValues().confirmNew || 'Passwords must match', 53 old: (v) => v !== getValues().oldPassword || `New password can't be the same as the old one.`, 54 }, 55 })} 56 /> 57 </Field> 58 59 <Field label="Confirm password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}> 60 <PasswordField 61 id="confirm-new-password" 62 autoComplete="new-password" 63 {...register('confirmNew', { 64 required: 'New password confirmation is required', 65 validate: (v) => v === getValues().newPassword || 'Passwords must match', 66 })} 67 /> 68 </Field> 69 <HorizontalGroup> 70 <Button variant="primary" disabled={isSaving}> 71 Change Password 72 </Button> 73 <LinkButton variant="secondary" href={`${config.appSubUrl}/profile`} fill="outline"> 74 Cancel 75 </LinkButton> 76 </HorizontalGroup> 77 </> 78 ); 79 }} 80 </Form> 81 </div> 82 ); 83}; 84