1a6d61ec36
- 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>
302 lines
10 KiB
Vue
302 lines
10 KiB
Vue
<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">✓</span>
|
|
End-to-end encrypted — the server never sees your data
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<span class="text-green-500">✓</span>
|
|
Multi-browser support (Chrome, Firefox, Edge, Safari)
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<span class="text-green-500">✓</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">✓</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>
|