@frigear-nu/account 0.0.6 → 0.0.8

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

@@ -1,90 +1,210 @@
 <script setup>
+import { z } from "zod";
 defineOptions({ name: "AccountSecurityPage" });
 const t = useModuleT("account.security");
+const toast = useToast();
 const { user } = useUserSession();
-const { changePassword, pending, error } = useAccount();
-const webAuthnEnabled = useRuntimeConfig().public.users?.webAuthn === true;
-const passkeys = webAuthnEnabled ? useUserPasskeys() : void 0;
-const currentPassword = ref("");
-const newPassword = ref("");
-const confirmNewPassword = ref("");
+const { changePassword, pending } = 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.")),
+  confirmNewPassword: z.string()
+}).refine((data) => data.newPassword === data.confirmNewPassword, {
+  message: t("changePassword.confirm.mismatch", "The passwords do not match."),
+  path: ["confirmNewPassword"]
+});
+const passwordState = reactive({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+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 passkeyList = ref([]);
+const passkeyName = ref("");
 const passkeyPending = ref(false);
-async function onSubmitPassword() {
-  await changePassword({
-    currentPassword: currentPassword.value,
-    newPassword: newPassword.value,
-    confirmNewPassword: confirmNewPassword.value
-  });
-  currentPassword.value = "";
-  newPassword.value = "";
-  confirmNewPassword.value = "";
+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" });
+  } finally {
+    passkeysLoading.value = false;
+  }
 }
 async function onRegisterPasskey() {
   passkeyPending.value = true;
   try {
-    await passkeys?.registerPasskey(user.value?.email ?? "");
+    await passkeys?.registerPasskey(user.value?.email ?? "", passkeyName.value);
+    passkeyName.value = "";
+    toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success" });
+    await loadPasskeys();
+  } catch (e) {
+    if (e?.name !== "NotAllowedError") {
+      toast.add({ title: errorMessage(e, t("passkeys.registerError", "Could not register the passkey.")), color: "error" });
+    }
   } finally {
     passkeyPending.value = false;
   }
 }
+async function onRemovePasskey(id) {
+  removingId.value = id;
+  try {
+    await passkeys?.removePasskey(id);
+    toast.add({ title: t("passkeys.removed", "Passkey removed."), color: "success" });
+    await loadPasskeys();
+  } catch (e) {
+    toast.add({ title: errorMessage(e, t("passkeys.removeError", "Could not remove the passkey.")), color: "error" });
+  } finally {
+    removingId.value = null;
+  }
+}
+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);
+}
+onMounted(loadPasskeys);
 </script>
 
 <template>
   <UContainer>
     <UPage>
       <UPageBody>
-        <UPageCard :title="t('changePassword.title', 'Change password')">
-          <UFormField
-            :label="t('changePassword.current.label', 'Current password')"
-            name="currentPassword"
-          >
-            <UInput
-              v-model="currentPassword"
-              type="password"
-            />
-          </UFormField>
-          <UFormField
-            :label="t('changePassword.new.label', 'New password')"
-            name="newPassword"
-          >
-            <UInput
-              v-model="newPassword"
-              type="password"
-            />
-          </UFormField>
-          <UFormField
-            :label="t('changePassword.confirm.label', 'Confirm new password')"
-            name="confirmNewPassword"
+        <UPageCard
+          :title="t('password.title', 'Password')"
+          :description="t('password.description', 'Change your password.')"
+          variant="subtle"
+        >
+          <UForm
+            :schema="passwordSchema"
+            :state="passwordState"
+            class="space-y-4"
+            @submit="onSubmitPassword"
           >
-            <UInput
-              v-model="confirmNewPassword"
-              type="password"
+            <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')"
             />
-          </UFormField>
-          <UButton
-            class="mt-4"
-            :loading="pending"
-            :label="t('changePassword.submit', 'Change password')"
-            @click="onSubmitPassword"
-          />
+          </UForm>
         </UPageCard>
+
         <UPageCard
           v-if="passkeys?.isEnabled.value"
-          class="mt-4"
           :title="t('passkeys.title', 'Passkeys')"
