264 lines
8.6 KiB
Vue
264 lines
8.6 KiB
Vue
<!--
|
|
The SSO identity <-> native game account bridge, player-facing.
|
|
|
|
Used on /community/servers/[id] and (M6 phase 5) on /account/settings for
|
|
the cross-game view, which is why it takes a serverId + slug rather than
|
|
reading the route.
|
|
|
|
RENDERS NOTHING when the server has no account backend (`supported: false`)
|
|
-- Impostor is a lobby with no identity at all, and a game can be in the
|
|
registry before its DB is wired. A dead panel would be worse than no panel.
|
|
|
|
The password never reaches Drop's database. It is posted straight through to
|
|
the provider service, which turns it into whatever that emulator's auth DB
|
|
wants. Drop stores only the link.
|
|
-->
|
|
<template>
|
|
<div v-if="panel?.supported" class="flex flex-col gap-y-2">
|
|
<h2 class="text-lg font-bold font-display text-zinc-100">
|
|
{{ $t("community.gameAccount.title") }}
|
|
</h2>
|
|
|
|
<!-- Backend down. Deliberately distinct from "you have no account": we
|
|
genuinely cannot tell, and saying otherwise would invite a player to
|
|
create a duplicate. -->
|
|
<div
|
|
v-if="!panel.available"
|
|
class="rounded-lg bg-zinc-800/50 p-4 text-sm text-zinc-400"
|
|
>
|
|
{{ $t("community.gameAccount.unavailable") }}
|
|
</div>
|
|
|
|
<!-- Linked -->
|
|
<div
|
|
v-else-if="panel.linked && panel.account"
|
|
class="rounded-lg bg-zinc-800/50 p-4 flex flex-col gap-y-3"
|
|
>
|
|
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
<div>
|
|
<p class="text-sm font-semibold text-zinc-100">
|
|
{{ panel.account.username }}
|
|
</p>
|
|
<p class="text-xs text-zinc-500">
|
|
<span v-if="panel.account.created_at">
|
|
{{ $t("community.gameAccount.created") }}
|
|
{{ new Date(panel.account.created_at).toLocaleDateString() }}
|
|
</span>
|
|
<span v-if="panel.account.last_login">
|
|
· {{ $t("community.gameAccount.lastLogin") }}
|
|
{{ new Date(panel.account.last_login).toLocaleDateString() }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-2">
|
|
<span
|
|
v-if="panel.account.banned"
|
|
class="rounded bg-red-900/60 px-2 py-0.5 text-xs text-red-200"
|
|
>{{ $t("community.gameAccount.banned") }}</span
|
|
>
|
|
<span
|
|
v-else-if="panel.account.locked"
|
|
class="rounded bg-amber-900/60 px-2 py-0.5 text-xs text-amber-200"
|
|
>{{ $t("community.gameAccount.locked") }}</span
|
|
>
|
|
<button
|
|
type="button"
|
|
class="rounded-md bg-zinc-700 px-3 py-1.5 text-sm font-semibold text-zinc-100 hover:bg-zinc-600 duration-200"
|
|
@click="mode = mode === 'password' ? null : 'password'"
|
|
>
|
|
{{ $t("community.gameAccount.changePassword") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul
|
|
v-if="panel.characters?.length"
|
|
class="flex flex-wrap gap-2 border-t border-zinc-700/50 pt-3"
|
|
>
|
|
<li
|
|
v-for="c in panel.characters"
|
|
:key="String(c.guid ?? c.name)"
|
|
class="rounded bg-zinc-900/60 px-2 py-1 text-xs text-zinc-300"
|
|
>
|
|
{{ c.name }}
|
|
<span v-if="c.level" class="text-zinc-500">· {{ c.level }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Not linked yet -->
|
|
<div v-else class="rounded-lg bg-zinc-800/50 p-4 flex flex-col gap-y-3">
|
|
<p class="text-sm text-zinc-300">
|
|
{{ $t("community.gameAccount.noAccount") }}
|
|
</p>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="w-fit rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 duration-200"
|
|
@click="mode = mode === 'provision' ? null : 'provision'"
|
|
>
|
|
{{ $t("community.gameAccount.create") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
:disabled="busy"
|
|
class="w-fit rounded-md bg-zinc-700 px-4 py-2 text-sm font-semibold text-zinc-100 hover:bg-zinc-600 disabled:opacity-50 duration-200"
|
|
@click="recover"
|
|
>
|
|
{{ $t("community.gameAccount.recover") }}
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-zinc-500">
|
|
{{ $t("community.gameAccount.recoverHint") }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Form: shared by both actions. Username only matters for provisioning;
|
|
the password field is identical either way. -->
|
|
<form
|
|
v-if="mode"
|
|
class="rounded-lg bg-zinc-900/60 p-4 flex flex-col gap-y-3"
|
|
@submit.prevent="submit"
|
|
>
|
|
<div v-if="mode === 'provision'" class="flex flex-col gap-y-1">
|
|
<label class="text-xs font-semibold text-zinc-400" for="ga-username">{{
|
|
$t("community.gameAccount.username")
|
|
}}</label>
|
|
<input
|
|
id="ga-username"
|
|
v-model="username"
|
|
autocomplete="off"
|
|
class="rounded-md bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-y-1">
|
|
<label class="text-xs font-semibold text-zinc-400" for="ga-password">{{
|
|
$t("community.gameAccount.password")
|
|
}}</label>
|
|
<input
|
|
id="ga-password"
|
|
v-model="password"
|
|
type="password"
|
|
autocomplete="new-password"
|
|
class="rounded-md bg-zinc-800 px-3 py-2 text-sm text-zinc-100 outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
<!-- Said plainly because it is the single most confusing thing about
|
|
this feature: the game password is NOT the SSO password. -->
|
|
<p class="text-xs text-zinc-500">
|
|
{{ $t("community.gameAccount.passwordHint") }}
|
|
</p>
|
|
</div>
|
|
|
|
<p v-if="error" class="text-sm text-red-400">{{ error }}</p>
|
|
<p v-if="notice" class="text-sm text-green-400">{{ notice }}</p>
|
|
|
|
<div class="flex items-center gap-x-2">
|
|
<button
|
|
type="submit"
|
|
:disabled="busy"
|
|
class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 disabled:opacity-50 duration-200"
|
|
>
|
|
{{ busy ? $t("common.srLoading") : $t("common.save") }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-md bg-zinc-800 px-4 py-2 text-sm font-semibold text-zinc-300 hover:bg-zinc-700 duration-200"
|
|
@click="reset"
|
|
>
|
|
{{ $t("cancel") }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{ serverId: string }>();
|
|
|
|
interface Panel {
|
|
supported: boolean;
|
|
available: boolean;
|
|
linked: boolean;
|
|
account: {
|
|
account_id: string;
|
|
username: string;
|
|
created_at?: string | null;
|
|
last_login?: string | null;
|
|
locked: boolean;
|
|
banned: boolean;
|
|
} | null;
|
|
characters: Record<string, unknown>[] | null;
|
|
}
|
|
|
|
const mode = ref<"provision" | "password" | null>(null);
|
|
const username = ref("");
|
|
const password = ref("");
|
|
const error = ref("");
|
|
const notice = ref("");
|
|
const busy = ref(false);
|
|
|
|
const { data: panel, refresh } = await useFetch<Panel>(
|
|
() => `/api/v1/community/servers/${props.serverId}/account`,
|
|
);
|
|
|
|
function reset() {
|
|
mode.value = null;
|
|
username.value = "";
|
|
password.value = "";
|
|
error.value = "";
|
|
notice.value = "";
|
|
}
|
|
|
|
async function submit() {
|
|
error.value = "";
|
|
notice.value = "";
|
|
busy.value = true;
|
|
try {
|
|
await $fetch(`/api/v1/community/servers/${props.serverId}/account`, {
|
|
method: "POST",
|
|
body: {
|
|
action: mode.value,
|
|
username: username.value,
|
|
password: password.value,
|
|
},
|
|
});
|
|
notice.value = "";
|
|
reset();
|
|
await refresh();
|
|
} catch (e) {
|
|
// statusMessage carries the provider's own wording for a rejected name or
|
|
// password (422) -- surfaced verbatim, because the emulator is the
|
|
// authority on its own rules.
|
|
const err = e as { statusMessage?: string; data?: { statusMessage?: string } };
|
|
error.value =
|
|
err?.data?.statusMessage ??
|
|
err?.statusMessage ??
|
|
"Something went wrong.";
|
|
} finally {
|
|
busy.value = false;
|
|
}
|
|
}
|
|
|
|
async function recover() {
|
|
error.value = "";
|
|
notice.value = "";
|
|
busy.value = true;
|
|
try {
|
|
await $fetch(`/api/v1/community/servers/${props.serverId}/account`, {
|
|
method: "POST",
|
|
body: { action: "recover" },
|
|
});
|
|
notice.value = $t("community.gameAccount.recoverSuccess");
|
|
await refresh();
|
|
} catch (e) {
|
|
const err = e as { statusMessage?: string; data?: { statusMessage?: string } };
|
|
error.value =
|
|
err?.data?.statusMessage ??
|
|
err?.statusMessage ??
|
|
"Something went wrong.";
|
|
} finally {
|
|
busy.value = false;
|
|
}
|
|
}
|
|
</script>
|