agentic-mobile-control/cloud-console/src/App.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import type { Component } from "vue";
import {
  Boxes,
  ListChecks,
  LogOut,
  MonitorSmartphone,
  Puzzle,
  Users,
} from "@lucide/vue";
import {
  AUTH_INVALID_EVENT,
  clearStoredToken,
  getCurrentUser,
  hasTokenMode,
  logout,
} from "./api";
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" | "users";

const activeView = ref<ViewId>("tasks");
const currentUser = ref<CloudUser | null>(null);
const tokenMode = ref(false);
const loading = ref(true);
const authMessage = ref("");

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;
});

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;
}

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();
  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(() => {
  void initializeAuthentication();
  window.addEventListener(AUTH_INVALID_EVENT, onAuthInvalid as EventListener);
});

onUnmounted(() => {
  window.removeEventListener(AUTH_INVALID_EVENT, onAuthInvalid as EventListener);
});

const activeComponent = computed(() => {
  switch (activeView.value) {
    case "devices":
      return DevicesView;
    case "plugins":
      return PluginsView;
    case "users":
      return UsersView;
    default:
      return TasksView;
  }
});
</script>

<template>
  <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>
      <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 }}
      </button>
      <div class="spacer" />
      <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">
      <PluginsView v-if="activeView === 'plugins'" :can-admin="canAdminPlugins" />
      <UsersView v-else-if="activeView === 'users' && isAdmin" />
      <component v-else :is="activeComponent" />
    </main>
  </div>
</template>