openvibers/openvibe.network Commits

Email addresses on openvibe.my: real controls (badges, buttons, a field) (#749)

OP OpenVibers committed 3 days ago · a2bca22c84 · 3 files, +19 −3

The card drew browser-default buttons and a bare field. Each address now says what it is beside it (Verified or
Not verified, Primary: the kit badges) and carries its own actions as the kit buttons; the form to add one is the
kit field with its button beside it. No behaviour change: the same ids, data attributes and requests.

Changes

ddiff --git a/public/css/my.css b/public/css/my.css
iindex f9998132..eb6498af 100644
---- a/public/css/my.css
++++ b/public/css/my.css
@@@ -690,3 +690,14 @@ button.td-stat:hover span { color: var(--accent-light); }
  .my-out-still{margin:18px 0 0;color:var(--text-muted,#7386a3);font-size:.88rem}
  .my-out-all{color:var(--text-secondary,#96a7c2)}
  @media (max-width:520px){.my-out-go{display:flex;width:100%}}
++
++/* Email addresses (11-10, the owner: "customize all the inputs and buttons… that aren't styled"): each address with what
++   it is beside it and its actions under it, and the form to add one, in the kit's own controls. */
++.my-email { padding: 12px 0; border-bottom: 1px solid var(--border); }
++.my-email-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
++.my-email-top strong { overflow-wrap: anywhere; }
++.my-email-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
++.my-email-add { margin-top: 16px; }
++.my-email-row { display: flex; gap: 8px; align-items: stretch; }
++.my-email-row input { flex: 1; min-width: 0; }
++#account-emails-message:empty { display: none; }
ddiff --git a/public/js/my/emails.js b/public/js/my/emails.js
iindex 9e56a408..664442fe 100644
---- a/public/js/my/emails.js
++++ b/public/js/my/emails.js
@@@ -9,7 +9,12 @@
          try {
              const data = await apiFetch('/api/v1/me/emails');
              const rows = data.emails || [];
--            list.innerHTML = rows.length ? rows.map((e) => `<article style="padding:12px 0;border-bottom:1px solid var(--border,#ddd)"><strong>${esc(e.email)}</strong> · ${e.verified ? 'Verified' : 'Not verified'}${e.primary ? ' · Primary' : ''}<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px">${e.verified ? '' : `<button type="button" data-verify="${esc(e.id)}">Send verification link</button>`}${e.primary || !e.verified ? '' : `<button type="button" data-primary="${esc(e.id)}">Make primary</button>`}${e.primary ? '' : `<button type="button" data-remove="${esc(e.id)}">Remove</button>`}</div></article>`).join('') : 'No email addresses are attached to this account yet.';
++            // Each address says what it is beside it (the kit's badges) and carries its own actions (the kit's buttons).
++            const btn = (kind, attr, id, label) => `<button type="button" class="ovk-btn ovk-btn--small ovk-btn--${kind}" ${attr}="${esc(id)}">${label}</button>`;
++            list.innerHTML = rows.length ? rows.map((e) => {
++                const acts = (e.verified ? '' : btn('primary', 'data-verify', e.id, 'Send verification link')) + (e.primary || !e.verified ? '' : btn('quiet', 'data-primary', e.id, 'Make primary')) + (e.primary ? '' : btn('quiet', 'data-remove', e.id, 'Remove'));
++                return `<article class="my-email"><div class="my-email-top"><strong>${esc(e.email)}</strong><span class="ovk-badge ${e.verified ? 'ovk-badge--ok' : 'ovk-badge--warn'}">${e.verified ? 'Verified' : 'Not verified'}</span>${e.primary ? '<span class="ovk-badge ovk-badge--accent">Primary</span>' : ''}</div>${acts ? `<div class="my-email-acts">${acts}</div>` : ''}</article>`;
++            }).join('') : 'No email addresses are attached to this account yet.';
          } catch { list.textContent = 'Could not load your email addresses.'; }
      }
      list.addEventListener('click', async (event) => {
ddiff --git a/public/my.html b/public/my.html
iindex 96ed9d1d..c4cb804c 100644
---- a/public/my.html
++++ b/public/my.html
@@@ -141,9 +141,9 @@
          <h2><span class="icon"><i class="fa-solid fa-envelope"></i></span> Email addresses</h2>
          <p>Keep several verified addresses on your account. Only you can see this list.</p>
          <div id="account-emails-list" aria-live="polite" role="status">Loading your email addresses…</div>
--        <form id="account-email-add" style="margin-top:16px">
++        <form id="account-email-add" class="ovk-form my-email-add">
              <label for="account-email-new">Add an email address</label>
--            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:6px"><input id="account-email-new" type="email" autocomplete="email" maxlength="254" required><button type="submit">Add address</button></div>
++            <div class="my-email-row"><input id="account-email-new" type="email" autocomplete="email" inputmode="email" maxlength="254" placeholder="[email protected]" required><button type="submit" class="ovk-btn ovk-btn--primary">Add address</button></div>
          </form>
          <p id="account-emails-message" role="status" aria-live="polite"></p>
      </div>