@frigear-nu/account 0.0.10 → 0.1.0

package/dist/runtime/app/pages/security.vue

@@ -3,14 +3,13 @@ import { z } from "zod";
 defineOptions({ name: "AccountSecurityPage" });
 const t = useModuleT("account.security");
 const toast = useToast();
+const showError = useErrorToast();
+const confirm = useConfirmDialog();
+const format = useFormat();
 const { user } = useUserSession();
-const { changePassword, pending } = useAccount();
+const { changePassword } = useAccount();
 const webAuthnEnabled = useRuntimeConfig().public.authentication?.webAuthn === true;
 const passkeys = webAuthnEnabled ? usePasskeys() : void 0;
-function errorMessage(e, fallback) {
-  const err = e;
-  return err?.data?.statusMessage ?? err?.statusMessage ?? fallback;
-}
 const passwordSchema = z.object({
   currentPassword: z.string().min(1, t("changePassword.current.required", "Enter your current password.")),
   newPassword: z.string().min(8, t("changePassword.new.min", "Use at least 8 characters.")),
@@ -20,29 +19,31 @@ const passwordSchema = z.object({
   path: ["confirmNewPassword"]
 });
 const passwordState = reactive({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+const passwordAction = useAction();
 async function onSubmitPassword(event) {
-  try {
-    await changePassword(event.data);
-    passwordState.currentPassword = "";
-    passwordState.newPassword = "";
-    passwordState.confirmNewPassword = "";
-    toast.add({ title: t("changePassword.success", "Your password was changed."), color: "success" });
-  } catch (e) {
-    toast.add({ title: errorMessage(e, t("changePassword.error", "Could not change your password.")), color: "error" });
-  }
+  const changed = await passwordAction.run(
+    async () => {
+      await changePassword(event.data);
+      return true;
+    },
+    { success: t("changePassword.success", "Your password was changed."), error: t("changePassword.error", "Could not change your password.") }
+  );
+  if (!changed) return;
+  passwordState.currentPassword = "";
+  passwordState.newPassword = "";
+  passwordState.confirmNewPassword = "";
 }
 const passkeyList = ref([]);
 const passkeyName = ref("");
 const passkeyPending = ref(false);
 const passkeysLoading = ref(false);
-const removingId = ref(null);
 async function loadPasskeys() {
   if (!passkeys) return;
   passkeysLoading.value = true;
   try {
     passkeyList.value = await passkeys.listPasskeys();
   } catch (e) {
-    toast.add({ title: errorMessage(e, t("passkeys.loadError", "Could not load your passkeys.")), color: "error" });
+    showError(e, t("passkeys.loadError", "Could not load your passkeys."));
   } finally {
     passkeysLoading.value = false;
   }
@@ -52,160 +53,164 @@ async function onRegisterPasskey() {
   try {
     await passkeys?.registerPasskey(user.value?.email ?? "", passkeyName.value);
     passkeyName.value = "";
-    toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success" });
+    toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success", icon: "i-lucide-check" });
     await loadPasskeys();
   } catch (e) {
     if (e?.name !== "NotAllowedError") {
-      toast.add({ title: errorMessage(e, t("passkeys.registerError", "Could not register the passkey.")), color: "error" });
+      showError(e, t("passkeys.registerError", "Could not register the passkey."));
     }
   } finally {
     passkeyPending.value = false;
   }
 }
-async function onRemovePasskey(id) {
-  removingId.value = id;
+const passkeyLabel = (passkey) => passkey.name || t("passkeys.unnamed", "Passkey");
+async function onRemovePasskey(passkey) {
+  const confirmed = await confirm({
+    title: t("passkeys.removeConfirm.title", "Remove {name}?", { name: passkeyLabel(passkey) }),
+    description: t("passkeys.removeConfirm.description", "You can no longer sign in with this passkey. It stays on your device until you delete it there."),
+    confirmText: t("passkeys.remove", "Remove passkey"),
+    destructive: true
+  });
+  if (!confirmed) return;
   try {
-    await passkeys?.removePasskey(id);
-    toast.add({ title: t("passkeys.removed", "Passkey removed."), color: "success" });
+    await passkeys?.removePasskey(passkey.id);
+    toast.add({ title: t("passkeys.removed", "Passkey removed."), description: passkeyLabel(passkey), color: "success", icon: "i-lucide-check" });
     await loadPasskeys();
   } catch (e) {
-    toast.add({ title: errorMessage(e, t("passkeys.removeError", "Could not remove the passkey.")), color: "error" });
-  } finally {
-    removingId.value = null;
+    showError(e, t("passkeys.removeError", "Could not remove the passkey."));
   }
 }
-const dateFormatter = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
-function formatDate(value) {
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : dateFormatter.format(date);
-}
+const passkeyMenu = (passkey) => [[
+  { label: t("passkeys.remove", "Remove passkey"), icon: "i-lucide-trash-2", color: "error", onSelect: () => onRemovePasskey(passkey) }
+]];
 onMounted(loadPasskeys);
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody>
-        <UPageCard
-          :title="t('password.title', 'Password')"
-          :description="t('password.description', 'Change your password.')"
-          variant="subtle"
+  <div class="flex flex-col gap-4">
+    <SectionCard
+      :title="t('password.title', 'Password')"
+      :description="t('password.description', 'Change your password.')"
+    >
+      <UForm
+        id="account-change-password"
+        :schema="passwordSchema"
+        :state="passwordState"
+        class="flex flex-col gap-4"
+        @submit="onSubmitPassword"
+      >
+        <UFormField
+          :label="t('changePassword.current.label', 'Current password')"
+          name="currentPassword"
+          required
         >
-          <UForm
-            :schema="passwordSchema"
-            :state="passwordState"
-            class="space-y-4"
-            @submit="onSubmitPassword"
-          >
-            <UFormField
-              :label="t('changePassword.current.label', 'Current password')"
-              name="currentPassword"
-              required
-            >
-              <UInput
-                v-model="passwordState.currentPassword"
-                type="password"
-                autocomplete="current-password"
-                class="w-full"
-              />
-            </UFormField>
-            <UFormField
-              :label="t('changePassword.new.label', 'New password')"
-              name="newPassword"
-              required
-            >
-              <UInput
-                v-model="passwordState.newPassword"
-                type="password"
-                autocomplete="new-password"
-                class="w-full"
-              />
-            </UFormField>
-            <UFormField
-              :label="t('changePassword.confirm.label', 'Confirm new password')"
-              name="confirmNewPassword"
-              required
-            >
-              <UInput
-                v-model="passwordState.confirmNewPassword"
-                type="password"
-                autocomplete="new-password"
-                class="w-full"
-              />
-            </UFormField>
-            <UButton
-              type="submit"
-              :loading="pending"
-              :label="t('changePassword.submit', 'Change password')"
-            />
-          </UForm>
-        </UPageCard>
-
-        <UPageCard
-          v-if="passkeys?.isEnabled.value"
-          :title="t('passkeys.title', 'Passkeys')"
-          :description="t('passkeys.description', 'Sign in with your fingerprint, face or device PIN instead of a password.')"
-          variant="subtle"
+          <UInput
+            v-model="passwordState.currentPassword"
+            type="password"
+            autocomplete="current-password"
+            class="w-full sm:max-w-sm"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('changePassword.new.label', 'New password')"
+          name="newPassword"
+          required
+        >
+          <UInput
+            v-model="passwordState.newPassword"
+            type="password"
+            autocomplete="new-password"
+            class="w-full sm:max-w-sm"
+          />
+        </UFormField>
+        <UFormField
+          :label="t('changePassword.confirm.label', 'Confirm new password')"
+          name="confirmNewPassword"
+          required
         >
-          <ul
-            v-if="passkeyList.length"
-            class="divide-y divide-default"
-          >
-            <li
-              v-for="passkey in passkeyList"
-              :key="passkey.id"
-              class="flex items-center justify-between gap-3 py-3"
-            >
-              <div class="flex min-w-0 items-center gap-3">
-                <UIcon
-                  name="i-lucide-key-round"
-                  class="size-5 shrink-0 text-muted"
-                />
-                <div class="min-w-0">
-                  <p class="truncate font-medium text-highlighted">
-                    {{ passkey.name || t("passkeys.unnamed", "Passkey") }}
-                  </p>
-                  <p class="text-sm text-muted">
-                    {{ t("passkeys.created", "Added {date}", { date: formatDate(passkey.createdAt) }) }}
-                  </p>
-                </div>
-              </div>
-              <UButton
-                color="error"
-                variant="ghost"
-                icon="i-lucide-trash-2"
-                :loading="removingId === passkey.id"
-                :aria-label="t('passkeys.remove', 'Remove passkey')"
-                @click="onRemovePasskey(passkey.id)"
-              />
-            </li>
-          </ul>
-          <p
-            v-else-if="!passkeysLoading"
-            class="text-sm text-muted"
-          >
-            {{ t("passkeys.empty", "You have not added any passkeys yet.") }}
-          </p>
+          <UInput
+            v-model="passwordState.confirmNewPassword"
+            type="password"
+            autocomplete="new-password"
+            class="w-full sm:max-w-sm"
+          />
+        </UFormField>
+      </UForm>
+      <template #footer>
+        <div class="flex justify-end">
+          <UButton
+            type="submit"
+            form="account-change-password"
+            :loading="passwordAction.busy.value"
+            :label="t('changePassword.submit', 'Change password')"
+          />
+        </div>
+      </template>
+    </SectionCard>
 
-          <form
-            class="flex flex-col gap-2 sm:flex-row"
-            @submit.prevent="onRegisterPasskey"
-          >
-            <UInput
-              v-model="passkeyName"
-              :placeholder="t('passkeys.name.placeholder', 'Name, e.g. MacBook')"
-              :aria-label="t('passkeys.name.label', 'Passkey name')"
-              maxlength="100"
-              class="w-full sm:max-w-xs"
-            />
-            <UButton
-              type="submit"
-              :loading="passkeyPending"
-              :label="t('passkeys.register', 'Register a passkey')"
+    <SectionCard
+      v-if="passkeys?.isEnabled.value"
+      :title="t('passkeys.title', 'Passkeys')"
+      :description="t('passkeys.description', 'Sign in with your fingerprint, face or device PIN instead of a password.')"
+      :loading="passkeysLoading && !passkeyList.length"
+      flush
+    >
+      <ul
+        v-if="passkeyList.length"
+        class="divide-y divide-default"
+      >
+        <li
+          v-for="passkey in passkeyList"
+          :key="passkey.id"
+          class="flex items-center justify-between gap-3 px-4 py-3"
+        >
+          <div class="flex min-w-0 items-center gap-3">
+            <UIcon
+              name="i-lucide-key-round"
+              class="size-5 shrink-0 text-muted"
             />
-          </form>
-        </UPageCard>
-      </UPageBody>
-    </UPage>
-  </UContainer>
+            <div class="min-w-0">
+              <p class="truncate text-sm font-medium text-highlighted">
+                {{ passkeyLabel(passkey) }}
+              </p>
+              <p class="text-sm text-muted">
+                {{ t("passkeys.created", "Added {date}", { date: format.date(passkey.createdAt) }) }}
+              </p>
+            </div>
+          </div>
+          <RowMenu
+            :items="passkeyMenu(passkey)"
+            :subject="passkeyLabel(passkey)"
+          />
+        </li>
+      </ul>
+      <UEmpty
+        v-else
+        variant="naked"
+        icon="i-lucide-key-round"
+        :title="t('passkeys.empty', 'You have not added any passkeys yet.')"
+      />
+
+      <template #footer>
+        <form
+          class="flex flex-col gap-2 sm:flex-row sm:justify-end"
+          @submit.prevent="onRegisterPasskey"
+        >
+          <UInput
+            v-model="passkeyName"
+            :placeholder="t('passkeys.name.placeholder', 'Name, e.g. MacBook')"
+            :aria-label="t('passkeys.name.label', 'Passkey name')"
+            maxlength="100"
+            class="w-full sm:max-w-xs"
+          />
+          <UButton
+            type="submit"
+            icon="i-lucide-plus"
+            :loading="passkeyPending"
+            :label="t('passkeys.register', 'Register a passkey')"
+          />
+        </form>
+      </template>
+    </SectionCard>
+  </div>
 </template>

package/dist/runtime/app/utils/api-tokens.d.ts

@@ -0,0 +1,19 @@
+export interface ApiToken {
+    id: string;
+    name: string;
+    prefix: string;
+    last4: string;
+    scopes: string[];
+    expiresAt: string | null;
+    lastUsedAt: string | null;
+    createdAt: string;
+    status: 'ok' | 'revoked' | 'expired';
+}
+export interface ApiTokenScope {
+    name: string;
+    description?: string;
+}
+/** The response to creating a token: the only time its plaintext `token` exists. */
+export type CreatedApiToken = ApiToken & {
+    token: string;
+};

package/dist/runtime/i18n/lang/da.json

@@ -7,6 +7,10 @@
         "label": "Konto",
         "description": "Din konto."
       },
+      "overview": {
+        "label": "Overblik",
+        "description": "Et overblik over din konto."
+      },
       "profile": {
         "label": "Profil",
         "description": "Administrer dine profiloplysninger og e-mailadresse."
@@ -24,6 +28,22 @@
         "description": "Opret nøgler til scripts og værktøjer."
       }
     },
+    "nav": {
+      "label": "Kontonavigation"
+    },
+    "accountMenu": "Kontomenu",
+    "appearance": {
+      "label": "Udseende",
+      "light": "Lyst",
+      "dark": "Mørkt",
+      "system": "System"
+    },
+    "overview": {
+      "title": "Konto",
+      "description": "Dine oplysninger og alt, der hører til din konto.",
+      "shortcuts": "Din konto",
+      "empty": "Her er ikke noget endnu."
+    },
     "profile": {
       "title": "Profil",
       "description": "Skift dine brugeroplysninger.",
@@ -97,6 +117,10 @@
         "unnamed": "Passkey",
         "created": "Tilføjet {date}",
         "remove": "Fjern passkey",
+        "removeConfirm": {
+          "title": "Fjern {name}?",
+          "description": "Du kan ikke længere logge ind med denne passkey. Den ligger stadig på din enhed, indtil du sletter den dér."
+        },
         "empty": "Du har ikke tilføjet nogen passkeys endnu.",
         "name": {
           "label": "Navn på passkey",
@@ -109,29 +133,31 @@
         "loadError": "Kunne ikke hente dine passkeys."
       }
     },
-    "backTo": "Tilbage til konto",
     "signedInAs": "Logget ind som",
     "apiTokens": {
       "title": "API-nøgler",
       "description": "Opret nøgler til scripts og værktøjer.",
       "allScopes": "Fuld adgang",
-      "copy": "Kopiér",
+      "copy": "Kopiér nøgle",
       "copied": "Nøglen er kopieret.",
       "copiedSnippet": "Kopieret.",
-      "copyError": "Kunne ikke kopiere. Markér nøglen og kopiér den manuelt.",
+      "copySnippet": "Kopiér kommando",
       "create": {
-        "title": "Opret en API-nøgle",
+        "title": "Opret API-nøgle",
         "description": "Nøgler lader scripts og værktøjer som MCP-klienter handle på dine vegne. Giv hver nøgle kun de rettigheder, den har brug for.",
-        "submit": "Opret nøgle"
+        "submit": "Opret API-nøgle"
       },
       "createError": "Kunne ikke oprette nøglen.",
+      "created": "Nøglen er oprettet",
       "name": {
         "label": "Navn",
+        "description": "Så du kan genkende nøglen senere.",
         "placeholder": "fx Min MCP-klient",
         "required": "Giv nøglen et navn."
       },
       "scopes": {
         "label": "Rettigheder",
+        "description": "Hvad nøglen må.",
         "placeholder": "Vælg hvad nøglen må",
         "required": "Vælg mindst én rettighed."
       },
@@ -161,11 +187,13 @@
       },
       "list": {
         "title": "Dine nøgler",
-        "description": "Træk en nøgle tilbage for at stoppe den med det samme.",
+        "description": "Nøgler lader scripts og værktøjer som MCP-klienter handle på dine vegne. Træk en nøgle tilbage for at stoppe den med det samme.",
         "empty": "Du har ikke oprettet nogen nøgler endnu.",
-        "created": "Oprettet {date}",
-        "lastUsed": "Sidst brugt {date}",
-        "expires": "Udløber {date}"
+        "name": "Navn",
+        "createdColumn": "Oprettet",
+        "lastUsedColumn": "Sidst brugt",
+        "expiresColumn": "Udløber",
+        "neverUsed": "Aldrig"
       },
       "status": {
         "ok": "Aktiv",
@@ -173,6 +201,10 @@
         "expired": "Udløbet"
       },
       "revoke": "Træk nøgle tilbage",
+      "revokeConfirm": {
+        "title": "Træk {name} tilbage?",
+        "description": "Scripts og værktøjer, der bruger nøglen, holder op med at virke med det samme. Det kan ikke fortrydes."
+      },
       "revoked": "Nøglen er trukket tilbage.",
       "revokeError": "Kunne ikke trække nøglen tilbage."
     }

package/dist/runtime/i18n/lang/en.json

@@ -7,6 +7,10 @@
         "label": "Account",
         "description": "Your account."
       },
+      "overview": {
+        "label": "Overview",
+        "description": "A summary of your account."
+      },
       "profile": {
         "label": "Profile",
         "description": "Manage your profile details and email address."
@@ -24,6 +28,22 @@
         "description": "Create tokens for scripts and tools."
       }
     },
+    "nav": {
+      "label": "Account navigation"
+    },
+    "accountMenu": "Account menu",
+    "appearance": {
+      "label": "Appearance",
+      "light": "Light",
+      "dark": "Dark",
+      "system": "System"
+    },
+    "overview": {
+      "title": "Account",
+      "description": "Your details and everything that belongs to your account.",
+      "shortcuts": "Your account",
+      "empty": "Nothing here yet."
+    },
     "profile": {
       "title": "Profile",
       "description": "Change your information.",
@@ -97,6 +117,10 @@
         "unnamed": "Passkey",
         "created": "Added {date}",
         "remove": "Remove passkey",
+        "removeConfirm": {
+          "title": "Remove {name}?",
+          "description": "You can no longer sign in with this passkey. It stays on your device until you delete it there."
+        },
         "empty": "You have not added any passkeys yet.",
         "name": {
           "label": "Passkey name",
@@ -109,29 +133,31 @@
         "loadError": "Could not load your passkeys."
       }
     },
-    "backTo": "Back to account",
     "signedInAs": "Signed in as",
     "apiTokens": {
       "title": "API tokens",
       "description": "Create tokens for scripts and tools.",
       "allScopes": "Full access",
-      "copy": "Copy",
+      "copy": "Copy token",
       "copied": "Token copied.",
       "copiedSnippet": "Copied.",
-      "copyError": "Could not copy. Select the token and copy it manually.",
+      "copySnippet": "Copy command",
       "create": {
-        "title": "Create an API token",
+        "title": "Create API token",
         "description": "Tokens let scripts and tools such as MCP clients act as you. Give each one only the scopes it needs.",
-        "submit": "Create token"
+        "submit": "Create API token"
       },
       "createError": "Could not create the token.",
+      "created": "Token created",
       "name": {
         "label": "Name",
+        "description": "So you recognise the token later.",
         "placeholder": "e.g. My MCP client",
         "required": "Give the token a name."
       },
       "scopes": {
         "label": "Scopes",
+        "description": "What the token may do.",
         "placeholder": "Choose what the token may do",
         "required": "Pick at least one scope."
       },
@@ -161,11 +187,13 @@
       },
       "list": {
         "title": "Your tokens",
-        "description": "Revoke a token to stop it working immediately.",
+        "description": "Tokens let scripts and tools such as MCP clients act as you. Revoke one to stop it working immediately.",
         "empty": "You have not created any tokens yet.",
-        "created": "Created {date}",
-        "lastUsed": "Last used {date}",
-        "expires": "Expires {date}"
+        "name": "Name",
+        "createdColumn": "Created",
+        "lastUsedColumn": "Last used",
+        "expiresColumn": "Expires",
+        "neverUsed": "Never"
       },
       "status": {
         "ok": "Active",
@@ -173,6 +201,10 @@
         "expired": "Expired"
       },
       "revoke": "Revoke token",
+      "revokeConfirm": {
+        "title": "Revoke {name}?",
+        "description": "Scripts and tools using this token stop working immediately. This cannot be undone."
+      },
       "revoked": "Token revoked.",
       "revokeError": "Could not revoke the token."
     }

package/dist/runtime/menus.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@frigear-nu/menu/types").MenuSource;
+declare const _default: import("@frigear-nu/menu").MenuSource;
 export default _default;

package/dist/runtime/menus.js

@@ -12,6 +12,16 @@ export default defineMenuSource(() => {
       to: config.pages.index,
       order: -99
     });
+    extendMenuItem("account", {
+      id: "account-overview",
+      label: "Overview",
+      labelKey: "account.menu.overview.label",
+      description: "A summary of your account.",
+      descriptionKey: "account.menu.overview.description",
+      icon: "i-lucide-layout-dashboard",
+      to: config.pages.index,
+      order: 0
+    });
   }
   if (config?.pages?.profile) {
     const profileItem = defineMenuItem({