@brftech/filex-core 0.42.2 → 0.43.0

package/src/components/public/PublicLinkPage.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+/**
+ * PublicLinkPage — the whole public page, for whichever link was followed.
+ *
+ * ⚠⚠ This is the component `web/` mounts for `/s/:token` and `/d/:token`,
+ * and it is the ONLY thing the routes do (v3 §1: one public shell, in
+ * `packages/core`, so the desktop app and an embed draw the same page). The
+ * web app binds addresses; it does not own a public surface.
+ *
+ * What happens here and nowhere else:
+ *   · the visitor's language, which has no account to be read from — the
+ *     browser's, or a choice made on this device, over a list that now
+ *     includes whatever an app plugin added (`lib/uiLocales`);
+ *   · the light/dark answer: the instance's default (branding) unless this
+ *     device has chosen otherwise;
+ *   · the instance's identity, applied to the shell rather than to `:root`.
+ *
+ * ⚠ Nothing about the visitor is stored beyond the two display choices
+ * above: no session, no token copy, no PIN (the unlock cookie is the
+ * server's and HttpOnly).
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+import type { LocaleCode, ThemeMode } from '../../types/ExplorerConfig';
+import type { PublicRequestInfo, PublicShareInfo } from '../../types/Public';
+import { useLocale } from '../../composables/useLocale';
+import { usePublicBranding } from '../../composables/usePublicBranding';
+import { usePublicRequest, usePublicShare } from '../../composables/usePublicLink';
+import { hasLocale, normalizeLocaleCode } from '../../lib/uiLocales';
+import { localPref, setLocalPref } from '../../lib/prefs';
+import { detectLocale } from '../../locales/resolve';
+import { labelOf } from '../../lib/pluginLabel';
+import { publicLayoutFor } from '../../lib/publicLayout';
+import PublicShell from './PublicShell.vue';
+import PublicShareBody from './PublicShareBody.vue';
+import PublicRequestBody from './PublicRequestBody.vue';
+import type { DropRefusal } from '../../lib/dropLimits';
+
+const props = defineProps<{
+/**
+   * `share` → `/s/<token>`; `request` → `/d/<token>`.
+   *
+   * ⚠ `/p/<token>` is RETIRED (v3 §1: an app's public page is a share now)
+   * and the server 301s it to the share, so there is no third kind here and
+   * no second code path for the transition.
+   */
+  kind: 'share' | 'request';
+  /** From the route. Empty (a URL that is not a token) draws "not available". */
+  token?: string;
+  /** API origin; empty = same origin. */
+  base?: string;
+  /** Forced by the host; otherwise the device's choice, then the browser's. */
+  locale?: LocaleCode | string;
+  /** Forced by the host; otherwise the instance's default, then the device's. */
+  theme?: ThemeMode;
+}>();
+
+/* ── the visitor's language ───────────────────────────────────────────── */
+
+const chosen = ref<string>('');
+const locale = computed<string>(() => {
+  if (props.locale) return String(props.locale);
+  if (chosen.value) return chosen.value;
+  const stored = normalizeLocaleCode(localPref('locale'));
+  if (stored && hasLocale(stored)) return stored;
+  return detectLocale();
+});
+
+function chooseLocale(v: string): void {
+  const code = normalizeLocaleCode(v);
+  if (!code || !hasLocale(code)) return;
+  chosen.value = code;
+  // ⚠ localStorage and nothing else. There is no account behind a share
+  // link, so this is the only place a stranger's choice can live — and it is
+  // a display preference, not a fact about them.
+  setLocalPref('locale', code);
+}
+
+const { t, formatSize } = useLocale(() => locale.value);
+
+/* ── the instance's identity ──────────────────────────────────────────── */
+
+const brand = usePublicBranding({ base: props.base });
+
+/**
+ * Light or dark.
+ *
+ * Order: what the host forced, then what this device chose, then the
+ * instance's own default, then the system. ⚠ The instance's default is
+ * BELOW the device's choice deliberately — an operator picks the default
+ * their visitors start from, not the one they are held to.
+ */
+const resolvedTheme = computed<'light' | 'dark'>(() => {
+  const want = props.theme && props.theme !== 'auto' ? props.theme : localPref('theme') || brand.themeDefault.value;
+  if (want === 'light' || want === 'dark') return want;
+  try {
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  } catch {
+    return 'light';
+  }
+});
+
+/* ── the link itself ──────────────────────────────────────────────────── */
+
+const opts = {
+  base: props.base,
+  locale: () => locale.value,
+  errorText: () => t('plugin.view.error'),
+};
+
+const share = props.kind === 'share' ? usePublicShare(props.token ?? '', opts) : null;
+/* ⚠ A file request has no app behind it: its failure is "could not be sent",
+   never the app runtime's "The app returned an error" (QA, 2026-09-21). */
+const request =
+  props.kind === 'request'
+    ? usePublicRequest(props.token ?? '', { ...opts, errorText: () => t('public.upload_failed') })
+    : null;
+
+/** The words for a file the drop page will not send (lib/dropLimits). */
+function refusedText(r: DropRefusal): string {
+  if (r.code === 'ext') return t('public.refused_ext', { name: r.name });
+  // The same number the limits line states, in the same units.
+  if (r.code === 'too_large') return t('public.refused_too_large', { size: formatSize(r.mb * 1_000_000) });
+  if (r.count <= 0) return t('public.request_full');
+  return t('public.refused_too_many', { count: r.count });
+}
+const link = (share ?? request)!;
+
+const shareInfo = computed(() => (share?.info.value ?? null) as PublicShareInfo | null);
+const requestInfo = computed(() => (request?.info.value ?? null) as PublicRequestInfo | null);
+
+/**
+ * The heading.
+ *
+ * An app link is titled by the app (its manifest page, then the surface it
+ * answered with); a file or folder link by the thing behind it; a file
+ * request by the folder it drops into. ⚠ The app's title is read from the
+ * SURFACE as well, because a wizard renames the screen as it walks ("Who
+ * signs" → "Place the boxes") and a heading frozen at the manifest's page
+ * label would contradict the step under it.
+ */
+const title = computed(() => {
+  const app = shareInfo.value?.app;
+  const fromSurface = labelOf(share?.conv.current.value?.title, locale.value);
+  if (app) return fromSurface || labelOf(app.title, locale.value) || '';
+  return shareInfo.value?.node?.name || requestInfo.value?.folder || '';
+});
+
+const subject = computed(() => {
+  const s = link.info.value?.subject ?? '';
+  // Not twice: a file share's subject defaults to the file's own name on the
+  // server, and printing it again under the heading is noise.
+  return s && s !== title.value ? s : '';
+});
+
+/**
+ * How wide the card is, and which badge it opens with — both from the kind
+ * the server answered with, through the one helper the admin preview uses
+ * too (`lib/publicLayout`). ⚠ A file request is titled by its folder, so its
+ * badge is a folder rather than a document.
+ */
+const layout = computed(() =>
+  publicLayoutFor(shareInfo.value?.kind ?? (request ? 'drop' : ''), {
+    list: (shareInfo.value?.entries?.length ?? 0) > 0,
+  }),
+);
+const badge = computed<'file' | 'folder' | ''>(() => {
+  if (request) return '';
+  const kind = shareInfo.value?.kind;
+  if (kind === 'folder') return 'folder';
+  if (kind === 'app') return '';
+  return 'file';
+});
+
+/** Walking into a folder is a reload of the same link at another path. */
+function navigate(path: string): void {
+  void link.load(path ? `?path=${encodeURIComponent(path)}` : '');
+}
+
+watch(title, (v) => {
+  if (v && typeof document !== 'undefined') document.title = v;
+});
+
+/**
+ * THE DOCUMENT ELEMENT follows the language — both halves of it.
+ *
+ * ⚠⚠ The shell puts `dir` on its own wrapper, which turns the page around
+ * visually, and that is what every eye test sees. `<html>` kept the values
+ * the SERVER rendered: a stranger who pressed العربية on a share page was
+ * reading Arabic inside `<html lang="en" dir="ltr">` (v0.43.0). Nothing on
+ * screen says so, and everything that does not look at pixels is misled — a
+ * screen reader announces the language it is told, hyphenation and quotation
+ * marks follow `lang`, and `dir` on the root is what a printed page and any
+ * unwrapped portal inherit.
+ *
+ * One watcher, `immediate`, so the first paint and every later change agree;
+ * `chooseLocale` does not touch the document at all any more, because a
+ * language can also arrive from the host (`props.locale`) or from what this
+ * device chose last time.
+ *
+ * ⚠ `lang` only. `dir` is DERIVED from it by the one rule that owns
+ * direction (`lib/direction` → `syncDocumentDir`, installed by the host that
+ * owns the page), which also re-applies when the language LIST arrives — a
+ * pack's language can be on `<html lang>` before the answer saying it is
+ * written right to left has landed. Setting `dir` here as well produced
+ * exactly that race: the page wrote `ltr` from a list it did not have yet.
+ */
+watch(
+  locale,
+  (code) => {
+    if (typeof document !== 'undefined') document.documentElement.lang = code;
+  },
+  { immediate: true },
+);
+
+// A language chosen mid-visit has to reach the PLUGIN too: its strings come
+// from the server, which reads `Accept-Language` on every call, so the screen
+// has to be asked for again in the new language.
+//
+// ⚠⚠ Asked AGAIN, not started again. Reloading the link re-opens the surface
+// at its first screen: somebody three steps into signing, with their title
+// typed and their signature drawn, lost all of it by pressing "English" —
+// and the language picker sits right next to the wizard. A `change` carries
+// the state and the values that are already on screen, so the same step
+// comes back in the other language with the answers still in it.
+watch(locale, () => {
+  if (link.status.value === 'ready' && shareInfo.value?.kind === 'app') {
+    if (link.conv.current.value) void link.conv.post('change');
+    else void link.load();
+  }
+});
+
+onMounted(() => {
+  // ⚠ One fetch, not two: the branding answer CARRIES the language list
+  // (`locales`), and `usePublicBranding` folds it into the registry. A
+  // separate call would be a second unauthenticated round trip on every
+  // public page for half of what this one already says.
+  void brand.load();
+  if (!props.token) {
+    link.status.value = 'not_found';
+    return;
+  }
+  void link.load();
+});
+</script>
+
+<template>
+  <PublicShell
+    :status="link.status.value"
+    :locale="locale"
+    :theme="resolvedTheme"
+    :brand-name="brand.name.value"
+    :logo-url="brand.logo.value"
+    :accent-style="brand.accentStyle.value"
+    :footer-text="brand.footerText.value"
+    :hide-powered-by="brand.hidePoweredBy.value"
+    :layout="layout"
+    :badge="badge"
+    :title="title"
+    :subject="subject"
+    :expires-at="link.info.value?.expires_at ?? null"
+    :visits-left="shareInfo?.visits_left ?? requestInfo?.uploads_left ?? null"
+    :pin-busy="link.pinBusy.value"
+    :pin-failure="link.pinFailure.value"
+    :lock-message="link.lockMessage.value"
+    :failure="link.failure.value"
+    @pin="(p: string) => link.submitPin(p)"
+    @retry="() => link.load()"
+    @update:locale="chooseLocale"
+  >
+    <PublicShareBody
+      v-if="share"
+      :link="share"
+      :locale="locale"
+      :theme="resolvedTheme"
+      @navigate="navigate"
+    />
+    <PublicRequestBody
+      v-else-if="request"
+      :info="requestInfo"
+      :uploads="request.uploads.value"
+      :locale="locale"
+      hide-folder
+      @files="(f: File[], name: string) => request!.upload(f, { name, refusedText })"
+    />
+  </PublicShell>
+</template>

package/src/components/public/PublicLinkPreview.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * PublicLinkPreview — the public share page, drawn with values that are not
+ * saved yet, for the admin's Corporate identity page.
+ *
+ * ⚠⚠ It is the REAL page's components — PublicShell and PublicShareBody, the
+ * ones `/s/<token>` mounts — not a picture of them. The admin page had a
+ * hand-drawn mock (a centred card with an icon and a full-width button) while
+ * the page it previewed is left-aligned and plain (release-candidate sweep,
+ * 2026-09-21, QA #25): the preview taught the operator a page that does not
+ * exist. Anything the public page changes, this changes with it.
+ *
+ * Nothing is fetched: the "link" handed to the body is a fixed one-file share
+ * (only the fields the one-document branch reads), and the accent goes
+ * through the same derivation the page uses (accentStyleOf).
+ *
+ * ⚠ Inert: a preview is looked at, not used. The page's controls (the
+ * download button, the language picker) must not act from inside the admin
+ * panel.
+ */
+import { computed, ref } from 'vue';
+import type { LocaleCode } from '../../types/ExplorerConfig';
+import type { PublicShareInfo } from '../../types/Public';
+import type { PublicLinkStore } from '../../composables/usePublicLink';
+import { accentStyleOf, DEFAULT_BRAND_NAME } from '../../composables/usePublicBranding';
+import { publicLayoutFor } from '../../lib/publicLayout';
+import PublicShell from './PublicShell.vue';
+import PublicShareBody from './PublicShareBody.vue';
+
+const props = defineProps<{
+  brandName?: string;
+  logoUrl?: string;
+  /** A hex colour, as the operator typed it; anything else means "none". */
+  accent?: string;
+  footerText?: string;
+  hidePoweredBy?: boolean;
+  locale: LocaleCode | string;
+  theme?: 'light' | 'dark';
+  /** The file the sample link shares. */
+  sample?: { name: string; size: number; mime?: string };
+}>();
+
+const file = computed(() => props.sample ?? { name: 'report-2026.pdf', size: 1_240_000, mime: 'application/pdf' });
+
+const info = computed<PublicShareInfo>(() => ({
+  kind: 'file',
+  node: { name: file.value.name, size: file.value.size, mime: file.value.mime ?? 'application/pdf' },
+}) as PublicShareInfo);
+
+/* The body reads `info` and, for a single document, `downloadUrl()`; it
+   touches nothing else of a link on that branch. */
+const link = computed(
+  () =>
+    ({
+      info: ref(info.value),
+      downloadUrl: () => '#',
+      noJsUrl: () => '#',
+    }) as unknown as PublicLinkStore<PublicShareInfo> & {
+      downloadUrl: (o?: { zip?: boolean; path?: string }) => string;
+      noJsUrl: () => string;
+    },
+);
+
+const name = computed(() => props.brandName?.trim() || DEFAULT_BRAND_NAME);
+</script>
+
+<template>
+  <div class="fe-ppreview" inert data-testid="public-link-preview">
+    <PublicShell
+      status="ready"
+      :locale="locale"
+      :theme="theme ?? 'light'"
+      :brand-name="name"
+      :logo-url="logoUrl?.trim() || ''"
+      :accent-style="accentStyleOf(accent)"
+      :footer-text="footerText?.trim() || ''"
+      :hide-powered-by="hidePoweredBy === true"
+      :layout="publicLayoutFor('file')"
+      badge="file"
+      :title="file.name"
+    >
+      <PublicShareBody :link="link" :locale="locale" :theme="theme ?? 'light'" />
+    </PublicShell>
+  </div>
+</template>

package/src/components/public/PublicPinGate.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+/**
+ * PublicPinGate — the code a protected link asks for.
+ *
+ * ⚠⚠ ONE gate for all three public links (v3 §1). There used to be two: the
+ * Go-rendered form on `/s/` and `/d/`, and this one on an app's page. They
+ * disagreed about everything a person notices — the wording, the keyboard
+ * the phone opened, what a wrong code said, whether the box was cleared and
+ * refocused, and whether being locked out said so or just kept refusing.
+ *
+ * ⚠ The PIN is never stored, never logged and never put in a URL. What the
+ * server returns is an HttpOnly cookie this code cannot read; the box is
+ * cleared on a wrong answer so the next attempt starts from empty.
+ */
+import { nextTick, onMounted, ref, watch } from 'vue';
+import type { LocaleCode } from '../../types/ExplorerConfig';
+import { useLocale } from '../../composables/useLocale';
+
+const props = defineProps<{
+  locale: LocaleCode | string;
+  busy?: boolean;
+  /** `wrong` | `locked` | '' — from the composable, not from a status code here. */
+  failure?: '' | 'wrong' | 'locked';
+  /** The server's own words for a lock, when it sends any. */
+  lockMessage?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit', pin: string): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const pin = ref('');
+const input = ref<HTMLInputElement | null>(null);
+
+const message = () => {
+  if (props.failure === 'wrong') return t('plugin.page.pin_wrong');
+  if (props.failure === 'locked') return t('plugin.page.pin_locked');
+  return '';
+};
+
+// A wrong code empties the box and puts the caret back in it: a form that
+// keeps the rejected digits makes the person select-all before retyping.
+watch(
+  () => props.failure,
+  async (f) => {
+    if (f === 'wrong') {
+      pin.value = '';
+      await nextTick();
+      input.value?.focus();
+    }
+  },
+);
+
+onMounted(() => input.value?.focus());
+
+function submit(): void {
+  if (props.busy || props.failure === 'locked') return;
+  // ⚠ An empty box is not an error to announce, it is a caret to move. The
+  // button stays live — a greyed-out primary is the whole page's one act
+  // looking broken before the person has done anything wrong.
+  if (!pin.value.trim()) {
+    input.value?.focus();
+    return;
+  }
+  emit('submit', pin.value);
+}
+</script>
+
+<template>
+  <form class="fe-ppage__pin" data-testid="public-page-pin" @submit.prevent="submit">
+    <div class="fe-ppage__state">
+      <h2 class="fe-ppage__state-title">{{ t('plugin.page.pin_title') }}</h2>
+      <p class="fe-surface__text fe-surface__text--muted">{{ t('plugin.page.pin_hint') }}</p>
+    </div>
+    <!-- ⚠ The label is for a screen reader only. The heading right above it
+         already says the box is for a code, and a visible "PIN" caption over
+         a PIN box is furniture — the old gate had none. -->
+    <label class="fe-ppage__srlabel" for="fe-ppage-pin">{{ t('plugin.pin.label') }}</label>
+    <input
+      id="fe-ppage-pin"
+      ref="input"
+      v-model="pin"
+      class="fe-cfield__input fe-ppage__pinput"
+      :class="{ 'is-invalid': !!message() }"
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      spellcheck="false"
+      maxlength="12"
+      :disabled="busy || failure === 'locked'"
+      :aria-invalid="message() ? 'true' : undefined"
+      data-testid="public-page-pin-input"
+    />
+    <p v-if="message()" class="fe-ppage__error" role="alert" data-testid="public-page-pin-error">
+      {{ message() }}<template v-if="lockMessage"> ({{ lockMessage }})</template>
+    </p>
+    <button
+      type="submit"
+      class="fe-btn fe-btn--primary"
+      :disabled="busy || failure === 'locked'"
+      data-testid="public-page-pin-submit"
+    >
+      {{ t('plugin.page.pin_submit') }}
+    </button>
+  </form>
+</template>

package/src/components/public/PublicRequestBody.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+/**
+ * PublicRequestBody — the drop box a file request opens (`/d/<token>`).
+ *
+ * The person on this page is usually not a filex user and will never be one:
+ * they were asked for a document and sent a link. So the body is one thing —
+ * a place to put files — with the limits stated BEFORE they pick (what may
+ * be sent, how big, how many are left), because a rejection after a two
+ * minute upload is the version of this screen that gets abandoned.
+ *
+ * ⚠ Progress is real progress, from the upload itself (`usePublicRequest`
+ * uses XHR for exactly this). A spinner that does not move is what makes
+ * somebody reload the page halfway through a transfer.
+ *
+ * ⚠ "Blind drop": the server never tells this page what is already in the
+ * folder, and this page never asks. A file request is permission to ADD.
+ */
+import { computed, ref } from 'vue';
+import type { LocaleCode } from '../../types/ExplorerConfig';
+import type { PublicRequestInfo } from '../../types/Public';
+import { useLocale } from '../../composables/useLocale';
+
+const props = defineProps<{
+  info: PublicRequestInfo | null;
+  uploads: Array<{ name: string; size: number; percent: number; state: string; error?: string }>;
+  locale: LocaleCode | string;
+  disabled?: boolean;
+  /**
+   * Leave the folder's name out of the body. The public page's heading is
+   * already that name (`PublicLinkPage` titles a request by its folder), and
+   * printing it again under itself read as a stutter.
+   */
+  hideFolder?: boolean;
+}>();
+
+const emit = defineEmits<{
+  /** The files, and the name the person gave (`''` when the link does not ask). */
+  (e: 'files', files: File[], name: string): void;
+}>();
+
+/**
+ * The uploader's name, when the link asks for it (`limits.ask_name`).
+ *
+ * ⚠⚠ The owner's "Ask uploader name" is ON by default, and this page never
+ * asked (QA, 2026-09-21): the setting did nothing, and every submission folder
+ * arrived as `<date>_anon`. Optional, as on the no-JavaScript page — a name
+ * nobody wants to give is not a reason to refuse their document — and ABOVE
+ * the drop area, because dropping a file sends it.
+ */
+const uploaderName = ref('');
+const askName = computed(() => props.info?.limits?.ask_name === true);
+function sendFiles(files: File[]): void {
+  emit('files', files, askName.value ? uploaderName.value.trim() : '');
+}
+
+const { t, formatSize } = useLocale(() => props.locale);
+
+const input = ref<HTMLInputElement | null>(null);
+const over = ref(false);
+
+const limitsOf = computed(() => props.info?.limits ?? {});
+
+const accept = computed(() => {
+  const list = limitsOf.value.allowed_ext ?? [];
+  return list.length ? list.map((e) => `.${e.replace(/^\./, '')}`).join(',') : undefined;
+});
+
+const limits = computed(() => {
+  const out: string[] = [];
+  const mb = limitsOf.value.max_file_size_mb;
+  // ⚠ The server states MEGABYTES; the screen says it in the same units the
+  // rest of the product uses, so "5 MB" here and "5 MB" in the explorer are
+  // the same number rather than two roundings of it.
+  if (mb && mb > 0) out.push(t('public.max_size', { size: formatSize(mb * 1_000_000) }));
+  const ext = limitsOf.value.allowed_ext ?? [];
+  if (ext.length) out.push(t('public.accepts', { list: ext.map((e) => e.toUpperCase()).join(', ') }));
+  const left = props.info?.uploads_left;
+  if (left !== null && left !== undefined && Number.isFinite(left)) out.push(t('public.files_left', { n: left }));
+  return out;
+});
+
+/** No room left: the box says so instead of taking a file the server will refuse. */
+const full = computed(() => {
+  const left = props.info?.uploads_left;
+  return left !== null && left !== undefined && Number.isFinite(left) && left <= 0;
+});
+
+function pick(): void {
+  if (props.disabled || full.value) return;
+  input.value?.click();
+}
+
+function onPicked(e: Event): void {
+  const el = e.target as HTMLInputElement;
+  const files = Array.from(el.files ?? []);
+  if (files.length) sendFiles(files);
+  // Cleared so choosing the SAME file twice still fires a change event.
+  el.value = '';
+}
+
+function onDrop(e: DragEvent): void {
+  over.value = false;
+  if (props.disabled || full.value) return;
+  const files = Array.from(e.dataTransfer?.files ?? []);
+  if (files.length) sendFiles(files);
+}
+</script>
+
+<template>
+  <div class="fe-pdrop" data-testid="public-request">
+    <p v-if="info?.folder && !hideFolder" class="fe-surface__text" data-testid="public-request-folder">
+      <strong>{{ info?.folder }}</strong>
+    </p>
+
+    <!-- ⚠ What this page IS, said before anything is asked of the person.
+         The Go-rendered drop page opened on this sentence and the unified
+         shell dropped it, so a stranger arrived at a dashed rectangle with no
+         statement of what happens to what they put in it — and none of the
+         reassurance that they are not being shown somebody's folder. -->
+    <p class="fe-surface__text fe-surface__text--muted" data-testid="public-request-lead">
+      {{ t('public.drop_sub') }}
+    </p>
+
+    <label v-if="askName && !full" class="fe-pdrop__who" data-testid="public-request-name">
+      <span class="fe-pdrop__wholabel">{{ t('public.your_name') }}</span>
+      <input
+        v-model="uploaderName"
+        class="fe-pdrop__whoinput"
+        type="text"
+        maxlength="60"
+        autocomplete="name"
+        :placeholder="t('public.your_name_ph')"
+        :disabled="disabled"
+        data-testid="public-request-name-input"
+      />
+    </label>
+
+    <div
+      class="fe-pdrop__zone"
+      :class="{ 'is-over': over, 'is-disabled': disabled || full }"
+      role="button"
+      tabindex="0"
+      data-testid="public-request-drop"
+      @click="pick"
+      @keydown.enter.prevent="pick"
+      @keydown.space.prevent="pick"
+      @dragover.prevent="over = true"
+      @dragleave="over = false"
+      @drop.prevent="onDrop"
+    >
+      <svg
+        class="fe-pdrop__icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.7"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M4 14.9A7 7 0 1 1 15.7 8h1.8a4.5 4.5 0 0 1 2.5 8.2" />
+        <path d="M12 12v9" />
+        <path d="m16 16-4-4-4 4" />
+      </svg>
+      <p class="fe-pdrop__lead">{{ full ? t('public.request_full') : t('public.drop_here') }}</p>
+      <p v-if="!full" class="fe-surface__text fe-surface__text--muted">{{ t('public.or_choose') }}</p>
+      <input
+        ref="input"
+        class="fe-pdrop__input"
+        type="file"
+        multiple
+        :accept="accept"
+        :disabled="disabled || full"
+        data-testid="public-request-input"
+        @change="onPicked"
+      />
+    </div>
+
+    <!-- ⚠ The limits are separated by a dot, as every other list of facts on
+         this page is. Butted against each other they read as one sentence:
+         "At most 20 MB per file Accepted: PDF, PNG". -->
+    <p v-if="limits.length" class="fe-ppage__meta" data-testid="public-request-limits">
+      <template v-for="(l, i) in limits" :key="i">
+        <span v-if="i" aria-hidden="true">·</span>
+        <span>{{ l }}</span>
+      </template>
+    </p>
+
+    <ul v-if="uploads.length" class="fe-pdrop__list" data-testid="public-request-uploads">
+      <li v-for="(u, i) in uploads" :key="`${u.name}-${i}`" class="fe-pdrop__item" :data-state="u.state">
+        <span class="fe-pdrop__name"><bdi>{{ u.name }}</bdi></span>
+        <span class="fe-ppage__filesize">{{ formatSize(u.size) }}</span>
+        <progress
+          v-if="u.state === 'sending'"
+          class="fe-pdrop__bar"
+          :max="100"
+          :value="u.percent >= 0 ? u.percent : undefined"
+        ></progress>
+        <span v-else-if="u.state === 'done'" class="fe-pdrop__ok">{{ t('public.upload_done') }}</span>
+        <span v-else class="fe-surface__error">{{ u.error || t('public.upload_failed') }}</span>
+      </li>
+    </ul>
+  </div>
+</template>