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

Fixed forms

Browse Source
This commit is contained in:
Nicolas
2025-02-23 16:48:42 +01:00
parent f5c777ca32
commit 972fb2fd15
2 changed files with 72 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
apps/hub/app/(app)/settings/_components/forms.tsx
View File

@@ -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, changePassword } 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 { import {
PersonIcon, PersonIcon,
EnvelopeClosedIcon, EnvelopeClosedIcon,
@@ -20,14 +20,14 @@ import {
LockClosedIcon, LockClosedIcon,
LockOpen2Icon, LockOpen2Icon,
LockOpen1Icon, LockOpen1Icon,
} from '@radix-ui/react-icons'; } from "@radix-ui/react-icons";
export const ProfileForm = ({ user }: { user: User }) => { export const ProfileForm = ({ user }: { user: User }) => {
const schema = z.object({ const schema = z.object({
firstname: z.string().min(2).max(30), firstname: z.string().min(2).max(30),
lastname: z.string().min(2).max(30), lastname: z.string().min(2).max(30),
email: z.string().email({ 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); const [isLoading, setIsLoading] = useState(false);
@@ -49,12 +49,10 @@ export const ProfileForm = ({ user }: { user: User }) => {
await updateUser(values); await updateUser(values);
form.reset(values); form.reset(values);
setIsLoading(false); setIsLoading(false);
toast.success('Deine Änderungen wurden gespeichert!', { toast.success("Deine Änderungen wurden gespeichert!", {
style: { style: {
background: background: "var(--color-base-100)",
'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))', color: "var(--color-base-content)",
color:
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
}, },
}); });
})} })}
@@ -62,15 +60,13 @@ export const ProfileForm = ({ user }: { user: User }) => {
<h2 className="card-title"> <h2 className="card-title">
<MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen <MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen
</h2> </h2>
<div className=""> <div className="text-left">
<label className="form-control w-full"> <label className="floating-label w-full mb-5 mt-5">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<PersonIcon /> Vorname <PersonIcon /> Vorname
</span> </span>
</div>
<input <input
{...form.register('firstname')} {...form.register("firstname")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={user.firstname} defaultValue={user.firstname}
@@ -82,14 +78,12 @@ export const ProfileForm = ({ user }: { user: User }) => {
{form.formState.errors.firstname.message} {form.formState.errors.firstname.message}
</p> </p>
)} )}
<label className="form-control w-full"> <label className="floating-label w-full mb-5">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<PersonIcon /> Nachname <PersonIcon /> Nachname
</span> </span>
</div>
<input <input
{...form.register('lastname')} {...form.register("lastname")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={user.lastname} defaultValue={user.lastname}
@@ -101,14 +95,12 @@ export const ProfileForm = ({ user }: { user: User }) => {
{form.formState.errors.lastname?.message} {form.formState.errors.lastname?.message}
</p> </p>
)} )}
<label className="form-control w-full"> <label className="floating-label w-full">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<EnvelopeClosedIcon /> E-Mail <EnvelopeClosedIcon /> E-Mail
</span> </span>
</div>
<input <input
{...form.register('email')} {...form.register("email")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={user.email} defaultValue={user.email}
@@ -158,7 +150,7 @@ export const SocialForm = ({
}); });
if (!user) return null; if (!user) return null;
console.log('Dirty', form.formState.isDirty); console.log("Dirty", form.formState.isDirty);
return ( return (
<form <form
className="card-body" className="card-body"
@@ -171,12 +163,10 @@ export const SocialForm = ({
}); });
setVatsimLoading(false); setVatsimLoading(false);
form.reset(values); form.reset(values);
toast.success('Deine Änderungen wurden gespeichert!', { toast.success("Deine Änderungen wurden gespeichert!", {
style: { style: {
background: background: "var(--color-base-100)",
'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))', color: "var(--color-base-content)",
color:
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
}, },
}); });
})} })}
@@ -208,7 +198,7 @@ export const SocialForm = ({
Verbunden mit {discordAccount.username} Verbunden mit {discordAccount.username}
</span> </span>
<span className="hidden group-hover:inline"> <span className="hidden group-hover:inline">
Verbindung trennen{isLoading && '...'} Verbindung trennen{isLoading && "..."}
</span> </span>
</Button> </Button>
) : ( ) : (
@@ -225,18 +215,16 @@ export const SocialForm = ({
</div> </div>
</div> </div>
<div className="content-center"> <div className="content-center">
<label className="form-control w-full"> <label className="floating-label w-full mt-5">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<PaperPlaneIcon /> VATSIM-CID <PaperPlaneIcon /> VATSIM-CID
</span> </span>
</div>
<input <input
type="number" type="number"
className="input input-bordered w-full" className="input input-bordered w-full"
placeholder="1445241" placeholder="1445241"
defaultValue={user.vatsimCid as number | undefined} defaultValue={user.vatsimCid as number | undefined}
{...form.register('vatsimCid', { {...form.register("vatsimCid", {
valueAsNumber: true, valueAsNumber: true,
})} })}
/> />
@@ -286,17 +274,15 @@ export const PasswordForm = ({ user }: { user: User }) => {
form.reset(values); form.reset(values);
setIsLoading(false); setIsLoading(false);
if (result.error) { if (result.error) {
form.setError('password', { form.setError("password", {
type: 'manual', type: "manual",
message: result.error, message: result.error,
}); });
} else if (result.success) { } else if (result.success) {
toast.success('Dein Passwort wurde geändert!', { toast.success("Dein Passwort wurde geändert!", {
style: { style: {
background: background: "var(--color-base-100)",
'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))', color: "var(--color-base-content)",
color:
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
}, },
}); });
} }
@@ -306,33 +292,29 @@ export const PasswordForm = ({ user }: { user: User }) => {
<LockClosedIcon className="w-5 h-5" /> Password Ändern <LockClosedIcon className="w-5 h-5" /> Password Ändern
</h2> </h2>
<div className=""> <div className="">
<label className="form-control w-full"> <label className="floating-label w-full mt-5 mb-5">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<LockOpen2Icon /> Aktuelles Passwort <LockOpen2Icon /> Aktuelles Passwort
</span> </span>
</div>
<input <input
{...form.register('password')} {...form.register("password")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={''} defaultValue={""}
/> />
</label> </label>
{form.formState.errors.password && ( {form.formState.errors.password && (
<p className="text-error">{form.formState.errors.password.message}</p> <p className="text-error">{form.formState.errors.password.message}</p>
)} )}
<label className="form-control w-full"> <label className="floating-label w-full mb-5">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<LockOpen1Icon /> Neues Passwort <LockOpen1Icon /> Neues Passwort
</span> </span>
</div>
<input <input
{...form.register('newPassword')} {...form.register("newPassword")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={''} defaultValue={""}
/> />
</label> </label>
{form.formState.errors.newPassword && ( {form.formState.errors.newPassword && (
@@ -340,17 +322,15 @@ export const PasswordForm = ({ user }: { user: User }) => {
{form.formState.errors.newPassword?.message} {form.formState.errors.newPassword?.message}
</p> </p>
)} )}
<label className="form-control w-full"> <label className="floating-label w-full">
<div className="label"> <span className="text-lg flex items-center gap-2">
<span className="label-text text-lg flex items-center gap-2">
<LockOpen1Icon /> Passwort wiederholen <LockOpen1Icon /> Passwort wiederholen
</span> </span>
</div>
<input <input
{...form.register('newPasswordConfirm')} {...form.register("newPasswordConfirm")}
type="text" type="text"
className="input input-bordered w-full" className="input input-bordered w-full"
defaultValue={''} defaultValue={""}
/> />
</label> </label>
{form.formState.errors.newPasswordConfirm && ( {form.formState.errors.newPasswordConfirm && (

18
apps/hub/app/_components/ui/Input.tsx
View File

@@ -1,14 +1,14 @@
import React from 'react'; import React from "react";
import { import {
FieldValues, FieldValues,
Path, Path,
RegisterOptions, RegisterOptions,
UseFormReturn, UseFormReturn,
} from 'react-hook-form'; } from "react-hook-form";
import { cn } from '../../../helper/cn'; import { cn } from "../../../helper/cn";
interface InputProps<T extends FieldValues> interface InputProps<T extends FieldValues>
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'form'> { extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "form"> {
name: Path<T>; name: Path<T>;
form: UseFormReturn<T>; form: UseFormReturn<T>;
formOptions?: RegisterOptions<T>; formOptions?: RegisterOptions<T>;
@@ -26,17 +26,13 @@ export const Input = <T extends FieldValues>({
...inputProps ...inputProps
}: InputProps<T>) => { }: InputProps<T>) => {
return ( return (
<label className="form-control w-full"> <label className="floating-label w-full mt-5">
<div className="label"> <span className="text-lg flex items-center gap-2">{label}</span>
<span className="label-text text-lg flex items-center gap-2">
{label}
</span>
</div>
<input <input
{...form.register(name, formOptions)} {...form.register(name, formOptions)}
type="text" type="text"
className={cn( className={cn(
'input input-bordered w-full placeholder:text-neutral-600', "input input-bordered w-full placeholder:text-neutral-600",
className className
)} )}
placeholder={placeholder} placeholder={placeholder}