From 972fb2fd15242121dd4577069e5cd8e505ae466e Mon Sep 17 00:00:00 2001
From: Nicolas <nicolas@syntaxdev.de>
Date: Sun, 23 Feb 2025 16:48:42 +0100
Subject: [PATCH] Fixed forms

---
 .../app/(app)/settings/_components/forms.tsx  | 150 ++++++++----------
 apps/hub/app/_components/ui/Input.tsx         |  18 +--
 2 files changed, 72 insertions(+), 96 deletions(-)

diff --git a/apps/hub/app/(app)/settings/_components/forms.tsx b/apps/hub/app/(app)/settings/_components/forms.tsx
index 884b6dd3..b11b1ad1 100644
--- a/apps/hub/app/(app)/settings/_components/forms.tsx
+++ b/apps/hub/app/(app)/settings/_components/forms.tsx
@@ -1,14 +1,14 @@
-'use client';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { DiscordAccount, User } from '@repo/db';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { unlinkDiscord, updateUser, changePassword } from '../actions';
-import { Toaster, toast } from 'react-hot-toast';
-import { useSession } from 'next-auth/react';
-import { useRouter } from 'next/navigation';
-import { Button } from '../../../_components/ui/Button';
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DiscordAccount, User } from "@repo/db";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { unlinkDiscord, updateUser, changePassword } from "../actions";
+import { Toaster, toast } from "react-hot-toast";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Button } from "../../../_components/ui/Button";
 import {
   PersonIcon,
   EnvelopeClosedIcon,
@@ -20,14 +20,14 @@ import {
   LockClosedIcon,
   LockOpen2Icon,
   LockOpen1Icon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
 
 export const ProfileForm = ({ user }: { user: User }) => {
   const schema = z.object({
     firstname: z.string().min(2).max(30),
     lastname: z.string().min(2).max(30),
     email: z.string().email({
-      message: 'Bitte gebe eine gültige E-Mail Adresse ein',
+      message: "Bitte gebe eine gültige E-Mail Adresse ein",
     }),
   });
   const [isLoading, setIsLoading] = useState(false);
@@ -49,12 +49,10 @@ export const ProfileForm = ({ user }: { user: User }) => {
         await updateUser(values);
         form.reset(values);
         setIsLoading(false);
-        toast.success('Deine Änderungen wurden gespeichert!', {
+        toast.success("Deine Änderungen wurden gespeichert!", {
           style: {
-            background:
-              'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
-            color:
-              'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
+            background: "var(--color-base-100)",
+            color: "var(--color-base-content)",
           },
         });
       })}
@@ -62,15 +60,13 @@ export const ProfileForm = ({ user }: { user: User }) => {
       <h2 className="card-title">
         <MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen
       </h2>
-      <div className="">
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <PersonIcon /> Vorname
-            </span>
-          </div>
+      <div className="text-left">
+        <label className="floating-label w-full mb-5 mt-5">
+          <span className="text-lg flex items-center gap-2">
+            <PersonIcon /> Vorname
+          </span>
           <input
-            {...form.register('firstname')}
+            {...form.register("firstname")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.firstname}
@@ -82,14 +78,12 @@ export const ProfileForm = ({ user }: { user: User }) => {
             {form.formState.errors.firstname.message}
           </p>
         )}
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <PersonIcon /> Nachname
-            </span>
-          </div>
+        <label className="floating-label w-full mb-5">
+          <span className="text-lg flex items-center gap-2">
+            <PersonIcon /> Nachname
+          </span>
           <input
-            {...form.register('lastname')}
+            {...form.register("lastname")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.lastname}
@@ -101,14 +95,12 @@ export const ProfileForm = ({ user }: { user: User }) => {
             {form.formState.errors.lastname?.message}
           </p>
         )}
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <EnvelopeClosedIcon /> E-Mail
-            </span>
-          </div>
+        <label className="floating-label w-full">
+          <span className="text-lg flex items-center gap-2">
+            <EnvelopeClosedIcon /> E-Mail
+          </span>
           <input
-            {...form.register('email')}
+            {...form.register("email")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.email}
@@ -158,7 +150,7 @@ export const SocialForm = ({
   });
 
   if (!user) return null;
-  console.log('Dirty', form.formState.isDirty);
+  console.log("Dirty", form.formState.isDirty);
   return (
     <form
       className="card-body"
@@ -171,12 +163,10 @@ export const SocialForm = ({
         });
         setVatsimLoading(false);
         form.reset(values);
-        toast.success('Deine Änderungen wurden gespeichert!', {
+        toast.success("Deine Änderungen wurden gespeichert!", {
           style: {
-            background:
-              'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
-            color:
-              'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
+            background: "var(--color-base-100)",
+            color: "var(--color-base-content)",
           },
         });
       })}
@@ -208,7 +198,7 @@ export const SocialForm = ({
                 Verbunden mit {discordAccount.username}
               </span>
               <span className="hidden group-hover:inline">
-                Verbindung trennen{isLoading && '...'}
+                Verbindung trennen{isLoading && "..."}
               </span>
             </Button>
           ) : (
@@ -225,18 +215,16 @@ export const SocialForm = ({
         </div>
       </div>
       <div className="content-center">
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <PaperPlaneIcon /> VATSIM-CID
-            </span>
-          </div>
+        <label className="floating-label w-full mt-5">
+          <span className="text-lg flex items-center gap-2">
+            <PaperPlaneIcon /> VATSIM-CID
+          </span>
           <input
             type="number"
             className="input input-bordered w-full"
             placeholder="1445241"
             defaultValue={user.vatsimCid as number | undefined}
-            {...form.register('vatsimCid', {
+            {...form.register("vatsimCid", {
               valueAsNumber: true,
             })}
           />
@@ -286,17 +274,15 @@ export const PasswordForm = ({ user }: { user: User }) => {
         form.reset(values);
         setIsLoading(false);
         if (result.error) {
-          form.setError('password', {
-            type: 'manual',
+          form.setError("password", {
+            type: "manual",
             message: result.error,
           });
         } else if (result.success) {
-          toast.success('Dein Passwort wurde geändert!', {
+          toast.success("Dein Passwort wurde geändert!", {
             style: {
-              background:
-                'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
-              color:
-                'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
+              background: "var(--color-base-100)",
+              color: "var(--color-base-content)",
             },
           });
         }
@@ -306,33 +292,29 @@ export const PasswordForm = ({ user }: { user: User }) => {
         <LockClosedIcon className="w-5 h-5" /> Password Ändern
       </h2>
       <div className="">
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <LockOpen2Icon /> Aktuelles Passwort
-            </span>
-          </div>
+        <label className="floating-label w-full mt-5 mb-5">
+          <span className="text-lg flex items-center gap-2">
+            <LockOpen2Icon /> Aktuelles Passwort
+          </span>
           <input
-            {...form.register('password')}
+            {...form.register("password")}
             type="text"
             className="input input-bordered w-full"
-            defaultValue={''}
+            defaultValue={""}
           />
         </label>
         {form.formState.errors.password && (
           <p className="text-error">{form.formState.errors.password.message}</p>
         )}
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <LockOpen1Icon /> Neues Passwort
-            </span>
-          </div>
+        <label className="floating-label w-full mb-5">
+          <span className="text-lg flex items-center gap-2">
+            <LockOpen1Icon /> Neues Passwort
+          </span>
           <input
-            {...form.register('newPassword')}
+            {...form.register("newPassword")}
             type="text"
             className="input input-bordered w-full"
-            defaultValue={''}
+            defaultValue={""}
           />
         </label>
         {form.formState.errors.newPassword && (
@@ -340,17 +322,15 @@ export const PasswordForm = ({ user }: { user: User }) => {
             {form.formState.errors.newPassword?.message}
           </p>
         )}
-        <label className="form-control w-full">
-          <div className="label">
-            <span className="label-text text-lg flex items-center gap-2">
-              <LockOpen1Icon /> Passwort wiederholen
-            </span>
-          </div>
+        <label className="floating-label w-full">
+          <span className="text-lg flex items-center gap-2">
+            <LockOpen1Icon /> Passwort wiederholen
+          </span>
           <input
-            {...form.register('newPasswordConfirm')}
+            {...form.register("newPasswordConfirm")}
             type="text"
             className="input input-bordered w-full"
-            defaultValue={''}
+            defaultValue={""}
           />
         </label>
         {form.formState.errors.newPasswordConfirm && (
diff --git a/apps/hub/app/_components/ui/Input.tsx b/apps/hub/app/_components/ui/Input.tsx
index 1bb89d3e..84a4e1fa 100644
--- a/apps/hub/app/_components/ui/Input.tsx
+++ b/apps/hub/app/_components/ui/Input.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
 import {
   FieldValues,
   Path,
   RegisterOptions,
   UseFormReturn,
-} from 'react-hook-form';
-import { cn } from '../../../helper/cn';
+} from "react-hook-form";
+import { cn } from "../../../helper/cn";
 
 interface InputProps<T extends FieldValues>
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'form'> {
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
   name: Path<T>;
   form: UseFormReturn<T>;
   formOptions?: RegisterOptions<T>;
@@ -26,17 +26,13 @@ export const Input = <T extends FieldValues>({
   ...inputProps
 }: InputProps<T>) => {
   return (
-    <label className="form-control w-full">
-      <div className="label">
-        <span className="label-text text-lg flex items-center gap-2">
-          {label}
-        </span>
-      </div>
+    <label className="floating-label w-full mt-5">
+      <span className="text-lg flex items-center gap-2">{label}</span>
       <input
         {...form.register(name, formOptions)}
         type="text"
         className={cn(
-          'input input-bordered w-full placeholder:text-neutral-600',
+          "input input-bordered w-full placeholder:text-neutral-600",
           className
         )}
         placeholder={placeholder}