ChangePassword: Rewrite change password page to react (#17811)

* ChangePassword to React, created PasswordInput component, attempting UserProvider wrapper component, adding flex to btn row

* UserAPI interface, force classes on PasswordInput, remove api call from ChangePassword

* refactored out form

* clean up

* removed unnecessary bind, added loading state and loading component to change password form

* should be OR

* arrow funcs instead of binds, inline-block instead of flex, isSaving instead of isLoading, disabled button instead of spinner

* inline-flex on the react btn

* change state instatiatiation

public/app/core/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,20 @@
+import React, { ChangeEvent, forwardRef } from 'react';
+import { Input, FormLabel } from '@grafana/ui';
+
+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}
+    />
+  </>
+));

public/app/core/utils/UserProvider.tsx

@@ -0,0 +1,51 @@
+import React, { PureComponent } from 'react';
+import { getBackendSrv } from '@grafana/runtime';
+
+export interface UserAPI {
+  changePassword: (ChangePassword: ChangePasswordFields) => void;
+}
+
+interface LoadingStates {
+  changePassword: boolean;
+}
+
+export interface ChangePasswordFields {
+  oldPassword: string;
+  newPassword: string;
+  confirmNew: string;
+}
+
+export interface Props {
+  children: (api: UserAPI, states: LoadingStates) => JSX.Element;
+}
+
+export interface State {
+  loadingStates: LoadingStates;
+}
+
+export class UserProvider extends PureComponent<Props, State> {
+  state: State = {
+    loadingStates: {
+      changePassword: false,
+    },
+  };
+
+  changePassword = async (payload: ChangePasswordFields) => {
+    this.setState({ loadingStates: { ...this.state.loadingStates, changePassword: true } });
+    await getBackendSrv().put('/api/user/password', payload);
+    this.setState({ loadingStates: { ...this.state.loadingStates, changePassword: false } });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { loadingStates } = this.state;
+
+    const api = {
+      changePassword: this.changePassword,
+    };
+
+    return <>{children(api, loadingStates)}</>;
+  }
+}
+
+export default UserProvider;