feat: user invite flow, deactivate/delete, favicon, dashboard loading fix, admin full-width
- Invite flow: admin can invite users by email with role selection; accept-invite page sets password and creates the account; 72-hour token expiry; E2E tests - User deactivate/reactivate/delete: new tRPC procedures + UI buttons; deactivation revokes all active sessions immediately; delete cascades vacation/broadcast records; isActive field added via migration 20260402000000_user_isactive - Auth: block login for inactive users with audit entry - Favicon: SVG favicon + ICO/PNG fallbacks (16, 32, 180, 192, 512px); manifest updated - Dashboard: GridLayout dynamic-import loading skeleton prevents blank dark area on first login before react-grid-layout chunk is cached - Admin users: remove max-w-5xl constraint so table uses full page width - Dev: docker container restart workflow documented in LEARNINGS.md; Prisma generate must run inside the container after schema changes (named node_modules volume) Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { useState, use } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { trpc } from "~/lib/trpc/client.js";
|
||||
|
||||
export default function AcceptInvitePage({ params }: { params: Promise<{ token: string }> }) {
|
||||
const { token } = use(params);
|
||||
const router = useRouter();
|
||||
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
const [done, setDone] = useState(false);
|
||||
|
||||
const { data: invite, isLoading, error: inviteError } = trpc.invite.getInvite.useQuery(
|
||||
{ token },
|
||||
{ retry: false },
|
||||
);
|
||||
|
||||
const acceptMutation = trpc.invite.acceptInvite.useMutation({
|
||||
onSuccess: () => setDone(true),
|
||||
onError: (err) => setFormError(err.message),
|
||||
});
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setFormError(null);
|
||||
if (password.length < 8) { setFormError("Password must be at least 8 characters."); return; }
|
||||
if (password !== confirm) { setFormError("Passwords do not match."); return; }
|
||||
await acceptMutation.mutateAsync({ token, password });
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950">
|
||||
<p className="text-sm text-gray-500">Loading…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (inviteError || !invite) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8 text-center">
|
||||
<div className="text-4xl mb-4">🔗</div>
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Invite link invalid or expired
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
{inviteError?.message ?? "This invite link is no longer valid. Please request a new invitation from your administrator."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (done) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8 text-center">
|
||||
<div className="text-4xl mb-4">✅</div>
|
||||
<h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Account created
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500 mb-6">Your account has been set up successfully.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/auth/signin")}
|
||||
className="rounded-lg bg-brand-600 px-5 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors"
|
||||
>
|
||||
Go to sign in
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-950 p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-lg p-8">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Accept invitation</h1>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
You have been invited as <strong>{invite.role}</strong> to CapaKraken.
|
||||
Set a password to activate your account (<span className="font-medium">{invite.email}</span>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{formError && (
|
||||
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">
|
||||
{formError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
placeholder="At least 8 characters"
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Confirm password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
required
|
||||
placeholder="Repeat your password"
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={acceptMutation.isPending}
|
||||
className="w-full rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{acceptMutation.isPending ? "Setting up account…" : "Create account"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -23,6 +23,15 @@ export const metadata: Metadata = {
|
||||
title: "CapaKraken — Resource & Capacity Planning",
|
||||
description: "Interactive resource planning and project staffing tool",
|
||||
manifest: "/manifest.json",
|
||||
icons: {
|
||||
icon: [
|
||||
{ url: "/favicon.svg", type: "image/svg+xml" },
|
||||
{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
|
||||
{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
|
||||
{ url: "/favicon.ico" },
|
||||
],
|
||||
apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
|
||||
},
|
||||
appleWebApp: {
|
||||
capable: true,
|
||||
statusBarStyle: "default",
|
||||
@@ -51,7 +60,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<script nonce={nonce} dangerouslySetInnerHTML={{__html: `
|
||||
<script nonce={nonce} suppressHydrationWarning dangerouslySetInnerHTML={{__html: `
|
||||
try {
|
||||
var p = JSON.parse(localStorage.getItem('capakraken_theme') || '{}');
|
||||
if (p.mode === 'dark') document.documentElement.classList.add('dark');
|
||||
|
||||
Reference in New Issue
Block a user