@brftech/filex-core 0.40.0 → 0.41.1

package/src/components/TokensPanel.vue

@@ -45,6 +45,14 @@ const props = defineProps<{
    * otherwise would have people mint one per protocol.
    */
   protocol?: string;
+  /**
+   * The host the surrounding guide tells people to connect to. Given by the
+   * connection guides, which know the server's own public address; without
+   * it the label falls back to where this panel was loaded from. ⚠ The
+   * default label used to be built from apiBase / the page while the guide
+   * right under it printed the server's address — one screen, two machines.
+   */
+  host?: string;
 }>();
 
 const emit = defineEmits<{
@@ -52,7 +60,7 @@ const emit = defineEmits<{
 }>();
 
 const locale = computed<LocaleCode>(() => resolveLocale(props.config.locale));
-const { t } = useLocale(locale);
+const { t, formatDate } = useLocale(locale);
 
 const { tokens, loading, error, canMint, revealed, load, create, remove, dismiss } = useTokens(
   props.config,
@@ -93,18 +101,28 @@ onMounted(async () => {
   emit('active', { hasToken: tokens.value.length > 0 });
 });
 
+/**
+ * The name a token gets when the field is left empty — one the user will
+ * recognise in the list later.
+ *
+ * A protocol guide knows both halves: `WebDAV — files.example.com`, the host
+ * being the PUBLIC address the guide resolved (connectionsOrigin). The API
+ * keys page knows neither, and it used to make a host up from `apiBase`,
+ * which is whatever the page happens to talk to: every key on a local
+ * instance was called `127.0.0.1:5297`, and that address was printed as the
+ * placeholder in the README screenshots. It names the key by the day it was
+ * made instead.
+ */
 function defaultLabel(): string {
   const p = (props.protocol || '').toUpperCase();
-  return p ? `${p} — ${hostLabel()}` : hostLabel();
+  if (p) return props.host ? `${p} — ${props.host}` : p;
+  return t('conn.tokens.defaultName', { date: new Date().toISOString().slice(0, 10) });
 }
 
-/** 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';
-  }
+/** What the empty name field suggests: the saved default on a protocol guide,
+ *  an example of a useful name on the API keys page. */
+function labelPlaceholder(): string {
+  return props.protocol ? defaultLabel() : t('conn.tokens.namePlaceholder');
 }
 
 async function mint(): Promise<void> {
@@ -169,10 +187,13 @@ async function copySecret(): Promise<void> {
   }
 }
 
+/* zaman:z1 — one date formatter for the package. This was a bare
+ * `toLocaleDateString()`: the browser's locale and the browser's zone, so a
+ * key minted at 23:30 in Istanbul was dated a day early for a viewer reading
+ * UTC and came out in the wrong language besides. */
 function fmtDate(v?: string | null): string {
-  if (!v) return '';
-  const d = new Date(v);
-  return Number.isNaN(d.getTime()) ? '' : d.toLocaleDateString();
+  const ms = new Date(v ?? '').getTime();
+  return Number.isNaN(ms) ? '' : formatDate(ms);
 }
 
 function usedLabel(row: ApiToken): string {
@@ -194,7 +215,7 @@ function usedLabel(row: ApiToken): string {
       <input
         v-model="label"
         class="fe-cfield__input"
-        :placeholder="defaultLabel()"
+        :placeholder="labelPlaceholder()"
         data-testid="token-label"
       />
       <button class="fe-s3keys__btn" :disabled="busy" data-testid="token-mint" @click="mint">
@@ -208,7 +229,7 @@ function usedLabel(row: ApiToken): string {
       <input
         v-model="label"
         class="fe-cfield__input"
-        :placeholder="defaultLabel()"
+        :placeholder="labelPlaceholder()"
         data-testid="token-label"
       />