@frigear-nu/account 0.0.6 → 0.0.8

package/dist/runtime/app/pages/api-tokens.vue

@@ -0,0 +1,308 @@
+<script setup>
+import { z } from "zod";
+defineOptions({ name: "AccountApiTokensPage" });
+const t = useModuleT("account.apiTokens");
+const toast = useToast();
+const { data: tokens, refresh } = await useFetch("/api/auth/tokens", { key: "account-api-tokens", default: () => [] });
+const { data: scopes } = await useFetch("/api/auth/scopes", { key: "account-api-token-scopes", default: () => [] });
+const scopeItems = computed(() => (scopes.value ?? []).map((scope) => ({
+  label: scope.name === "*" ? t("allScopes", "Full access") : scope.name,
+  description: scope.description,
+  value: scope.name
+})));
+const expiryItems = computed(() => [
+  { label: t("expiry.30", "30 days"), value: 30 },
+  { label: t("expiry.90", "90 days"), value: 90 },
+  { label: t("expiry.365", "1 year"), value: 365 },
+  { label: t("expiry.never", "No expiry"), value: 0 }
+]);
+const schema = z.object({
+  name: z.string().trim().min(1, t("name.required", "Give the token a name.")).max(80),
+  scopes: z.array(z.string()).min(1, t("scopes.required", "Pick at least one scope.")),
+  expiresInDays: z.number()
+});
+const state = reactive({ name: "", scopes: [], expiresInDays: 90 });
+const creating = ref(false);
+const revokingId = ref(null);
+const revealed = ref(null);
+function errorMessage(e, fallback) {
+  const err = e;
+  return err?.data?.statusMessage ?? err?.statusMessage ?? fallback;
+}
+async function onCreate(event) {
+  creating.value = true;
+  try {
+    const created = await $fetch("/api/auth/tokens", {
+      method: "POST",
+      body: { name: event.data.name, scopes: event.data.scopes, expiresInDays: event.data.expiresInDays || null }
+    });
+    revealed.value = { name: created.name, token: created.token };
+    state.name = "";
+    state.scopes = [];
+    await refresh();
+  } catch (e) {
+    toast.add({ title: errorMessage(e, t("createError", "Could not create the token.")), color: "error" });
+  } finally {
+    creating.value = false;
+  }
+}
+async function copyText(text, success) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast.add({ title: success, color: "success" });
+  } catch {
+    toast.add({ title: t("copyError", "Could not copy. Select the token and copy it manually."), color: "warning" });
+  }
+}
+const copyToken = () => revealed.value && copyText(revealed.value.token, t("copied", "Token copied."));
+async function onRevoke(token) {
+  revokingId.value = token.id;
+  try {
+    await $fetch(`/api/auth/tokens/${token.id}`, { method: "DELETE" });
+    toast.add({ title: t("revoked", "Token revoked."), color: "success" });
+    await refresh();
+  } catch (e) {
+    toast.add({ title: errorMessage(e, t("revokeError", "Could not revoke the token.")), color: "error" });
+  } finally {
+    revokingId.value = null;
+  }
+}
+const mcpEnabled = useRuntimeConfig().public.users?.mcp === true;
+const activeConnect = ref("claude");
+const mcpUrl = `${useRequestURL().origin}/mcp`;
+const tokenPlaceholder = "<your-api-token>";
+const shownToken = computed(() => revealed.value?.token ?? tokenPlaceholder);
+const connectTabs = computed(() => [
+  {
+    label: "Claude",
+    value: "claude",
+    steps: t("connect.claude.steps", "Claude.ai and Claude Desktop: open Settings \u2192 Connectors \u2192 Add custom connector, paste the URL below and sign in when asked. No token needed."),
+    code: mcpUrl,
+    extraSteps: t("connect.claude.cli", "Claude Code (uses an API token):"),
+    extraCode: `claude mcp add --transport http frigear ${mcpUrl} --header "Authorization: Bearer ${shownToken.value}"`
+  },
+  {
+    label: "ChatGPT",
+    value: "chatgpt",
+    steps: t("connect.chatgpt.steps", "ChatGPT: open Settings \u2192 Connectors \u2192 Advanced, turn on Developer mode, then create a connector with the URL below. Choose OAuth and sign in when asked. No token needed."),
+    code: mcpUrl
+  }
+]);
+const dateFormatter = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+function formatDate(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : dateFormatter.format(date);
+}
+function statusColor(status) {
+  return status === "ok" ? "success" : status === "expired" ? "warning" : "neutral";
+}
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <UPageBody>
+        <UPageCard
+          :title="t('create.title', 'Create an API token')"
+          :description="t('create.description', 'Tokens let scripts and tools such as MCP clients act as you. Give each one only the scopes it needs.')"
+          variant="subtle"
+        >
+          <UAlert
+            v-if="revealed"
+            color="success"
+            variant="subtle"
+            icon="i-lucide-key-round"
+            :title="t('reveal.title', 'Copy your new token now')"
+            :description="t('reveal.description', 'This is the only time it is shown. If you lose it, create a new one.')"
+          >
+            <template #actions>
+              <UInput
+                :model-value="revealed.token"
+                readonly
+                class="w-full sm:w-96"
+                :aria-label="t('reveal.label', 'New token')"
+                @focus="$event.target.select()"
+              />
+              <UButton
+                icon="i-lucide-copy"
+                :label="t('copy', 'Copy')"
+                @click="copyToken"
+              />
+              <UButton
+                color="neutral"
+                variant="ghost"
+                :label="t('reveal.done', 'Done')"
+                @click="revealed = null"
+              />
+            </template>
+          </UAlert>
+
+          <UForm
+            :schema="schema"
+            :state="state"
+            class="space-y-4"
+            @submit="onCreate"
+          >
+            <UFormField
+              :label="t('name.label', 'Name')"
+              name="name"
+              required
+            >
+              <UInput
+                v-model="state.name"
+                :placeholder="t('name.placeholder', 'e.g. My MCP client')"
+                maxlength="80"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('scopes.label', 'Scopes')"
+              name="scopes"
+              required
+            >
+              <USelectMenu
+                v-model="state.scopes"
+                :items="scopeItems"
+                value-key="value"
+                multiple
+                :placeholder="t('scopes.placeholder', 'Choose what the token may do')"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('expiry.label', 'Expires')"
+              name="expiresInDays"
+            >
+              <USelect
+                v-model="state.expiresInDays"
+                :items="expiryItems"
+                value-key="value"
+                class="w-full sm:max-w-xs"
+              />
+            </UFormField>
+            <UButton
+              type="submit"
+              :loading="creating"
+              :label="t('create.submit', 'Create token')"
+            />
+          </UForm>
+        </UPageCard>
+
+        <UPageCard
+          v-if="mcpEnabled"
+          :title="t('connect.title', 'Connect to MCP')"
+          :description="t('connect.description', 'Use your account from an AI assistant. Your API token is only filled into the commands right after you create it.')"
+          variant="subtle"
+        >
+          <UTabs
+            v-model="activeConnect"
+            :items="connectTabs"
+            :content="false"
+            class="w-full"
+          />
+          <template
+            v-for="tab in connectTabs"
+            :key="tab.value"
+          >
+            <div
+              v-if="tab.value === activeConnect"
+              class="min-w-0 max-w-full space-y-3"
+            >
+              <p class="text-sm text-muted">
+                {{ tab.steps }}
+              </p>
+              <div class="relative min-w-0">
+                <pre class="max-w-full whitespace-pre-wrap break-all rounded-md bg-elevated p-3 pr-12 text-sm"><code>{{ tab.code }}</code></pre>
+                <UButton
+                  class="absolute right-2 top-2"
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  icon="i-lucide-copy"
+                  :aria-label="t('copy', 'Copy')"
+                  @click="copyText(tab.code, t('copiedSnippet', 'Copied.'))"
+                />
+              </div>
+              <template v-if="tab.extraCode">
+                <p class="text-sm text-muted">
+                  {{ tab.extraSteps }}
+                </p>
+                <div class="relative min-w-0">
+                  <pre class="max-w-full whitespace-pre-wrap break-all rounded-md bg-elevated p-3 pr-12 text-sm"><code>{{ tab.extraCode }}</code></pre>
+                  <UButton
+                    class="absolute right-2 top-2"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    icon="i-lucide-copy"
+                    :aria-label="t('copy', 'Copy')"
+                    @click="copyText(tab.extraCode ?? '', t('copiedSnippet', 'Copied.'))"
+                  />
+                </div>
+              </template>
+            </div>
+          </template>
+        </UPageCard>
+
+        <UPageCard
+          :title="t('list.title', 'Your tokens')"
+          :description="t('list.description', 'Revoke a token to stop it working immediately.')"
+          variant="subtle"
+        >
+          <ul
+            v-if="tokens?.length"
+            class="divide-y divide-default"
+          >
+            <li
+              v-for="token in tokens"
+              :key="token.id"
+              class="flex items-center justify-between gap-3 py-3"
+            >
+              <div class="min-w-0">
+                <p class="flex items-center gap-2 truncate font-medium text-highlighted">
+                  {{ token.name }}
+                  <UBadge
+                    :color="statusColor(token.status)"
+                    variant="subtle"
+                    :label="t(`status.${token.status}`, token.status)"
+                  />
+                </p>
+                <p class="font-mono text-sm text-muted">
+                  {{ token.prefix }}…{{ token.last4 }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ token.scopes.join(", ") }}
+                </p>
+                <p class="text-sm text-muted">
+                  {{ t("list.created", "Created {date}", { date: formatDate(token.createdAt) }) }}
+                  <template v-if="token.lastUsedAt">
+                    · {{ t("list.lastUsed", "Last used {date}", { date: formatDate(token.lastUsedAt) }) }}
+                  </template>
+                  <template v-if="token.expiresAt">
+                    · {{ t("list.expires", "Expires {date}", { date: formatDate(token.expiresAt) }) }}
+                  </template>
+                </p>
+              </div>
+              <UButton
+                v-if="token.status !== 'revoked'"
+                color="error"
+                variant="ghost"
+                icon="i-lucide-trash-2"
+                :loading="revokingId === token.id"
+                :aria-label="t('revoke', 'Revoke token')"
+                @click="onRevoke(token)"
+              />
+            </li>
+          </ul>
+          <p
+            v-else
+            class="text-sm text-muted"
+          >
+            {{ t("list.empty", "You have not created any tokens yet.") }}
+          </p>
+        </UPageCard>
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/api-tokens.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/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/id-code.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/id-code.vue

@@ -0,0 +1,13 @@
+<script setup>
+defineOptions({ name: "AccountIdCodePage" });
+</script>
+
+<template>
+  <UContainer>
+    <UPage>
+      <UPageBody>
+        <AccountIdentificationCode />
+      </UPageBody>
+    </UPage>
+  </UContainer>
+</template>

package/dist/runtime/app/pages/id-code.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>