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="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>

      <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">
          Atlas can't reliably verify these steps automatically yet. Mark them complete once you're done.
        </p>

        <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('vaultwarden_master_password')"
                :disabled="!auth.authenticated || loading"
                @change="toggleStep('vaultwarden_master_password', $event)"
              />
              <span>Set a 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"
                @change="toggleStep('element_recovery_key', $event)"
              />
              <span>Create an 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"
                @change="toggleStep('element_recovery_key_stored', $event)"
              />
              <span>Store the recovery key in Vaultwarden</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 status = ref("");
const loading = ref(false);
const error = ref("");
const onboarding = ref({ required_steps: [], completed_steps: [] });

function statusLabel(value) {
  const key = (value || "").trim();
  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") 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;
}

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";
    onboarding.value = data.onboarding || { required_steps: [], completed_steps: [] };
  } catch (err) {
    error.value = err.message || "Failed to check status";
  } finally {
    loading.value = false;
  }
}

async function loginToContinue() {
  await login(`/onboarding?code=${encodeURIComponent(requestCode.value.trim())}`);
}

async function toggleStep(step, event) {
  const checked = Boolean(event?.target?.checked);
  if (!auth.authenticated) {
    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;
}

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

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

.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>