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

<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas</p>
        <h1>Request Access</h1>
        <p class="lede">
          Self-serve signups are not enabled yet. Request access and an admin can approve your account.
        </p>
      </div>
    </section>

    <section class="card module">
      <div class="module-head">
        <h2>Request form</h2>
        <span class="pill mono" :class="submitted ? 'pill-ok' : 'pill-warn'">
          {{ submitted ? "submitted" : "pending" }}
        </span>
      </div>

      <p class="muted">
        This creates a pending request in Atlas. If approved, you'll receive an email with next steps (if you provided one).
      </p>

      <form class="form" @submit.prevent="submit" v-if="!submitted">
        <label class="field">
          <span class="label mono">Desired Username</span>
          <input
            v-model="form.username"
            class="input mono"
            type="text"
            autocomplete="username"
            placeholder="e.g. alice"
            :disabled="submitting"
            required
          />
        </label>

        <label class="field">
          <span class="label mono">Email (optional)</span>
          <input
            v-model="form.email"
            class="input mono"
            type="email"
            autocomplete="email"
            placeholder="you@example.com"
            :disabled="submitting"
          />
        </label>

        <label class="field">
          <span class="label mono">Note (optional)</span>
          <textarea
            v-model="form.note"
            class="textarea"
            rows="4"
            placeholder="What do you want access to?"
            :disabled="submitting"
          />
        </label>

        <div class="actions">
          <button class="primary" type="submit" :disabled="submitting || !form.username.trim()">
            {{ submitting ? "Submitting..." : "Submit request" }}
          </button>
          <span class="hint mono">Requests are rate-limited.</span>
        </div>
      </form>

      <div v-else class="success-box">
        <div class="mono">Request submitted.</div>
        <div class="muted">
          Save this request code. You can use it to check the status of your request.
        </div>
        <div class="request-code-row">
          <span class="label mono">Request Code</span>
          <button class="copy mono" type="button" @click="copyRequestCode">
            {{ requestCode }}
            <span v-if="copied" class="copied">copied</span>
          </button>
        </div>
      </div>

      <div class="card module status-module">
        <div class="module-head">
          <h2>Check status</h2>
          <span class="pill mono" :class="status ? 'pill-ok' : 'pill-warn'">
            {{ status || "unknown" }}
          </span>
        </div>

        <p class="muted">
          Enter your request code to see whether it is pending, approved, or denied.
        </p>

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

        <div v-if="status === 'approved' && onboardingUrl" class="actions" style="margin-top: 12px;">
          <a class="primary" :href="onboardingUrl">Continue onboarding</a>
        </div>
      </div>

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

<script setup>
import { reactive, ref } from "vue";

const form = reactive({
  username: "",
  email: "",
  note: "",
});

const submitting = ref(false);
const submitted = ref(false);
const error = ref("");
const requestCode = ref("");
const copied = ref(false);

const statusForm = reactive({
  request_code: "",
});
const checking = ref(false);
const status = ref("");
const onboardingUrl = ref("");

async function submit() {
  if (submitting.value) return;
  error.value = "";
  submitting.value = true;
  try {
    const resp = await fetch("/api/access/request", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      cache: "no-store",
      body: JSON.stringify({
        username: form.username.trim(),
        email: form.email.trim(),
        note: form.note.trim(),
      }),
    });
    const data = await resp.json().catch(() => ({}));
    if (!resp.ok) throw new Error(data.error || resp.statusText || `status ${resp.status}`);
    submitted.value = true;
    requestCode.value = data.request_code || "";
    statusForm.request_code = requestCode.value;
    status.value = "pending";
  } catch (err) {
    error.value = err.message || "Failed to submit request";
  } finally {
    submitting.value = false;
  }
}

async function copyRequestCode() {
  if (!requestCode.value) return;
  try {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(requestCode.value);
    } else {
      const textarea = document.createElement("textarea");
      textarea.value = requestCode.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 request code";
  }
}

async function checkStatus() {
  if (checking.value) return;
  error.value = "";
  checking.value = true;
  try {
    const resp = await fetch("/api/access/request/status", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      cache: "no-store",
      body: JSON.stringify({ request_code: statusForm.request_code.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";
    onboardingUrl.value = data.onboarding_url || "";
  } catch (err) {
    error.value = err.message || "Failed to check status";
    status.value = "unknown";
    onboardingUrl.value = "";
  } finally {
    checking.value = false;
  }
}
</script>

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

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

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

.status-module {
  margin-top: 14px;
}

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

.muted {
  color: var(--text-muted);
  margin: 10px 0 0;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.form {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

.label {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.input,
.textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.textarea {
  resize: vertical;
}

.actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

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

.hint {
  color: var(--text-muted);
  font-size: 12px;
}

.error-box {
  margin-top: 14px;
  border: 1px solid rgba(255, 120, 120, 0.35);
  background: rgba(255, 64, 64, 0.12);
  border-radius: 14px;
  padding: 12px;
}

.success-box {
  margin-top: 14px;
  border: 1px solid rgba(120, 255, 160, 0.25);
  background: rgba(48, 255, 160, 0.1);
  border-radius: 14px;
  padding: 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);
  padding: 10px 12px;
  cursor: pointer;
}

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

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.pill-ok {
  border-color: rgba(120, 255, 160, 0.3);
}

.pill-warn {
  border-color: rgba(255, 220, 120, 0.25);
}
</style>