bvandeusenandClaude Opus 5.5
b481e6857c
style.css gains the classes the views spelled out in full: .section-label (17 sites), .hint (20), .form-error (13), .alert-error (5), .row-card (5), .list-empty (5), .field (5), .page-shell (3), and the small row action .btn-sm (4) / .btn-sm-danger (3). Only exact runs moved, so nothing renders differently; spacing a site adds beyond a run stays a utility beside it. Kept: the Reminders and Timeline small buttons. They carry no text colour and inherit it, so putting them on .btn-sm would recolour them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
99 lines
2.9 KiB
Vue
99 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from "vue";
|
|
import { api } from "../api/client";
|
|
import { errorMessage } from "../api/errors";
|
|
import { useSessionStore } from "../stores/session";
|
|
import { useUiStore } from "../stores/ui";
|
|
import { appLink } from "../router/links";
|
|
import OneTimeLink from "./OneTimeLink.vue";
|
|
|
|
// Admin: the accounts on this instance, and a password reset link for any of them
|
|
// (#5173). There is no mail path, so the admin hands the link over.
|
|
|
|
interface Account {
|
|
id: string;
|
|
email: string;
|
|
display_name: string;
|
|
is_admin: boolean;
|
|
}
|
|
|
|
const session = useSessionStore();
|
|
const ui = useUiStore();
|
|
|
|
const accounts = ref<Account[]>([]);
|
|
const loading = ref(true);
|
|
const error = ref("");
|
|
const busy = ref("");
|
|
// The reset link just made, and whose it is. Never retrievable again once dismissed.
|
|
const fresh = ref<{ link: string; email: string } | null>(null);
|
|
|
|
async function load() {
|
|
error.value = "";
|
|
try {
|
|
accounts.value = (await api.get<{ accounts: Account[] }>("/api/accounts")).accounts;
|
|
} catch (e) {
|
|
error.value = errorMessage(e, "Couldn't load accounts.");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function resetLink(account: Account) {
|
|
const self = account.id === session.user?.id;
|
|
const warning = self
|
|
? "Make a password reset link for your own account? Using it signs you out everywhere, this browser included."
|
|
: `Make a password reset link for ${account.email}? Using it signs them out everywhere and unlinks their apps.`;
|
|
if (!window.confirm(warning)) return;
|
|
busy.value = account.id;
|
|
try {
|
|
const res = await api.post<{ token: string }>(`/api/accounts/${account.id}/reset-link`, {});
|
|
fresh.value = { link: appLink({ name: "reset-password", query: { token: res.token } }), email: account.email };
|
|
} catch (e) {
|
|
ui.showToast(errorMessage(e, "Couldn't make a reset link."));
|
|
} finally {
|
|
busy.value = "";
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void load();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="flex flex-col gap-5">
|
|
<h2 class="section-label">People</h2>
|
|
|
|
<OneTimeLink
|
|
v-if="fresh"
|
|
:link="fresh.link"
|
|
:note="`Password reset link for ${fresh.email}. It works once, within an hour.`"
|
|
@done="fresh = null"
|
|
/>
|
|
|
|
<p v-if="error" class="form-error">{{ error }}</p>
|
|
|
|
<div v-if="loading" class="list-empty">Loading…</div>
|
|
<ul v-else class="flex flex-col gap-2">
|
|
<li
|
|
v-for="a in accounts"
|
|
:key="a.id"
|
|
class="row-card"
|
|
>
|
|
<div class="min-w-0">
|
|
<p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">{{ a.display_name }}</p>
|
|
<p class="truncate text-xs text-neutral-400">{{ a.email }}{{ a.is_admin ? " · Admin" : "" }}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="shrink-0 btn-sm"
|
|
:disabled="busy === a.id"
|
|
@click="resetLink(a)"
|
|
>
|
|
Reset password
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|