feat(cloud-console): add user authentication and administration

cloud-console/src/App.vue

@@ -7,110 +7,145 @@ import {
   LogOut,
   MonitorSmartphone,
   Puzzle,
+  Users,
 } from "@lucide/vue";
 import {
-  TOKEN_INVALID_EVENT,
+  AUTH_INVALID_EVENT,
   clearStoredToken,
-  getStoredToken,
+  getCurrentUser,
+  hasTokenMode,
+  logout,
 } from "./api";
-import TokenScreen from "./views/TokenScreen.vue";
+import type { CloudUser } from "./types";
+import LoginScreen from "./views/LoginScreen.vue";
+import PasswordChangeScreen from "./views/PasswordChangeScreen.vue";
 import TasksView from "./views/TasksView.vue";
 import DevicesView from "./views/DevicesView.vue";
 import PluginsView from "./views/PluginsView.vue";
+import UsersView from "./views/UsersView.vue";
 
-type ViewId = "tasks" | "devices" | "plugins";
-
-const navItems: { id: ViewId; label: string; icon: Component }[] = [
-  { id: "tasks", label: "Tasks", icon: ListChecks },
-  { id: "devices", label: "Devices", icon: MonitorSmartphone },
-  { id: "plugins", label: "Plugins", icon: Puzzle },
-];
+type ViewId = "tasks" | "devices" | "plugins" | "users";
 
 const activeView = ref<ViewId>("tasks");
-const tokenRejectedMessage = ref("");
-const hasToken = ref(false);
+const currentUser = ref<CloudUser | null>(null);
+const tokenMode = ref(false);
+const loading = ref(true);
+const authMessage = ref("");
 
-function refreshTokenState() {
-  hasToken.value = getStoredToken() !== null;
-}
+const isAdmin = computed(
+  () => currentUser.value?.scopes.includes("*") || currentUser.value?.scopes.includes("users:admin"),
+);
+const canAdminPlugins = computed(
+  () =>
+    tokenMode.value ||
+    currentUser.value?.scopes.includes("*") ||
+    currentUser.value?.scopes.includes("plugins:admin"),
+);
+const isAuthenticated = computed(() => currentUser.value !== null || tokenMode.value);
+const mustChangePassword = computed(() => currentUser.value?.must_change_password ?? false);
+const navItems = computed<{ id: ViewId; label: string; icon: Component }[]>(() => {
+  const items: { id: ViewId; label: string; icon: Component }[] = [
+    { id: "tasks", label: "Tasks", icon: ListChecks },
+    { id: "devices", label: "Devices", icon: MonitorSmartphone },
+    { id: "plugins", label: "Plugins", icon: Puzzle },
+  ];
+  if (isAdmin.value) items.push({ id: "users", label: "Users", icon: Users });
+  return items;
+});
 
-function onTokenInvalid() {
-  hasToken.value = false;
-  tokenRejectedMessage.value =
-    "the cloud api rejected the stored token (401/403). paste a new token to continue.";
-}
-
-function onStorage(event: StorageEvent) {
-  if (event.key === null) {
-    // Tab-wide sessionStorage clear (some browsers fire this on logout).
-    refreshTokenState();
+async function initializeAuthentication() {
+  loading.value = true;
+  currentUser.value = null;
+  tokenMode.value = hasTokenMode();
+  if (!tokenMode.value) {
+    try {
+      currentUser.value = await getCurrentUser();
+    } catch {
+      // A missing session is the normal initial state.
+    }
   }
+  loading.value = false;
 }
 
-function signOut() {
+async function onAuthenticated() {
+  authMessage.value = "";
+  await initializeAuthentication();
+}
+
+function onAuthInvalid() {
+  currentUser.value = null;
+  tokenMode.value = false;
+  authMessage.value = "your session expired or credentials were rejected. sign in again.";
+}
+
+async function signOut() {
+  try {
+    if (currentUser.value) await logout();
+  } catch {
+    // Local state must still be cleared when the already-expired session rejects logout.
+  }
   clearStoredToken();
-  hasToken.value = false;
-  tokenRejectedMessage.value = "";
+  currentUser.value = null;
+  tokenMode.value = false;
+  authMessage.value = "";
+}
+
+function onPasswordChanged() {
+  currentUser.value = null;
+  tokenMode.value = false;
+  authMessage.value = "password changed. sign in with the new password.";
 }
 
 onMounted(() => {
-  refreshTokenState();
-  window.addEventListener(TOKEN_INVALID_EVENT, onTokenInvalid as EventListener);
-  window.addEventListener("storage", onStorage as EventListener);
+  void initializeAuthentication();
+  window.addEventListener(AUTH_INVALID_EVENT, onAuthInvalid as EventListener);
 });
 
 onUnmounted(() => {
-  window.removeEventListener(TOKEN_INVALID_EVENT, onTokenInvalid as EventListener);
-  window.removeEventListener("storage", onStorage as EventListener);
+  window.removeEventListener(AUTH_INVALID_EVENT, onAuthInvalid as EventListener);
 });
 
 const activeComponent = computed(() => {
   switch (activeView.value) {
-    case "tasks":
-      return TasksView;
     case "devices":
       return DevicesView;
     case "plugins":
       return PluginsView;
+    case "users":
+      return UsersView;
+    default:
+      return TasksView;
   }
-  return TasksView;
 });
-
-function onTokenSubmitted() {
-  tokenRejectedMessage.value = "";
-  refreshTokenState();
-}
 </script>
 
 <template>
-  <TokenScreen
-    v-if="!hasToken"
-    :rejection-message="tokenRejectedMessage"
-    @submitted="onTokenSubmitted"
+  <div v-if="loading" class="token-screen"><p>Checking session…</p></div>
+  <LoginScreen v-else-if="!isAuthenticated" :message="authMessage" @authenticated="onAuthenticated" />
+  <PasswordChangeScreen
+    v-else-if="mustChangePassword"
+    @changed="onPasswordChanged"
+    @sign-out="signOut"
   />
   <div v-else class="app-shell">
     <nav class="app-nav">
-      <h1>
-        <Boxes :size="14" />
-        Cloud Console
-      </h1>
+      <h1><Boxes :size="14" /> Cloud Console</h1>
       <button
         v-for="item in navItems"
         :key="item.id"
         :class="{ active: activeView === item.id }"
         @click="activeView = item.id"
       >
-        <component :is="item.icon" :size="14" />
-        {{ item.label }}
+        <component :is="item.icon" :size="14" /> {{ item.label }}
       </button>
       <div class="spacer" />
-      <button @click="signOut">
-        <LogOut :size="14" />
-        Clear token
-      </button>
+      <div class="dim">{{ currentUser ? `${currentUser.display_name} (${currentUser.role})` : "API token" }}</div>
+      <button @click="signOut"><LogOut :size="14" /> Sign out</button>
     </nav>
     <main class="app-main">
-      <component :is="activeComponent" />
+      <PluginsView v-if="activeView === 'plugins'" :can-admin="canAdminPlugins" />
+      <UsersView v-else-if="activeView === 'users' && isAdmin" />
+      <component v-else :is="activeComponent" />
     </main>
   </div>
 </template>