Added User List table

src/components/form/admin-set-password-form.tsx

@@ -0,0 +1,124 @@
+import { m } from '@/paraglide/messages';
+import { usersQueries } from '@/service/queries';
+import { setUserPassword } from '@/service/user.api';
+import { userSetPasswordSchema } from '@/service/user.schema';
+import { ReturnError } from '@/types/common';
+import { useForm } from '@tanstack/react-form';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { UserWithRole } from 'better-auth/plugins';
+import { toast } from 'sonner';
+import { Button } from '../ui/button';
+import { DialogClose, DialogFooter } from '../ui/dialog';
+import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import { Input } from '../ui/input';
+
+type FormProps = {
+  data: UserWithRole;
+  onSubmit: (open: boolean) => void;
+};
+
+const AdminSetPasswordForm = ({ data, onSubmit }: FormProps) => {
+  const queryClient = useQueryClient();
+
+  const setUserPasswordMutation = useMutation({
+    mutationFn: setUserPassword,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [...usersQueries.all, 'list'],
+      });
+      onSubmit(false);
+      toast.success(m.users_page_message_set_password_success(), {
+        richColors: true,
+      });
+    },
+    onError: (error: ReturnError) => {
+      console.error(error);
+      toast.error(
+        (m[`backend_${error.code}` as keyof typeof m] as () => string)(),
+        { richColors: true },
+      );
+    },
+  });
+
+  const form = useForm({
+    defaultValues: {
+      id: data.id,
+      password: '',
+    },
+    validators: {
+      onSubmit: userSetPasswordSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setUserPasswordMutation.mutate({ data: value });
+    },
+  });
+
+  return (
+    <form
+      id="admin-set-password-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <FieldGroup>
+        <form.Field
+          name="id"
+          children={(field) => {
+            const isInvalid =
+              field.state.meta.isTouched && !field.state.meta.isValid;
+            return (
+              <Field data-invalid={isInvalid}>
+                <Input
+                  type="hidden"
+                  name={field.name}
+                  id={field.name}
+                  value={field.state.value}
+                  aria-invalid={isInvalid}
+                />
+                {isInvalid && <FieldError errors={field.state.meta.errors} />}
+              </Field>
+            );
+          }}
+        />
+        <form.Field
+          name="password"
+          children={(field) => {
+            const isInvalid =
+              field.state.meta.isTouched && !field.state.meta.isValid;
+            return (
+              <Field data-invalid={isInvalid}>
+                <FieldLabel htmlFor={field.name}>
+                  {m.change_password_form_new_password()}
+                </FieldLabel>
+                <Input
+                  id={field.name}
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  aria-invalid={isInvalid}
+                  type="password"
+                />
+                {isInvalid && <FieldError errors={field.state.meta.errors} />}
+              </Field>
+            );
+          }}
+        />
+        <Field>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline" type="button">
+                {m.ui_cancel_btn()}
+              </Button>
+            </DialogClose>
+            <Button type="submit">{m.ui_save_btn()}</Button>
+          </DialogFooter>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+};
+
+export default AdminSetPasswordForm;