portal: highlight approval waiting message

This commit is contained in:
Brad Stein 2026-01-25 15:01:18 -03:00
parent 66526bc1fe
commit 6e970c3b56

View File

@ -148,8 +148,9 @@
Verifying email Verifying email
</div> </div>
<div v-if="verifyMessage" class="hint mono" style="margin-top: 10px;"> <div v-if="verifyBanner" class="verify-box">
{{ verifyMessage }} <div class="verify-title mono">{{ verifyBanner.title }}</div>
<div class="verify-body">{{ verifyBanner.body }}</div>
</div> </div>
<div v-if="status === 'pending_email_verification'" class="actions" style="margin-top: 10px;"> <div v-if="status === 'pending_email_verification'" class="actions" style="margin-top: 10px;">
@ -273,7 +274,7 @@ const retrying = ref(false);
const retryMessage = ref(""); const retryMessage = ref("");
const resending = ref(false); const resending = ref(false);
const resendMessage = ref(""); const resendMessage = ref("");
const verifyMessage = ref(""); const verifyBanner = ref(null);
function taskPillClass(status) { function taskPillClass(status) {
const key = (status || "").trim(); const key = (status || "").trim();
@ -454,7 +455,7 @@ async function copyRequestCode() {
async function checkStatus() { async function checkStatus() {
if (checking.value) return; if (checking.value) return;
error.value = ""; error.value = "";
verifyMessage.value = ""; verifyBanner.value = null;
const trimmed = statusForm.request_code.trim(); const trimmed = statusForm.request_code.trim();
if (!trimmed) return; if (!trimmed) return;
if (!trimmed.includes("~")) { if (!trimmed.includes("~")) {
@ -479,8 +480,13 @@ async function checkStatus() {
onboardingUrl.value = data.onboarding_url || ""; onboardingUrl.value = data.onboarding_url || "";
tasks.value = Array.isArray(data.tasks) ? data.tasks : []; tasks.value = Array.isArray(data.tasks) ? data.tasks : [];
blocked.value = Boolean(data.blocked); blocked.value = Boolean(data.blocked);
if (data.email_verified) { if (data.email_verified && status.value === "pending") {
verifyMessage.value = "Email confirmed."; verifyBanner.value = {
title: "Email confirmed",
body: "Your request is now waiting for manual approval. Check back here after an admin reviews it.",
};
} else {
verifyBanner.value = null;
} }
} catch (err) { } catch (err) {
error.value = err.message || "Failed to check status"; error.value = err.message || "Failed to check status";
@ -533,7 +539,14 @@ async function verifyFromLink(code, token) {
const data = await resp.json().catch(() => ({})); const data = await resp.json().catch(() => ({}));
if (!resp.ok) throw new Error(data.error || resp.statusText || `status ${resp.status}`); if (!resp.ok) throw new Error(data.error || resp.statusText || `status ${resp.status}`);
status.value = data.status || status.value; status.value = data.status || status.value;
verifyMessage.value = "Email confirmed."; if (status.value === "pending") {
verifyBanner.value = {
title: "Email confirmed",
body: "Your request is now waiting for manual approval. Check back here after an admin reviews it.",
};
} else {
verifyBanner.value = null;
}
} finally { } finally {
verifying.value = false; verifying.value = false;
} }
@ -582,8 +595,11 @@ onMounted(async () => {
if (code) { if (code) {
await checkStatus(); await checkStatus();
} }
if (verified) { if (verified && status.value === "pending") {
verifyMessage.value = "Email confirmed."; verifyBanner.value = {
title: "Email confirmed",
body: "Your request is now waiting for manual approval. Check back here after an admin reviews it.",
};
} }
if (verifyError) { if (verifyError) {
error.value = `Email verification failed: ${decodeURIComponent(verifyError)}`; error.value = `Email verification failed: ${decodeURIComponent(verifyError)}`;
@ -794,6 +810,28 @@ button.primary:disabled {
</style> </style>
<style scoped> <style scoped>
.verify-box {
margin-top: 12px;
padding: 12px 14px;
border: 1px solid rgba(120, 200, 255, 0.35);
border-radius: 14px;
background: rgba(48, 120, 200, 0.16);
display: grid;
gap: 4px;
}
.verify-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(150, 220, 255, 0.95);
}
.verify-body {
font-size: 13px;
color: var(--text);
}
.task-box { .task-box {
margin-top: 14px; margin-top: 14px;
padding: 14px; padding: 14px;