inkwell/frontend/src/components/AccountList.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="text-xs font-semibold uppercase tracking-wide text-neutral-400">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="text-sm text-red-600 dark:text-red-400">{{ error }}</p>

    <div v-if="loading" class="py-6 text-center text-sm text-neutral-400">Loading…</div>
    <ul v-else class="flex flex-col gap-2">
      <li
        v-for="a in accounts"
        :key="a.id"
        class="flex items-center justify-between gap-4 rounded-xl border border-neutral-200 px-4 py-3 dark:border-neutral-800"
      >
        <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 rounded-md border border-neutral-300 px-2.5 py-1 text-xs text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-800"
          :disabled="busy === a.id"
          @click="resetLink(a)"
        >
          Reset password
        </button>
      </li>
    </ul>
  </section>
</template>