+          :description="t('passkeys.description', 'Sign in with your fingerprint, face or device PIN instead of a password.')"
+          variant="subtle"
         >
-          <UButton
-            :loading="passkeyPending"
-            :label="t('passkeys.register', 'Register a passkey')"
-            @click="onRegisterPasskey"
-          />
+          <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>
+
+          <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')"
+            />
+          </form>
         </UPageCard>
-        <UAlert
-          v-if="error"
-          class="mt-4"
-          color="error"
-          :title="error"
-        />
       </UPageBody>
     </UPage>
   </UContainer>

package/dist/runtime/app/utils/documents.d.ts

@@ -0,0 +1,5 @@
+import type { AccountDocument } from '../../../types.js';
+/** Label in `locale`, falling back to `en`, then the first available value. */
+export declare function documentLabel(document: AccountDocument, locale: string): string;
+/** The documents a user with `role` may see: everything without `roles`, otherwise only matching roles. */
+export declare function visibleDocuments(documents: AccountDocument[], role: string | undefined): AccountDocument[];

package/dist/runtime/app/utils/documents.js

@@ -0,0 +1,7 @@
+export function documentLabel(document, locale) {
+  if (typeof document.label === "string") return document.label;
+  return document.label[locale] ?? document.label.en ?? Object.values(document.label)[0] ?? document.id;
+}
+export function visibleDocuments(documents, role) {
+  return documents.filter((document) => !document.roles?.length || !!role && document.roles.includes(role));
+}

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

