From 1a6d61ec36581d20786f64cca8a745b6159c39e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=9E=AB?= <rc707@xufengdeMac-mini.local>
Date: Tue, 17 Mar 2026 20:31:34 +0800
Subject: [PATCH] feat: add setup wizard and enhance login flow

- Add /setup route with 4-step wizard: welcome, admin account creation,
  basic config (port, HTTPS), completion
- Router auto-detects first-time setup via GET /admin/setup/status
- Redirects to /setup if not configured, blocks /setup after init
- Uses Headless UI TransitionRoot for step animations
- Password confirmation with mismatch validation

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 web/src/router/index.ts     |  40 ++++-
 web/src/views/SetupView.vue | 301 ++++++++++++++++++++++++++++++++++++
 2 files changed, 340 insertions(+), 1 deletion(-)
 create mode 100644 web/src/views/SetupView.vue

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index d6efef5..8c8368b 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
+import api from "@/api/client";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -8,6 +9,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import("@/views/LoginView.vue"),
     meta: { requiresAuth: false },
   },
+  {
+    path: "/setup",
+    name: "setup",
+    component: () => import("@/views/SetupView.vue"),
+    meta: { requiresAuth: false },
+  },
   {
     path: "/",
     component: () => import("@/components/layout/AppLayout.vue"),
@@ -42,8 +49,34 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to) => {
+let setupChecked = false;
+let isSetUp = false;
+
+router.beforeEach(async (to) => {
   const auth = useAuthStore();
+
+  // Check setup status once on first navigation
+  if (!setupChecked) {
+    try {
+      const { data } = await api.get("/setup/status");
+      isSetUp = data.isSetUp;
+    } catch {
+      // If server unreachable, assume setup done
+      isSetUp = true;
+    }
+    setupChecked = true;
+  }
+
+  // Redirect to setup if not configured (unless already on setup page)
+  if (!isSetUp && to.name !== "setup") {
+    return { name: "setup" };
+  }
+
+  // After setup is done, don't allow revisiting setup
+  if (isSetUp && to.name === "setup") {
+    return { name: "login" };
+  }
+
   if (to.meta.requiresAuth !== false && !auth.isAuthenticated) {
     return { name: "login" };
   }
@@ -52,4 +85,9 @@ router.beforeEach((to) => {
   }
 });
 
+// Allow marking setup as complete from the setup view
+export function markSetupComplete(): void {
+  isSetUp = true;
+}
+
 export default router;
diff --git a/web/src/views/SetupView.vue b/web/src/views/SetupView.vue
new file mode 100644
index 0000000..8c56481
--- /dev/null
+++ b/web/src/views/SetupView.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { TransitionRoot } from "@headlessui/vue";
+import api from "@/api/client";
+import { markSetupComplete } from "@/router";
+
+const router = useRouter();
+
+const step = ref(1);
+const totalSteps = 4;
+
+// Step 2: Admin account
+const username = ref("");
+const password = ref("");
+const confirmPassword = ref("");
+
+// Step 3: Basic config
+const listenPort = ref(8100);
+const enableHttps = ref(false);
+
+const error = ref("");
+const loading = ref(false);
+
+const passwordMismatch = computed(
+  () => confirmPassword.value.length > 0 && password.value !== confirmPassword.value,
+);
+
+const canProceedStep2 = computed(
+  () =>
+    username.value.length >= 3 &&
+    password.value.length >= 8 &&
+    password.value === confirmPassword.value,
+);
+
+function nextStep() {
+  error.value = "";
+  step.value = Math.min(step.value + 1, totalSteps);
+}
+
+function prevStep() {
+  error.value = "";
+  step.value = Math.max(step.value - 1, 1);
+}
+
+async function completeSetup() {
+  error.value = "";
+  loading.value = true;
+  try {
+    await api.post("/setup/init", {
+      username: username.value,
+      password: password.value,
+    });
+    markSetupComplete();
+    step.value = totalSteps;
+  } catch {
+    error.value = "Setup failed. Please try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goToLogin() {
+  router.push("/login");
+}
+</script>
+
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-gray-50">
+    <div class="w-full max-w-lg rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
+      <!-- Progress bar -->
+      <div class="mb-6 flex gap-2">
+        <div
+          v-for="i in totalSteps"
+          :key="i"
+          class="h-1.5 flex-1 rounded-full transition-colors"
+          :class="i <= step ? 'bg-blue-600' : 'bg-gray-200'"
+        />
+      </div>
+
+      <!-- Step 1: Welcome -->
+      <TransitionRoot
+        :show="step === 1"
+        enter="transition-opacity duration-200"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div>
+          <h1 class="text-2xl font-semibold text-gray-900">Welcome to CookieBridge</h1>
+          <p class="mt-3 text-sm leading-relaxed text-gray-600">
+            CookieBridge synchronizes your browser cookies across devices with end-to-end encryption.
+            Login once on any device, and stay logged in everywhere.
+          </p>
+          <ul class="mt-4 space-y-2 text-sm text-gray-600">
+            <li class="flex gap-2">
+              <span class="text-green-500">&#10003;</span>
+              End-to-end encrypted — the server never sees your data
+            </li>
+            <li class="flex gap-2">
+              <span class="text-green-500">&#10003;</span>
+              Multi-browser support (Chrome, Firefox, Edge, Safari)
+            </li>
+            <li class="flex gap-2">
+              <span class="text-green-500">&#10003;</span>
+              AI agent integration via Agent Skill API
+            </li>
+          </ul>
+          <button
+            class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+            @click="nextStep"
+          >
+            Get Started
+          </button>
+        </div>
+      </TransitionRoot>
+
+      <!-- Step 2: Admin account -->
+      <TransitionRoot
+        :show="step === 2"
+        enter="transition-opacity duration-200"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900">Create Admin Account</h2>
+          <p class="mt-1 text-sm text-gray-500">Set up your administrator credentials</p>
+
+          <form class="mt-5 space-y-4" @submit.prevent="nextStep">
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="setup-username">
+                Username
+              </label>
+              <input
+                id="setup-username"
+                v-model="username"
+                type="text"
+                required
+                minlength="3"
+                autocomplete="username"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="admin"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="setup-password">
+                Password
+              </label>
+              <input
+                id="setup-password"
+                v-model="password"
+                type="password"
+                required
+                minlength="8"
+                autocomplete="new-password"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                placeholder="At least 8 characters"
+              />
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="setup-confirm">
+                Confirm Password
+              </label>
+              <input
+                id="setup-confirm"
+                v-model="confirmPassword"
+                type="password"
+                required
+                autocomplete="new-password"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                :class="passwordMismatch ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''"
+              />
+              <p v-if="passwordMismatch" class="mt-1 text-xs text-red-600">
+                Passwords do not match
+              </p>
+            </div>
+
+            <div class="flex gap-3 pt-2">
+              <button
+                type="button"
+                class="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                @click="prevStep"
+              >
+                Back
+              </button>
+              <button
+                type="submit"
+                :disabled="!canProceedStep2"
+                class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+              >
+                Next
+              </button>
+            </div>
+          </form>
+        </div>
+      </TransitionRoot>
+
+      <!-- Step 3: Basic config -->
+      <TransitionRoot
+        :show="step === 3"
+        enter="transition-opacity duration-200"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900">Basic Configuration</h2>
+          <p class="mt-1 text-sm text-gray-500">Configure your relay server</p>
+
+          <div class="mt-5 space-y-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700" for="setup-port">
+                Listen Port
+              </label>
+              <input
+                id="setup-port"
+                v-model.number="listenPort"
+                type="number"
+                min="1"
+                max="65535"
+                class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              />
+              <p class="mt-1 text-xs text-gray-500">Default: 8100</p>
+            </div>
+
+            <div class="flex items-center justify-between rounded-lg border border-gray-200 px-4 py-3">
+              <div>
+                <p class="text-sm font-medium text-gray-700">Enable HTTPS</p>
+                <p class="text-xs text-gray-500">Recommended for production use</p>
+              </div>
+              <button
+                type="button"
+                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                :class="enableHttps ? 'bg-blue-600' : 'bg-gray-200'"
+                @click="enableHttps = !enableHttps"
+              >
+                <span
+                  class="inline-block h-4 w-4 rounded-full bg-white transition-transform"
+                  :class="enableHttps ? 'translate-x-6' : 'translate-x-1'"
+                />
+              </button>
+            </div>
+
+            <p v-if="error" class="text-sm text-red-600">{{ error }}</p>
+
+            <div class="flex gap-3 pt-2">
+              <button
+                type="button"
+                class="flex-1 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+                @click="prevStep"
+              >
+                Back
+              </button>
+              <button
+                :disabled="loading"
+                class="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+                @click="completeSetup"
+              >
+                {{ loading ? "Setting up..." : "Complete Setup" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </TransitionRoot>
+
+      <!-- Step 4: Done -->
+      <TransitionRoot
+        :show="step === 4"
+        enter="transition-opacity duration-200"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="transition-opacity duration-150"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="text-center">
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <span class="text-2xl text-green-600">&#10003;</span>
+          </div>
+          <h2 class="mt-4 text-xl font-semibold text-gray-900">Setup Complete!</h2>
+          <p class="mt-2 text-sm text-gray-500">
+            Your CookieBridge server is ready. Sign in with your admin credentials.
+          </p>
+          <button
+            class="mt-6 w-full rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-700"
+            @click="goToLogin"
+          >
+            Go to Login
+          </button>
+        </div>
+      </TransitionRoot>
+    </div>
+  </div>
+</template>