first commit

common/resources/client/auth/ui/account-settings/change-password-panel/change-password-panel.tsx

@@ -0,0 +1,68 @@
+import {useForm} from 'react-hook-form';
+import {useId} from 'react';
+import {Form} from '@common/ui/forms/form';
+import {AccountSettingsPanel} from '@common/auth/ui/account-settings/account-settings-panel';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {UpdatePasswordPayload, useUpdatePassword} from './use-update-password';
+import {Button} from '@common/ui/buttons/button';
+import {Trans} from '@common/i18n/trans';
+import {AccountSettingsId} from '@common/auth/ui/account-settings/account-settings-sidenav';
+
+export function ChangePasswordPanel() {
+  const form = useForm<UpdatePasswordPayload>();
+  const formId = useId();
+  const updatePassword = useUpdatePassword(form);
+  return (
+    <AccountSettingsPanel
+      id={AccountSettingsId.Password}
+      title={<Trans message="Update password" />}
+      actions={
+        <Button
+          type="submit"
+          form={formId}
+          variant="flat"
+          color="primary"
+          disabled={!form.formState.isValid || updatePassword.isPending}
+        >
+          <Trans message="Update password" />
+        </Button>
+      }
+    >
+      <Form
+        form={form}
+        id={formId}
+        onSubmit={newValues => {
+          updatePassword.mutate(newValues, {
+            onSuccess: () => {
+              form.reset();
+            },
+          });
+        }}
+      >
+        <FormTextField
+          className="mb-24"
+          name="current_password"
+          label={<Trans message="Current password" />}
+          type="password"
+          autoComplete="current-password"
+          required
+        />
+        <FormTextField
+          className="mb-24"
+          name="password"
+          label={<Trans message="New password" />}
+          type="password"
+          autoComplete="new-password"
+          required
+        />
+        <FormTextField
+          name="password_confirmation"
+          label={<Trans message="Confirm password" />}
+          type="password"
+          autoComplete="new-password"
+          required
+        />
+      </Form>
+    </AccountSettingsPanel>
+  );
+}

common/resources/client/auth/ui/account-settings/change-password-panel/use-update-password.ts

@@ -0,0 +1,29 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {toast} from '@common/ui/toast/toast';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {message} from '@common/i18n/message';
+import {apiClient} from '@common/http/query-client';
+
+interface Response extends BackendResponse {}
+
+export interface UpdatePasswordPayload {
+  current_password: string;
+  password: string;
+  password_confirmation: string;
+}
+
+export function useUpdatePassword(form: UseFormReturn<UpdatePasswordPayload>) {
+  return useMutation({
+    mutationFn: (props: UpdatePasswordPayload) => updatePassword(props),
+    onSuccess: () => {
+      toast(message('Password changed'));
+    },
+    onError: r => onFormQueryError(r, form),
+  });
+}
+
+function updatePassword(payload: UpdatePasswordPayload): Promise<Response> {
+  return apiClient.put('auth/user/password', payload).then(r => r.data);
+}