@@ -2,38 +2,76 @@
   "account": {
     "title": "Konto",
     "menu": {
-      "label": "Konto Menu"
+      "label": "Konto Menu",
+      "account": {
+        "label": "Konto",
+        "description": "Din konto."
+      },
+      "profile": {
+        "label": "Profil",
+        "description": "Administrer dine profiloplysninger og e-mailadresse."
+      },
+      "security": {
+        "label": "Sikkerhed",
+        "description": "Skift din adgangskode og administrer adgangsnøgler."
+      },
+      "documents": {
+        "label": "Dokumenter",
+        "description": "Håndbøger og andre filer til dig."
+      },
+      "apiTokens": {
+        "label": "API-nøgler",
+        "description": "Opret nøgler til scripts og værktøjer."
+      }
     },
     "identificationCode": {
       "title": "Frigear ID",
-      "description": "Tryk her for at vise dit ID."
+      "description": "Tryk her for at vise dit ID.",
+      "expiresIn": "Fornyes om {time}s",
+      "refresh": "Opdater",
+      "role": "Rolle",
+      "error": "Kunne ikke oprette dit Frigear ID."
     },
     "profile": {
       "title": "Profil",
       "description": "Skift dine brugeroplysninger.",
       "name": {
         "label": "Navn",
-        "description": "Dit fulde navn."
+        "description": "Dit fulde navn.",
+        "required": "Indtast dit navn."
       },
       "email": {
         "label": "E-mail",
         "description": "Din awesome e-mail.",
         "change": {
           "title": "Skift din e-mail",
-          "label": "Ny e-mail"
-        }
+          "label": "Ny e-mail",
+          "sent": {
+            "title": "Tjek din indbakke",
+            "description": "Vi har sendt et link til din nye adresse. Ændringen træder først i kraft når du bekræfter den."
+          },
+          "done": "Din e-mailadresse er ændret.",
+          "failed": "Bekræftelseslinket er ugyldigt eller udløbet.",
+          "error": "Kunne ikke ændre din e-mailadresse."
+        },
+        "invalid": "Indtast en gyldig e-mailadresse."
       },
       "avatar": {
         "label": "Avatar",
-        "description": "JPG, GIF eller PNG. 1MB Max.",
-        "url": "Avatar URL"
+        "description": "Link til et kvadratisk billede.",
+        "url": "Avatar URL",
+        "invalid": "Indtast en gyldig URL."
       },
-      "save": "Gem profil"
+      "save": "Gem profil",
+      "saved": "Profil opdateret",
+      "saveFailed": "Kunne ikke opdatere din profil.",
+      "cancel": "Annuller"
     },
     "documents": {
       "title": "Dokumenter",
       "description": "Dine dokumenter.",
-      "download": "Download"
+      "download": "Download",
+      "empty": "Ingen dokumenter til dig endnu."
     },
     "security": {
       "title": "Sikkerhed",
@@ -46,19 +84,105 @@
         "title": "Skift password",
         "submit": "Skift password",
         "new": {
-          "label": "Nyt password"
+          "label": "Nyt password",
+          "min": "Brug mindst 8 tegn."
         },
         "confirm": {
-          "label": "Bekræft nyt password"
+          "label": "Bekræft nyt password",
+          "mismatch": "Passwords er ikke ens."
         },
         "current": {
-          "label": "Nuværende password"
-        }
+          "label": "Nuværende password",
+          "required": "Indtast dit nuværende password."
+        },
+        "success": "Dit password er skiftet.",
+        "error": "Kunne ikke skifte dit password."
       },
       "passkeys": {
         "title": "Passkeys",
-        "register": "Registrér en passkey"
+        "register": "Registrér en passkey",
+        "description": "Log ind med fingeraftryk, ansigt eller enhedens pinkode i stedet for et password.",
+        "unnamed": "Passkey",
+        "created": "Tilføjet {date}",
+        "remove": "Fjern passkey",
+        "empty": "Du har ikke tilføjet nogen passkeys endnu.",
+        "name": {
+          "label": "Navn på passkey",
+          "placeholder": "Navn, fx MacBook"
+        },
+        "registered": "Passkey tilføjet.",
+        "registerError": "Kunne ikke registrere passkey.",
+        "removed": "Passkey fjernet.",
+        "removeError": "Kunne ikke fjerne passkey.",
+        "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",
+      "copied": "Nøglen er kopieret.",
+      "copiedSnippet": "Kopieret.",
+      "copyError": "Kunne ikke kopiere. Markér nøglen og kopiér den manuelt.",
+      "create": {
+        "title": "Opret en 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"
+      },
+      "createError": "Kunne ikke oprette nøglen.",
+      "name": {
+        "label": "Navn",
+        "placeholder": "fx Min MCP-klient",
+        "required": "Giv nøglen et navn."
+      },
+      "scopes": {
+        "label": "Rettigheder",
+        "placeholder": "Vælg hvad nøglen må",
+        "required": "Vælg mindst én rettighed."
+      },
+      "expiry": {
+        "label": "Udløber",
+        "30": "30 dage",
+        "90": "90 dage",
+        "365": "1 år",
+        "never": "Udløber aldrig"
+      },
+      "reveal": {
+        "title": "Kopiér din nye nøgle nu",
+        "description": "Det er eneste gang, den vises. Mister du den, skal du oprette en ny.",
+        "label": "Ny nøgle",
+        "done": "Færdig"
+      },
+      "connect": {
+        "title": "Forbind til MCP",
+        "description": "Brug din konto fra en AI-assistent. Din API-nøgle indsættes kun i kommandoerne lige efter, du har oprettet den.",
+        "claude": {
+          "steps": "Claude.ai og Claude Desktop: åbn Indstillinger → Connectors → Tilføj brugerdefineret connector, indsæt URL'en nedenfor og log ind, når du bliver bedt om det. Ingen nøgle nødvendig.",
+          "cli": "Claude Code (bruger en API-nøgle):"
+        },
+        "chatgpt": {
+          "steps": "ChatGPT: åbn Indstillinger → Connectors → Avanceret, slå udviklertilstand til, og opret en connector med URL'en nedenfor. Vælg OAuth og log ind, når du bliver bedt om det. Ingen nøgle nødvendig."
+        }
+      },
+      "list": {
+        "title": "Dine nøgler",
+        "description": "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}"
+      },
+      "status": {
+        "ok": "Aktiv",
+        "revoked": "Trukket tilbage",
+        "expired": "Udløbet"
+      },
+      "revoke": "Træk nøgle tilbage",
+      "revoked": "Nøglen er trukket tilbage.",
+      "revokeError": "Kunne ikke trække nøglen tilbage."
     }
   }
 }