PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source
This commit is contained in:
Nicolas
2025-02-17 02:16:13 +01:00
parent 6c67a11cab
commit ad69d144e5
9 changed files with 167 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/hub/app/(app)/admin/page.tsx
View File

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

15
apps/hub/app/(app)/layout.tsx
View File

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

27
apps/hub/app/(app)/page.tsx
View File

@@ -1,6 +1,6 @@
import Link from 'next/link';
import { PaginatedTable } from '../_components/PaginatedTable';
import { Header } from '../_components/ui/Header';
import Link from "next/link";
import { PaginatedTable } from "../_components/PaginatedTable";
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',
accessorKey: 'id',
header: "ID",
accessorKey: "id",
},
{
header: 'Email',
accessorKey: 'email',
header: "Email",
accessorKey: "email",
},
{
header: 'First Name',
accessorKey: 'firstname',
header: "First Name",
accessorKey: "firstname",
},
{
header: 'Last Name',
accessorKey: 'lastname',
footer: 'Total',
header: "Last Name",
accessorKey: "lastname",
footer: "Total",
},
]}
/>

153
apps/hub/app/(app)/settings/account/_components/forms.tsx → apps/hub/app/(app)/settings/_components/forms.tsx
View File

@@ -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>
);
};

10
apps/hub/app/(app)/settings/account/actions.ts → apps/hub/app/(app)/settings/actions.ts
View File

@@ -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
};

11
apps/hub/app/(app)/settings/account/page.tsx → apps/hub/app/(app)/settings/page.tsx
View File

@@ -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>
);
};

8
apps/hub/app/(app)/settings/privacy/page.tsx
View File

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

6
apps/hub/app/_components/ui/Nav.tsx
View File

@@ -4,8 +4,8 @@ import {
GearIcon,
ExitIcon,
LockClosedIcon,
} from '@radix-ui/react-icons';
import Link from 'next/link';
} from "@radix-ui/react-icons";
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>

BIN
apps/hub/public/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 MiB