@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-layout/app/custom-pages/settings/shortcuts.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import KeyboardShortcut from "../../build/components/pages/settings/shortcut/KeyboardShortcut.vue";
+
+const SKELETON_SECTION_COUNT = 3;
+const META_KEYBOARD_TOKEN = "$keyboard.meta";
+const META_KEY_LABELS = {
+  mac: "⌘",
+  other: "Ctrl",
+};
+
+// Per-group accent icon (design panel-title pill). Keyed by the lowercased
+// component name; falls back to a keyboard glyph for unknown groups.
+const GROUP_ICONS: Record<string, string> = {
+  global: "i-ph-command",
+  tab: "i-ph-browsers",
+  tableview: "i-ph-table",
+  tree: "i-ph-tree-structure",
+  form: "i-ph-note-pencil",
+};
+
+const { t } = useI18n();
+const { getRegistry } = useShortcutRegistry();
+const shortcuts: Ref<ComponentShortcuts[]> = getRegistry();
+
+const sortedShortcuts = computed(() => {
+  return shortcuts.value.map((componentShortcuts: ComponentShortcuts) => ({
+    ...componentShortcuts,
+    shortcuts: [...componentShortcuts.shortcuts].sort((a, b) => {
+      return a.key.join("+").localeCompare(b.key.join("+"));
+    }),
+  }));
+});
+
+function isMacPlatform(): boolean {
+  if (typeof window === "undefined") return false;
+  const navAny = window.navigator as Navigator & {
+    userAgentData?: { platform?: string };
+  };
+  const platform =
+    navAny.userAgentData?.platform ?? window.navigator.platform ?? "";
+  return /Mac/i.test(platform);
+}
+
+function getMetaKeyLabel(): string {
+  return isMacPlatform() ? META_KEY_LABELS.mac : META_KEY_LABELS.other;
+}
+
+function attemptTranslation(toTranslate: string): string {
+  if (toTranslate === META_KEYBOARD_TOKEN) {
+    return getMetaKeyLabel();
+  }
+  if (toTranslate.startsWith("$")) {
+    return t(toTranslate.slice(1));
+  }
+  return toTranslate.toUpperCase();
+}
+
+function groupKey(component: string): string {
+  return component.replace(/^\$/, "").toLowerCase();
+}
+
+function groupIcon(component: string): string {
+  return GROUP_ICONS[groupKey(component)] ?? "i-ph-keyboard";
+}
+
+// Group title keeps its natural case (e.g. "TableView"), unlike keys/labels.
+function groupTitle(component: string): string {
+  return component.startsWith("$") ? t(component.slice(1)) : component;
+}
+</script>
+
+<template>
+  <DmsClientOnly>
+    <div class="space-y-5 pb-16">
+      <DmsCard
+        v-for="(componentShortcuts, componentIndex) in sortedShortcuts"
+        :key="componentIndex"
+        as="section"
+        :padded="false"
+        class="overflow-hidden"
+      >
+        <div class="border-default flex items-center gap-3 border-b px-5 py-4">
+          <span
+            class="bg-primary/10 ring-primary/20 text-primary flex size-[34px] shrink-0 items-center justify-center rounded-md ring"
+          >
+            <UIcon
+              :name="groupIcon(componentShortcuts.component)"
+              class="size-[17px]"
+            />
+          </span>
+          <h2 class="text-highlighted text-[17px] font-semibold tracking-tight">
+            {{ groupTitle(componentShortcuts.component) }}
+          </h2>
+        </div>
+
+        <div class="p-2">
+          <div
+            v-for="(shortcut, shortcutIndex) in componentShortcuts.shortcuts"
+            :key="shortcutIndex"
+            class="hover:bg-default flex items-center justify-between gap-4 rounded-md px-4 py-3.5 transition-colors"
+            :class="{ 'border-muted border-t': shortcutIndex > 0 }"
+          >
+            <span class="text-muted text-sm">
+              {{ attemptTranslation(shortcut.descriptionKey) }}
+            </span>
+
+            <KeyboardShortcut :keys="shortcut.key.map(attemptTranslation)" />
+          </div>
+        </div>
+      </DmsCard>
+    </div>
+
+    <template #fallback>
+      <div class="space-y-5 pb-16">
+        <DmsCard
+          v-for="i in SKELETON_SECTION_COUNT"
+          :key="i"
+          as="section"
+          :padded="false"
+          class="overflow-hidden"
+        >
+          <div
+            class="border-default flex items-center gap-3 border-b px-5 py-4"
+          >
+            <USkeleton class="size-[34px] rounded-md" />
+            <USkeleton class="h-5 w-28" />
+          </div>
+          <div class="space-y-2 p-2">
+            <USkeleton class="h-11 w-full rounded-md" />
+            <USkeleton class="h-11 w-full rounded-md" />
+          </div>
+        </DmsCard>
+      </div>
+    </template>
+  </DmsClientOnly>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailAdminInvite.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailButton from "./components/EmailButton.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  email: string;
+  signupLink: string;
+  expiresIn: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="You're Invited!">
+    <EText :style="emailStyles.text">Hello,</EText>
+
+    <EText :style="emailStyles.text">
+      You've been invited to join our platform. Click the button below to create
+      your account:
+    </EText>
+
+    <EmailButton :href="signupLink" :expires-in="expiresIn">
+      Create Account
+    </EmailButton>
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If you didn't expect this invitation, you can safely ignore this email.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailExportReady.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailButton from "./components/EmailButton.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  userName: string;
+  downloadLink: string;
+  expiresIn: string;
+  partial: boolean;
+  failedSources: string[];
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Your data export is ready">
+    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+
+    <EText :style="emailStyles.text">
+      Your data export has been prepared. Use the button below to download the
+      archive:
+    </EText>
+
+    <EmailButton
+      :href="downloadLink"
+      :expires-in="expiresIn"
+      expires-label="This download link expires in"
+    >
+      Download export
+    </EmailButton>
+
+    <EText v-if="partial" :style="emailStyles.text">
+      This export is
+      <strong>incomplete</strong>
+      : the following parts could not be included —
+      {{ failedSources.join(", ") }}. Request a new export if you need them.
+    </EText>
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If you didn't request this export, you can safely ignore this email.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailResetPassword.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailOTP from "./components/EmailOTP.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  userName: string;
+  resetCode: string;
+  expiresIn: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Reset Your Password">
+    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+
+    <EText :style="emailStyles.text">
+      We received a request to reset your password. Enter the verification code
+      below to reset your password:
+    </EText>
+
+    <EmailOTP :code="resetCode" :expires-in="expiresIn" />
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If you didn't request a password reset, you can safely ignore this
+        email. Your password will remain unchanged.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailTwoFactor.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailOTP from "./components/EmailOTP.vue";
+
+defineProps<{
+  userName: string;
+  verificationCode: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Your verification code">
+    <p>Hello {{ userName }},</p>
+    <p>Use this verification code to finish signing in:</p>
+    <EmailOTP :code="verificationCode" />
+    <p>If you did not attempt to sign in, you can safely ignore this email.</p>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/EmailUserValidation.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import EmailLayout from "./components/EmailLayout.vue";
+import EmailOTP from "./components/EmailOTP.vue";
+import { emailStyles } from "./components/index";
+
+defineProps<{
+  userName: string;
+  validationCode: string;
+  expiresIn: string;
+}>();
+</script>
+
+<template>
+  <EmailLayout title="Verify Your Email">
+    <EText :style="emailStyles.text">Hello {{ userName }},</EText>
+
+    <EText :style="emailStyles.text">
+      Thank you for signing up! Enter the verification code below to verify your
+      email address:
+    </EText>
+
+    <EmailOTP :code="validationCode" :expires-in="expiresIn" />
+
+    <template #footer>
+      <EText :style="emailStyles.footer">
+        If you didn't create an account, you can safely ignore this email.
+      </EText>
+    </template>
+  </EmailLayout>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/components/EmailButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { emailStyles } from "./index";
+
+defineProps<{
+  href?: string;
+  expiresIn?: string;
+  expiresLabel?: string;
+}>();
+</script>
+
+<template>
+  <ESection :style="emailStyles.buttonContainer">
+    <EButton :href="href" :style="emailStyles.button">
+      <slot />
+    </EButton>
+  </ESection>
+
+  <EText v-if="expiresIn" :style="emailStyles.expires">
+    {{ expiresLabel ?? "This invitation expires in" }} {{ expiresIn }}.
+  </EText>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/components/EmailLayout.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { emailStyles } from "./index";
+
+interface EmailAppConfig {
+  branding?: {
+    logo?: {
+      default?: {
+        light?: string;
+      };
+    };
+  };
+}
+
+defineProps<{
+  title: string;
+  lang?: string;
+}>();
+
+const appConfig = useDmsAppConfig() as EmailAppConfig;
+const runtimeConfig = useDmsRuntimeConfig();
+
+const logoPath = appConfig.branding?.logo?.default?.light;
+const clientBaseUrl = runtimeConfig.public.dms?.clientBaseUrl ?? "";
+const logoUrl = logoPath?.startsWith("/")
+  ? `${clientBaseUrl}${logoPath}`
+  : logoPath;
+</script>
+
+<template>
+  <EHtml :lang="lang ?? 'en'">
+    <EHead />
+    <EBody :style="emailStyles.main">
+      <EContainer :style="emailStyles.container">
+        <ESection :style="emailStyles.card">
+          <ESection v-if="logoUrl" :style="emailStyles.logo">
+            <EImg :src="logoUrl" alt="Logo" :style="emailStyles.logoImage" />
+          </ESection>
+
+          <EHeading as="h1" :style="emailStyles.heading">
+            {{ title }}
+          </EHeading>
+
+          <slot />
+
+          <EHr :style="emailStyles.divider" />
+
+          <slot name="footer" />
+        </ESection>
+      </EContainer>
+    </EBody>
+  </EHtml>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/components/EmailOTP.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { emailStyles } from "./index";
+
+defineProps<{
+  code?: string;
+  expiresIn?: string;
+  expiresLabel?: string;
+}>();
+</script>
+
+<template>
+  <ESection :style="emailStyles.otp.box">
+    <EText :style="emailStyles.otp.label">Your verification code is:</EText>
+    <EText :style="emailStyles.otp.code">
+      {{ code }}
+    </EText>
+  </ESection>
+
+  <EText v-if="expiresIn" :style="emailStyles.expires">
+    {{ expiresLabel ?? "This code expires in" }} {{ expiresIn }}.
+  </EText>
+</template>

package/frontend-vue/layers/dms-layout/app/emails/components/index.ts

@@ -0,0 +1,93 @@
+export const emailFontFamily =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+export const emailStyles = {
+  main: {
+    backgroundColor: "#f6f9fc",
+    fontFamily: emailFontFamily,
+  },
+  container: {
+    padding: "20px 0 48px",
+  },
+  card: {
+    backgroundColor: "#ffffff",
+    borderRadius: "8px",
+    padding: "40px",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+  },
+  logo: {
+    marginBottom: "32px",
+  },
+  logoImage: {
+    height: "60px",
+    margin: "0 auto",
+    display: "block",
+  },
+  heading: {
+    color: "#1a1a1a",
+    fontSize: "24px",
+    fontWeight: "600",
+    margin: "0 0 24px",
+    textAlign: "center" as const,
+  },
+  text: {
+    color: "#525252",
+    fontSize: "15px",
+    lineHeight: "1.6",
+    margin: "0 0 16px",
+  },
+  otp: {
+    box: {
+      backgroundColor: "#f4f4f5",
+      borderRadius: "6px",
+      margin: "24px 0",
+      padding: "20px",
+      textAlign: "center" as const,
+    },
+    label: {
+      color: "#71717a",
+      fontSize: "13px",
+      margin: "0 0 8px",
+      textAlign: "center" as const,
+    },
+    code: {
+      color: "#18181b",
+      fontSize: "32px",
+      fontWeight: "700",
+      letterSpacing: "6px",
+      margin: "0",
+      fontFamily: '"SF Mono", Monaco, "Courier New", monospace',
+    },
+  },
+  buttonContainer: {
+    margin: "24px 0",
+    textAlign: "center" as const,
+  },
+  button: {
+    backgroundColor: "#18181b",
+    borderRadius: "6px",
+    color: "#ffffff",
+    display: "inline-block",
+    fontSize: "15px",
+    fontWeight: "600",
+    padding: "12px 24px",
+    textDecoration: "none",
+  },
+  expires: {
+    color: "#71717a",
+    fontSize: "13px",
+    margin: "0",
+    textAlign: "center" as const,
+  },
+  divider: {
+    borderTop: "1px solid #e4e4e7",
+    margin: "32px 0",
+  },
+  footer: {
+    color: "#a1a1aa",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    margin: "0",
+    textAlign: "center" as const,
+  },
+};

package/frontend-vue/layers/dms-layout/app/error.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { DmsErrorData } from "#dms-inertia/frontend-module";
+
+const ERROR_CONFIGS: Record<
+  number,
+  { icon: string; titleKey: string; descriptionKey: string; color: string }
+> = {
+  404: {
+    icon: "i-ph-magnifying-glass",
+    titleKey: "error.404.title",
+    descriptionKey: "error.404.description",
+    color: "primary",
+  },
+  401: {
+    icon: "i-ph-lock",
+    titleKey: "error.401.title",
+    descriptionKey: "error.401.description",
+    color: "orange",
+  },
+  403: {
+    icon: "i-ph-prohibition",
+    titleKey: "error.403.title",
+    descriptionKey: "error.403.description",
+    color: "red",
+  },
+};
+
+const DEFAULT_ERROR_CONFIG = {
+  icon: "i-ph-warning-circle",
+  titleKey: "error.500.title",
+  descriptionKey: "error.500.description",
+  color: "red",
+};
+
+const DEFAULT_STATUS_CODE = 500;
+
+const props = defineProps<{
+  error: DmsErrorData;
+}>();
+
+const { t } = useI18n();
+const router = useDmsRouter();
+const homepage = useHomepage();
+const { loggedIn, reconcileSession, redirectToAuth } = useSessionRecovery();
+
+const isRecovering = ref(false);
+
+const errorConfig = computed(() => {
+  const statusCode = props.error.statusCode || DEFAULT_STATUS_CODE;
+  const config = ERROR_CONFIGS[statusCode] || DEFAULT_ERROR_CONFIG;
+  return {
+    icon: config.icon,
+    title: t(config.titleKey),
+    description: t(config.descriptionKey),
+    color: config.color,
+  };
+});
+
+const handleError = async () => {
+  clearError();
+  if (!loggedIn.value) {
+    await redirectToAuth(homepage);
+  } else {
+    await navigateDms(homepage, { replace: true });
+  }
+};
+
+async function attemptUnauthorizedRecovery(): Promise<void> {
+  if (props.error.statusCode !== HTTP_UNAUTHORIZED) return;
+
+  isRecovering.value = true;
+  await reconcileSession();
+  isRecovering.value = false;
+
+  if (!loggedIn.value) {
+    await redirectToAuth(homepage);
+  }
+}
+
+onMounted(() => {
+  void attemptUnauthorizedRecovery();
+});
+</script>
+
+<template>
+  <div class="flex min-h-screen flex-col items-center justify-center p-4">
+    <header class="mb-10">
+      <DmsAppLogo class="h-20 w-auto" />
+    </header>
+
+    <DmsCard variant="elevated" class="w-full max-w-md">
+      <div class="flex flex-col items-center text-center">
+        <div class="text-muted mb-4 text-6xl font-bold tracking-tight">
+          {{ error.statusCode || DEFAULT_STATUS_CODE }}
+        </div>
+
+        <div
+          class="mb-6 flex size-20 items-center justify-center rounded-full"
+          :class="`bg-${errorConfig.color}-50 dark:bg-${errorConfig.color}-950`"
+        >
+          <Icon
+            :name="isRecovering ? 'i-ph-spinner-gap' : errorConfig.icon"
+            class="size-10"
+            :class="[
+              `text-${errorConfig.color}-500`,
+              isRecovering ? 'animate-spin' : '',
+            ]"
+          />
+        </div>
+
+        <h1 class="text-highlighted mb-2 text-2xl font-bold">
+          {{ isRecovering ? $t("error.recovering.title") : errorConfig.title }}
+        </h1>
+
+        <p class="text-muted mb-6">
+          {{
+            isRecovering
+              ? $t("error.recovering.description")
+              : errorConfig.description
+          }}
+        </p>
+
+        <p
+          v-if="!isRecovering && error.message"
+          class="text-dimmed mb-6 text-sm"
+        >
+          {{ error.message }}
+        </p>
+
+        <div v-if="!isRecovering" class="flex gap-3">
+          <UButton
+            :label="$t('button.go_home')"
+            color="primary"
+            size="lg"
+            @click="handleError"
+          />
+          <UButton
+            :label="$t('button.go_back')"
+            color="neutral"
+            variant="outline"
+            size="lg"
+            @click="router.back()"
+          />
+        </div>
+      </div>
+    </DmsCard>
+  </div>
+</template>

package/frontend-vue/layers/dms-layout/app/middleware/homepage-redirect.global.ts

@@ -0,0 +1,11 @@
+export default defineDmsMiddleware((to) => {
+  if (to.path !== "/") {
+    return;
+  }
+
+  const homepage = useHomepage();
+
+  if (homepage !== "/") {
+    return navigateDms(homepage, { replace: true });
+  }
+});