@frigear-nu/account 0.0.7 → 0.0.9

package/dist/runtime/app/pages/documents.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+<script setup>
+import { documentLabel, visibleDocuments } from "../utils/documents";
+defineOptions({ name: "AccountDocumentsPage" });
+const t = useModuleT("account.documents");
+const { user } = useUserSession();
+const nuxtApp = useNuxtApp();
+const locale = computed(() => nuxtApp.$i18n?.locale?.value ?? "en");
+const documents = computed(() => visibleDocuments(useRuntimeConfig().public.account?.documents ?? [], user.value?.role));
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <UPageBody>
+        <UPageGrid v-if="documents.length">
+          <UPageCard
+            v-for="document in documents"
+            :key="document.id"
+            :title="documentLabel(document, locale)"
+            :icon="document.icon ?? 'i-lucide-file'"
+          >
+            <UButton
+              download
+              external
+              :to="document.path"
+              icon="i-lucide-download"
+              :label="t('download', 'Download')"
+            />
+          </UPageCard>
+        </UPageGrid>
+        <UEmpty
+          v-else
+          :title="t('empty', 'No documents for you yet.')"
+        />
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/documents.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/pages/layout.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,10 @@
+<script setup>
+defineOptions({ name: "AccountLayoutPage" });
+</script>
+
+<template>
+  <div>
+    <AccountHeader />
+    <NuxtPage />
+  </div>
+</template>

package/dist/runtime/app/pages/layout.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,22 +1,62 @@
 <script setup>
+import { z } from "zod";
 defineOptions({ name: "AccountProfilePage" });
 const t = useModuleT("account.profile");
+const toast = useToast();
+const route = useRoute();
 const { user } = useUserSession();
