Jennie Robinson Faber
bf57f4b33d
Add guild-styled HTML templates for OIDC logout confirmation, post-logout success, and error pages. Update wiki login heading to brand convention (candlelight + warm-text). Restyle magic link email from blue to guild colour tokens.
96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: false,
|
|
});
|
|
|
|
const route = useRoute();
|
|
const uid = route.query.uid as string;
|
|
|
|
const email = ref("");
|
|
const sent = ref(false);
|
|
const loading = ref(false);
|
|
const error = ref("");
|
|
|
|
async function sendMagicLink() {
|
|
if (!email.value || !uid) return;
|
|
loading.value = true;
|
|
error.value = "";
|
|
|
|
try {
|
|
await $fetch("/oidc/interaction/login", {
|
|
method: "POST",
|
|
body: { email: email.value, uid },
|
|
});
|
|
sent.value = true;
|
|
} catch (e: any) {
|
|
error.value = e?.data?.statusMessage || "Something went wrong. Please try again.";
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-guild-900 px-4">
|
|
<div class="w-full max-w-sm">
|
|
<div class="bg-guild-800 rounded-lg shadow-md p-8">
|
|
<div class="text-center mb-6">
|
|
<h1 class="text-display-sm font-bold text-candlelight-400 warm-text">Ghost Guild Wiki</h1>
|
|
<p class="mt-2 text-sm text-guild-400">
|
|
Sign in with your Ghost Guild account
|
|
</p>
|
|
</div>
|
|
|
|
<template v-if="!sent">
|
|
<form @submit.prevent="sendMagicLink" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-guild-300 mb-1">
|
|
Email address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
v-model="email"
|
|
type="email"
|
|
required
|
|
placeholder="you@example.com"
|
|
class="w-full px-3 py-2 border border-guild-600 rounded-md shadow-sm bg-guild-900 text-guild-100 focus:ring-2 focus:ring-candlelight-500 focus:border-candlelight-500 text-sm"
|
|
:disabled="loading"
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="error" class="text-sm text-ember-400">{{ error }}</p>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="loading || !email"
|
|
class="w-full py-2 px-4 bg-candlelight-600 text-guild-100 text-sm font-medium rounded-md hover:bg-candlelight-500 focus:outline-none focus:ring-2 focus:ring-candlelight-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{{ loading ? "Sending..." : "Send magic link" }}
|
|
</button>
|
|
</form>
|
|
|
|
<p class="mt-4 text-xs text-center text-guild-500">
|
|
We'll send a sign-in link to your email.
|
|
</p>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="text-center space-y-3">
|
|
<div class="text-4xl">✉️</div>
|
|
<h2 class="text-lg font-semibold text-guild-100">Check your email</h2>
|
|
<p class="text-sm text-guild-400">
|
|
We sent a sign-in link to <strong>{{ email }}</strong>.
|
|
Click the link in the email to continue.
|
|
</p>
|
|
<button
|
|
@click="sent = false; email = '';"
|
|
class="mt-4 text-sm text-candlelight-600 hover:text-candlelight-500"
|
|
>
|
|
Use a different email
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|