feat: ✨ add SSO authentication support, configurable brand accent colors, and update UI theme

2026-07-06 18:20:01 +01:00
parent 1346e9e5f5
commit d476901a53
16 changed files with 382 additions and 33 deletions
@@ -74,7 +74,7 @@ async function regenCodes() {
          </ul>
        </div>
        <div v-if="newBackupCodes.length">
-          <p class="text-sm font-medium text-accent">New backup codes — save these now:</p>
+          <p class="text-sm font-medium text-accent">New backup codes - save these now:</p>
          <ul class="mt-2 rounded-lg bg-surface-overlay p-3 font-mono text-sm">
            <li v-for="c in newBackupCodes" :key="c">{{ c }}</li>
          </ul>
@@ -87,7 +87,7 @@ async function regenCodes() {
            class="text-sm text-red-500 hover:underline"
            @click="disable2fa"
          >Disable 2FA</button>
-          <p v-else class="text-sm text-slate-500">Your role requires 2FA — it cannot be disabled.</p>
+          <p v-else class="text-sm text-slate-500">Your role requires 2FA - it cannot be disabled.</p>
        </div>
      </template>
      <template v-else>
@@ -36,7 +36,7 @@ const activity = ref<ActivityPoint[]>([]);

 const donutStyle = computed(() => {
  const pct = stats.value?.utilization_percent ?? 0;
-  return { background: `conic-gradient(rgb(6 182 212) ${pct}%, rgb(var(--surface-overlay)) ${pct}%)` };
+  return { background: `conic-gradient(rgb(var(--accent)) ${pct}%, rgb(var(--surface-overlay)) ${pct}%)` };
 });

 const maxActivity = computed(() => Math.max(1, ...activity.value.map((a) => a.count)));
@@ -128,7 +128,7 @@ function formatHour(h: number) {
        </div>

        <div class="card">
-          <h2 class="font-semibold">Activity — last 24 hours</h2>
+          <h2 class="font-semibold">Activity - last 24 hours</h2>
          <p class="mt-1 text-xs text-slate-500">Audit log entries by hour</p>
          <div class="mt-4 flex h-40 items-end gap-0.5">
            <div
@@ -1,16 +1,40 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
+import { api } from "@/api";

 const email = ref("");
 const password = ref("");
 const err = ref("");
 const busy = ref(false);
+const ssoEnabled = ref(false);
+const ssoLoading = ref(false);
 const auth = useAuthStore();
 const router = useRouter();
 const route = useRoute();

+onMounted(async () => {
+  try {
+    const caps = await api.capabilities();
+    ssoEnabled.value = caps.sso_enabled;
+  } catch (e) {
+    // ignore
+  }
+});
+
+async function startSsoLogin() {
+  err.value = "";
+  ssoLoading.value = true;
+  try {
+    const { url } = await api.startSsoLogin();
+    window.location.href = url;
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "SSO initiation failed";
+    ssoLoading.value = false;
+  }
+}
+
 async function submit() {
  err.value = "";
  busy.value = true;
@@ -48,7 +72,12 @@ async function submit() {
          <input v-model="password" type="password" class="input-field" required autocomplete="current-password" />
        </div>
        <p v-if="err" class="text-sm text-red-500">{{ err }}</p>
-        <button type="submit" class="btn-primary w-full" :disabled="busy">{{ busy ? "Signing in…" : "Sign in" }}</button>
+        <button type="submit" class="btn-primary w-full" :disabled="busy || ssoLoading">{{ busy ? "Signing in…" : "Sign in" }}</button>
+        <div v-if="ssoEnabled" class="pt-4 border-t border-slate-200 dark:border-slate-800">
+          <button type="button" class="btn-secondary w-full" :disabled="ssoLoading || busy" @click="startSsoLogin">
+            {{ ssoLoading ? 'Redirecting…' : 'Sign in with Single Sign-On' }}
+          </button>
+        </div>
      </form>
    </div>
  </div>
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "@/stores/auth";
+import { api } from "@/api";
+
+const route = useRoute();
+const router = useRouter();
+const auth = useAuthStore();
+const err = ref("");
+
+onMounted(async () => {
+  const code = route.query.code as string;
+  const state = route.query.state as string;
+
+  if (!code || !state) {
+    err.value = "Missing callback parameters.";
+    return;
+  }
+
+  try {
+    const res = await api.ssoCallback(code, state);
+    if (res.requires_setup) {
+      router.push("/setup-2fa");
+      return;
+    }
+    if (res.requires_2fa) {
+      router.push("/verify-2fa");
+      return;
+    }
+    await auth.fetchMe();
+    router.push("/");
+  } catch (e) {
+    err.value = e instanceof Error ? e.message : "SSO Login failed";
+  }
+});
+</script>
+
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-surface p-6">
+    <div class="card w-full max-w-md p-8 text-center">
+      <h1 class="text-2xl font-semibold">Single Sign-On</h1>
+      <p v-if="err" class="mt-4 text-red-500">{{ err }}</p>
+      <p v-else class="mt-4 text-slate-500">Completing sign-in…</p>
+      <div v-if="err" class="mt-6">
+        <RouterLink to="/login" class="btn-primary inline-block w-full text-center">Back to login</RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
@@ -4,14 +4,14 @@ import { api } from "@/api";
 import { useAuthStore } from "@/stores/auth";

 const auth = useAuthStore();
-const form = ref({ org_name: "", org_logo: "" });
+const form = ref({ org_name: "", org_logo: "", accent_color: "" });
 const msg = ref("");
 const err = ref("");
 const busy = ref(false);

 async function load() {
  const data = await api.settings();
-  form.value = { org_name: data.org_name, org_logo: data.org_logo };
+  form.value = { org_name: data.org_name, org_logo: data.org_logo, accent_color: data.accent_color || "" };
 }

 onMounted(load);
@@ -22,7 +22,7 @@ async function save() {
  busy.value = true;
  try {
    const data = await api.updateSettings(form.value);
-    form.value = { org_name: data.org_name, org_logo: data.org_logo };
+    form.value = { org_name: data.org_name, org_logo: data.org_logo, accent_color: data.accent_color || "" };
    if (data.org) auth.org = data.org;
    else await auth.fetchMe();
    msg.value = "Settings saved";
@@ -57,6 +57,15 @@ async function save() {
        <img :src="form.org_logo" alt="" class="h-10 rounded" @error="($event.target as HTMLImageElement).style.display = 'none'" />
      </div>

+      <div>
+        <label class="mb-1 block text-xs font-medium uppercase tracking-wide text-slate-500">Accent Color</label>
+        <div class="flex items-center gap-3">
+          <input type="color" v-model="form.accent_color" class="h-10 w-16 cursor-pointer rounded border border-slate-200 bg-transparent p-0.5 dark:border-slate-700" />
+          <input v-model="form.accent_color" class="input-field font-mono text-sm w-32" placeholder="#1ebe8a" />
+        </div>
+        <p class="mt-1 text-xs text-slate-500">Hex format e.g. "#1ebe8a". Leave blank to use default.</p>
+      </div>
+
      <div v-if="auth.can('manage_settings')" class="flex flex-wrap items-center gap-3">
        <button type="submit" class="btn-primary" :disabled="busy">{{ busy ? "Saving…" : "Save" }}</button>
        <p v-if="msg" class="text-sm text-accent">{{ msg }}</p>
@@ -230,7 +230,7 @@ async function delRole(id: number) {
    <div v-if="showApiKey" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" @click.self="showApiKey = ''">
      <div class="card w-full max-w-md space-y-3">
        <h2 class="text-lg font-semibold">New API key</h2>
-        <p class="text-sm text-slate-500">Copy this key now — it won't be shown again.</p>
+        <p class="text-sm text-slate-500">Copy this key now - it won't be shown again.</p>
        <code class="block break-all rounded-lg bg-surface-overlay p-3 text-sm">{{ showApiKey }}</code>
        <button class="btn-primary" @click="showApiKey = ''">Done</button>
      </div>