bstein-dev-home/frontend/src/views/OnboardingView.vue

<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas</p>
        <h1>Onboarding</h1>
        <p class="lede">Use your request code to view status and next steps.</p>
      </div>
    </section>

    <section class="card module">
      <div class="module-head">
        <h2>Request Code</h2>
        <span class="pill mono" :class="statusPillClass(status)">
          {{ statusLabel(status) }}
        </span>
      </div>

      <div class="status-form">
        <input v-model="requestCode" class="input mono" type="text" placeholder="username~XXXXXXXXXX" :disabled="loading" />
        <button class="primary" type="button" @click="check" :disabled="loading || !requestCode.trim()">
          {{ loading ? "Checking..." : "Check" }}
        </button>
      </div>

      <div v-if="requestUsername" class="status-meta">
        <div class="meta-row">
          <span class="label mono">Username</span>
          <button class="copy mono" type="button" @click="copyUsername">
            {{ requestUsername }}
            <span v-if="usernameCopied" class="copied">copied</span>
          </button>
        </div>
      </div>

      <div v-if="status === 'pending_email_verification'" class="steps">
        <h3>Confirm your email</h3>
        <p class="muted">
          Open the verification email from Atlas and click the link to confirm your address. After verification, an admin can approve your request.
        </p>
        <p class="muted">
          If you did not receive an email, return to
          <a href="/request-access">Request Access</a>
          and submit again using a reachable external address.
        </p>
      </div>

      <div v-if="status === 'pending'" class="steps">
        <h3>Awaiting approval</h3>
        <p class="muted">An Atlas admin has to approve this request before an account can be provisioned.</p>
      </div>

      <div v-if="status === 'accounts_building'" class="steps">
        <h3>Accounts building</h3>
        <p class="muted">
          Your request is approved. Atlas is now preparing accounts and credentials. Check back in a minute.
        </p>
        <div v-if="tasks.length" class="task-box">
          <div class="module-head" style="margin-bottom: 10px;">
            <h3>Automation</h3>
            <span class="pill mono" :class="blocked ? 'pill-bad' : 'pill-ok'">
              {{ blocked ? "blocked" : "running" }}
            </span>
          </div>
          <ul class="task-list">
            <li v-for="item in tasks" :key="item.task" class="task-row">
              <span class="mono task-name">{{ item.task }}</span>
              <span class="pill mono" :class="taskPillClass(item.status)">{{ item.status }}</span>
              <span v-if="item.detail" class="mono task-detail">{{ item.detail }}</span>
            </li>
          </ul>
          <p v-if="blocked" class="muted" style="margin-top: 10px;">
            One or more automation steps failed. Fix the error above, then check again.
          </p>
        </div>
      </div>

      <div v-if="status === 'awaiting_onboarding' || status === 'ready'" class="steps">
        <div class="onboarding-head">
          <h3>Onboarding checklist</h3>
          <span class="pill mono" :class="status === 'ready' ? 'pill-info' : 'pill-ok'">
            {{ status === "ready" ? "ready" : "in progress" }}
          </span>
        </div>

        <p class="muted">
          Some steps are verified automatically from Keycloak (password). Others can't be verified yet — mark them complete once you're done.
        </p>

        <div v-if="initialPassword" class="initial-password">
          <h3>Temporary password</h3>
          <p class="muted">
            Use this password to log in for the first time. Keycloak will prompt you to change it. This password is shown
            once — copy it now.
          </p>
          <div class="request-code-row">
            <span class="label mono">Password</span>
            <button class="copy mono" type="button" @click="copyInitialPassword">
              {{ initialPassword }}
              <span v-if="copied" class="copied">copied</span>
            </button>
          </div>
          <p class="muted">
            Log in at
            <a href="https://sso.bstein.dev" target="_blank" rel="noreferrer">sso.bstein.dev</a>
            or go directly to
            <a href="https://cloud.bstein.dev" target="_blank" rel="noreferrer">cloud.bstein.dev</a>.
          </p>
        </div>

        <div v-if="!auth.authenticated" class="login-callout">
          <p class="muted">Log in to check off onboarding steps.</p>
          <button class="primary" type="button" @click="loginToContinue" :disabled="loading">Log in</button>
        </div>

        <ul class="checklist">
          <li class="check-item">
            <label>
              <input
                type="checkbox"
                :checked="isStepDone('keycloak_password_changed')"
                disabled
              />
              <span>Change your Keycloak password</span>
              <span
                class="pill mono auto-pill"
                :class="isStepDone('keycloak_password_changed') ? 'pill-ok' : 'pill-warn'"
              >
                {{ isStepDone("keycloak_password_changed") ? "verified" : "pending" }}
              </span>
            </label>
            <p class="muted">
              Keycloak marks this complete once it no longer requires you to update your password.
              Use the <a href="https://sso.bstein.dev/realms/atlas/account" target="_blank" rel="noreferrer">account console</a>.
            </p>
          </li>

          <li class="check-item">
            <label>
              <input
                type="checkbox"
                :checked="isStepDone('vaultwarden_master_password')"
                :disabled="!auth.authenticated || loading || isStepBlocked('vaultwarden_master_password')"
                @change="toggleStep('vaultwarden_master_password', $event)"
              />
              <span>Set a Vaultwarden master password</span>
              <span class="pill mono auto-pill" :class="stepPillClass('vaultwarden_master_password')">
                {{ stepPillLabel("vaultwarden_master_password") }}
              </span>
            </label>
            <p class="muted">
              Open <a href="https://vault.bstein.dev" target="_blank" rel="noreferrer">Passwords</a> and set a strong master
              password you won't forget.
            </p>
          </li>

          <li class="check-item">
            <label>
              <input
                type="checkbox"
                :checked="isStepDone('element_recovery_key')"
                :disabled="!auth.authenticated || loading || isStepBlocked('element_recovery_key')"
                @change="toggleStep('element_recovery_key', $event)"
              />
              <span>Create an Element recovery key</span>
              <span class="pill mono auto-pill" :class="stepPillClass('element_recovery_key')">
                {{ stepPillLabel("element_recovery_key") }}
              </span>
            </label>
            <p class="muted">
              In Element, create a recovery key so you can restore encrypted history if you lose a device.
            </p>
          </li>

          <li class="check-item">
            <label>
              <input
                type="checkbox"
                :checked="isStepDone('element_recovery_key_stored')"
                :disabled="!auth.authenticated || loading || isStepBlocked('element_recovery_key_stored')"
                @change="toggleStep('element_recovery_key_stored', $event)"
              />
              <span>Store the recovery key in Vaultwarden</span>
              <span class="pill mono auto-pill" :class="stepPillClass('element_recovery_key_stored')">
                {{ stepPillLabel("element_recovery_key_stored") }}
              </span>
            </label>
            <p class="muted">Save the recovery key in Vaultwarden so it doesn't get lost.</p>
          </li>
        </ul>

        <div v-if="status === 'ready'" class="ready-box">
          <h3>You're ready</h3>
          <p class="muted">
            Your Atlas account is provisioned and onboarding is complete. You can log in at
            <a href="https://cloud.bstein.dev" target="_blank" rel="noreferrer">cloud.bstein.dev</a>.
          </p>
        </div>
      </div>

      <div v-if="status === 'denied'" class="steps">
        <h3>Denied</h3>
        <p class="muted">This request was denied. Contact the Atlas admin if you think this is a mistake.</p>
      </div>

      <div v-if="error" class="error-box">
        <div class="mono">{{ error }}</div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { auth, authFetch, login } from "../auth";

