@brftech/filex-core 0.19.0 → 0.20.0

package/src/components/TokensPanel.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+/**
+ * TokensPanel — mint and revoke the API tokens this account signs in with on
+ * the protocols whose credential IS a token.
+ *
+ * ⚠⚠ Why this had to exist. FTPS, WebDAV and `filex mount` all take an API
+ * token as the password — the guides next to this panel say so in as many
+ * words. Until 2026-08-17 the only place to mint one was the admin panel's
+ * `/api/admin/ai-tokens` screen, so a normal user read "use an API token" and
+ * had nowhere to get one. The route it calls (`/api/tokens`) has always been
+ * open to every account and caps what it hands out to the caller's own role
+ * and grants; only the UI was missing.
+ *
+ * One component, every surface (see S3KeysPanel for the rule at length): the
+ * admin panel, the web explorer and the desktop app render THIS.
+ */
+import { computed, onMounted, ref } from 'vue';
+import type { ExplorerConfig, LocaleCode } from '../types/ExplorerConfig';
+import type { ApiToken } from '../types/Tokens';
+import { useLocale } from '../composables/useLocale';
+import { useTokens } from '../composables/useTokens';
+
+const props = defineProps<{
+  config: ExplorerConfig;
+  /**
+   * Which protocol the surrounding guide is showing. It only changes the
+   * default label — a token minted here works on all of them, and pretending
+   * otherwise would have people mint one per protocol.
+   */
+  protocol?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'active', v: { hasToken: boolean }): void;
+}>();
+
+const locale = computed<LocaleCode>(() => props.config.locale ?? 'tr');
+const { t } = useLocale(locale);
+
+const { tokens, loading, error, canMint, revealed, load, create, remove, dismiss } = useTokens(
+  props.config,
+);
+
+const label = ref('');
+const busy = ref(false);
+const copied = ref(false);
+const confirming = ref<number | null>(null);
+
+onMounted(async () => {
+  await load();
+  emit('active', { hasToken: tokens.value.length > 0 });
+});
+
+function defaultLabel(): string {
+  const p = (props.protocol || '').toUpperCase();
+  return p ? `${p} — ${hostLabel()}` : hostLabel();
+}
+
+/** A name the user will recognise in the list later. */
+function hostLabel(): string {
+  try {
+    return new URL(props.config.apiBase || window.location.origin).host;
+  } catch {
+    return 'filex';
+  }
+}
+
+async function mint(): Promise<void> {
+  if (busy.value) return;
+  busy.value = true;
+  copied.value = false;
+  try {
+    // ⚠ `read,write,delete` and nothing more. `share` is a web-surface verb
+    // and `admin` is refused by the server anyway; a token for mounting a
+    // drive should not be able to publish public links. The server caps this
+    // again against the caller's own role, so asking is not granting.
+    await create({ label: label.value.trim() || defaultLabel(), scopes: 'read,write,delete' });
+    await load();
+    emit('active', { hasToken: tokens.value.length > 0 });
+    label.value = '';
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function revoke(row: ApiToken): Promise<void> {
+  if (confirming.value !== row.id) {
+    confirming.value = row.id;
+    return;
+  }
+  confirming.value = null;
+  busy.value = true;
+  try {
+    await remove(row.id);
+    emit('active', { hasToken: tokens.value.length > 0 });
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function copySecret(): Promise<void> {
+  if (!revealed.value?.token) return;
+  try {
+    await navigator.clipboard.writeText(revealed.value.token);
+    copied.value = true;
+    window.setTimeout(() => (copied.value = false), 1600);
+  } catch {
+    /* clipboard refused (insecure origin, no permission) — the value is on
+       screen and selectable, which is the fallback that always works. */
+  }
+}
+
+function fmtDate(v?: string | null): string {
+  if (!v) return '';
+  const d = new Date(v);
+  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+}
+
+function usedLabel(row: ApiToken): string {
+  return row.last_used_at ? fmtDate(row.last_used_at) : t('conn.tokens.neverUsed');
+}
+</script>
+
+<template>
+  <section class="fe-s3keys" data-testid="api-tokens">
+    <header class="fe-s3keys__head">
+      <h4 class="fe-s3keys__title">{{ t('conn.tokens.title') }}</h4>
+      <p class="fe-s3keys__lead">{{ t('conn.tokens.lead') }}</p>
+    </header>
+
+    <p v-if="canMint === false" class="fe-s3keys__muted">{{ t('conn.tokens.cannotMint') }}</p>
+    <p v-if="error" class="fe-s3keys__warn">{{ error }}</p>
+
+    <div v-if="canMint" class="fe-s3keys__form">
+      <input
+        v-model="label"
+        class="fe-cfield__input"
+        :placeholder="defaultLabel()"
+        data-testid="token-label"
+      />
+      <button class="fe-s3keys__btn" :disabled="busy" data-testid="token-mint" @click="mint">
+        {{ t('conn.tokens.mint') }}
+      </button>
+    </div>
+
+    <!-- The secret, once. -->
+    <div v-if="revealed" class="fe-s3keys__secret" data-testid="token-secret">
+      <p class="fe-s3keys__once">{{ t('conn.tokens.once') }}</p>
+      <div class="fe-s3keys__pair">
+        <code>{{ revealed.token }}</code>
+        <button class="fe-s3keys__copy" @click="copySecret">
+          {{ copied ? t('conn.guide.copied') : t('conn.guide.copy') }}
+        </button>
+      </div>
+      <button class="fe-s3keys__dismiss" @click="dismiss">
+        {{ t('conn.tokens.dismiss') }}
+      </button>
+    </div>
+
+    <p v-if="loading" class="fe-s3keys__muted">…</p>
+    <table v-else-if="tokens.length" class="fe-s3keys__table">
+      <thead>
+        <tr>
+          <th>{{ t('conn.tokens.col.label') }}</th>
+          <th>{{ t('conn.tokens.col.scopes') }}</th>
+          <th>{{ t('conn.tokens.col.used') }}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in tokens" :key="row.id">
+          <td>{{ row.label || '—' }}</td>
+          <td><code>{{ row.scopes }}</code></td>
+          <td>{{ usedLabel(row) }}</td>
+          <td class="fe-s3keys__actions">
+            <button class="fe-s3keys__link is-danger" :disabled="busy" @click="revoke(row)">
+              {{ confirming === row.id ? t('conn.tokens.confirm') : t('conn.tokens.revoke') }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else-if="canMint" class="fe-s3keys__muted">{{ t('conn.tokens.empty') }}</p>
+
+    <!-- ⚠ Said next to the button rather than in a document nobody opens: a
+         revoked token stops a session that is already open, not only the next
+         login. That is a change in behaviour worth knowing before relying on
+         it, and it is the honest answer to "how do I stop this machine". -->
+    <p v-if="canMint" class="fe-s3keys__hint">{{ t('conn.tokens.revokeHint') }}</p>
+  </section>
+</template>

package/src/components/UploadProgress.vue

@@ -32,7 +32,9 @@ function mapStatus(s: UploadJob['status']): OperationStatus {
   if (s === 'done') return 'done';
   if (s === 'error') return 'error';
   if (s === 'aborted') return 'aborted';
-  return 'running'; // pending | initializing | uploading | finalizing
+  // pending | initializing | uploading | committing | transferring — all of
+  // them are still in flight as far as the tray is concerned.
+  return 'running';
 }
 
 watch(
@@ -50,6 +52,8 @@ watch(
           error: j.error ?? null,
           uploadedBytes: j.uploadedBytes,
           totalBytes: j.totalBytes,
+          // Cancellable only while chunks are still moving: once the commit is
+          // accepted the bytes are filex's and the ops worker owns the rest.
           cancellable: j.status === 'uploading' || j.status === 'initializing',
           retryable: j.status === 'error',
         },

package/src/composables/useConnections.ts

@@ -0,0 +1,271 @@
+/**
+ * useConnections — the one client for the storage-connection surface.
+ *
+ * It talks to the same server the explorer does, through the same auth
+ * plumbing (`useFileApi` owns bearer/CSRF/basic resolution, including the
+ * function-token the desktop app hands down), so there is no second place
+ * that knows how to authenticate.
+ *
+ * Two audiences, deliberately separated:
+ *
+ *   • an ADMIN gets the driver descriptors and full CRUD over storages
+ *     (`/api/admin/*`);
+ *   • everybody else gets `visible` — the storage names the manager root
+ *     already returns to them — plus their own identity, which is all the
+ *     "how to connect" pages need.
+ *
+ * ⚠ Permission is decided by ASKING THE SERVER, never by reading a role
+ * off `/api/auth/me`. An API token whose scopes exclude `admin` belongs to
+ * an admin account and still gets 403 on `/api/admin/storages`; trusting
+ * the role would render a form whose every submit fails.
+ */
+
+import { computed, ref, shallowRef } from 'vue';
+import type { ExplorerConfig } from '../types/ExplorerConfig';
+import type {
+  ConnectionsUser,
+  ManageDenial,
+  StorageDriverDescriptor,
+  StorageField,
+  StorageRow,
+  StorageTestResult,
+  StorageWrite,
+} from '../types/Connections';
+import { useFileApi } from './useFileApi';
+
+/**
+ * The URL prefix the `/api/...` routes hang off.
+ *
+ * `apiBase: ''` is a legitimate value (the admin SPA is same-origin), so
+ * only `undefined`/`null` means "not given" — a falsy check would send the
+ * SPA's requests to the wrong place. Legacy embedders configure `endpoint`
+ * instead of `apiBase`; the prefix is recovered from it so they are not
+ * excluded.
+ */
+export function connectionsBase(config: ExplorerConfig): string {
+  if (config.apiBase != null) return config.apiBase.replace(/\/+$/, '');
+  const m = config.endpoint ?? '';
+  const cut = m.indexOf('/api/');
+  return cut >= 0 ? m.slice(0, cut) : '';
+}
+
+/**
+ * The origin a client program should be pointed at.
+ *
+ * The instruction pages are only worth anything if they name the real
+ * deployment, so this resolves to an absolute origin: the configured
+ * apiBase when there is one (the desktop app, embeds), otherwise the page's
+ * own origin (the admin SPA, which is served by the same binary).
+ */
+export function connectionsOrigin(config: ExplorerConfig): string {
+  const base = connectionsBase(config);
+  if (/^https?:\/\//i.test(base)) {
+    try {
+      return new URL(base).origin;
+    } catch {
+      return base;
+    }
+  }
+  if (typeof window !== 'undefined' && window.location) return window.location.origin;
+  return base;
+}
+
+export function useConnections(config: ExplorerConfig) {
+  const api = useFileApi(config);
+  const base = connectionsBase(config);
+  const url = (path: string) => `${base}${path}`;
+
+  const drivers = shallowRef<StorageDriverDescriptor[]>([]);
+  const storages = shallowRef<StorageRow[]>([]);
+  /** Storage names a non-admin may see (manager root). */
+  const visible = shallowRef<string[]>([]);
+  const me = ref<ConnectionsUser | null>(null);
+
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref<string | null>(null);
+  /** null until the first load decides; then true, or a reason it is false. */
+  const canManage = ref<boolean | null>(null);
+  const denial = ref<ManageDenial | null>(null);
+
+  function statusOf(e: unknown): number | undefined {
+    return (e as { status?: number } | null)?.status;
+  }
+
+  function messageOf(e: unknown): string {
+    const err = e as { message?: string } | null;
+    return err?.message || String(e);
+  }
+
+  /** The full picture, in as few round-trips as the permission allows. */
+  async function load(): Promise<void> {
+    loading.value = true;
+    error.value = null;
+    try {
+      // Identity first: the guides need the caller's own e-mail (it IS the
+      // WebDAV username), and it is the one call every role may make.
+      try {
+        const body = await api.jsonFetch<{ user: ConnectionsUser }>(url('/api/auth/me'));
+        me.value = body?.user ?? null;
+      } catch (e) {
+        if (statusOf(e) === 401) {
+          canManage.value = false;
+          denial.value = 'anonymous';
+        }
+        me.value = null;
+      }
+
+      try {
+        drivers.value = await api.jsonFetch<StorageDriverDescriptor[]>(
+          url('/api/admin/storage-drivers'),
+        );
+        canManage.value = true;
+        denial.value = null;
+      } catch (e) {
+        drivers.value = [];
+        canManage.value = false;
+        // 401/403 is a permission answer, not a fault: a viewer is meant to
+        // land on the guides. Anything else is a real failure and is shown.
+        const st = statusOf(e);
+        if (st === 403) denial.value = 'none';
+        else if (st === 401) denial.value = 'anonymous';
+        else {
+          denial.value = 'unreachable';
+          error.value = messageOf(e);
+        }
+      }
+
+      if (canManage.value) {
+        try {
+          const rows = await api.jsonFetch<StorageRow[]>(url('/api/admin/storages'));
+          storages.value = Array.isArray(rows) ? rows : [];
+          visible.value = storages.value.map((s) => s.name);
+        } catch (e) {
+          error.value = messageOf(e);
+        }
+      } else {
+        // What a non-admin may see, from the endpoint they already use.
+        try {
+          const root = await api.index('');
+          visible.value = Array.isArray(root?.storages) ? root.storages : [];
+        } catch {
+          visible.value = [];
+        }
+      }
+      loaded.value = true;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function createStorage(body: StorageWrite): Promise<StorageRow> {
+    const created = await api.jsonFetch<StorageRow>(url('/api/admin/storages'), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    await load();
+    return created;
+  }
+
+  async function updateStorage(id: number, body: Partial<StorageWrite>): Promise<StorageRow> {
+    const updated = await api.jsonFetch<StorageRow>(url(`/api/admin/storages/${id}`), {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    await load();
+    return updated;
+  }
+
+  async function deleteStorage(id: number): Promise<void> {
+    await api.jsonFetch(url(`/api/admin/storages/${id}`), { method: 'DELETE' });
+    await load();
+  }
+
+  /**
+   * Try a driver config without saving it.
+   *
+   * The endpoint answers 200 with `{ok:false,error}` for a connection that
+   * did not work — a failed *test* is a successful *request* — so a thrown
+   * error here means the call itself failed and is reported as such.
+   */
+  async function testStorage(body: {
+    driver: string;
+    config: Record<string, unknown>;
+  }): Promise<StorageTestResult> {
+    try {
+      return await api.jsonFetch<StorageTestResult>(url('/api/admin/storages/test'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+    } catch (e) {
+      return { ok: false, error: messageOf(e) };
+    }
+  }
+
+  function descriptor(driver: string): StorageDriverDescriptor | undefined {
+    return drivers.value.find((d) => d.driver === driver);
+  }
+
+  function fields(driver: string): StorageField[] {
+    return descriptor(driver)?.fields ?? [];
+  }
+
+  /** The config a fresh form starts from: every declared default, nothing else. */
+  function defaults(driver: string): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+    for (const f of fields(driver)) {
+      if (f.default !== undefined && f.default !== null) out[f.key] = f.default;
+    }
+    return out;
+  }
+
+  /**
+   * Required fields the config has not filled — checked HERE as well as on
+   * the server so the user is told before a round-trip, and with the same
+   * alias rules (`base_path` still counts as `root`).
+   */
+  function missingRequired(driver: string, cfg: Record<string, unknown>): StorageField[] {
+    return fields(driver).filter((f) => {
+      if (!f.required || f.default !== undefined) return false;
+      for (const k of [f.key, ...(f.aliases ?? [])]) {
+        const v = cfg[k];
+        if (v === undefined || v === null) continue;
+        if (typeof v === 'string' && v.trim() === '') continue;
+        return false;
+      }
+      return true;
+    });
+  }
+
+  const driverNames = computed(() => drivers.value.map((d) => d.driver));
+
+  return {
+    // state
+    drivers,
+    driverNames,
+    storages,
+    visible,
+    me,
+    loading,
+    loaded,
+    error,
+    canManage,
+    denial,
+    // actions
+    load,
+    createStorage,
+    updateStorage,
+    deleteStorage,
+    testStorage,
+    // descriptor helpers
+    descriptor,
+    fields,
+    defaults,
+    missingRequired,
+  };
+}
+
+export type ConnectionsApi = ReturnType<typeof useConnections>;

package/src/composables/useFileApi.ts

@@ -201,6 +201,9 @@ export function resolveEndpoints(config: ExplorerConfig): EndpointMap {
 
   return {
     manager,
+    // Staged (chunked + resumable) uploads — what useUploadChunked speaks on
+    // every driver. The {id} routes are derived from this one.
+    uploadBegin: derive(config.uploadBegin, '/api/files/upload/begin'),
     uploadInit: derive(config.uploadInit, '/api/files/upload/init'),
     uploadFinalize: derive(config.uploadFinalize, '/api/files/upload/finalize'),
     uploadAbort: derive(config.uploadAbort, '/api/files/upload/abort'),
@@ -322,7 +325,7 @@ export function useFileApi(config: ExplorerConfig) {
 
   // Map an HTTP status to a short, human-readable message in the explorer's
   // locale. The raw JSON body is attached as `.detail` for debugging but never
-  // shown in the toast (Burak: "404/403 falan verince ham json görüyorum").
+  // shown in the toast (Ada: "404/403 falan verince ham json görüyorum").
   function statusMessage(status: number): string {
     const tr = (config.locale ?? 'tr') !== 'en';
     const m: Record<number, [string, string]> = {
@@ -361,7 +364,17 @@ export function useFileApi(config: ExplorerConfig) {
       err.detail = text.slice(0, 300);
       throw err;
     }
-    return res.json() as Promise<T>;
+    // ⚠⚠ A 204 carries NO BODY, and several endpoints answer with one (every
+    // delete does). Parsing it throws "Unexpected end of JSON input" AFTER the
+    // server has already done the work, so the caller reports a failure for an
+    // operation that succeeded — measured 2026-08-16 in a browser: revoking an
+    // S3 access key deleted it on the server and left it on screen with an
+    // error under it, which invites the user to trust a credential that is
+    // gone. An empty success is a success.
+    if (res.status === 204 || res.status === 205) return undefined as T;
+    const body = await res.text();
+    if (!body) return undefined as T;
+    return JSON.parse(body) as T;
   }
 
   // --------------------------------------------------------------------

package/src/composables/useNFSExports.ts

@@ -0,0 +1,148 @@
+/**
+ * useNFSExports — the one client for the NFS export surface.
+ *
+ * Same shape as useS3Keys and useSSHKeys, and mounted by every surface from
+ * packages/core for the same reason: a credential screen with two
+ * implementations eventually hands out access one of them cannot revoke.
+ */
+
+import { computed, ref, shallowRef } from 'vue';
+import type { ExplorerConfig } from '../types/ExplorerConfig';
+import type { NFSConnection, NFSExport, NFSExportCreated } from '../types/NFSExports';
+import { connectionsBase } from './useConnections';
+import { useFileApi } from './useFileApi';
+
+export function useNFSExports(config: ExplorerConfig) {
+  const api = useFileApi(config);
+  const base = connectionsBase(config);
+  const url = (path: string) => `${base}${path}`;
+
+  const exports = shallowRef<NFSExport[]>([]);
+  const connection = ref<NFSConnection | null>(null);
+  const loading = ref(false);
+  const loaded = ref(false);
+  const error = ref<string | null>(null);
+  const canMint = ref<boolean | null>(null);
+  /** The path, held only while the user is looking at it. */
+  const revealed = ref<NFSExportCreated | null>(null);
+
+  function messageOf(e: unknown): string {
+    const err = e as { message?: string; detail?: string } | null;
+    if (err?.detail) {
+      try {
+        const parsed = JSON.parse(err.detail) as { error?: string };
+        if (parsed?.error) return parsed.error;
+      } catch {
+        /* not JSON */
+      }
+    }
+    return err?.message || String(e);
+  }
+
+  function statusOf(e: unknown): number | undefined {
+    return (e as { status?: number } | null)?.status;
+  }
+
+  async function load(): Promise<void> {
+    loading.value = true;
+    error.value = null;
+    try {
+      const body = await api.jsonFetch<{ exports: NFSExport[] } & NFSConnection>(
+        url('/api/auth/nfs-exports'),
+      );
+      exports.value = Array.isArray(body?.exports) ? body.exports : [];
+      connection.value = {
+        enabled: body?.enabled !== false,
+        host: body?.host ?? '',
+        port: body?.port ?? 2049,
+      };
+      canMint.value = true;
+    } catch (e) {
+      exports.value = [];
+      canMint.value = false;
+      if (statusOf(e) !== 401 && statusOf(e) !== 403) error.value = messageOf(e);
+    } finally {
+      loading.value = false;
+      loaded.value = true;
+    }
+  }
+
+  async function create(req: {
+    label: string;
+    storage?: string;
+    prefix?: string;
+    read_only?: boolean;
+    allow_cidrs?: string;
+  }): Promise<NFSExportCreated | null> {
+    error.value = null;
+    try {
+      const body = await api.jsonFetch<NFSExportCreated>(url('/api/auth/nfs-exports'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(req),
+      });
+      revealed.value = body;
+      if (body?.host) {
+        connection.value = { enabled: body.enabled !== false, host: body.host, port: body.port };
+      }
+      await load();
+      return body;
+    } catch (e) {
+      error.value = messageOf(e);
+      return null;
+    }
+  }
+
+  async function setDisabled(id: number, disabled: boolean): Promise<void> {
+    error.value = null;
+    try {
+      await api.jsonFetch(url(`/api/auth/nfs-exports/${id}/state`), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ disabled }),
+      });
+      await load();
+    } catch (e) {
+      error.value = messageOf(e);
+    }
+  }
+
+  async function remove(id: number): Promise<void> {
+    error.value = null;
+    try {
+      await api.jsonFetch(url(`/api/auth/nfs-exports/${id}`), { method: 'DELETE' });
+      if (revealed.value?.export?.id === id) revealed.value = null;
+      await load();
+    } catch (e) {
+      error.value = messageOf(e);
+    }
+  }
+
+  function dismissPath() {
+    revealed.value = null;
+  }
+
+  /** The export a guide should render a mount line for. */
+  const guideExport = computed<NFSExport | null>(() => {
+    if (revealed.value?.export) return revealed.value.export;
+    const usable = exports.value.filter((e) => !e.disabled_at);
+    if (!usable.length) return null;
+    return usable.reduce((a, b) => (a.created_at >= b.created_at ? a : b));
+  });
+
+  return {
+    exports,
+    connection,
+    loading,
+    loaded,
+    error,
+    canMint,
+    revealed,
+    guideExport,
+    load,
+    create,
+    setDisabled,
+    remove,
+    dismissPath,
+  };
+}