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

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

@@ -1,3 +0,0 @@
-export default () => {
-  return <div>Admin Page</div>;
-};

apps/hub/app/(app)/layout.tsx

@@ -1,15 +1,15 @@
-import type { Metadata } from 'next';
+import type { Metadata } from "next";
 import {
   DiscordLogoIcon,
   InstagramLogoIcon,
   ReaderIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import { HorizontalNav, VerticalNav } from '../_components/ui/Nav';
+import { HorizontalNav, VerticalNav } from "../_components/ui/Nav";
-import { Toaster } from 'react-hot-toast';
+import { Toaster } from "react-hot-toast";
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
+  title: "Create Next App",
-  description: 'Generated by create next app',
+  description: "Generated by create next app",
 };
 
 export default async function RootLayout({
@@ -21,8 +21,7 @@ export default async function RootLayout({
     <div
       className="hero min-h-screen"
       style={{
-        backgroundImage:
+        backgroundImage: "url('/bg.png')",
-          'url(https://media.discordapp.net/attachments/1086051758461173931/1336779010109341766/d-hyan.PNG?ex=67b19238&is=67b040b8&hm=5d90bef8e44a8e620d759d1bebe0f1a3649b0f3cadc735bd9a06d5e6702f2d14&=&format=webp&quality=lossless)',
       }}
     >
       <div className="hero-overlay bg-opacity-30"></div>

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

@@ -1,6 +1,6 @@
-import Link from 'next/link';
+import Link from "next/link";
-import { PaginatedTable } from '../_components/PaginatedTable';
+import { PaginatedTable } from "../_components/PaginatedTable";
-import { Header } from '../_components/ui/Header';
+import { Header } from "../_components/ui/Header";
 
 export default async function Home() {
   return (
@@ -8,24 +8,25 @@ export default async function Home() {
       <Header />
       <PaginatedTable
         rowsPerPage={10}
-        prismaModel={'user'}
+        prismaModel={"user"}
+        searchFields={[]}
         columns={[
           {
-            header: 'ID',
+            header: "ID",
-            accessorKey: 'id',
+            accessorKey: "id",
           },
           {
-            header: 'Email',
+            header: "Email",
-            accessorKey: 'email',
+            accessorKey: "email",
           },
           {
-            header: 'First Name',
+            header: "First Name",
-            accessorKey: 'firstname',
+            accessorKey: "firstname",
           },
           {
-            header: 'Last Name',
+            header: "Last Name",
-            accessorKey: 'lastname',
+            accessorKey: "lastname",
-            footer: 'Total',
+            footer: "Total",
           },
         ]}
       />

apps/hub/app/(app)/settings/_components/forms.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { DiscordAccount, User } from '@repo/db';
+import { DiscordAccount, User } from "@repo/db";
-import { useState } from 'react';
+import { useState } from "react";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-import { z } from 'zod';
+import { z } from "zod";
-import { unlinkDiscord, updateUser } from '../actions';
+import { unlinkDiscord, updateUser, changePassword } from "../actions";
-import { Toaster, toast } from 'react-hot-toast';
+import { Toaster, toast } from "react-hot-toast";
-import { useSession } from 'next-auth/react';
+import { useSession } from "next-auth/react";
-import { useRouter } from 'next/navigation';
+import { useRouter } from "next/navigation";
-import { Button } from '../../../../_components/ui/Button';
+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';
+"use server";
-import { Prisma, PrismaClient } from '@repo/db';
+import { Prisma, PrismaClient } from "@repo/db";
-import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
+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 { getServerSession } from "../../api/auth/[...nextauth]/auth";
-import { PrismaClient } from '@repo/db';
+import { PrismaClient } from "@repo/db";
-import { ProfileForm, SocialForm } from './_components/forms';
+import { ProfileForm, SocialForm, PasswordForm } from "./_components/forms";
-import { GearIcon } from '@radix-ui/react-icons';
+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>
-  );
-};

apps/hub/app/_components/ui/Nav.tsx

@@ -4,8 +4,8 @@ import {
   GearIcon,
   ExitIcon,
   LockClosedIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import Link from 'next/link';
+import Link from "next/link";
 
 export const VerticalNav = () => {
   return (
@@ -38,7 +38,7 @@ export const VerticalNav = () => {
           </details>
         </li>
         <li>
-          <Link href="/settings/account">
+          <Link href="/settings">
             <GearIcon />
             Einstellungen
           </Link>