const route = useRoute();

const requestCode = ref("");
const requestUsername = ref("");
const status = ref("");
const loading = ref(false);
const error = ref("");
const onboarding = ref({ required_steps: [], completed_steps: [] });
const initialPassword = ref("");
const copied = ref(false);
const usernameCopied = ref(false);
const tasks = ref([]);
const blocked = ref(false);

function statusLabel(value) {
  const key = (value || "").trim();
  if (key === "pending_email_verification") return "confirm email";
  if (key === "pending") return "awaiting approval";
  if (key === "accounts_building") return "accounts building";
  if (key === "awaiting_onboarding") return "awaiting onboarding";
  if (key === "ready") return "ready";
  if (key === "denied") return "rejected";
  return key || "unknown";
}

function statusPillClass(value) {
  const key = (value || "").trim();
  if (key === "pending_email_verification") return "pill-warn";
  if (key === "pending") return "pill-wait";
  if (key === "accounts_building") return "pill-warn";
  if (key === "awaiting_onboarding") return "pill-ok";
  if (key === "ready") return "pill-info";
  if (key === "denied") return "pill-bad";
  return "pill-warn";
}

function isStepDone(step) {
  const steps = onboarding.value?.completed_steps || [];
  return Array.isArray(steps) ? steps.includes(step) : false;
}

function isStepBlocked(step) {
  const order = [
    "keycloak_password_changed",
    "vaultwarden_master_password",
    "element_recovery_key",
    "element_recovery_key_stored",
  ];
  const idx = order.indexOf(step);
  if (idx <= 0) return false;
  for (let i = 0; i < idx; i += 1) {
    if (!isStepDone(order[i])) return true;
  }
  return false;
}

function stepPillLabel(step) {
  if (isStepDone(step)) return "done";
  if (isStepBlocked(step)) return "blocked";
  return "pending";
}

function stepPillClass(step) {
  if (isStepDone(step)) return "pill-ok";
  if (isStepBlocked(step)) return "pill-wait";
  return "pill-warn";
}

function taskPillClass(status) {
  const key = (status || "").trim();
  if (key === "ok") return "pill-ok";
  if (key === "error") return "pill-bad";
  if (key === "pending") return "pill-warn";
  return "pill-warn";
}

