@myrialabs/clopen 0.1.9 → 0.2.0

package/frontend/lib/components/settings/admin/InviteManagement.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
+	import ws from '$frontend/lib/utils/ws';
+	import { debug } from '$shared/utils/logger';
+
+	interface Invite {
+		id: string;
+		role: string;
+		label: string | null;
+		max_uses: number;
+		use_count: number;
+		expires_at: string | null;
+		created_at: string;
+	}
+
+	let invites = $state<Invite[]>([]);
+	let loading = $state(true);
+	let isCreating = $state(false);
+
+	// Store generated URLs by invite ID — persisted in sessionStorage so
+	// they survive page refresh (raw token only available at creation time)
+	const STORAGE_KEY = 'clopen-invite-urls';
+	let inviteURLs = $state<Record<string, string>>({});
+
+	function loadStoredURLs() {
+		try {
+			const stored = sessionStorage.getItem(STORAGE_KEY);
+			if (stored) inviteURLs = JSON.parse(stored);
+		} catch { /* ignore */ }
+	}
+
+	function saveURLsToStorage() {
+		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(inviteURLs));
+	}
+
+	// Per-invite copy feedback
+	let copiedId = $state<string | null>(null);
+	let copiedTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Revoke state
+	let showRevokeConfirm = $state(false);
+	let inviteToRevoke = $state<Invite | null>(null);
+
+	// Countdown ticker
+	let tick = $state(0);
+	let tickInterval: ReturnType<typeof setInterval> | null = null;
+
+	// Filter: only show unused and not-expired invites
+	const activeInvites = $derived.by(() => {
+		void tick;
+		const now = Date.now();
+		return invites.filter(inv => {
+			const usedUp = inv.max_uses > 0 && inv.use_count >= inv.max_uses;
+			const expired = inv.expires_at !== null && new Date(inv.expires_at).getTime() < now;
+			return !usedUp && !expired;
+		});
+	});
+
+	function formatCountdown(expiresAt: string): string {
+		void tick;
+		const remaining = new Date(expiresAt).getTime() - Date.now();
+		if (remaining <= 0) return 'Expired';
+
+		const totalSec = Math.ceil(remaining / 1000);
+		const min = Math.floor(totalSec / 60);
+		const sec = totalSec % 60;
+		return `${min}:${String(sec).padStart(2, '0')}`;
+	}
+
+	function startTicker() {
+		if (tickInterval) return;
+		tickInterval = setInterval(() => { tick++; }, 1000);
+	}
+
+	function stopTicker() {
+		if (tickInterval) {
+			clearInterval(tickInterval);
+			tickInterval = null;
+		}
+	}
+
+	async function loadInvites() {
+		loading = true;
+		try {
+			invites = await ws.http('auth:list-invites', {});
+		} catch (error) {
+			debug.error('auth', 'Failed to load invites:', error);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function generateInvite() {
+		isCreating = true;
+		try {
+			const result = await ws.http('auth:create-invite', {
+				maxUses: 1,
+				expiresInMinutes: 15
+			});
+
+			const baseURL = window.location.origin;
+			const url = `${baseURL}/#invite/${result.inviteToken}`;
+			inviteURLs = { ...inviteURLs, [result.invite.id]: url };
+			saveURLsToStorage();
+
+			addNotification({ type: 'success', title: 'Created', message: 'Invite link created' });
+			await loadInvites();
+		} catch (error) {
+			debug.error('auth', 'Failed to create invite:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to create invite' });
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	function copyInviteURL(inviteId: string) {
+		const url = inviteURLs[inviteId];
+		if (!url) return;
+		navigator.clipboard.writeText(url);
+		copiedId = inviteId;
+		if (copiedTimer) clearTimeout(copiedTimer);
+		copiedTimer = setTimeout(() => { copiedId = null; }, 2000);
+	}
+
+	function confirmRevoke(invite: Invite) {
+		inviteToRevoke = invite;
+		showRevokeConfirm = true;
+	}
+
+	async function revokeInvite() {
+		if (!inviteToRevoke) return;
+		const revokedId = inviteToRevoke.id;
+		try {
+			await ws.http('auth:revoke-invite', { id: revokedId });
+			const { [revokedId]: _, ...rest } = inviteURLs;
+			inviteURLs = rest;
+			saveURLsToStorage();
+			invites = invites.filter(inv => inv.id !== revokedId);
+			addNotification({ type: 'success', title: 'Revoked', message: 'Invite link has been revoked' });
+		} catch (error) {
+			debug.error('auth', 'Failed to revoke invite:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to revoke invite' });
+		} finally {
+			showRevokeConfirm = false;
+			inviteToRevoke = null;
+		}
+	}
+
+	// Load on mount + start ticker + restore URLs from storage
+	$effect(() => {
+		if (authStore.isAdmin) {
+			loadStoredURLs();
+			loadInvites();
+			startTicker();
+			return () => stopTicker();
+		}
+	});
+</script>
+
+{#if authStore.isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Invite</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Generate invite links for new team members</p>
+
+	{#if loading}
+		<div class="flex items-center justify-center gap-3 py-8 text-slate-600 dark:text-slate-500 text-sm">
+			<div class="w-5 h-5 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"></div>
+			<span>Loading...</span>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-2">
+			{#each activeInvites as invite (invite.id)}
+				{@const url = inviteURLs[invite.id]}
+				<div class="flex items-center gap-2 px-3 py-2.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg">
+					<div class="flex-1 min-w-0 font-mono text-xs text-slate-600 dark:text-slate-400 truncate select-all">
+						{url ?? '—'}
+					</div>
+					{#if url}
+						<button
+							type="button"
+							onclick={() => copyInviteURL(invite.id)}
+							class="flex items-center justify-center w-7 h-7 rounded-md transition-all shrink-0
+								{copiedId === invite.id
+								? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+								: 'hover:bg-violet-100 dark:hover:bg-violet-900/30 text-slate-400 hover:text-violet-600 dark:hover:text-violet-400'}"
+							title="Copy link"
+						>
+							<Icon name={copiedId === invite.id ? 'lucide:check' : 'lucide:copy'} class="w-3.5 h-3.5" />
+						</button>
+					{/if}
+					{#if invite.expires_at}
+						<span class="text-xs font-mono text-slate-500 tabular-nums shrink-0">
+							{formatCountdown(invite.expires_at)}
+						</span>
+					{/if}
+					<button
+						type="button"
+						onclick={() => confirmRevoke(invite)}
+						class="flex items-center justify-center w-7 h-7 rounded-md hover:bg-red-100 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-all shrink-0"
+						title="Revoke invite"
+					>
+						<Icon name="lucide:x" class="w-3.5 h-3.5" />
+					</button>
+				</div>
+			{/each}
+
+			<button
+				type="button"
+				onclick={generateInvite}
+				disabled={isCreating}
+				class="inline-flex items-center gap-1.5 py-2 px-3.5 mt-1 bg-violet-500/10 dark:bg-violet-500/10 border border-violet-500/20 dark:border-violet-500/25 rounded-lg text-violet-600 dark:text-violet-400 text-xs font-semibold cursor-pointer transition-all duration-150 hover:bg-violet-500/20 hover:border-violet-600/40 self-start disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{#if isCreating}
+					<div class="w-3.5 h-3.5 border-2 border-violet-600/30 border-t-violet-600 rounded-full animate-spin"></div>
+					Generating...
+				{:else}
+					<Icon name="lucide:plus" class="w-3.5 h-3.5" />
+					Generate Invite Link
+				{/if}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<Dialog
+	bind:isOpen={showRevokeConfirm}
+	onClose={() => { showRevokeConfirm = false; inviteToRevoke = null; }}
+	title="Revoke Invite"
+	type="warning"
+	message="Revoke this invite? Anyone with this link will no longer be able to join."
+	confirmText="Revoke"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={revokeInvite}
+/>
+{/if}

package/frontend/lib/components/settings/admin/UserManagement.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
+	import ws from '$frontend/lib/utils/ws';
+	import { debug } from '$shared/utils/logger';
+
+	interface User {
+		id: string;
+		name: string;
+		color: string;
+		avatar: string;
+		role: 'admin' | 'member';
+		createdAt: string;
+	}
+
+	let users = $state<User[]>([]);
+	let loading = $state(true);
+
+	let showRemoveConfirm = $state(false);
+	let userToRemove = $state<User | null>(null);
+
+	async function loadUsers() {
+		loading = true;
+		try {
+			users = await ws.http('auth:list-users', {});
+		} catch (error) {
+			debug.error('settings', 'Failed to load users:', error);
+			addNotification({ type: 'error', title: 'Error', message: 'Failed to load users' });
+		} finally {
+			loading = false;
+		}
+	}
+
+	function confirmRemove(user: User) {
+		userToRemove = user;
+		showRemoveConfirm = true;
+	}
+
+	async function removeUser() {
+		if (!userToRemove) return;
+		try {
+			await ws.http('auth:remove-user', { userId: userToRemove.id });
+			addNotification({ type: 'success', title: 'Removed', message: `${userToRemove.name} has been removed` });
+			showRemoveConfirm = false;
+			userToRemove = null;
+			await loadUsers();
+		} catch (error) {
+			debug.error('settings', 'Failed to remove user:', error);
+			addNotification({ type: 'error', title: 'Error', message: error instanceof Error ? error.message : 'Failed to remove user' });
+		}
+	}
+
+	// Load on mount
+	$effect(() => {
+		if (authStore.isAdmin) {
+			loadUsers();
+		}
+	});
+</script>
+
+{#if authStore.isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">User Management</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Manage team members</p>
+
+	{#if loading}
+		<div class="flex items-center justify-center gap-3 py-8 text-slate-600 dark:text-slate-500 text-sm">
+			<div class="w-5 h-5 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"></div>
+			<span>Loading users...</span>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-2">
+			{#each users as user (user.id)}
+				<div class="flex items-center gap-3 p-3.5 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl">
+					<div
+						class="flex items-center justify-center w-9 h-9 rounded-lg text-sm font-bold text-white shrink-0"
+						style="background-color: {user.color || '#7c3aed'}"
+					>
+						{user.avatar || 'U'}
+					</div>
+					<div class="flex-1 min-w-0">
+						<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+							{user.name}
+							{#if user.id === authStore.currentUser?.id}
+								<span class="text-xs text-slate-500 font-normal ml-1">(you)</span>
+							{/if}
+						</div>
+						<div class="text-xs text-slate-500">
+							{user.role === 'admin' ? 'Administrator' : 'Member'} &middot; Joined {new Date(user.createdAt).toLocaleDateString()}
+						</div>
+					</div>
+					<span class="inline-flex items-center gap-1 py-1 px-2.5 rounded-full text-2xs font-semibold
+						{user.role === 'admin' ? 'bg-violet-500/15 text-violet-600 dark:text-violet-400' : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-400'}">
+						<Icon name="lucide:{user.role === 'admin' ? 'shield' : 'user'}" class="w-3 h-3" />
+						{user.role === 'admin' ? 'Admin' : 'Member'}
+					</span>
+					{#if user.role !== 'admin' && user.id !== authStore.currentUser?.id}
+						<button
+							type="button"
+							onclick={() => confirmRemove(user)}
+							class="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 text-slate-400 hover:text-red-500 dark:hover:text-red-400 transition-all"
+							title="Remove user"
+						>
+							<Icon name="lucide:user-minus" class="w-4 h-4" />
+						</button>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<!-- Remove User Confirmation -->
+<Dialog
+	bind:isOpen={showRemoveConfirm}
+	onClose={() => { showRemoveConfirm = false; userToRemove = null; }}
+	title="Remove User"
+	type="warning"
+	message={`Remove "${userToRemove?.name || ''}" from the team? Their sessions will be terminated immediately.`}
+	confirmText="Remove"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={removeUser}
+/>
+{/if}

package/frontend/lib/components/settings/general/AdvancedSettings.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-	import { settings, updateSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
 	import Icon from '../../common/Icon.svelte';
 	import Dialog from '../../common/Dialog.svelte';
 	import { detectPlatform } from '$frontend/lib/utils/platform';
 
+	const isAdmin = $derived(authStore.isAdmin);
+	const settings = $derived(systemSettings);
+
 	let showAddPathDialog = $state(false);
 	let newPathValue = $state('');
 
@@ -29,7 +33,7 @@
 	function addPath() {
 		const path = newPathValue.trim();
 		if (path && !settings.allowedBasePaths.includes(path)) {
-			updateSettings({ allowedBasePaths: [...settings.allowedBasePaths, path] });
+			updateSystemSettings({ allowedBasePaths: [...settings.allowedBasePaths, path] });
 		}
 		newPathValue = '';
 		showAddPathDialog = false;
@@ -38,7 +42,7 @@
 	function removePath(index: number) {
 		const newPaths = [...settings.allowedBasePaths];
 		newPaths.splice(index, 1);
-		updateSettings({ allowedBasePaths: newPaths });
+		updateSystemSettings({ allowedBasePaths: newPaths });
 		if (editingIndex === index) {
 			editingIndex = null;
 			editingValue = '';
@@ -56,7 +60,7 @@
 		if (path) {
 			const newPaths = [...settings.allowedBasePaths];
 			newPaths[editingIndex] = path;
-			updateSettings({ allowedBasePaths: newPaths });
+			updateSystemSettings({ allowedBasePaths: newPaths });
 		}
 		editingIndex = null;
 		editingValue = '';
@@ -73,6 +77,7 @@
 	}
 </script>
 
+{#if isAdmin}
 <div class="py-1">
 	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Advanced</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Security and access control settings</p>
@@ -170,6 +175,7 @@
 		</div>
 	</div>
 </div>
+{/if}
 
 <Dialog
 	bind:isOpen={showAddPathDialog}

package/frontend/lib/components/settings/general/AuthModeSettings.svelte

@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { systemSettings, updateSystemSettings } from '$frontend/lib/stores/features/settings.svelte';
+	import { authStore } from '$frontend/lib/stores/features/auth.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import Dialog from '../../common/Dialog.svelte';
+	import type { AuthMode } from '$shared/types/stores/settings';
+	import { debug } from '$shared/utils/logger';
+
+	const isAdmin = $derived(authStore.isAdmin);
+	const currentMode = $derived(systemSettings.authMode);
+
+	// Simple confirmation dialog (required → none)
+	let showSimpleConfirm = $state(false);
+	let pendingMode = $state<AuthMode>('required');
+
+	// PAT dialog (none → required)
+	let showPatDialog = $state(false);
+	let generatedPat = $state('');
+	let patCopied = $state(false);
+	let isPreparingSwitch = $state(false);
+
+	async function requestModeChange(mode: AuthMode) {
+		if (mode === currentMode) return;
+		pendingMode = mode;
+
+		if (currentMode === 'none' && mode === 'required') {
+			// Switching to with-auth: regenerate PAT first, then show dialog
+			isPreparingSwitch = true;
+			try {
+				const pat = await authStore.regeneratePAT();
+				generatedPat = pat;
+				showPatDialog = true;
+			} catch (error) {
+				debug.error('settings', 'Failed to regenerate PAT for auth mode switch:', error);
+				addNotification({ type: 'error', title: 'Error', message: 'Failed to prepare authentication switch' });
+			} finally {
+				isPreparingSwitch = false;
+			}
+		} else {
+			showSimpleConfirm = true;
+		}
+	}
+
+	function confirmSimpleChange() {
+		showSimpleConfirm = false;
+		updateSystemSettings({ authMode: pendingMode });
+	}
+
+	async function confirmWithAuthSwitch() {
+		showPatDialog = false;
+
+		// Save auth mode
+		await updateSystemSettings({ authMode: 'required' });
+
+		// Logout all sessions (including current) — forces everyone to re-login
+		await authStore.logoutAll();
+
+		generatedPat = '';
+		patCopied = false;
+	}
+
+	function cancelPatDialog() {
+		showPatDialog = false;
+		generatedPat = '';
+		patCopied = false;
+	}
+
+	async function copyPat() {
+		if (generatedPat) {
+			await navigator.clipboard.writeText(generatedPat);
+			patCopied = true;
+			setTimeout(() => { patCopied = false; }, 2000);
+		}
+	}
+</script>
+
+{#if isAdmin}
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Authentication</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">Configure how users access Clopen</p>
+
+	<div class="flex flex-col gap-3.5">
+		<!-- No Login -->
+		<button
+			type="button"
+			disabled={isPreparingSwitch}
+			class="w-full text-left p-4 bg-slate-100/80 dark:bg-slate-800/80 border rounded-xl transition-all
+				{currentMode === 'none'
+					? 'border-violet-500/50 ring-1 ring-violet-500/20'
+					: 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'}
+				disabled:opacity-50 disabled:cursor-not-allowed"
+			onclick={() => requestModeChange('none')}
+		>
+			<div class="flex items-center gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0
+					{currentMode === 'none'
+						? 'bg-violet-500/15 text-violet-600 dark:text-violet-400'
+						: 'bg-slate-200/80 dark:bg-slate-700 text-slate-400'}">
+					<Icon name="lucide:lock-open" class="w-5 h-5" />
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">No Login</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						No authentication required. Anyone with access to this URL can use Clopen.
+					</div>
+				</div>
+				{#if currentMode === 'none'}
+					<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
+						<span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
+						Active
+					</div>
+				{/if}
+			</div>
+		</button>
+
+		<!-- With Login -->
+		<button
+			type="button"
+			disabled={isPreparingSwitch}
+			class="w-full text-left p-4 bg-slate-100/80 dark:bg-slate-800/80 border rounded-xl transition-all
+				{currentMode === 'required'
+					? 'border-violet-500/50 ring-1 ring-violet-500/20'
+					: 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'}
+				disabled:opacity-50 disabled:cursor-not-allowed"
+			onclick={() => requestModeChange('required')}
+		>
+			<div class="flex items-center gap-3.5">
+				<div class="flex items-center justify-center w-10 h-10 rounded-lg shrink-0
+					{currentMode === 'required'
+						? 'bg-violet-500/15 text-violet-600 dark:text-violet-400'
+						: 'bg-slate-200/80 dark:bg-slate-700 text-slate-400'}">
+					<Icon name="lucide:lock" class="w-5 h-5" />
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-sm font-semibold text-slate-900 dark:text-slate-100">With Login</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">
+						Authenticate with a Personal Access Token. Supports multiple users and invite links.
+					</div>
+				</div>
+				{#if currentMode === 'required'}
+					<div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 shrink-0">
+						<span class="w-1.5 h-1.5 rounded-full bg-violet-500"></span>
+						Active
+					</div>
+				{/if}
+			</div>
+		</button>
+	</div>
+
+	{#if isPreparingSwitch}
+		<div class="flex items-center gap-2 mt-4 text-sm text-slate-500">
+			<div class="w-4 h-4 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"></div>
+			<span>Preparing authentication switch...</span>
+		</div>
+	{/if}
+</div>
+{/if}
+
+<!-- Simple confirm dialog (required → none) -->
+<Dialog
+	bind:isOpen={showSimpleConfirm}
+	onClose={() => { showSimpleConfirm = false; }}
+	type="info"
+	title="Change Authentication Mode"
+	message="Switching to No Login mode will disable login requirements. Existing users and sessions will be preserved but bypassed."
+	confirmText="Confirm"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={confirmSimpleChange}
+/>
+
+<!-- PAT dialog (none → required) -->
+<Dialog
+	bind:isOpen={showPatDialog}
+	onClose={cancelPatDialog}
+	type="warning"
+	title="Change Authentication Mode"
+	closable={false}
+	confirmText="Confirm"
+	cancelText="Cancel"
+	showCancel={true}
+	onConfirm={confirmWithAuthSwitch}
+>
+	{#snippet children()}
+		<div class="flex items-start space-x-4">
+			<div class="bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-700/50 rounded-xl p-3 border">
+				<Icon name="lucide:triangle-alert" class="w-6 h-6 text-amber-600 dark:text-amber-400" />
+			</div>
+
+			<div class="flex-1 space-y-3">
+				<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
+					Change Authentication Mode
+				</h3>
+				<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
+					Switching to With Login mode will require authentication. All sessions will be logged out and you will need this token to log in again.
+				</p>
+
+				<!-- PAT Display -->
+				<div class="p-3.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800">
+					<div class="flex items-center gap-2 text-sm font-semibold text-amber-800 dark:text-amber-200 mb-2">
+						<Icon name="lucide:key-round" class="w-4 h-4" />
+						<span>Your Personal Access Token</span>
+					</div>
+					<div class="flex items-center gap-2">
+						<code class="flex-1 px-3 py-2 rounded-md bg-white dark:bg-slate-900 border border-amber-300 dark:border-amber-700 text-xs font-mono text-slate-900 dark:text-slate-100 select-all break-all">
+							{generatedPat}
+						</code>
+						<button
+							type="button"
+							onclick={copyPat}
+							class="shrink-0 flex items-center justify-center w-9 h-9 rounded-lg transition-all
+								{patCopied
+									? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
+									: 'bg-amber-100 dark:bg-amber-900 hover:bg-amber-200 dark:hover:bg-amber-800 text-amber-800 dark:text-amber-200'}"
+							title="Copy token"
+						>
+							<Icon name={patCopied ? 'lucide:check' : 'lucide:copy'} class="w-4 h-4" />
+						</button>
+					</div>
+					<div class="flex items-center gap-1.5 mt-2 text-xs text-amber-600 dark:text-amber-400">
+						<Icon name="lucide:triangle-alert" class="w-3.5 h-3.5 shrink-0" />
+						<span>Copy this token now. It won't be shown again.</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	{/snippet}
+</Dialog>

package/frontend/lib/components/settings/general/GeneralSettings.svelte

@@ -2,9 +2,14 @@
 	import DataManagementSettings from './DataManagementSettings.svelte';
 	import AdvancedSettings from './AdvancedSettings.svelte';
 	import UpdateSettings from './UpdateSettings.svelte';
+	import AuthModeSettings from './AuthModeSettings.svelte';
 </script>
 
-<UpdateSettings />
+<AuthModeSettings />
+
+<div class="mt-6">
+	<UpdateSettings />
+</div>
 
 <div class="mt-6">
 	<DataManagementSettings />