+ Password Change, +- Settings NAV, fixed bg missing
This commit is contained in:
Nicolas
359
apps/hub/app/(app)/settings/_components/forms.tsx
Normal file
359
apps/hub/app/(app)/settings/_components/forms.tsx
Normal file
@@ -0,0 +1,359 @@
|
||||
"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,
|
||||
BookmarkIcon,
|
||||
DiscordLogoIcon,
|
||||
PaperPlaneIcon,
|
||||
Link2Icon,
|
||||
MixerHorizontalIcon,
|
||||
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",
|
||||
}),
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
type IFormInput = z.infer<typeof schema>;
|
||||
|
||||
const form = useForm<IFormInput>({
|
||||
defaultValues: {
|
||||
firstname: user.firstname,
|
||||
lastname: user.lastname,
|
||||
email: user.email,
|
||||
},
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
return (
|
||||
<form
|
||||
className="card-body"
|
||||
onSubmit={form.handleSubmit(async (values) => {
|
||||
setIsLoading(true);
|
||||
await updateUser(values);
|
||||
form.reset(values);
|
||||
setIsLoading(false);
|
||||
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)))",
|
||||
},
|
||||
});
|
||||
})}
|
||||
>
|
||||
<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>
|
||||
<input
|
||||
{...form.register("firstname")}
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
defaultValue={user.firstname}
|
||||
placeholder="Vorname"
|
||||
/>
|
||||
</label>
|
||||
{form.formState.errors.firstname && (
|
||||
<p className="text-error">
|
||||
{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>
|
||||
<input
|
||||
{...form.register("lastname")}
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
defaultValue={user.lastname}
|
||||
placeholder="Nachname"
|
||||
/>
|
||||
</label>
|
||||
{form.formState.errors.lastname && (
|
||||
<p className="text-error">
|
||||
{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>
|
||||
<input
|
||||
{...form.register("email")}
|
||||
type="text"
|
||||
className="input input-bordered w-full"
|
||||
defaultValue={user.email}
|
||||
placeholder="E-Mail"
|
||||
/>
|
||||
</label>
|
||||
{form.formState.errors.email && (
|
||||
<p className="text-error">{form.formState.errors.email?.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>
|
||||
);
|
||||
};
|
||||
|
||||
export const SocialForm = ({
|
||||
discordAccount,
|
||||
user,
|
||||
}: {
|
||||
discordAccount?: DiscordAccount;
|
||||
user: User;
|
||||
}) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [vatsimLoading, setVatsimLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const schema = z.object({
|
||||
vatsimCid: z.number().min(1000).max(9999999),
|
||||
});
|
||||
|
||||
type IFormInput = z.infer<typeof schema>;
|
||||
|
||||
const form = useForm<IFormInput>({
|
||||
defaultValues: {
|
||||
vatsimCid: user?.vatsimCid || undefined,
|
||||
},
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
if (!user) return null;
|
||||
return (
|
||||
<form
|
||||
className="card-body"
|
||||
onSubmit={form.handleSubmit(async (values) => {
|
||||
form.handleSubmit(async () => {
|
||||
setVatsimLoading(true);
|
||||
});
|
||||
await updateUser({
|
||||
vatsimCid: values.vatsimCid,
|
||||
});
|
||||
setVatsimLoading(false);
|
||||
form.reset(values);
|
||||
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)))",
|
||||
},
|
||||
});
|
||||
})}
|
||||
>
|
||||
<h2 className="card-title">
|
||||
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
|
||||
</h2>
|
||||
<div>
|
||||
<div>
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<DiscordLogoIcon /> Discord
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{discordAccount ? (
|
||||
<Button
|
||||
className="btn-success btn-block btn-outline group transition-all duration-0 hover:btn-error"
|
||||
isLoading={isLoading}
|
||||
onClick={async () => {
|
||||
setIsLoading(true);
|
||||
await unlinkDiscord(user.id);
|
||||
router.refresh();
|
||||
setIsLoading(false);
|
||||
}}
|
||||
>
|
||||
<DiscordLogoIcon className="w-5 h-5" />
|
||||
<span className="group-hover:hidden">
|
||||
Verbunden mit {discordAccount.username}
|
||||
</span>
|
||||
<span className="hidden group-hover:inline">
|
||||
Verbindung trennen{isLoading && "..."}
|
||||
</span>
|
||||
</Button>
|
||||
) : (
|
||||
<a href={process.env.NEXT_PUBLIC_DISCORD_URL}>
|
||||
<button className="btn btn-primary btn-block">
|
||||
<DiscordLogoIcon className="w-5 h-5" /> Mit Discord verbinden
|
||||
</button>
|
||||
</a>
|
||||
)}
|
||||
</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>
|
||||
<input
|
||||
type="number"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="1445241"
|
||||
defaultValue={user.vatsimCid as number | undefined}
|
||||
{...form.register("vatsimCid", {
|
||||
valueAsNumber: true,
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
{form.formState.errors.vatsimCid && (
|
||||
<p className="text-error">
|
||||
{form.formState.errors.vatsimCid.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="card-actions justify-center pt-6 mt-auto">
|
||||
<Button
|
||||
className="btn-sm btn-wide btn-outline btn-primary"
|
||||
isLoading={vatsimLoading}
|
||||
disabled={!form.formState.isDirty}
|
||||
role="submit"
|
||||
>
|
||||
<BookmarkIcon /> Speichern
|
||||
</Button>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user