+ Password Change, +- Settings NAV, fixed bg missing

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 } 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,
@@ -17,14 +17,17 @@ import {
   PaperPlaneIcon,
   Link2Icon,
   MixerHorizontalIcon,
-} from '@radix-ui/react-icons';
+  LockClosedIcon,
+  LockOpen2Icon,
+  LockOpen1Icon,
+} 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);
@@ -46,12 +49,12 @@ 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)))',
+              "var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))",
             color:
-              'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
+              "var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))",
           },
         });
       })}
@@ -67,7 +70,7 @@ export const ProfileForm = ({ user }: { user: User }) => {
             </span>
           </div>
           <input
-            {...form.register('firstname')}
+            {...form.register("firstname")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.firstname}
@@ -86,7 +89,7 @@ export const ProfileForm = ({ user }: { user: User }) => {
             </span>
           </div>
           <input
-            {...form.register('lastname')}
+            {...form.register("lastname")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.lastname}
@@ -105,7 +108,7 @@ export const ProfileForm = ({ user }: { user: User }) => {
             </span>
           </div>
           <input
-            {...form.register('email')}
+            {...form.register("email")}
             type="text"
             className="input input-bordered w-full"
             defaultValue={user.email}
@@ -167,12 +170,12 @@ 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)))',
+              "var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))",
             color:
-              'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
+              "var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))",
           },
         });
       })}
@@ -204,7 +207,7 @@ export const SocialForm = ({
                 Verbunden mit {discordAccount.username}
               </span>
               <span className="hidden group-hover:inline">
-                Verbindung trennen{isLoading && '...'}
+                Verbindung trennen{isLoading && "..."}
               </span>
             </Button>
           ) : (
@@ -228,7 +231,7 @@ export const SocialForm = ({
             className="input input-bordered w-full"
             placeholder="1445241"
             defaultValue={user.vatsimCid as number | undefined}
-            {...form.register('vatsimCid', {
+            {...form.register("vatsimCid", {
               valueAsNumber: true,
             })}
           />
@@ -252,3 +255,105 @@ export const SocialForm = ({
     </form>
   );
 };
+
+export const PasswordForm = ({ user }: { user: User }) => {
+  const schema = z.object({
+    password: z.string().min(2).max(30),
+    newPassword: z.string().min(2).max(30),
+    newPasswordConfirm: z.string().min(2).max(30),
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  type IFormInput = z.infer<typeof schema>;
+
+  const form = useForm<IFormInput>({
+    defaultValues: {},
+    resolver: zodResolver(schema),
+  });
+  return (
+    <form
+      className="card-body"
+      onSubmit={form.handleSubmit(async (values) => {
+        setIsLoading(true);
+        await changePassword(values);
+        form.reset(values);
+        setIsLoading(false);
+        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)))",
+          },
+        });
+      })}
+    >
+      <h2 className="card-title">
+        <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>
+          <input
+            {...form.register("password")}
+            type="text"
+            className="input input-bordered w-full"
+            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>
+          <input
+            {...form.register("newPassword")}
+            type="text"
+            className="input input-bordered w-full"
+            defaultValue={""}
+          />
+        </label>
+        {form.formState.errors.newPassword && (
+          <p className="text-error">
+            {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>
+          <input
+            {...form.register("newPasswordConfirm")}
+            type="text"
+            className="input input-bordered w-full"
+            defaultValue={""}
+          />
+        </label>
+        {form.formState.errors.newPasswordConfirm && (
+          <p className="text-error">
+            {form.formState.errors.newPasswordConfirm?.message}
+          </p>
+        )}
+        <div className="card-actions justify-center pt-6">
+          <Button
+            role="submit"
+            className="btn-sm btn-wide btn-outline btn-primary"
+            disabled={!form.formState.isDirty}
+            isLoading={isLoading}
+          >
+            <BookmarkIcon /> Speichern
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};

apps/hub/app/(app)/settings/actions.ts

@@ -1,6 +1,6 @@
-'use server';
-import { Prisma, PrismaClient } from '@repo/db';
-import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
+"use server";
+import { Prisma, PrismaClient } from "@repo/db";
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
 
 export const unlinkDiscord = async (userId: string) => {
   const client = new PrismaClient();
@@ -24,3 +24,7 @@ export const updateUser = async (changes: Prisma.UserUpdateInput) => {
     data: changes,
   });
 };
+
+export const changePassword = async (changes: Prisma.UserUpdateInput) => {
+  // TODO: Add password change logic
+};

apps/hub/app/(app)/settings/page.tsx

@@ -1,7 +1,7 @@
-import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
-import { PrismaClient } from '@repo/db';
-import { ProfileForm, SocialForm } from './_components/forms';
-import { GearIcon } from '@radix-ui/react-icons';
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+import { PrismaClient } from "@repo/db";
+import { ProfileForm, SocialForm, PasswordForm } from "./_components/forms";
+import { GearIcon } from "@radix-ui/react-icons";
 
 export default async () => {
   const prisma = new PrismaClient();
@@ -30,6 +30,9 @@ export default async () => {
       <div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
         <SocialForm discordAccount={discordAccount} user={user} />
       </div>
+      <div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+        <PasswordForm user={user} />
+      </div>
     </div>
   );
 };

apps/hub/app/(app)/settings/privacy/page.tsx

@@ -1,8 +0,0 @@
-export default () => {
-  return (
-    <div>
-      <h1>Settings</h1>
-      <p>Settings page content</p>
-    </div>
-  );
-};