-const { updateProfileDetails, changeEmailAddress, pending, error } = useAccount();
-const name = ref(user.value?.name ?? "");
-const avatar = ref(user.value?.avatar ?? void 0);
-const email = ref(user.value?.email ?? "");
-watch(user, (newUser) => {
-  if (!newUser) return;
-  name.value = newUser.name;
-  avatar.value = newUser.avatar;
-  email.value = newUser.email;
+const { updateProfileDetails, changeEmailAddress, error } = useAccount();
+const schema = z.object({
+  name: z.string().trim().min(1, t("name.required", "Please enter your name.")),
+  avatar: z.union([z.literal(""), z.url(t("avatar.invalid", "Enter a valid URL."))]).optional()
 });
-async function onSubmitProfile() {
-  await updateProfileDetails({ name: name.value, avatar: avatar.value });
+const state = reactive({
+  name: user.value?.name ?? "",
+  avatar: user.value?.avatar ?? ""
+});
+const saved = computed(() => ({ name: user.value?.name ?? "", avatar: user.value?.avatar ?? "" }));
+let lastSynced = { ...saved.value };
+watch(saved, (next) => {
+  const pristine = state.name === lastSynced.name && state.avatar === lastSynced.avatar;
+  lastSynced = { ...next };
+  if (pristine) {
+    state.name = next.name;
+    state.avatar = next.avatar;
+  }
+});
+const dirty = computed(() => state.name !== saved.value.name || state.avatar !== saved.value.avatar);
+const saving = ref(false);
+async function onSubmitProfile(event) {
+  saving.value = true;
+  try {
+    await updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || void 0 });
+    toast.add({ title: t("saved", "Profile updated"), color: "success" });
+  } catch (e) {
+    toast.add({ title: e.statusMessage ?? t("saveFailed", "Could not update your profile."), color: "error" });
+  } finally {
+    saving.value = false;
+  }
 }
+const emailModalOpen = ref(false);
+const newEmail = ref("");
+const emailPending = ref(false);
+const emailVerificationSent = ref(false);
+const emailChanged = computed(() => route.query["email-changed"] === "1");
+const emailChangeFailed = computed(() => route.query.error === "email-change");
+const emailSchema = z.object({ email: z.email(t("email.invalid", "Enter a valid email address.")) });
 async function onSubmitEmail() {
-  await changeEmailAddress({ email: email.value });
+  emailPending.value = true;
+  try {
+    const result = await changeEmailAddress({ email: newEmail.value });
+    emailVerificationSent.value = result.verificationRequired;
+    emailModalOpen.value = false;
+    newEmail.value = "";
+    toast.add({ title: result.verificationRequired ? t("email.change.sent.title", "Check your inbox") : t("email.change.done", "Your email address was changed."), color: "success" });
+  } catch (e) {
+    toast.add({ title: e.statusMessage ?? t("email.change.error", "Could not change your email address."), color: "error" });
+  } finally {
+    emailPending.value = false;
+  }
 }
 </script>
 
@@ -24,52 +64,154 @@ async function onSubmitEmail() {
   <UContainer>
     <UPage>
       <UPageBody>
-        <UPageCard :title="t('title', 'Profile')">
-          <UFormField
-            :label="t('name.label', 'Name')"
-            name="name"
-          >
-            <UInput v-model="name" />
-          </UFormField>
-          <UFormField
-            :label="t('avatar.url', 'Avatar URL')"
-            name="avatar"
+        <UAlert
+          v-if="emailChanged"
+          color="success"
+          variant="subtle"
+          :title="t('email.change.done', 'Your email address was changed.')"
+        />
+        <UAlert
+          v-if="emailChangeFailed"
+          color="error"
+          variant="subtle"
+          :title="t('email.change.failed', 'This confirmation link is invalid or has expired.')"
+        />
+        <UAlert
+          v-if="emailVerificationSent"
+          variant="subtle"
+          :title="t('email.change.sent.title', 'Check your inbox')"
+          :description="t('email.change.sent.description', 'We sent a link to your new address. It takes effect once you confirm it.')"
+        />
+
+        <UForm
+          id="profile"
+          :schema="schema"
+          :state="state"
+          @submit="onSubmitProfile"
+        >
+          <UPageCard
+            variant="subtle"
+            :title="t('title', 'Profile')"
+            :description="t('description', 'Change your information.')"
           >
-            <UInput v-model="avatar" />
-          </UFormField>
-          <UButton
-            class="mt-4"
-            :loading="pending"
-            :label="t('save', 'Save')"
-            @click="onSubmitProfile"
-          />
-        </UPageCard>
+            <UFormField
+              name="name"
+              :label="t('name.label', 'Name')"
+              :description="t('name.description', 'Your full name.')"
+              required
+              class="flex items-start justify-between gap-4 max-sm:flex-col"
+            >
+              <UInput
+                v-model="state.name"
+                autocomplete="name"
+              />
+            </UFormField>
+            <USeparator />
+            <UFormField
+              name="avatar"
+              :label="t('avatar.label', 'Avatar')"
+              :description="t('avatar.description', 'Link to a square image.')"
+              class="flex items-start justify-between gap-4 max-sm:flex-col"
+            >
+              <div class="flex items-center gap-3">
+                <UAvatar
+                  :src="state.avatar || void 0"
+                  :alt="state.name"
+                  size="xl"
+                />
+                <UInput
+                  v-model="state.avatar"
+                  type="url"
+                  placeholder="https://"
+                  :aria-label="t('avatar.url', 'Avatar URL')"
+                />
+              </div>
+            </UFormField>
+            <USeparator />
+            <div class="flex justify-end">
+              <UButton
+                type="submit"
+                :loading="saving"
+                :disabled="!dirty"
+                :label="t('save', 'Save profile')"
+              />
+            </div>
+          </UPageCard>
+        </UForm>
+
         <UPageCard
-          class="mt-4"
-          :title="t('email.label', 'Email address')"
+          variant="subtle"
+          :title="t('email.label', 'Email')"
+          :description="t('email.description', 'Your email address.')"
         >
-          <UFormField
-            :label="t('email.label', 'Email')"
-            name="email"
-          >
+          <div class="flex items-center justify-between gap-4 max-sm:flex-col max-sm:items-start">
             <UInput
-              v-model="email"
+              :model-value="user?.email ?? ''"
               type="email"
+              readonly
+              disabled
+              class="w-full sm:max-w-xs"
+              :aria-label="t('email.label', 'Email')"
             />
-          </UFormField>
-          <UButton
-            class="mt-4"
-            :loading="pending"
-            :label="t('email.change.title', 'Change email')"
-            @click="onSubmitEmail"
-          />
+            <UButton
+              variant="subtle"
+              trailing-icon="i-lucide-pencil"
+              :label="t('email.change.title', 'Change email')"
+              @click="emailModalOpen = true"
+            />
+          </div>
         </UPageCard>
+
         <UAlert
           v-if="error"
-          class="mt-4"
           color="error"
+          variant="subtle"
           :title="error"
         />
+
+        <UModal
+          v-model:open="emailModalOpen"
+          :title="t('email.change.title', 'Change email')"
+        >
+          <template #body>
+            <UForm
+              id="change-email"
+              :schema="emailSchema"
+              :state="{ email: newEmail }"
+              class="flex flex-col gap-4"
+              @submit="onSubmitEmail"
+            >
+              <UFormField
+                name="email"
+                :label="t('email.change.label', 'New e-mail')"
+                required
+              >
+                <UInput
+                  v-model="newEmail"
+                  type="email"
+                  autocomplete="email"
+                  class="w-full"
+                />
+              </UFormField>
+            </UForm>
+          </template>
+          <template #footer>
+            <div class="flex w-full justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="outline"
+                :label="t('cancel', 'Cancel')"
+                @click="emailModalOpen = false"
+              />
+              <UButton
+                type="submit"
+                form="change-email"
+                :loading="emailPending"
+                :label="t('email.change.title', 'Change email')"
+              />
+            </div>
+          </template>
+        </UModal>
       </UPageBody>
     </UPage>
   </UContainer>

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));
+}