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