@frigear-nu/account 0.1.2 → 0.1.3

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

@@ -10,26 +10,41 @@ const documents = computed(() => visibleDocuments(useRuntimeConfig().public.acco
 
 <template>
   <div class="flex flex-col gap-4">
-    <SectionCard>
-      <UPageGrid v-if="documents.length">
-        <UPageCard
+    <AccountHeader />
+
+    <SectionCard flush>
+      <ul
+        v-if="documents.length"
+        class="divide-y divide-default"
+      >
+        <li
           v-for="document in documents"
           :key="document.id"
-          :title="documentLabel(document, locale)"
-          :icon="document.icon ?? 'i-lucide-file'"
+          class="flex items-center gap-3 px-4 py-3"
         >
+          <UIcon
+            :name="document.icon ?? 'i-lucide-file'"
+            class="size-5 shrink-0 text-muted"
+          />
+          <p class="min-w-0 flex-1 truncate text-sm font-medium text-highlighted">
+            {{ documentLabel(document, locale) }}
+          </p>
           <UButton
             download
             external
             :to="document.path"
+            color="neutral"
+            variant="outline"
             icon="i-lucide-download"
             :label="t('download', 'Download')"
+            :aria-label="t('downloadNamed', 'Download {name}', { name: documentLabel(document, locale) })"
           />
-        </UPageCard>
-      </UPageGrid>
+        </li>
+      </ul>
       <UEmpty
         v-else
         variant="naked"
+        icon="i-lucide-files"
         :title="t('empty', 'No documents for you yet.')"
       />
     </SectionCard>

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

@@ -1,6 +1,5 @@
 <script setup>
 defineOptions({ name: "AccountIndexPage" });
-definePageMeta({ heading: false });
 const t = useModuleT("account");
 const { user } = useUserSession();
 const { localize } = useLocaleLink();
@@ -18,10 +17,7 @@ const profile = computed(() => {
 
 <template>
   <div class="flex flex-col gap-4">
-    <PageHeading
-      :title="t('overview.title', 'Account')"
-      :description="t('overview.description', 'Your details and everything that belongs to your account.')"
-    />
+    <AccountHeader />
 
     <SectionCard>
       <div class="flex flex-wrap items-center justify-between gap-4">
@@ -32,7 +28,7 @@ const profile = computed(() => {
           size="lg"
           :ui="{ name: 'truncate', description: 'truncate' }"
         />
-        <AccountHeaderRight />
+        <AccountIdentity />
       </div>
     </SectionCard>
 
@@ -41,6 +37,7 @@ const profile = computed(() => {
       v-if="widgetArea"
       name="account.overview"
       :context="{ user }"
+      grid-class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
     />
 
     <ListCard

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

@@ -1,14 +1,19 @@
 <script setup>
 import { z } from "zod";
+import AccountChangeEmailSlideover from "../components/Account/AccountChangeEmailSlideover.vue";
 defineOptions({ name: "AccountProfilePage" });
 const t = useModuleT("account.profile");
 const toast = useToast();
 const route = useRoute();
 const { user } = useUserSession();
-const { updateProfileDetails, changeEmailAddress } = useAccount();
+const { updateProfileDetails } = 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()
+  // The server's rule: an http(s) URL of at most 2048 characters (empty clears the avatar).
+  avatar: z.union([
+    z.literal(""),
+    z.url({ protocol: /^https?$/, message: t("avatar.invalid", "Enter a valid URL.") }).max(2048, t("avatar.invalid", "Enter a valid URL."))
+  ]).optional()
 });
 const state = reactive({
   name: user.value?.name ?? "",
@@ -28,32 +33,32 @@ const dirty = computed(() => state.name !== saved.value.name || state.avatar !==
 const profileAction = useAction();
 function onSubmitProfile(event) {
   return profileAction.run(
-    () => updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || void 0 }),
+    () => updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || null }),
     { success: t("saved", "Profile updated"), error: t("saveFailed", "Could not update your profile.") }
   );
 }
-const emailModalOpen = ref(false);
-const newEmail = ref("");
 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.")) });
-const emailAction = useAction();
-async function onSubmitEmail() {
-  const result = await emailAction.run(
-    () => changeEmailAddress({ email: newEmail.value }),
-    { error: t("email.change.error", "Could not change your email address.") }
-  );
+const overlay = useOverlay();
+const emailSlideover = overlay.create(AccountChangeEmailSlideover, { destroyOnClose: true });
+async function onChangeEmail() {
+  const result = await emailSlideover.open({ email: user.value?.email ?? void 0 });
   if (!result) return;
-  emailVerificationSent.value = result.verificationRequired === true;
-  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" });
+  emailVerificationSent.value = result.verificationRequired;
+  toast.add({
+    title: result.verificationRequired ? t("email.change.sent.title", "Check your inbox") : t("email.change.done", "Your email address was changed."),
+    description: result.verificationRequired ? void 0 : user.value?.email ?? void 0,
+    color: "success",
+    icon: "i-lucide-check"
+  });
 }
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
+    <AccountHeader />
+
     <UAlert
       v-if="emailChanged"
       color="success"
@@ -74,52 +79,51 @@ async function onSubmitEmail() {
     />
 
     <SectionCard
-      :title="t('title', 'Profile')"
-      :description="t('description', 'Change your information.')"
+      :title="t('details.title', 'Name and avatar')"
+      :description="t('details.description', 'How you appear to others.')"
     >
       <UForm
         id="account-profile"
         :schema="schema"
         :state="state"
-        class="flex flex-col gap-4"
+        class="flex flex-col divide-y divide-default"
         @submit="onSubmitProfile"
       >
-        <UFormField
+        <FormRow
           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"
+            class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <USeparator />
-        <UFormField
+        </FormRow>
+        <FormRow
           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">
+          <div class="flex items-center gap-3 sm:max-w-sm">
             <UAvatar
               :src="state.avatar || void 0"
               :alt="state.name"
-              size="xl"
+              size="lg"
             />
             <UInput
               v-model="state.avatar"
               type="url"
               placeholder="https://"
               :aria-label="t('avatar.url', 'Avatar URL')"
+              class="min-w-0 flex-1"
             />
           </div>
-        </UFormField>
+        </FormRow>
       </UForm>
       <template #footer>
-        <div class="flex justify-end">
+        <div class="flex justify-end gap-2">
           <UButton
             type="submit"
             form="account-profile"
@@ -131,71 +135,28 @@ async function onSubmitEmail() {
       </template>
     </SectionCard>
 
-    <SectionCard
-      :title="t('email.label', 'Email')"
-      :description="t('email.description', 'Your email address.')"
-    >
-      <template #actions>
-        <UButton
-          color="neutral"
-          variant="outline"
-          icon="i-lucide-pencil"
-          :label="t('email.change.title', 'Change email')"
-          @click="emailModalOpen = true"
-        />
-      </template>
-      <UInput
-        :model-value="user?.email ?? ''"
-        type="email"
-        readonly
-        disabled
-        class="w-full sm:max-w-xs"
-        :aria-label="t('email.label', 'Email')"
-      />
-    </SectionCard>
-
-    <UModal
-      v-model:open="emailModalOpen"
-      :title="t('email.change.title', 'Change email')"
-    >
-      <template #body>
-        <UForm
-          id="account-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">
+    <SectionCard :title="t('email.label', 'Email')">
+      <FormRow
+        :label="t('email.address', 'Address')"
+        :description="t('email.description', 'Where we send messages and how you sign in.')"
+      >
+        <div class="flex flex-wrap items-center gap-2 sm:max-w-lg">
+          <UInput
+            :model-value="user?.email ?? ''"
+            type="email"
+            readonly
+            disabled
+            class="min-w-48 flex-1"
+          />
           <UButton
             color="neutral"
             variant="outline"
-            :label="t('cancel', 'Cancel')"
-            @click="emailModalOpen = false"
-          />
-          <UButton
-            type="submit"
-            form="account-change-email"
-            :loading="emailAction.busy.value"
+            icon="i-lucide-pencil"
             :label="t('email.change.title', 'Change email')"
+            @click="onChangeEmail"
           />
         </div>
-      </template>
-    </UModal>
+      </FormRow>
+    </SectionCard>
   </div>
 </template>

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

@@ -1,5 +1,7 @@
 <script setup>
 import { z } from "zod";
+import { authApi } from "@frigear-nu/auth/api";
+import AccountPasskeySlideover from "../components/Account/AccountPasskeySlideover.vue";
 defineOptions({ name: "AccountSecurityPage" });
 const t = useModuleT("account.security");
 const toast = useToast();
@@ -33,34 +35,25 @@ async function onSubmitPassword(event) {
   passwordState.newPassword = "";
   passwordState.confirmNewPassword = "";
 }
-const passkeyName = ref("");
-const passkeyPending = ref(false);
 const {
   data: passkeyData,
   error: passkeysError,
   loading: passkeysLoading,
   refresh: loadPasskeys
-} = await useCachedFetch("/api/auth/webauthn/credentials", {
+} = await useCachedFetch(authApi.me.passkeys, {
   key: () => `account:passkeys:${user.value?.id ?? "anonymous"}`,
   ttl: 0,
   immediate: webAuthnEnabled,
   watch: false
 });
 const passkeyList = computed(() => passkeyData.value ?? []);
-async function onRegisterPasskey() {
-  passkeyPending.value = true;
-  try {
-    await passkeys?.registerPasskey(user.value?.email ?? "", passkeyName.value);
-    passkeyName.value = "";
-    toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success", icon: "i-lucide-check" });
-    await loadPasskeys();
-  } catch (e) {
-    if (e?.name !== "NotAllowedError") {
-      showError(e, t("passkeys.registerError", "Could not register the passkey."));
-    }
-  } finally {
-    passkeyPending.value = false;
-  }
+const overlay = useOverlay();
+const passkeySlideover = overlay.create(AccountPasskeySlideover, { destroyOnClose: true });
+async function onAddPasskey() {
+  const added = await passkeySlideover.open({ userName: user.value?.email ?? "" });
+  if (!added) return;
+  toast.add({ title: t("passkeys.registered", "Passkey added."), color: "success", icon: "i-lucide-check" });
+  await loadPasskeys();
 }
 const passkeyLabel = (passkey) => passkey.name || t("passkeys.unnamed", "Passkey");
 async function onRemovePasskey(passkey) {
@@ -86,6 +79,8 @@ const passkeyMenu = (passkey) => [[
 
 <template>
   <div class="flex flex-col gap-4">
+    <AccountHeader />
+
     <SectionCard
       :title="t('password.title', 'Password')"
       :description="t('password.description', 'Change your password.')"
@@ -94,10 +89,10 @@ const passkeyMenu = (passkey) => [[
         id="account-change-password"
         :schema="passwordSchema"
         :state="passwordState"
-        class="flex flex-col gap-4"
+        class="flex flex-col divide-y divide-default"
         @submit="onSubmitPassword"
       >
-        <UFormField
+        <FormRow
           :label="t('changePassword.current.label', 'Current password')"
           name="currentPassword"
           required
@@ -108,8 +103,8 @@ const passkeyMenu = (passkey) => [[
             autocomplete="current-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <UFormField
+        </FormRow>
+        <FormRow
           :label="t('changePassword.new.label', 'New password')"
           name="newPassword"
           required
@@ -120,8 +115,8 @@ const passkeyMenu = (passkey) => [[
             autocomplete="new-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
-        <UFormField
+        </FormRow>
+        <FormRow
           :label="t('changePassword.confirm.label', 'Confirm new password')"
           name="confirmNewPassword"
           required
@@ -132,10 +127,10 @@ const passkeyMenu = (passkey) => [[
             autocomplete="new-password"
             class="w-full sm:max-w-sm"
           />
-        </UFormField>
+        </FormRow>
       </UForm>
       <template #footer>
-        <div class="flex justify-end">
+        <div class="flex justify-end gap-2">
           <UButton
             type="submit"
             form="account-change-password"
@@ -153,6 +148,13 @@ const passkeyMenu = (passkey) => [[
       :loading="passkeysLoading"
       flush
     >
+      <template #actions>
+        <UButton
+          icon="i-lucide-plus"
+          :label="t('passkeys.add', 'Add passkey')"
+          @click="onAddPasskey"
+        />
+      </template>
       <ul
         v-if="passkeyList.length"
         class="divide-y divide-default"
@@ -160,21 +162,19 @@ const passkeyMenu = (passkey) => [[
         <li
           v-for="passkey in passkeyList"
           :key="passkey.id"
-          class="flex items-center justify-between gap-3 px-4 py-3"
+          class="flex items-center 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"
-            />
-            <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>
+          <UIcon
+            name="i-lucide-key-round"
+            class="size-5 shrink-0 text-muted"
+          />
+          <div class="min-w-0 flex-1">
+            <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>
           <RowMenu
             :items="passkeyMenu(passkey)"
@@ -195,28 +195,8 @@ const passkeyMenu = (passkey) => [[
         variant="naked"
         icon="i-lucide-key-round"
         :title="t('passkeys.empty', 'You have not added any passkeys yet.')"
+        :actions="[{ label: t('passkeys.add', 'Add passkey'), icon: 'i-lucide-plus', onClick: onAddPasskey }]"
       />
-
-      <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

@@ -1,19 +1,8 @@
-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';
-}
+import type { AuthCreatedTokenDto, AuthTokenDto } from '@frigear-nu/auth/utils';
+export type ApiToken = AuthTokenDto;
 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;
-};
+export type CreatedApiToken = AuthCreatedTokenDto;

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

@@ -39,14 +39,14 @@
       "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.",
+      "details": {
+        "title": "Navn og avatar",
+        "description": "Sådan ser andre dig."
+      },
       "name": {
         "label": "Navn",
         "description": "Dit fulde navn.",
@@ -54,10 +54,12 @@
       },
       "email": {
         "label": "E-mail",
-        "description": "Din awesome e-mail.",
+        "address": "Adresse",
+        "description": "Hvor vi sender beskeder, og hvordan du logger ind.",
         "change": {
           "title": "Skift din e-mail",
           "label": "Ny e-mail",
+          "current": "Din adresse er nu {email}.",
           "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."
@@ -76,13 +78,13 @@
       },
       "save": "Gem profil",
       "saved": "Profil opdateret",
-      "saveFailed": "Kunne ikke opdatere din profil.",
-      "cancel": "Annuller"
+      "saveFailed": "Kunne ikke opdatere din profil."
     },
     "documents": {
       "title": "Dokumenter",
       "description": "Dine dokumenter.",
       "download": "Download",
+      "downloadNamed": "Download {name}",
       "empty": "Ingen dokumenter til dig endnu."
     },
     "security": {
@@ -112,7 +114,7 @@
       },
       "passkeys": {
         "title": "Passkeys",
-        "register": "Registrér en passkey",
+        "add": "Tilføj passkey",
         "description": "Log ind med fingeraftryk, ansigt eller enhedens pinkode i stedet for et password.",
         "unnamed": "Passkey",
         "created": "Tilføjet {date}",
@@ -124,6 +126,7 @@
         "empty": "Du har ikke tilføjet nogen passkeys endnu.",
         "name": {
           "label": "Navn på passkey",
+          "description": "Valgfrit. Gør det nemmere at kende dine passkeys fra hinanden.",
           "placeholder": "Navn, fx MacBook"
         },
         "registered": "Passkey tilføjet.",
@@ -134,7 +137,6 @@
         "tryAgain": "Prøv igen"
       }
     },
-    "signedInAs": "Logget ind som",
     "apiTokens": {
       "title": "API-nøgler",
       "description": "Opret nøgler til scripts og værktøjer.",

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

@@ -39,14 +39,14 @@
       "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.",
+      "details": {
+        "title": "Name and avatar",
+        "description": "How you appear to others."
+      },
       "name": {
         "label": "Name",
         "description": "Your full name.",
@@ -54,10 +54,12 @@
       },
       "email": {
         "label": "E-mail",
-        "description": "Your awesome E-mail.",
+        "address": "Address",
+        "description": "Where we send messages and how you sign in.",
         "change": {
           "title": "Change e-mail",
           "label": "New e-mail",
+          "current": "Your address is now {email}.",
           "sent": {
             "title": "Check your inbox",
             "description": "We sent a link to your new address. It takes effect once you confirm it."
@@ -76,13 +78,13 @@
       },
       "save": "Save profile",
       "saved": "Profile updated",
-      "saveFailed": "Could not update your profile.",
-      "cancel": "Cancel"
+      "saveFailed": "Could not update your profile."
     },
     "documents": {
       "title": "Documents",
       "description": "Your documents.",
       "download": "Download",
+      "downloadNamed": "Download {name}",
       "empty": "No documents for you yet."
     },
     "security": {
@@ -112,7 +114,7 @@
       },
       "passkeys": {
         "title": "Passkeys",
-        "register": "Register a passkey",
+        "add": "Add passkey",
         "description": "Sign in with your fingerprint, face or device PIN instead of a password.",
         "unnamed": "Passkey",
         "created": "Added {date}",
@@ -124,6 +126,7 @@
         "empty": "You have not added any passkeys yet.",
         "name": {
           "label": "Passkey name",
+          "description": "Optional. Helps you tell your passkeys apart.",
           "placeholder": "Name, e.g. MacBook"
         },
         "registered": "Passkey added.",
@@ -134,7 +137,6 @@
         "tryAgain": "Try again"
       }
     },
-    "signedInAs": "Signed in as",
     "apiTokens": {
       "title": "API tokens",
       "description": "Create tokens for scripts and tools.",