From 400fa3d480842ed099cfd0ae6b29e74d2d82d446 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 13:36:46 +0200
Subject: [PATCH 01/11] propose forcing lowercase usernames

---
 packages/api/src/router/user.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 364a3ff82..e57fd2fa3 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -127,10 +127,12 @@ const createUser = async (
   const salt = await createSalt();
   const hashedPassword = await hashPassword(input.password, salt);
 
+  const username = input.username.toLowerCase();
+
   const userId = createId();
   await db.insert(schema.users).values({
     id: userId,
-    name: input.username,
+    name: username,
     password: hashedPassword,
     salt,
   });

From 781247de5141f4b0532801194ac904763db7da39 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 13:39:21 +0200
Subject: [PATCH 02/11] feat: add username validation to prevent duplicate

---
 packages/api/src/router/user.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index e57fd2fa3..f548a7f15 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -32,6 +32,16 @@ export const userRouter = createTRPCRouter({
   create: publicProcedure
     .input(validation.user.create)
     .mutation(async ({ ctx, input }) => {
+      const user = await ctx.db.query.users.findFirst({
+        where: eq(users.name, input.username),
+      });
+
+      if (user !== null) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: "User already exists",
+        });
+      }
       await createUser(ctx.db, input);
     }),
   getAll: publicProcedure.query(async ({ ctx }) => {

From 245c2f483c36e197da4e8ff2a2fe1d58e2916786 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 14:16:24 +0200
Subject: [PATCH 03/11] feat: Add ErrorDisplay component

---
 apps/nextjs/src/components/utils.tsx | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 apps/nextjs/src/components/utils.tsx

diff --git a/apps/nextjs/src/components/utils.tsx b/apps/nextjs/src/components/utils.tsx
new file mode 100644
index 000000000..1262ec877
--- /dev/null
+++ b/apps/nextjs/src/components/utils.tsx
@@ -0,0 +1,33 @@
+import type { AlertProps } from "@mantine/core";
+import { Alert } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+interface ErrorDisplayProps extends AlertProps {
+  title?: string;
+  hidden?: boolean;
+  message?: string;
+  icon?: React.ReactNode;
+}
+
+export function ErrorDisplay({
+  title = "There was an error",
+  message,
+  icon,
+  hidden = false,
+  ...alertProps
+}: ErrorDisplayProps) {
+  if (hidden) {
+    return null;
+  }
+  return (
+    <Alert
+      variant="filled"
+      color="red"
+      title={title}
+      icon={icon ? icon : <IconAlertTriangle />}
+      {...alertProps}
+    >
+      {message}
+    </Alert>
+  );
+}

From c2026d0962e6038e89641fae398db7e3581d2e8b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 14:16:45 +0200
Subject: [PATCH 04/11] refactor: Update UserCreateStepperComponent

To use ErrorDisplay component
---
 .../users/create/_components/create-user-stepper.tsx       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index c1d903110..7ae062cce 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useCallback, useMemo, useState } from "react";
 import {
   Avatar,
   Card,
@@ -12,12 +11,14 @@ import {
   Title,
 } from "@mantine/core";
 import { IconUserCheck } from "@tabler/icons-react";
+import { useCallback, useMemo, useState } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 import { validation, z } from "@homarr/validation";
 
+import { ErrorDisplay } from "~/components/utils";
 import { StepperNavigationComponent } from "./stepper-navigation.component";
 
 export const UserCreateStepperComponent = () => {
@@ -38,7 +39,8 @@ export const UserCreateStepperComponent = () => {
   const hasNext = active < stepperMax;
   const hasPrevious = active > 0;
 
-  const { mutateAsync, isPending } = clientApi.user.create.useMutation();
+  const { mutateAsync, isPending, isError, error } =
+    clientApi.user.create.useMutation();
 
   const generalForm = useForm({
     initialValues: {
@@ -107,6 +109,7 @@ export const UserCreateStepperComponent = () => {
   return (
     <>
       <Title mb="md">{t("title")}</Title>
+      <ErrorDisplay hidden={!isError} message={error?.message} my="lg" />
       <Stepper
         active={active}
         onStepClick={setActive}

From 65025a5dda4414aa98ac042b64b22f15ddc8bff8 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 14:24:35 +0200
Subject: [PATCH 05/11] fix: Update check for user existence

---
 packages/api/src/router/user.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index f548a7f15..58a26aaae 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -35,8 +35,7 @@ export const userRouter = createTRPCRouter({
       const user = await ctx.db.query.users.findFirst({
         where: eq(users.name, input.username),
       });
-
-      if (user !== null) {
+      if (user !== undefined) {
         throw new TRPCError({
           code: "FORBIDDEN",
           message: "User already exists",

From 0ae8a75a5ef38c85ca869cadbed9542c2993a3df Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 15:23:57 +0200
Subject: [PATCH 06/11] feat: cannot change username to the current one

---
 .../manage/users/[userId]/_components/profile.accordion.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
index 00a65d0ea..b851631df 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
@@ -50,7 +50,11 @@ export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
           label={t("user.field.email.label")}
           {...form.getInputProps("email")}
         />
-        <Button type="submit" disabled={!form.isValid()} loading={isPending}>
+        <Button
+          type="submit"
+          disabled={!form.isValid() || !form.isDirty()}
+          loading={isPending}
+        >
           {t("common.action.save")}
         </Button>
       </Stack>

From f5d71aebb41e155f8b0f10ba2dcbfc4f4451305b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 15:24:20 +0200
Subject: [PATCH 07/11] Add successful profile edit message

---
 packages/translation/src/lang/en.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index 836792926..c0e7507d3 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -1056,6 +1056,12 @@ export default {
           section: {
             profile: {
               title: "Profile",
+              editProfile: {
+                title: "Edit profile",
+                message: {
+                  profileUpdated: "Updated profile",
+                },
+              },
             },
             preferences: {
               title: "Preferences",

From 6e2bd0ce11697cdfd59500d506e68ac22ed38273 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas.camlong@datadoghq.com>
Date: Fri, 10 May 2024 15:24:40 +0200
Subject: [PATCH 08/11] fix: Handle existing user when editing profile

---
 .../_components/profile.accordion.tsx         | 35 ++++++++++++++++---
 packages/api/src/router/user.ts               |  9 +++++
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
index b851631df..cc1051138 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
@@ -5,10 +5,15 @@ import { Button, Stack, TextInput } from "@mantine/core";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
+import { ErrorDisplay } from "~/components/utils";
 
 interface ProfileAccordionProps {
   user: NonNullable<RouterOutputs["user"]["getById"]>;
@@ -16,11 +21,30 @@ interface ProfileAccordionProps {
 
 export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
   const t = useI18n();
-  const { mutate, isPending } = clientApi.user.editProfile.useMutation({
-    onSettled: async () => {
-      await revalidatePathAction("/manage/users");
-    },
-  });
+  const { mutate, isPending, isError, error } =
+    clientApi.user.editProfile.useMutation({
+      onError(error) {
+        showErrorNotification({
+          title: t(
+            "management.page.user.edit.section.profile.editProfile.title",
+          ),
+          message: error.message,
+        });
+      },
+      onSuccess: () => {
+        showSuccessNotification({
+          title: t(
+            "management.page.user.edit.section.profile.editProfile.title",
+          ),
+          message: t(
+            "management.page.user.edit.section.profile.editProfile.message.profileUpdated",
+          ),
+        });
+      },
+      onSettled: async () => {
+        await revalidatePathAction("/manage/users");
+      },
+    });
   const form = useForm({
     initialValues: {
       name: user.name ?? "",
@@ -41,6 +65,7 @@ export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
+        <ErrorDisplay hidden={!isError} message={error?.message} />
         <TextInput
           label={t("user.field.username.label")}
           withAsterisk
diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 58a26aaae..3c533c7da 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -90,7 +90,16 @@ export const userRouter = createTRPCRouter({
         .from(users)
         .where(eq(users.id, input.userId))
         .limit(1);
+      const existingUser = await ctx.db.query.users.findFirst({
+        where: eq(users.name, input.form.name),
+      });
 
+      if (existingUser !== undefined) {
+        throw new TRPCError({
+          code: "FORBIDDEN",
+          message: `User ${input.form.name} already exists`,
+        });
+      }
       const emailDirty =
         input.form.email && user[0]?.email !== input.form.email;
       await ctx.db

From 543bfc0835a5ed7eab0f5134567de99b5134090e Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 10 May 2024 20:02:57 +0200
Subject: [PATCH 09/11] Fix profile accordion error display

---
 .../[userId]/_components/profile.accordion.tsx    |  4 +---
 .../create/_components/create-user-stepper.tsx    | 15 +++++++++++----
 packages/api/src/router/user.ts                   |  8 ++++----
 packages/notifications/src/index.tsx              |  6 ++----
 packages/translation/src/lang/en.ts               |  3 +++
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
index cc1051138..2dbb52208 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
@@ -13,7 +13,6 @@ import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
-import { ErrorDisplay } from "~/components/utils";
 
 interface ProfileAccordionProps {
   user: NonNullable<RouterOutputs["user"]["getById"]>;
@@ -21,7 +20,7 @@ interface ProfileAccordionProps {
 
 export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
   const t = useI18n();
-  const { mutate, isPending, isError, error } =
+  const { mutate, isPending } =
     clientApi.user.editProfile.useMutation({
       onError(error) {
         showErrorNotification({
@@ -65,7 +64,6 @@ export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <ErrorDisplay hidden={!isError} message={error?.message} />
         <TextInput
           label={t("user.field.username.label")}
           withAsterisk
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index 7ae062cce..0d11f01f4 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -15,10 +15,10 @@ import { useCallback, useMemo, useState } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { validation, z } from "@homarr/validation";
 
-import { ErrorDisplay } from "~/components/utils";
 import { StepperNavigationComponent } from "./stepper-navigation.component";
 
 export const UserCreateStepperComponent = () => {
@@ -39,8 +39,16 @@ export const UserCreateStepperComponent = () => {
   const hasNext = active < stepperMax;
   const hasPrevious = active > 0;
 
-  const { mutateAsync, isPending, isError, error } =
-    clientApi.user.create.useMutation();
+  const { mutateAsync, isPending } = clientApi.user.create.useMutation({
+    onError(error) {
+      showErrorNotification({
+        autoClose: false,
+        id: "create-user-error",
+        title: t("step.error.title"),
+        message: error.message,
+      });
+    },
+  });
 
   const generalForm = useForm({
     initialValues: {
@@ -109,7 +117,6 @@ export const UserCreateStepperComponent = () => {
   return (
     <>
       <Title mb="md">{t("title")}</Title>
-      <ErrorDisplay hidden={!isError} message={error?.message} my="lg" />
       <Stepper
         active={active}
         onStepClick={setActive}
diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 3c533c7da..cb2e58702 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -33,11 +33,11 @@ export const userRouter = createTRPCRouter({
     .input(validation.user.create)
     .mutation(async ({ ctx, input }) => {
       const user = await ctx.db.query.users.findFirst({
-        where: eq(users.name, input.username),
+        where: eq(users.name, input.username.toLowerCase()),
       });
       if (user !== undefined) {
         throw new TRPCError({
-          code: "FORBIDDEN",
+          code: "CONFLICT",
           message: "User already exists",
         });
       }
@@ -91,12 +91,12 @@ export const userRouter = createTRPCRouter({
         .where(eq(users.id, input.userId))
         .limit(1);
       const existingUser = await ctx.db.query.users.findFirst({
-        where: eq(users.name, input.form.name),
+        where: eq(users.name, input.form.name.toLowerCase()),
       });
 
       if (existingUser !== undefined) {
         throw new TRPCError({
-          code: "FORBIDDEN",
+          code: "CONFLICT",
           message: `User ${input.form.name} already exists`,
         });
       }
diff --git a/packages/notifications/src/index.tsx b/packages/notifications/src/index.tsx
index f63139abe..071496b20 100644
--- a/packages/notifications/src/index.tsx
+++ b/packages/notifications/src/index.tsx
@@ -2,16 +2,14 @@ import type { NotificationData } from "@mantine/notifications";
 import { notifications } from "@mantine/notifications";
 import { IconCheck, IconX } from "@tabler/icons-react";
 
-type CommonNotificationProps = Pick<NotificationData, "title" | "message">;
-
-export const showSuccessNotification = (props: CommonNotificationProps) =>
+export const showSuccessNotification = (props: NotificationData) =>
   notifications.show({
     ...props,
     color: "teal",
     icon: <IconCheck size={20} />,
   });
 
-export const showErrorNotification = (props: CommonNotificationProps) =>
+export const showErrorNotification = (props: NotificationData) =>
   notifications.show({
     ...props,
     color: "red",
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index c0e7507d3..369f6928f 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -1108,6 +1108,9 @@ export default {
             completed: {
               title: "User created",
             },
+            error: {
+              title: "User creation failed",
+            },
           },
           action: {
             createAnother: "Create another user",

From 0008ceffed1739230daed5ff8a9a5a2cc85cab09 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 10 May 2024 20:05:18 +0200
Subject: [PATCH 10/11] Fix prettier

---
 .../_components/profile.accordion.tsx         | 43 ++++++++-----------
 .../_components/create-user-stepper.tsx       |  2 +-
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
index 2dbb52208..391725c4c 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx
@@ -20,30 +20,25 @@ interface ProfileAccordionProps {
 
 export const ProfileAccordion = ({ user }: ProfileAccordionProps) => {
   const t = useI18n();
-  const { mutate, isPending } =
-    clientApi.user.editProfile.useMutation({
-      onError(error) {
-        showErrorNotification({
-          title: t(
-            "management.page.user.edit.section.profile.editProfile.title",
-          ),
-          message: error.message,
-        });
-      },
-      onSuccess: () => {
-        showSuccessNotification({
-          title: t(
-            "management.page.user.edit.section.profile.editProfile.title",
-          ),
-          message: t(
-            "management.page.user.edit.section.profile.editProfile.message.profileUpdated",
-          ),
-        });
-      },
-      onSettled: async () => {
-        await revalidatePathAction("/manage/users");
-      },
-    });
+  const { mutate, isPending } = clientApi.user.editProfile.useMutation({
+    onError(error) {
+      showErrorNotification({
+        title: t("management.page.user.edit.section.profile.editProfile.title"),
+        message: error.message,
+      });
+    },
+    onSuccess: () => {
+      showSuccessNotification({
+        title: t("management.page.user.edit.section.profile.editProfile.title"),
+        message: t(
+          "management.page.user.edit.section.profile.editProfile.message.profileUpdated",
+        ),
+      });
+    },
+    onSettled: async () => {
+      await revalidatePathAction("/manage/users");
+    },
+  });
   const form = useForm({
     initialValues: {
       name: user.name ?? "",
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index 0d11f01f4..e35b1ae1b 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback, useMemo, useState } from "react";
 import {
   Avatar,
   Card,
@@ -11,7 +12,6 @@ import {
   Title,
 } from "@mantine/core";
 import { IconUserCheck } from "@tabler/icons-react";
-import { useCallback, useMemo, useState } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";

From 7fa120c47490ab3e80fb8db0921d9afa3e12cfee Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 18 May 2024 13:50:25 +0200
Subject: [PATCH 11/11] fix: create user async is called twice

---
 packages/api/src/router/user.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index f70ba6de4..4d44884fa 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -54,7 +54,7 @@ export const userRouter = createTRPCRouter({
       await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
 
       await createUserAsync(ctx.db, input);
-      await createUserAsync(ctx.db, input);
+
       // Delete invite as it's used
       await ctx.db.delete(invites).where(inviteWhere);
     }),
@@ -64,7 +64,7 @@ export const userRouter = createTRPCRouter({
       await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
 
       await createUserAsync(ctx.db, input);
-  }),
+    }),
   setProfileImage: protectedProcedure
     .input(
       z.object({