create-nevela 0.6.0 → 0.7.0

package/template/web/app/sign-in/page.tsx

@@ -14,7 +14,7 @@ const ERRORS: Record<string, string> = {
   link: "That sign-in link has expired or was already used. Ask for a new one.",
 };
 
-export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string; error?: string; reset?: string }> }) {
+export default async function SignInPage({ searchParams }: { searchParams: Promise<{ next?: string; error?: string; reset?: string; closed?: string }> }) {
   const params = await searchParams;
   const next = safeRedirectPath(params.next);
   if (await getSession()) redirect(next);
@@ -44,7 +44,13 @@ export default async function SignInPage({ searchParams }: { searchParams: Promi
         methods={{ magicLink: authConfig.magicLink, emailOtp: authConfig.emailOtp, passkeys: authConfig.passkeys }}
         next={next}
         initialError={params.error ? (ERRORS[params.error] ?? "Sign-in didn't finish. Try again.") : null}
-        initialNotice={params.reset ? "Your password is changed. Sign in with the new one." : null}
+        initialNotice={
+          params.reset
+            ? "Your password is changed. Sign in with the new one."
+            : params.closed
+              ? "Your account is closed, and you are signed out everywhere. To have it back, ask an administrator."
+              : null
+        }
       />
     </AuthShell>
   );

package/template/web/components/access/deleted-account-actions.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { RotateCcwIcon } from "lucide-react";
+import { toast } from "sonner";
+import { allowEmailAction, removeAccountAction, restoreAccountAction } from "@/app/dashboard/access/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+/** Restore a closed account, or remove it for good. Laravel has the last word on both. */
+export function DeletedAccountActions({ id, who, email }: { id: string; who: string; email: string }) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  function restore() {
+    startTransition(async () => {
+      const result = await restoreAccountAction(id);
+      if (result.ok) {
+        toast.success(`${who} can sign in again, with everything the account had.`);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  function remove() {
+    startTransition(async () => {
+      const result = await removeAccountAction(id);
+      setConfirming(false);
+      if (result.ok) {
+        toast.success(`${who} is removed for good. Their email stays blocked.`);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-1">
+      <Button variant="outline" size="sm" disabled={pending} onClick={restore}>
+        {pending && !confirming ? <Spinner data-icon="inline-start" /> : <RotateCcwIcon data-icon="inline-start" />}
+        Restore
+      </Button>
+      <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" disabled={pending} onClick={() => setConfirming(true)}>
+        Remove for good
+      </Button>
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove {who} for good?</AlertDialogTitle>
+            <AlertDialogDescription>
+              The account, its roles and its sign-in methods are erased, and it can&apos;t be restored afterwards. {email} stays blocked from signing up again
+              until you allow it, below.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={remove} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Remove for good
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+/** Let an email whose account was removed for good sign up again. */
+export function AllowEmailButton({ id, hint }: { id: string; hint: string }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+
+  function allow() {
+    startTransition(async () => {
+      const result = await allowEmailAction(id);
+      if (result.ok) {
+        toast.success(`${hint} can sign up again.`);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  return (
+    <Button variant="outline" size="sm" disabled={pending} onClick={allow}>
+      {pending && <Spinner data-icon="inline-start" />}
+      Allow again
+    </Button>
+  );
+}

package/template/web/components/access/user-row-actions.tsx

@@ -24,7 +24,18 @@ import type { ManagedUser } from "@/lib/access";
  * What can be done to one user from the list. Laravel has the last word on each: it
  * refuses, with its reason, to switch off the last administrator and the like.
  */
-export function UserRowActions({ user, canEdit, canDelete }: { user: ManagedUser; canEdit: boolean; canDelete: boolean }) {
+export function UserRowActions({
+  user,
+  canEdit,
+  canDelete,
+  keepsDeleted = false,
+}: {
+  user: ManagedUser;
+  canEdit: boolean;
+  canDelete: boolean;
+  /** Whether a deleted account is kept under Deleted accounts, to be restored. */
+  keepsDeleted?: boolean;
+}) {
   const router = useRouter();
   const [confirming, setConfirming] = useState(false);
   const [pending, startTransition] = useTransition();
@@ -99,13 +110,14 @@ export function UserRowActions({ user, canEdit, canDelete }: { user: ManagedUser
           <AlertDialogHeader>
             <AlertDialogTitle>Delete {who}?</AlertDialogTitle>
             <AlertDialogDescription>
-              Their account, their roles and their sign-in methods are removed, and they are signed out everywhere. This can&apos;t be undone. To keep the
-              account and stop them signing in, switch it off instead.
+              {keepsDeleted
+                ? "They are signed out everywhere and can't sign in, and their email can't sign up again. The account is kept under Deleted accounts, where it can be restored as it was or removed for good."
+                : "Their account, their roles and their sign-in methods are removed, and they are signed out everywhere. This can't be undone. To keep the account and stop them signing in, switch it off instead."}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
-            <Button variant="destructive" disabled={pending} onClick={() => run(() => deleteUserAction(user.id), `${who} is deleted.`)}>
+            <Button variant="destructive" disabled={pending} onClick={() => run(() => deleteUserAction(user.id), keepsDeleted ? `${who} is deleted. Restore them from Deleted accounts.` : `${who} is deleted.`)}>
               {pending && <Spinner />}
               Delete
             </Button>

package/template/web/components/account/sections.tsx

@@ -9,6 +9,7 @@ import { PasswordField } from "@/components/auth/password-field";
 import { authErrorMessage } from "@/components/auth/sign-in-flow";
 import { PROVIDER_LABELS, ProviderIcon } from "@/components/auth/provider-icons";
 import { UserAvatar } from "@/components/dashboard/user-menu";
+import { closeAccountAction } from "@/app/auth-actions";
 import { authClient, uploadAvatar } from "@/lib/auth-client";
 import { fileUrl } from "@/lib/files";
 import { checkPassword } from "@/lib/password-rules";
@@ -190,6 +191,72 @@ export function Profile({ user }: { user: Props["user"] }) {
   );
 }
 
+/**
+ * Close your own account. It asks for the password, and says what closing means before
+ * it does it: this is the one thing here a person can't take back by themselves.
+ */
+export function CloseAccount({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+  const [password, setPassword] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const close = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    // When it works there is no answer to read: the action sends the browser to the sign-in
+    // page. So an answer is a refusal, and a rejection is a request that never got through.
+    try {
+      const result = await closeAccountAction(password);
+      if (result && !result.ok) {
+        setPending(false);
+        setError(result.error);
+      }
+    } catch {
+      setPending(false);
+      setError("That didn't get through. Your account is as it was: try again.");
+    }
+  };
+
+  return (
+    <Section id="close-account" title="Close account" description="Sign out everywhere and stop using this account.">
+      {!open ? (
+        <>
+          <p className="text-sm text-foreground-muted">
+            You won&apos;t be able to sign in, and {email} can&apos;t be used to make a new account. Nothing is erased: an administrator can restore the account
+            as it was, or remove it for good.
+          </p>
+          <SecondaryButton className="w-fit text-danger" onClick={() => setOpen(true)}>
+            Close my account
+          </SecondaryButton>
+        </>
+      ) : (
+        <form className="flex flex-col gap-4" onSubmit={close}>
+          <p className="text-sm text-foreground-muted">Enter your password to close your account. You will be signed out on every device straight away.</p>
+          <PasswordConfirm id="close-account-password" value={password} onChange={setPassword} />
+          {error && <FormMessage tone="error">{error}</FormMessage>}
+          <div className="flex flex-wrap items-center gap-3">
+            <PrimaryButton type="submit" pending={pending} className="w-fit">
+              Close my account
+            </PrimaryButton>
+            <TextButton
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setPassword("");
+                setError(null);
+              }}
+            >
+              Keep it
+            </TextButton>
+          </div>
+        </form>
+      )}
+    </Section>
+  );
+}
+
 export function Password({ hasPassword, email }: { hasPassword: boolean; email: string }) {
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");

package/template/web/components/dashboard/dashboard-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
-import { ActivityIcon, LayoutDashboardIcon, ShieldCheckIcon, Trash2Icon, UserCircleIcon, UsersIcon } from "lucide-react";
+import { ActivityIcon, LayoutDashboardIcon, ShieldCheckIcon, Trash2Icon, UserCircleIcon, UserXIcon, UsersIcon } from "lucide-react";
 import { ChevronsUpDownIcon } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import {
@@ -63,7 +63,7 @@ export function DashboardSidebar({
   resources,
   links = [],
   isAdmin = false,
-  access = { users: false, roles: false },
+  access = { users: false, roles: false, deleted: false },
   trash = false,
   user,
 }: {
@@ -74,7 +74,7 @@ export function DashboardSidebar({
   /** Whether to show the sections that manage the app itself. */
   isAdmin?: boolean;
   /** Which of the screens for managing people this person may open. */
-  access?: { users: boolean; roles: boolean };
+  access?: { users: boolean; roles: boolean; deleted?: boolean };
   /** Whether this person may delete anything, and so has a trash to look in. */
   trash?: boolean;
   user: DashboardUser;
@@ -86,6 +86,7 @@ export function DashboardSidebar({
     ...ACCOUNT_LINKS,
     ...(access.users ? [{ href: "/dashboard/access/users", label: "Users", icon: UsersIcon }] : []),
     ...(access.roles ? [{ href: "/dashboard/access/roles", label: "Roles", icon: ShieldCheckIcon }] : []),
+    ...(access.deleted ? [{ href: "/dashboard/access/deleted", label: "Deleted accounts", icon: UserXIcon }] : []),
     ...(trash ? [{ href: "/dashboard/trash", label: "Trash", icon: Trash2Icon }] : []),
     ...(isAdmin ? ADMIN_LINKS : []),
   ];

package/template/web/lib/access.ts

@@ -69,7 +69,32 @@ export interface PermissionCatalog {
 
 export interface UserList {
   data: ManagedUser[];
+  /** keepsDeleted: deleting a user closes the account, to be restored, where it used to remove it. */
+  meta: { page: number; perPage: number; total: number; totalPages: number; keepsDeleted?: boolean };
+}
+
+/** An account that was closed: by its owner, or by someone deleting it from the Users screen. */
+export interface DeletedAccount extends ManagedUser {
+  closedAt: string | null;
+  /** "self" when its owner closed it, "admin" when someone else did. */
+  closedBy: "self" | "admin" | null;
+  /** Who, when it wasn't the owner and they still have an account. */
+  closedByName: string | null;
+}
+
+export interface DeletedAccountList {
+  data: DeletedAccount[];
   meta: { page: number; perPage: number; total: number; totalPages: number };
+  /** How many emails are blocked with no account left behind them. */
+  blocked: number;
+}
+
+/** An email whose account was removed for good. The address itself isn't kept. */
+export interface BlockedEmail {
+  id: string;
+  /** Enough to recognise it by: "m•••@gmail.com". */
+  hint: string;
+  blockedAt: string;
 }
 
 /** What a call answered with when it didn't work, in words for the person. */
@@ -86,6 +111,23 @@ export async function listUsers(params: { q?: string; role?: string; status?: st
   return response.ok ? (response.body as UserList) : null;
 }
 
+/**
+ * The closed accounts. "migrate" when the app has upgraded and not yet run the migration
+ * that keeps them, and null when the person may not see them.
+ */
+export async function listDeletedAccounts(params: { q?: string; page?: string }): Promise<DeletedAccountList | "migrate" | null> {
+  const query = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) if (value) query.set(key, value);
+  const response = await laravel(`_nevela/deleted-accounts?${query}`);
+  if (response.ok) return response.body as DeletedAccountList;
+  return response.status === 409 || response.status === 404 ? "migrate" : null;
+}
+
+export async function listBlockedEmails(): Promise<BlockedEmail[]> {
+  const response = await laravel("_nevela/blocked-emails?perPage=100");
+  return response.ok ? (response.body as { data: BlockedEmail[] }).data : [];
+}
+
 export async function getUser(id: string): Promise<ManagedUser | null> {
   const response = await laravel(`_nevela/users/${encodeURIComponent(id)}`);
   return response.ok ? (response.body as ManagedUser) : null;

package/template/web/lib/auth-config.ts

@@ -9,7 +9,7 @@
  */
 export type SocialProvider = "google" | "github" | "apple" | "microsoft";
 
-// nevela:generated:start hash=584f50322414
+// nevela:generated:start hash=68b0e3641ced
 export const authConfig = {
   /** People can create their own account at /sign-up. */
   registration: false,
@@ -29,6 +29,8 @@ export const authConfig = {
   requireEmailVerification: false,
   /** Check new passwords against Have I Been Pwned's breach list. */
   checkBreachedPasswords: true,
+  /** People can close their own account, from the Account page. */
+  closeAccount: true,
   /** Signing in with Google, GitHub and the like isn't part of Nevela yet. */
   social: [] as SocialProvider[],
 };

package/template/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nevela-web",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "type": "module",
   "scripts": {