Merge pull request #34 from encryption4all/feat/admin-org-management

feat(admin): create/delete organizations + fix header toggle layout

Author: rubenhensen

src/lib/assets/images/logo-dark.svg

@@ -3,8 +3,8 @@
 	import ThemeSwitcher from './ThemeSwitcher.svelte';
 	import LocaleSwitcher from './LocaleSwitcher.svelte';
 	import Icon from '@iconify/svelte';
-	import logoLight from '$lib/assets/images/logo.svg';
-	import logoDark from '$lib/assets/images/logo-dark.svg';
+	import logoLight from '$lib/assets/images/logo-wide.svg';
+	import logoDark from '$lib/assets/images/logo-wide-dark.svg';
 
 	type AuthProp =
 		| { loggedIn: true; email: string | null; portalHref: string }

src/lib/assets/images/logo-wide-dark.svg

@@ -50,16 +50,16 @@ body {
 	--pg-font-weight-bold: 700;
 	--pg-font-weight-extrabold: 800;
 
-	/* Colors — Purple business colorway */
-	--pg-primary: #7c3aed;
-	--pg-primary-contrast: #6d28d9;
-	/* Background shade used wherever white text sits on purple (buttons, badges). */
+	/* Colors — Navy business colorway */
+	--pg-primary: #1e40af;
+	--pg-primary-contrast: #1e3a8a;
+	/* Background shade used wherever white text sits on navy (buttons, badges). */
 	/* Must keep contrast >= 4.5:1 against white in both themes. */
-	--pg-primary-bg: #7c3aed; /* white = 4.76:1, passes AA */
-	--pg-primary-bg-hover: #6d28d9; /* white = 5.84:1 */
+	--pg-primary-bg: #1e40af; /* white = 8.59:1, passes AAA */
+	--pg-primary-bg-hover: #1e3a8a; /* white = 10.36:1 */
 	--pg-general-background: #ffffff;
-	--pg-soft-background: #f5f3ff;
-	--pg-strong-background: #ddd6fe;
+	--pg-soft-background: #eff6ff;
+	--pg-strong-background: #bfdbfe;
 	--pg-text: #030e17;
 	--pg-text-secondary: #4d6070;
 	--pg-input-normal: #4d6070;
@@ -74,15 +74,15 @@ body {
 }
 
 .dark {
-	--pg-primary: #a78bfa;
-	--pg-primary-contrast: #6d28d9;
-	/* Keep the darker purple in dark mode too so white-text-on-purple */
+	--pg-primary: #93c5fd;
+	--pg-primary-contrast: #1e3a8a;
+	/* Keep a darker navy in dark mode too so white-text-on-navy */
 	/* buttons / badges keep a passing contrast ratio. */
-	--pg-primary-bg: #7c3aed;
-	--pg-primary-bg-hover: #6d28d9;
-	--pg-general-background: #0f0a1e;
-	--pg-soft-background: #1a1030;
-	--pg-strong-background: #2d1b69;
+	--pg-primary-bg: #1e40af;
+	--pg-primary-bg-hover: #1e3a8a;
+	--pg-general-background: #0a1428;
+	--pg-soft-background: #0f1e3d;
+	--pg-strong-background: #1e3a6e;
 	--pg-text: #ffffff;
 	--pg-text-secondary: #92a3af;
 	--pg-input-normal: #92a3af;

src/lib/assets/images/logo-wide.svg

@@ -316,7 +316,49 @@
 			"empty": "(empty)",
 			"validationNotes": "Validation notes (what did you check?)",
 			"approve": "Approve",
-			"reject": "Reject"
+			"reject": "Reject",
+			"delete": "Delete",
+			"deleteConfirm": "Delete organization",
+			"deleteConfirmTitle": "Delete this organization?",
+			"deleteConfirmIntro": "This will permanently delete \"{name}\" and all its users, API keys, change requests, email logs, and DNS verifications.",
+			"deleteConfirmWarning": "This action cannot be undone.",
+			"deleteConfirmLabel": "Type the organization name shown below to confirm",
+			"cancel": "Cancel",
+			"deleteSuccess": "Organization \"{name}\" has been deleted.",
+			"deleteFailedNameMismatch": "The name you entered did not match. Deletion cancelled.",
+			"suspendConfirmTitle": "Suspend this organization?",
+			"suspendConfirmIntro": "{name} will be blocked from using the service. You can reactivate it later.",
+			"suspendConfirmAction": "Suspend organisation",
+			"activateConfirmTitle": "Activate this organization?",
+			"activateConfirmIntro": "{name} will be marked as active and able to use the service.",
+			"activateConfirmAction": "Activate organisation",
+			"reactivateConfirmTitle": "Reactivate this organization?",
+			"reactivateConfirmIntro": "{name} will be marked as active again.",
+			"reactivateConfirmAction": "Reactivate organisation",
+			"statusChangedTo_active": "Organization is now active.",
+			"statusChangedTo_suspended": "Organization is now suspended.",
+			"addOrg": "Add organization",
+			"createSubmit": "Create organization",
+			"createSuccess": "Organization \"{name}\" has been created.",
+			"create_required_name": "Organization name is required.",
+			"create_required_domain": "Domain is required.",
+			"create_required_email": "Signing email is required.",
+			"create_invalid_domain": "Invalid domain (e.g. example.com).",
+			"create_invalid_email": "Invalid email address.",
+			"create_duplicate_domain": "An organization with this domain already exists.",
+			"create_unexpected": "An unexpected error occurred. Please try again.",
+			"usersTitle": "Users",
+			"addUser": "Add user",
+			"addUserSubmit": "Add user",
+			"userFullName": "Full name",
+			"userEmail": "Email",
+			"userPhone": "Phone",
+			"addUserSuccess": "User \"{name}\" has been added.",
+			"addUser_required_name": "Full name is required.",
+			"addUser_required_email": "Email is required.",
+			"addUser_invalid_email": "Invalid email address.",
+			"addUser_duplicate_email": "A user with this email already exists.",
+			"addUser_unexpected": "An unexpected error occurred. Please try again."
 		},
 		"apiKeys": {
 			"title": "All API Keys",

src/lib/assets/images/logo.svg

@@ -316,7 +316,49 @@
 			"empty": "(leeg)",
 			"validationNotes": "Validatienotities (wat heeft u gecontroleerd?)",
 			"approve": "Goedkeuren",
-			"reject": "Afwijzen"
+			"reject": "Afwijzen",
+			"delete": "Verwijderen",
+			"deleteConfirm": "Organisatie verwijderen",
+			"deleteConfirmTitle": "Deze organisatie verwijderen?",
+			"deleteConfirmIntro": "Hiermee verwijdert u \"{name}\" definitief, inclusief alle gebruikers, API-sleutels, wijzigingsverzoeken, e-maillogs en DNS-verificaties.",
+			"deleteConfirmWarning": "Deze actie kan niet ongedaan worden gemaakt.",
+			"deleteConfirmLabel": "Typ de hieronder getoonde organisatienaam ter bevestiging",
+			"cancel": "Annuleren",
+			"deleteSuccess": "Organisatie \"{name}\" is verwijderd.",
+			"deleteFailedNameMismatch": "De ingevoerde naam komt niet overeen. Verwijdering geannuleerd.",
+			"suspendConfirmTitle": "Deze organisatie opschorten?",
+			"suspendConfirmIntro": "{name} kan de dienst niet meer gebruiken. U kunt de organisatie later weer heractiveren.",
+			"suspendConfirmAction": "Organisatie opschorten",
+			"activateConfirmTitle": "Deze organisatie activeren?",
+			"activateConfirmIntro": "{name} wordt als actief gemarkeerd en kan de dienst gebruiken.",
+			"activateConfirmAction": "Organisatie activeren",
+			"reactivateConfirmTitle": "Deze organisatie heractiveren?",
+			"reactivateConfirmIntro": "{name} wordt opnieuw als actief gemarkeerd.",
+			"reactivateConfirmAction": "Organisatie heractiveren",
+			"statusChangedTo_active": "Organisatie is nu actief.",
+			"statusChangedTo_suspended": "Organisatie is nu opgeschort.",
+			"addOrg": "Organisatie toevoegen",
+			"createSubmit": "Organisatie aanmaken",
+			"createSuccess": "Organisatie \"{name}\" is aangemaakt.",
+			"create_required_name": "Organisatienaam is verplicht.",
+			"create_required_domain": "Domein is verplicht.",
+			"create_required_email": "Ondertekenings-e-mail is verplicht.",
+			"create_invalid_domain": "Ongeldig domein (bijv. example.com).",
+			"create_invalid_email": "Ongeldig e-mailadres.",
+			"create_duplicate_domain": "Er bestaat al een organisatie met dit domein.",
+			"create_unexpected": "Er is een onverwachte fout opgetreden. Probeer het opnieuw.",
+			"usersTitle": "Gebruikers",
+			"addUser": "Gebruiker toevoegen",
+			"addUserSubmit": "Gebruiker toevoegen",
+			"userFullName": "Volledige naam",
+			"userEmail": "E-mailadres",
+			"userPhone": "Telefoonnummer",
+			"addUserSuccess": "Gebruiker \"{name}\" is toegevoegd.",
+			"addUser_required_name": "Volledige naam is verplicht.",
+			"addUser_required_email": "E-mailadres is verplicht.",
+			"addUser_invalid_email": "Ongeldig e-mailadres.",
+			"addUser_duplicate_email": "Er bestaat al een gebruiker met dit e-mailadres.",
+			"addUser_unexpected": "Er is een onverwachte fout opgetreden. Probeer het opnieuw."
 		},
 		"apiKeys": {
 			"title": "Alle API-sleutels",

src/lib/components/Header.svelte

@@ -5,7 +5,8 @@ import {
 	changeRequests,
 	adminAuditLog,
 	apiKeys,
-	adminAccounts
+	adminAccounts,
+	sessions
 } from '$lib/server/db/schema';
 import { eq, desc, and, isNull, or, count, sql } from 'drizzle-orm';
 
@@ -147,6 +148,58 @@ export async function suspendOrganization(orgId: string) {
 		.where(eq(organizations.id, orgId));
 }
 
+export async function getOrganizationById(orgId: string) {
+	const rows = await db
+		.select()
+		.from(organizations)
+		.where(eq(organizations.id, orgId))
+		.limit(1);
+	return rows[0] ?? null;
+}
+
+export async function deleteOrganization(orgId: string) {
+	await db
+		.delete(sessions)
+		.where(or(eq(sessions.orgId, orgId), eq(sessions.impersonatingOrgId, orgId)));
+	await db.delete(organizations).where(eq(organizations.id, orgId));
+}
+
+export async function createOrganization(input: {
+	name: string;
+	domain: string;
+	signingEmail: string;
+	kvkNumber: string | null;
+	status: 'active' | 'pending' | 'suspended';
+}) {
+	const [org] = await db
+		.insert(organizations)
+		.values({
+			name: input.name,
+			domain: input.domain,
+			signingEmail: input.signingEmail,
+			kvkNumber: input.kvkNumber,
+			status: input.status
+		})
+		.returning();
+	return org;
+}
+
+export async function addUserToOrganization(
+	orgId: string,
+	input: { email: string; fullName: string; phone: string | null }
+) {
+	const [user] = await db
+		.insert(users)
+		.values({
+			email: input.email,
+			fullName: input.fullName,
+			phone: input.phone,
+			orgId
+		})
+		.returning();
+	return user;
+}
+
 export async function listAdminAuditLog(page: number = 1) {
 	const pageSize = 50;
 	const offset = (page - 1) * pageSize;

src/lib/global.scss

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
 	import Icon from '@iconify/svelte';
-	import logoLight from '$lib/assets/images/logo.svg';
-	import logoDark from '$lib/assets/images/logo-dark.svg';
+	import logoLight from '$lib/assets/images/logo-wide.svg';
+	import logoDark from '$lib/assets/images/logo-wide-dark.svg';
 	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 	import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
 	import type { LayoutData } from './$types';
@@ -243,6 +243,9 @@
 
 	.header-actions {
 		margin-left: auto;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 	}
 
 	.header-title { font-size: var(--pg-font-size-lg); margin: 0; }