async function check() {
  if (loading.value) return;
  error.value = "";
  loading.value = true;
  try {
    const resp = await fetch("/api/access/request/status", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ request_code: requestCode.value.trim() }),
    });
    const data = await resp.json().catch(() => ({}));
    if (!resp.ok) throw new Error(data.error || resp.statusText || `status ${resp.status}`);
    status.value = data.status || "unknown";
    requestUsername.value = data.username || "";
    onboarding.value = data.onboarding || { required_steps: [], completed_steps: [] };
    tasks.value = Array.isArray(data.tasks) ? data.tasks : [];
    blocked.value = Boolean(data.blocked);
    if (data.initial_password) {
      initialPassword.value = data.initial_password;
    }
  } catch (err) {
    error.value = err.message || "Failed to check status";
    tasks.value = [];
    blocked.value = false;
  } finally {
    loading.value = false;
  }
}

async function copyInitialPassword() {
  if (!initialPassword.value) return;
  try {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(initialPassword.value);
    } else {
      const textarea = document.createElement("textarea");
      textarea.value = initialPassword.value;
      textarea.setAttribute("readonly", "");
      textarea.style.position = "fixed";
      textarea.style.top = "-9999px";
      textarea.style.left = "-9999px";
      document.body.appendChild(textarea);
      textarea.select();
      textarea.setSelectionRange(0, textarea.value.length);
      document.execCommand("copy");
      document.body.removeChild(textarea);
    }
    copied.value = true;
    setTimeout(() => (copied.value = false), 1500);
  } catch (err) {
    error.value = err?.message || "Failed to copy password";
  }
}

async function copyUsername() {
  if (!requestUsername.value) return;
  try {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(requestUsername.value);
    } else {
      const textarea = document.createElement("textarea");
      textarea.value = requestUsername.value;
      textarea.setAttribute("readonly", "");
      textarea.style.position = "fixed";
      textarea.style.top = "-9999px";
      textarea.style.left = "-9999px";
      document.body.appendChild(textarea);
      textarea.select();
      textarea.setSelectionRange(0, textarea.value.length);
      document.execCommand("copy");
      document.body.removeChild(textarea);
    }
    usernameCopied.value = true;
    setTimeout(() => (usernameCopied.value = false), 1500);
  } catch (err) {
    error.value = err?.message || "Failed to copy username";
  }
}

async function loginToContinue() {
  const trimmedCode = requestCode.value.trim();
  const hint = requestUsername.value.trim() || trimmedCode.split("~", 1)[0] || "";
  await login(`/onboarding?code=${encodeURIComponent(trimmedCode)}`, hint);
}

async function toggleStep(step, event) {
  const checked = Boolean(event?.target?.checked);
  if (!auth.authenticated) {
    event?.preventDefault?.();
    return;
  }
  if (step === "keycloak_password_changed") {
    event?.preventDefault?.();
    return;
  }
  error.value = "";
  loading.value = true;
  try {
    const resp = await authFetch("/api/access/request/onboarding/attest", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ request_code: requestCode.value.trim(), step, completed: checked }),
    });
    const data = await resp.json().catch(() => ({}));
    if (!resp.ok) throw new Error(data.error || resp.statusText || `status ${resp.status}`);
    status.value = data.status || status.value;
    onboarding.value = data.onboarding || onboarding.value;
  } catch (err) {
    error.value = err.message || "Failed to update onboarding";
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  const code = route.query.code || route.query.request_code || "";
  if (typeof code === "string" && code.trim()) {
    requestCode.value = code.trim();
    await check();
  }
});
</script>

<style scoped>
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 22px 72px;
}

.hero {
  margin-bottom: 12px;
  padding: 18px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 6px;
  font-size: 13px;
}

h1 {
  margin: 0 0 6px;
  font-size: 32px;
}

.lede {
  margin: 0;
  color: var(--text-muted);
  max-width: 640px;
}

.module {
  padding: 18px;
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.status-form {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.status-meta {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.meta-row .label {
  color: var(--text-muted);
}

.meta-row .value {
  color: var(--text-strong);
}

.input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
}

button.primary {
  background: linear-gradient(90deg, #4f8bff, #7dd0ff);
  color: #0b1222;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.steps {
  margin-top: 16px;
}

.steps h3 {
  margin: 0 0 8px;
}

.onboarding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.login-callout {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.checklist {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.check-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: rgba(255, 255, 255, 0.02);
}

.check-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  color: var(--text-strong);
}

.auto-pill {
  margin-left: auto;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
}

.check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.ready-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, 0.25);
  background: rgba(120, 180, 255, 0.06);
}

.initial-password {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 120, 0.25);
  background: rgba(255, 220, 120, 0.06);
}

.task-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.task-row {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.task-name {
  color: var(--text);
}

.task-detail {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 12px;
}

.request-code-row {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
  padding: 10px 12px;
  cursor: pointer;
}

.copied {
  font-size: 12px;
  color: rgba(120, 255, 160, 0.9);
}

.steps ol {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

.error-box {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 87, 87, 0.5);
  background: rgba(255, 87, 87, 0.06);
  padding: 10px 12px;
}
</style>