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] 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",