Implement password updating and show login errors

web/app/routes/logbook.me/route.tsx

@@ -1,7 +1,22 @@
 import ErrorDisplay from "@/ui/error-display";
 import { useApi } from "@/util/api";
-import { Center, Container, Loader, Text, Title } from "@mantine/core";
-import { useQuery } from "@tanstack/react-query";
+import {
+  Avatar,
+  Button,
+  Center,
+  Container,
+  Fieldset,
+  Group,
+  Loader,
+  PasswordInput,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { IconFingerprint } from "@tabler/icons-react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
 
 export default function Me() {
   const client = useApi();
@@ -11,6 +26,41 @@ export default function Me() {
     queryFn: async () => await client.get(`users/me`).then((res) => res.data),
   });
 
+  const updatePassword = useMutation({
+    mutationFn: async (values: {
+      current_psk: string;
+      new_psk: string;
+      confirm_new_psk: string;
+    }) =>
+      await client.put(`/users/me/password`, {
+        current_password: values.current_psk,
+        new_password: values.new_psk,
+      }),
+  });
+
+  const updatePskForm = useForm({
+    initialValues: {
+      current_psk: "",
+      new_psk: "",
+      confirm_new_psk: "",
+    },
+    validate: {
+      current_psk: (value) =>
+        value.length === 0 ? "Please enter your current password" : null,
+      new_psk: (value) => {
+        if (value.length === 0) return "Please enter a new password";
+        if (value.length < 8 || value.length > 16)
+          return "Password must be between 8 and 16 characters";
+      },
+      confirm_new_psk: (value, values) => {
+        if (value.length === 0) return "Please confirm your new password";
+        if (value.length < 8 || value.length > 16)
+          return "Password must be between 8 and 16 characters";
+        if (value !== values.new_psk) return "Passwords must match";
+      },
+    },
+  });
+
   return (
     <Container>
       {user.isLoading ? (
@@ -22,10 +72,57 @@ export default function Me() {
           <ErrorDisplay error="Error Loading User" />
         </Center>
       ) : user.data ? (
-        <>
-          <Title order={2}>{user.data.username}</Title>
-          <Text>Level {user.data.level}</Text>{" "}
-        </>
+        <Stack pt="xl">
+          <Stack align="center" pb="xl">
+            <Avatar size="xl" />
+            <Title order={2}>{user.data.username}</Title>
+            <Text>
+              {user.data.level === 2
+                ? "Admin"
+                : user.data.level === 1
+                ? "User"
+                : "Guest"}
+            </Text>{" "}
+          </Stack>
+          <form
+            onSubmit={updatePskForm.onSubmit((values) => {
+              updatePassword.mutate(values);
+            })}
+          >
+            <Fieldset legend="Update Password">
+              <PasswordInput
+                label="Current Password"
+                {...updatePskForm.getInputProps("current_psk")}
+              />
+              <PasswordInput
+                label="New Password"
+                {...updatePskForm.getInputProps("new_psk")}
+              />
+              <PasswordInput
+                label="Confirm New Password"
+                {...updatePskForm.getInputProps("confirm_new_psk")}
+              />
+              <Group justify="flex-end" mt="md">
+                {updatePassword.isPending ? (
+                  <Text>Updating...</Text>
+                ) : updatePassword.isError ? (
+                  updatePassword.error &&
+                  (updatePassword.error as AxiosError).response?.status ===
+                    403 ? (
+                    <Text c="red">Incorrect password</Text>
+                  ) : (
+                    <Text c="red">Failed: {updatePassword.error.message}</Text>
+                  )
+                ) : updatePassword.isSuccess ? (
+                  <Text c="green">Updated</Text>
+                ) : null}
+                <Button type="submit" leftSection={<IconFingerprint />}>
+                  Update
+                </Button>
+              </Group>
+            </Fieldset>
+          </form>
+        </Stack>
       ) : (
         <Text c="red">Unknown Error</Text>
       )}