feat: add dialog buttons to profile settings
This commit is contained in:
parent
78d99a0974
commit
86c76df873
3 changed files with 194 additions and 67 deletions
106
src/app/components/profile-settings/index.tsx
Normal file
106
src/app/components/profile-settings/index.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import SubmitDialogButton from "./submit-dialog-button";
|
||||||
|
import DeleteAccount from "./delete-account";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
name: string | null | undefined;
|
||||||
|
username: string | null | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileSettings({ name, username }: Props) {
|
||||||
|
const [displayName, setDisplayName] = useState(name ?? "");
|
||||||
|
const [usernameState, setUsernameState] = useState(username ?? "");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold">Profile Settings</h2>
|
||||||
|
<p className="text-sm text-zinc-500">Update your account info, username, and preferences.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separator */}
|
||||||
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
||||||
|
<hr className="flex-grow border-zinc-300" />
|
||||||
|
<span>Account Info</span>
|
||||||
|
<hr className="flex-grow border-zinc-300" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Change Name */}
|
||||||
|
<div className="grid grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="deletion" className="font-semibold">
|
||||||
|
Change Display Name
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-zinc-500">This is a display name shown on your profile — feel free to change it anytime</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-1">
|
||||||
|
<input type="text" className="pill input w-full max-w-64" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
|
||||||
|
<SubmitDialogButton
|
||||||
|
title="Confirm Display Name Change"
|
||||||
|
description="Update your display name? This will only be visible on your profile. You can change it again later."
|
||||||
|
onSubmit={() => {}}
|
||||||
|
>
|
||||||
|
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 px-2 py-1">
|
||||||
|
<p className="font-semibold">New display name:</p>
|
||||||
|
<p className="indent-4">"{name}"</p>
|
||||||
|
</div>
|
||||||
|
</SubmitDialogButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Change Username */}
|
||||||
|
<div className="grid grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="deletion" className="font-semibold">
|
||||||
|
Change Username
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-1">
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="pill input w-full max-w-64 indent-4"
|
||||||
|
value={usernameState}
|
||||||
|
onChange={(e) => setUsernameState(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span className="absolute top-1/2 -translate-y-1/2 left-4 select-none">@</span>
|
||||||
|
</div>
|
||||||
|
<SubmitDialogButton
|
||||||
|
title="Confirm Username Change"
|
||||||
|
description="Are you sure? Your username is your unique indentifier and can only be changed every 90 days."
|
||||||
|
onSubmit={() => {}}
|
||||||
|
>
|
||||||
|
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 px-2 py-1">
|
||||||
|
<p className="font-semibold">New username:</p>
|
||||||
|
<p className="indent-4">"@{usernameState}"</p>
|
||||||
|
</div>
|
||||||
|
</SubmitDialogButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separator */}
|
||||||
|
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
||||||
|
<hr className="flex-grow border-zinc-300" />
|
||||||
|
<span>Danger Zone</span>
|
||||||
|
<hr className="flex-grow border-zinc-300" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete Account */}
|
||||||
|
<div className="grid grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="deletion" className="font-semibold">
|
||||||
|
Delete Account
|
||||||
|
</label>
|
||||||
|
<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DeleteAccount />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
86
src/app/components/profile-settings/submit-dialog-button.tsx
Normal file
86
src/app/components/profile-settings/submit-dialog-button.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
onSubmit: () => void;
|
||||||
|
error?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SubmitDialogButton({ title, description, onSubmit, error, children }: Props) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
const submit = () => {
|
||||||
|
onSubmit();
|
||||||
|
close();
|
||||||
|
window.location.reload(); // I would use router.refresh() here but the API data fetching breaks
|
||||||
|
};
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
setIsVisible(false);
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsOpen(false);
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
// slight delay to trigger animation
|
||||||
|
setTimeout(() => setIsVisible(true), 10);
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button onClick={() => setIsOpen(true)} className="pill button aspect-square !p-1 text-2xl">
|
||||||
|
<Icon icon="material-symbols:check-rounded" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen &&
|
||||||
|
createPortal(
|
||||||
|
<div className="fixed inset-0 flex items-center justify-center z-40">
|
||||||
|
<div
|
||||||
|
onClick={close}
|
||||||
|
className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
|
||||||
|
isVisible ? "opacity-100" : "opacity-0"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
|
||||||
|
isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<h2 className="text-xl font-bold">{title}</h2>
|
||||||
|
<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
|
||||||
|
<Icon icon="material-symbols:close-rounded" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-zinc-500">{description}</p>
|
||||||
|
|
||||||
|
{children}
|
||||||
|
{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 mt-4">
|
||||||
|
<button onClick={close} className="pill button">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button onClick={submit} className="pill button">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -7,7 +7,7 @@ import { Icon } from "@iconify/react";
|
||||||
import { auth } from "@/lib/auth";
|
import { auth } from "@/lib/auth";
|
||||||
import { prisma } from "@/lib/prisma";
|
import { prisma } from "@/lib/prisma";
|
||||||
|
|
||||||
import DeleteAccount from "@/app/components/profile-settings/delete-account";
|
import ProfileSettings from "@/app/components/profile-settings";
|
||||||
|
|
||||||
export default async function ProfileSettingsPage() {
|
export default async function ProfileSettingsPage() {
|
||||||
const session = await auth();
|
const session = await auth();
|
||||||
|
|
@ -46,72 +46,7 @@ export default async function ProfileSettingsPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl p-4 flex flex-col gap-4">
|
<ProfileSettings name={session.user.name} username={session.user.username} />
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold">Profile Settings</h2>
|
|
||||||
<p className="text-sm text-zinc-500">Update your account info, username, and preferences.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Separator */}
|
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
|
||||||
<hr className="flex-grow border-zinc-300" />
|
|
||||||
<span>Account Info</span>
|
|
||||||
<hr className="flex-grow border-zinc-300" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Change Name */}
|
|
||||||
<div className="grid grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="deletion" className="font-semibold">
|
|
||||||
Change Name
|
|
||||||
</label>
|
|
||||||
<p className="text-sm text-zinc-500">This is the name shown on your profile — feel free to change it anytime</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-1">
|
|
||||||
<input type="text" className="pill input w-full max-w-64" />
|
|
||||||
<button className="pill button aspect-square !p-1 text-2xl">
|
|
||||||
<Icon icon="material-symbols:check-rounded" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Change Username */}
|
|
||||||
<div className="grid grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="deletion" className="font-semibold">
|
|
||||||
Change Username
|
|
||||||
</label>
|
|
||||||
<p className="text-sm text-zinc-500">Your unique tag on the site. Can only be changed once every 90 days</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex justify-end gap-1">
|
|
||||||
<input type="text" className="pill input w-full max-w-64" />
|
|
||||||
<button className="pill button aspect-square !p-1 text-2xl">
|
|
||||||
<Icon icon="material-symbols:check-rounded" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Separator */}
|
|
||||||
<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
|
|
||||||
<hr className="flex-grow border-zinc-300" />
|
|
||||||
<span>Danger Zone</span>
|
|
||||||
<hr className="flex-grow border-zinc-300" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Delete Account */}
|
|
||||||
<div className="grid grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="deletion" className="font-semibold">
|
|
||||||
Delete Account
|
|
||||||
</label>
|
|
||||||
<p className="text-sm text-zinc-500">This will permanently remove your account and all uploaded Miis. This action cannot be undone</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DeleteAccount />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue