@brftech/filex-core 0.19.0 → 0.20.1

package/src/components/SSHKeysPanel.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+/**
+ * SSHKeysPanel — register, disable and remove the keys this account signs in
+ * with over SFTP.
+ *
+ * ⚠⚠ This is not a convenience screen. `ssh-copy-id` — the command everybody
+ * reaches for — appends to `~/.ssh/authorized_keys` over a shell, and filex has
+ * no shell. Without a box to paste a key into, public-key authentication is
+ * unreachable and every user ends up sending their account password to a file
+ * server instead. That is why the screen shipped WITH the endpoint rather than
+ * after it.
+ *
+ * One component, every surface: the desktop app and the web app mount this same
+ * file (see S3KeysPanel for the same rule stated at length).
+ */
+import { computed, onMounted, ref } from 'vue';
+import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
+import type { FTPSFacts, SSHPublicKey } from '../types/SSHKeys';
+import { useLocale } from '../composables/useLocale';
+import { useSSHKeys } from '../composables/useSSHKeys';
+
+const props = defineProps<{
+  config: ExplorerConfig;
+  /**
+   * Draw the key list and the paste box.
+   *
+   * ⚠ False for FTPS, which authenticates with a password or an API token and
+   * has no use for an SSH key — the panel is still MOUNTED there because it is
+   * the call that reports where the FTP endpoint listens and under what login
+   * name. Showing a key box on the FTPS page would invite somebody to register
+   * a key that protocol will never look at.
+   */
+  keysVisible?: boolean;
+}>();
+
+const showKeys = computed(() => props.keysVisible !== false);
+
+const emit = defineEmits<{
+  /** What the guide should render with: where to connect and as whom. */
+  (e: 'active', v: {
+    host: string;
+    port: number;
+    login: string;
+    enabled: boolean;
+    hasKey: boolean;
+    ftps?: FTPSFacts;
+  }): void;
+}>();
+
+const locale = computed<LocaleCode>(() => props.config.locale ?? 'tr');
+const { t } = useLocale(locale);
+
+const { keys, connection, loading, error, canAdd, hasUsableKey, load, add, setDisabled, remove } =
+  useSSHKeys(props.config);
+
+const pasted = ref('');
+const name = ref('');
+const busy = ref(false);
+const confirmRemove = ref<number | null>(null);
+
+function publish() {
+  const c = connection.value;
+  if (!c) return;
+  emit('active', {
+    host: c.host,
+    port: c.port,
+    login: c.login,
+    enabled: c.enabled,
+    hasKey: hasUsableKey.value,
+    // The FTPS endpoint travels with the SSH facts: for the user this is one
+    // question ("how do I reach this from a program?"), and two calls to
+    // answer it would be two chances to disagree.
+    ftps: c.ftps,
+  });
+}
+
+onMounted(async () => {
+  await load();
+  publish();
+});
+
+async function submit() {
+  if (!pasted.value.trim()) return;
+  busy.value = true;
+  try {
+    if (await add(pasted.value.trim(), name.value.trim() || undefined)) {
+      pasted.value = '';
+      name.value = '';
+    }
+    publish();
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function toggle(k: SSHPublicKey) {
+  busy.value = true;
+  try {
+    await setDisabled(k.id, !k.disabled_at);
+    publish();
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function drop(k: SSHPublicKey) {
+  if (confirmRemove.value !== k.id) {
+    confirmRemove.value = k.id;
+    return;
+  }
+  confirmRemove.value = null;
+  busy.value = true;
+  try {
+    await remove(k.id);
+    publish();
+  } finally {
+    busy.value = false;
+  }
+}
+
+function shortDate(v?: string | null): string {
+  if (!v) return '';
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+}
+
+/** Shown the way OpenSSH prints it, so it can be compared with `ssh-keygen -lf`. */
+function fingerprintOf(k: SSHPublicKey): string {
+  return 'SHA256:' + k.fingerprint;
+}
+</script>
+
+<template>
+  <section v-if="showKeys" class="fe-s3keys" data-testid="ssh-keys">
+    <header class="fe-s3keys__head">
+      <h4 class="fe-s3keys__title">{{ t('conn.sshkeys.title') }}</h4>
+      <p class="fe-s3keys__lead">{{ t('conn.sshkeys.lead') }}</p>
+    </header>
+
+    <p v-if="connection && !connection.enabled" class="fe-s3keys__warn">
+      {{ t('conn.sshkeys.disabled') }}
+    </p>
+    <p v-if="canAdd === false" class="fe-s3keys__muted">{{ t('conn.sshkeys.cannotAdd') }}</p>
+    <p v-if="error" class="fe-s3keys__warn">{{ error }}</p>
+
+    <div v-if="canAdd" class="fe-sshkeys__form">
+      <textarea
+        v-model="pasted"
+        class="fe-cfield__input fe-sshkeys__paste"
+        rows="2"
+        spellcheck="false"
+        :placeholder="t('conn.sshkeys.paste')"
+        data-testid="ssh-key-input"
+      ></textarea>
+      <div class="fe-sshkeys__row">
+        <input
+          v-model="name"
+          class="fe-cfield__input"
+          :placeholder="t('conn.sshkeys.name')"
+          data-testid="ssh-key-name"
+        />
+        <button class="fe-s3keys__btn" :disabled="busy" data-testid="ssh-key-add" @click="submit">
+          {{ t('conn.sshkeys.add') }}
+        </button>
+      </div>
+      <p class="fe-s3keys__hint">{{ t('conn.sshkeys.noCopyId') }}</p>
+    </div>
+
+    <p v-if="loading" class="fe-s3keys__muted">…</p>
+    <table v-else-if="keys.length" class="fe-s3keys__table">
+      <thead>
+        <tr>
+          <th>{{ t('conn.sshkeys.col.name') }}</th>
+          <th>{{ t('conn.sshkeys.col.fingerprint') }}</th>
+          <th>{{ t('conn.sshkeys.col.lastUsed') }}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="k in keys" :key="k.id" :class="{ 'is-off': !!k.disabled_at }">
+          <td>{{ k.name || t('conn.sshkeys.noName') }}</td>
+          <td><code>{{ fingerprintOf(k) }}</code></td>
+          <td>{{ k.last_used_at ? shortDate(k.last_used_at) : t('conn.sshkeys.neverUsed') }}</td>
+          <td class="fe-s3keys__actions">
+            <button class="fe-s3keys__link" :disabled="busy" @click="toggle(k)">
+              {{ k.disabled_at ? t('conn.sshkeys.enable') : t('conn.sshkeys.disable') }}
+            </button>
+            <button class="fe-s3keys__link is-danger" :disabled="busy" @click="drop(k)">
+              {{ confirmRemove === k.id ? t('conn.sshkeys.confirm') : t('conn.sshkeys.remove') }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else-if="canAdd" class="fe-s3keys__muted">{{ t('conn.sshkeys.empty') }}</p>
+  </section>
+</template>
+
+<style>
+/* The layout is shared with the access-key panel (fe-s3keys__*); only the
+   paste box is different, because a public key is two lines long. */
+.fe-sshkeys__form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.fe-sshkeys__paste {
+  width: 100%;
+  font-family: var(--fe-mono, ui-monospace, monospace);
+  font-size: 12px;
+  resize: vertical;
+  overflow-wrap: anywhere;
+}
+.fe-sshkeys__row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.fe-sshkeys__row .fe-cfield__input {
+  flex: 1;
+}
+</style>

package/src/components/StorageFields.vue

@@ -0,0 +1,362 @@
+<script setup lang="ts">
+/**
+ * StorageFields — a driver's config form, rendered from the driver's own
+ * descriptor (`GET /api/admin/storage-drivers`) and from nothing else.
+ *
+ * ⚠ There is no per-driver template here and there must never be one. The
+ * form this replaces on the web was a `v-if` chain that drifted away from
+ * the backend it posted to — it asked for `base_path` where the driver read
+ * `root` and never offered the s3 `prefix` at all, so three of the four
+ * drivers it offered answered 400 ROOT_PATH_FORBIDDEN on every submit. The
+ * descriptor fixes the class; a hand-written form re-opens it.
+ *
+ * It lives in the shared package so the desktop app and the web app render
+ * the same fields, in the same order, with the same help text, from the
+ * same declaration — which is the only way "the same form on every surface"
+ * survives the next driver.
+ */
+import { computed, ref } from 'vue';
+import type { LocaleCode } from '../types/ExplorerConfig';
+import type { StorageField, StorageFieldOption } from '../types/Connections';
+import { useLocale } from '../composables/useLocale';
+
+const props = defineProps<{
+  fields: StorageField[];
+  modelValue: Record<string, unknown>;
+  locale: LocaleCode;
+  /** Keys to mark as failing validation (missing required). */
+  invalid?: string[];
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Record<string, unknown>): void;
+}>();
+
+const { t } = useLocale(() => props.locale);
+
+const showAdvanced = ref(false);
+const revealed = ref<Record<string, boolean>>({});
+
+const basic = computed(() => props.fields.filter((f) => !f.advanced));
+const advanced = computed(() => props.fields.filter((f) => f.advanced));
+
+/**
+ * Translation first, the driver's English fallback second.
+ *
+ * A driver shipped after this bundle carries labels the catalogue has never
+ * heard of. Falling back to the descriptor's own English is how the field
+ * still reads as a field instead of as `storages.fields.something`.
+ */
+function label(f: StorageField): string {
+  const s = t(f.i18n_key);
+  return s === f.i18n_key ? f.label : s;
+}
+
+function help(f: StorageField): string {
+  if (!f.help_i18n_key) return f.help ?? '';
+  const s = t(f.help_i18n_key);
+  return s === f.help_i18n_key ? (f.help ?? '') : s;
+}
+
+function optionLabel(o: StorageFieldOption): string {
+  if (!o.i18n_key) return o.label;
+  const s = t(o.i18n_key);
+  return s === o.i18n_key ? o.label : s;
+}
+
+function set(key: string, value: unknown) {
+  emit('update:modelValue', { ...props.modelValue, [key]: value });
+}
+
+/** Current value, honouring the legacy spellings the driver still reads —
+ *  an old row keyed `base_path` shows up in the `root` box rather than as
+ *  an empty field the operator would refill by hand. */
+function raw(f: StorageField): unknown {
+  const v = props.modelValue?.[f.key];
+  if (v !== undefined && v !== null) return v;
+  for (const alias of f.aliases ?? []) {
+    const a = props.modelValue?.[alias];
+    if (a !== undefined && a !== null) return a;
+  }
+  return f.default ?? undefined;
+}
+
+function str(f: StorageField): string {
+  const v = raw(f);
+  return v === undefined || v === null ? '' : String(v);
+}
+
+function num(f: StorageField): string {
+  const v = raw(f);
+  return v === '' || v === undefined || v === null ? '' : String(v);
+}
+
+function bool(f: StorageField): boolean {
+  return raw(f) === true;
+}
+
+function isInvalid(f: StorageField): boolean {
+  return (props.invalid ?? []).includes(f.key);
+}
+
+function inputType(f: StorageField): string {
+  if (f.type === 'int') return 'number';
+  if (f.type === 'password' && !revealed.value[f.key]) return 'password';
+  return 'text';
+}
+
+function toggleReveal(key: string) {
+  revealed.value = { ...revealed.value, [key]: !revealed.value[key] };
+}
+</script>
+
+<template>
+  <div class="fe-cfield">
+    <p v-if="!fields.length" class="fe-cfield__empty">{{ t('conn.form.noFields') }}</p>
+
+    <template v-for="f in basic" :key="f.key">
+      <div class="fe-cfield__row" :class="{ 'is-invalid': isInvalid(f) }">
+        <!-- bool: the label belongs next to the box, not above it -->
+        <label v-if="f.type === 'bool'" class="fe-cfield__check">
+          <input
+            type="checkbox"
+            :checked="bool(f)"
+            :disabled="disabled"
+            @change="set(f.key, ($event.target as HTMLInputElement).checked)"
+          />
+          <span>{{ label(f) }}</span>
+        </label>
+        <label v-else class="fe-cfield__label" :for="`fe-cf-${f.key}`">
+          {{ label(f) }}<span v-if="f.required" class="fe-cfield__req" aria-hidden="true">*</span>
+        </label>
+
+        <select
+          v-if="f.type === 'select'"
+          :id="`fe-cf-${f.key}`"
+          class="fe-cfield__input"
+          :value="str(f)"
+          :disabled="disabled"
+          @change="set(f.key, ($event.target as HTMLSelectElement).value)"
+        >
+          <option v-for="o in f.options ?? []" :key="o.value" :value="o.value">
+            {{ optionLabel(o) }}
+          </option>
+        </select>
+
+        <textarea
+          v-else-if="f.multiline"
+          :id="`fe-cf-${f.key}`"
+          class="fe-cfield__input fe-cfield__input--area"
+          :class="{ 'fe-cfield__input--mono': f.monospace }"
+          rows="4"
+          :value="str(f)"
+          :placeholder="f.placeholder"
+          :disabled="disabled"
+          @input="set(f.key, ($event.target as HTMLTextAreaElement).value)"
+        ></textarea>
+
+        <div v-else-if="f.type === 'password'" class="fe-cfield__secret">
+          <input
+            :id="`fe-cf-${f.key}`"
+            class="fe-cfield__input fe-cfield__input--mono"
+            :type="inputType(f)"
+            autocomplete="new-password"
+            spellcheck="false"
+            :value="str(f)"
+            :placeholder="f.placeholder"
+            :disabled="disabled"
+            @input="set(f.key, ($event.target as HTMLInputElement).value)"
+          />
+          <button
+            type="button"
+            class="fe-cfield__eye"
+            :title="revealed[f.key] ? t('conn.form.hide') : t('conn.form.reveal')"
+            :aria-label="revealed[f.key] ? t('conn.form.hide') : t('conn.form.reveal')"
+            @click="toggleReveal(f.key)"
+          >
+            {{ revealed[f.key] ? '🙈' : '👁' }}
+          </button>
+        </div>
+
+        <input
+          v-else-if="f.type !== 'bool'"
+          :id="`fe-cf-${f.key}`"
+          class="fe-cfield__input"
+          :class="{ 'fe-cfield__input--mono': f.monospace }"
+          :type="inputType(f)"
+          :value="f.type === 'int' ? num(f) : str(f)"
+          :placeholder="f.placeholder"
+          :min="f.min"
+          :max="f.max"
+          :disabled="disabled"
+          @input="
+            set(
+              f.key,
+              f.type === 'int'
+                ? ($event.target as HTMLInputElement).value === ''
+                  ? null
+                  : Number(($event.target as HTMLInputElement).value)
+                : ($event.target as HTMLInputElement).value,
+            )
+          "
+        />
+
+        <p v-if="help(f)" class="fe-cfield__help">{{ help(f) }}</p>
+        <p v-if="isInvalid(f)" class="fe-cfield__error">{{ t('conn.form.required') }}</p>
+      </div>
+    </template>
+
+    <div v-if="advanced.length" class="fe-cfield__adv">
+      <button type="button" class="fe-cfield__advtoggle" @click="showAdvanced = !showAdvanced">
+        {{ showAdvanced ? '▾' : '▸' }} {{ t('conn.form.advanced') }}
+      </button>
+      <div v-if="showAdvanced" class="fe-cfield__advbody">
+        <div v-for="f in advanced" :key="f.key" class="fe-cfield__row">
+          <label v-if="f.type === 'bool'" class="fe-cfield__check">
+            <input
+              type="checkbox"
+              :checked="bool(f)"
+              :disabled="disabled"
+              @change="set(f.key, ($event.target as HTMLInputElement).checked)"
+            />
+            <span>{{ label(f) }}</span>
+          </label>
+          <template v-else>
+            <label class="fe-cfield__label" :for="`fe-cfa-${f.key}`">{{ label(f) }}</label>
+            <input
+              :id="`fe-cfa-${f.key}`"
+              class="fe-cfield__input"
+              :class="{ 'fe-cfield__input--mono': f.monospace }"
+              :type="inputType(f)"
+              :value="f.type === 'int' ? num(f) : str(f)"
+              :placeholder="f.placeholder"
+              :disabled="disabled"
+              @input="
+                set(
+                  f.key,
+                  f.type === 'int'
+                    ? ($event.target as HTMLInputElement).value === ''
+                      ? null
+                      : Number(($event.target as HTMLInputElement).value)
+                    : ($event.target as HTMLInputElement).value,
+                )
+              "
+            />
+          </template>
+          <p v-if="help(f)" class="fe-cfield__help">{{ help(f) }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.fe-cfield {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.fe-cfield__empty {
+  margin: 0;
+  color: var(--fe-text-muted);
+  font-size: 13px;
+}
+.fe-cfield__row {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.fe-cfield__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fe-text);
+}
+.fe-cfield__req {
+  color: var(--fe-danger);
+  margin-left: 3px;
+}
+.fe-cfield__input {
+  font: inherit;
+  font-size: 13.5px;
+  padding: 8px 10px;
+  border-radius: var(--fe-radius);
+  border: 1px solid var(--fe-border-strong);
+  background: var(--fe-bg);
+  color: var(--fe-text);
+  width: 100%;
+  /* ⚠ Explicit, because the host's own form styling reaches in here
+     (shadowRoot: false). The desktop shell sets `input[type="text"]
+     { min-width: 260px }` for its settings rows; inherited, that floors
+     every field in this form and overflows a narrow embed. */
+  min-width: 0;
+  box-sizing: border-box;
+}
+.fe-cfield__input:focus {
+  outline: 2px solid var(--fe-primary);
+  outline-offset: -1px;
+}
+.fe-cfield__input--mono {
+  font-family: var(--fe-font-mono);
+  font-size: 12.5px;
+}
+.fe-cfield__input--area {
+  resize: vertical;
+}
+.fe-cfield__row.is-invalid .fe-cfield__input {
+  border-color: var(--fe-danger);
+}
+.fe-cfield__secret {
+  display: flex;
+  gap: 6px;
+  align-items: stretch;
+}
+.fe-cfield__eye {
+  flex: 0 0 auto;
+  border: 1px solid var(--fe-border-strong);
+  background: var(--fe-bg-elev);
+  color: var(--fe-text);
+  border-radius: var(--fe-radius);
+  padding: 0 10px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.fe-cfield__check {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13.5px;
+  color: var(--fe-text);
+  cursor: pointer;
+}
+.fe-cfield__help {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fe-text-muted);
+  line-height: 1.45;
+}
+.fe-cfield__error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fe-danger);
+}
+.fe-cfield__advtoggle {
+  border: 0;
+  background: none;
+  color: var(--fe-text-muted);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 2px 0;
+}
+.fe-cfield__advtoggle:hover {
+  color: var(--fe-text);
+}
+.fe-cfield__advbody {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 12px;
+}
+</style>