@frigear-nu/account 0.0.10 → 0.1.0

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

@@ -1,24 +1,80 @@
 <script setup>
 defineOptions({ name: "AccountIndexPage" });
-const { data: tiles } = useMenu("account");
+definePageMeta({ heading: false });
+const t = useModuleT("account");
+const { user } = useUserSession();
+const { localize } = useLocaleLink();
+const { items } = await useAccountNav();
+const index = useRuntimeConfig().public.account?.pages?.index;
+const WidgetArea = resolveComponent("WidgetArea");
+const widgetArea = typeof WidgetArea === "string" ? void 0 : WidgetArea;
+const shortcuts = computed(() => items.value.filter((item) => item.to !== index));
+const profile = computed(() => {
+  const value = user.value;
+  const name = value?.name || value?.email || t("title", "Account");
+  return { name, email: value?.email ?? void 0, avatar: { src: value?.avatar || void 0, alt: name } };
+});
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody>
-        <UPageGrid>
-          <UPageCard
-            v-for="tile in tiles"
-            :key="tile.id"
-            :title="tile.label"
-            :description="tile.description"
-            :icon="tile.icon"
-            :to="tile.to"
-            orientation="horizontal"
+  <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.')"
+    />
+
+    <SectionCard>
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <UUser
+          :name="profile.name"
+          :description="profile.email"
+          :avatar="profile.avatar"
+          size="lg"
+          :ui="{ name: 'truncate', description: 'truncate' }"
+        />
+        <AccountHeaderRight />
+      </div>
+    </SectionCard>
+
+    <component
+      :is="widgetArea"
+      v-if="widgetArea"
+      name="account.overview"
+      :context="{ user }"
+    />
+
+    <ListCard
+      :title="t('overview.shortcuts', 'Your account')"
+      :is-empty="!shortcuts.length"
+      :empty="t('overview.empty', 'Nothing here yet.')"
+    >
+      <li
+        v-for="item in shortcuts"
+        :key="item.id"
+      >
+        <NuxtLink
+          :to="item.external ? item.to : localize(item.to)"
+          :external="item.external"
+          class="group flex items-center gap-3"
+        >
+          <UIcon
+            v-if="item.icon"
+            :name="item.icon"
+            class="size-5 shrink-0 text-muted"
+          />
+          <span class="min-w-0 flex-1">
+            <span class="block font-medium text-highlighted group-hover:text-primary">{{ item.label }}</span>
+            <span
+              v-if="item.description"
+              class="block truncate text-muted"
+            >{{ item.description }}</span>
+          </span>
+          <UIcon
+            name="i-lucide-chevron-right"
+            class="size-4 shrink-0 text-dimmed"
           />
-        </UPageGrid>
-      </UPageBody>
-    </UPage>
-  </UContainer>
+        </NuxtLink>
+      </li>
+    </ListCard>
+  </div>
 </template>

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

@@ -5,7 +5,7 @@ const t = useModuleT("account.profile");
 const toast = useToast();
 const route = useRoute();
 const { user } = useUserSession();
-const { updateProfileDetails, changeEmailAddress, error } = useAccount();
+const { updateProfileDetails, changeEmailAddress } = 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()
@@ -25,194 +25,177 @@ watch(saved, (next) => {
   }
 });
 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 profileAction = useAction();
+function onSubmitProfile(event) {
+  return profileAction.run(
+    () => updateProfileDetails({ name: event.data.name, avatar: event.data.avatar || void 0 }),
+    { success: t("saved", "Profile updated"), error: t("saveFailed", "Could not update your profile.") }
+  );
 }
 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.")) });
+const emailAction = useAction();
 async function onSubmitEmail() {
-  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;
-  }
+  const result = await emailAction.run(
+    () => changeEmailAddress({ email: newEmail.value }),
+    { error: t("email.change.error", "Could not change your email address.") }
+  );
+  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" });
 }
 </script>
 
 <template>
-  <UContainer>
-    <UPage>
-      <UPageBody>
-        <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.')"
-        />
+  <div class="flex flex-col gap-4">
+    <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"
+    <SectionCard
+      :title="t('title', 'Profile')"
+      :description="t('description', 'Change your information.')"
+    >
+      <UForm
+        id="account-profile"
+        :schema="schema"
+        :state="state"
+        class="flex flex-col gap-4"
+        @submit="onSubmitProfile"
+      >
+        <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"
         >
-          <UPageCard
-            variant="subtle"
-            :title="t('title', 'Profile')"
-            :description="t('description', 'Change your information.')"
-          >
-            <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
-          variant="subtle"
-          :title="t('email.label', 'Email')"
-          :description="t('email.description', 'Your email address.')"
+          <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 justify-between gap-4 max-sm:flex-col max-sm:items-start">
-            <UInput
-              :model-value="user?.email ?? ''"
-              type="email"
-              readonly
-              disabled
-              class="w-full sm:max-w-xs"
-              :aria-label="t('email.label', 'Email')"
+          <div class="flex items-center gap-3">
+            <UAvatar
+              :src="state.avatar || void 0"
+              :alt="state.name"
+              size="xl"
             />
-            <UButton
-              variant="subtle"
-              trailing-icon="i-lucide-pencil"
-              :label="t('email.change.title', 'Change email')"
-              @click="emailModalOpen = true"
+            <UInput
+              v-model="state.avatar"
+              type="url"
+              placeholder="https://"
+              :aria-label="t('avatar.url', 'Avatar URL')"
             />
           </div>
-        </UPageCard>
+        </UFormField>
+      </UForm>
+      <template #footer>
+        <div class="flex justify-end">
+          <UButton
+            type="submit"
+            form="account-profile"
+            :loading="profileAction.busy.value"
+            :disabled="!dirty"
+            :label="t('save', 'Save profile')"
+          />
+        </div>
+      </template>
+    </SectionCard>
 
-        <UAlert
-          v-if="error"
-          color="error"
-          variant="subtle"
-          :title="error"
+    <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')"
+    <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"
         >
-          <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>
+          <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="account-change-email"
+            :loading="emailAction.busy.value"
+            :label="t('email.change.title', 'Change email')"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
 </template>