feat(myshares): new version of myshares sections, supporting grants Users + Tokens

2026-05-29 02:16:15 +02:00
parent 8800353900
commit 63722c868e
43 changed files with 2676 additions and 243 deletions
@@ -0,0 +1,88 @@
+/**
+ * buildPasswordChip — shared inline password editor chip.
+ *
+ * States:
+ *   • "🔓 No password"      — unset (default)
+ *   • "🔒 Password  ×"      — set; × clears it
+ *
+ * Clicking the chip shows a hidden <input type="password">.
+ * Blur / Enter confirms; Escape cancels.
+ * CSS classes (.smd-expiry-chip-wrap, .smd-expiry-chip, .smd-expiry-chip--set,
+ * .smd-expiry-date-input) live in shareModal.css.
+ */
+
+import { i18n } from '../core/i18n.js';
+
+/**
+ * @param {boolean}              initialHasPassword
+ * @param {(v: string) => void}  onChange  '' = remove, non-empty = set new password
+ * @returns {HTMLElement}
+ */
+export function buildPasswordChip(initialHasPassword, onChange) {
+    let hasPassword = initialHasPassword;
+
+    const wrap = document.createElement('div');
+    wrap.className = 'smd-expiry-chip-wrap';
+
+    const chip = document.createElement('button');
+    chip.type = 'button';
+
+    const pwInput = document.createElement('input');
+    pwInput.type = 'password';
+    pwInput.className = 'smd-expiry-date-input hidden';
+    pwInput.placeholder = i18n.t('dialogs.password', 'Password');
+    pwInput.autocomplete = 'new-password';
+
+    const updateChip = () => {
+        if (hasPassword) {
+            chip.className = 'smd-expiry-chip smd-expiry-chip--set';
+            chip.innerHTML =
+                `<i class="fas fa-lock"></i> ${i18n.t('share.passwordProtected', 'Password')}` +
+                `<span class="smd-expiry-chip-clear" title="${i18n.t('actions.clear', 'Clear')}">×</span>`;
+            chip.querySelector('.smd-expiry-chip-clear')?.addEventListener('click', (e) => {
+                e.stopPropagation();
+                hasPassword = false;
+                onChange('');
+                updateChip();
+            });
+        } else {
+            chip.className = 'smd-expiry-chip';
+            chip.innerHTML = `<i class="fas fa-lock-open"></i> ${i18n.t('share.noPassword', 'No password')}`;
+        }
+    };
+
+    chip.addEventListener('click', () => {
+        chip.classList.add('hidden');
+        pwInput.value = '';
+        pwInput.classList.remove('hidden');
+        pwInput.focus();
+    });
+
+    const confirm = () => {
+        const val = pwInput.value;
+        pwInput.classList.add('hidden');
+        chip.classList.remove('hidden');
+        if (val) {
+            hasPassword = true;
+            onChange(val);
+        }
+        updateChip();
+    };
+
+    pwInput.addEventListener('blur', confirm);
+    pwInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            confirm();
+        }
+        if (e.key === 'Escape') {
+            pwInput.classList.add('hidden');
+            chip.classList.remove('hidden');
+        }
+    });
+
+    updateChip();
+    wrap.appendChild(chip);
+    wrap.appendChild(pwInput);
+    return wrap;
+}