@arcblock/did-connect-service 4.0.0-beta.8

package/dist/pages/admin/tab-profile.js

@@ -0,0 +1,383 @@
+/**
+ * Profile tab — view and edit user profile (name, email).
+ */
+import { connectedAccountsCardHtml } from "./tab-profile-accounts.js";
+export function profileTabHtml(t) {
+    return /* html */ `
+<div data-panel="profile" class="hidden tab-panel">
+  <h2 class="section-title">${t("profile.title")}</h2>
+  <p class="section-desc">${t("profile.desc")}</p>
+
+  <div class="settings-card">
+    <!-- Skeleton shown while profile data loads -->
+    <div id="profile-card-skeleton" style="padding:20px 20px 16px;">
+      <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px;">
+        <span class="skel skel-circle" style="width:64px;height:64px;flex-shrink:0;"></span>
+        <div style="flex:1;">
+          <span class="skel" style="width:140px;height:16px;margin-bottom:8px;"></span>
+          <span class="skel" style="width:56px;height:20px;border-radius:10px;"></span>
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:column;gap:12px;">
+        <span class="skel" style="width:100%;height:13px;"></span>
+        <span class="skel" style="width:72%;height:13px;"></span>
+        <span class="skel" style="width:52%;height:13px;"></span>
+      </div>
+    </div>
+    <!-- Actual content (hidden until data loads) -->
+    <div id="profile-card-content" style="display:none;">
+      <div class="profile-header" id="profile-header-info-view">
+        <div class="avatar avatar-lg avatar-editable" id="profile-avatar" onclick="triggerAvatarUpload()">
+          <span class="avatar-fallback">?</span>
+          <div class="avatar-overlay"><span>Edit</span></div>
+        </div>
+        <input type="file" id="avatar-file-input" accept="image/png,image/jpeg,image/webp" style="display:none" onchange="handleAvatarFile(this)" />
+        <div class="profile-header-body">
+          <span class="profile-header-name" id="profile-display-name"></span>
+          <span class="badge" id="profile-role-badge"></span>
+        </div>
+        <button class="btn-text" onclick="startEditName()">${t("common.edit")}</button>
+      </div>
+      <div class="profile-header" id="profile-name-editor" style="display:none;">
+        <input class="profile-editable" id="profile-name" type="text" maxlength="64" placeholder="${t("profile.unnamed")}" />
+        <button class="btn-text" onclick="saveProfile()">${t("common.save")}</button>
+        <button class="btn-text" onclick="cancelEditName()" style="color:var(--text-secondary);">${t("common.cancel")}</button>
+      </div>
+      <div class="profile-grid">
+        <div class="profile-cell">
+          <span class="profile-cell-label">DID</span>
+          <span class="profile-cell-value"><did-address id="profile-did" block></did-address></span>
+        </div>
+        <div class="profile-cell">
+          <span class="profile-cell-label">${t("profile.email")}</span>
+          <span class="profile-cell-value">
+            <span id="profile-email-display">—</span>
+            <span id="profile-email-badge" style="display:none"></span>
+            <button class="btn-text" onclick="changeEmail()">${t("profile.changeEmail")}</button>
+            <button class="btn-text" id="profile-email-verify-btn" style="display:none" onclick="verifyEmail()">${t("profile.verifyEmail")}</button>
+          </span>
+        </div>
+        <div class="profile-cell" id="profile-joined-cell" style="display:none;">
+          <span class="profile-cell-label">${t("profile.joined")}</span>
+          <span class="profile-cell-value" id="profile-joined-value"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  ${connectedAccountsCardHtml(t)}
+</div>
+`;
+}
+export const PROFILE_TAB_SCRIPT = /* js */ `
+var profileData = null;
+
+async function loadProfile() {
+  document.getElementById("profile-card-skeleton").style.display = "";
+  document.getElementById("profile-card-content").style.display = "none";
+  var data = await api("GET", "/profile");
+  document.getElementById("profile-card-skeleton").style.display = "none";
+  document.getElementById("profile-card-content").style.display = "";
+  if (!data.ok) return;
+  profileData = data.user;
+  renderProfile(data.user);
+}
+
+function renderProfile(user) {
+  var avatarEl = document.getElementById("profile-avatar");
+  if (user.avatar) {
+    avatarEl.innerHTML = '<img src="' + escapeHtml(user.avatar) + '" onerror="this.style.display=\\'none\\';this.nextSibling.style.display=\\'flex\\'">'
+      + '<span class="avatar-fallback" style="display:none">' + escapeHtml(initials(user.fullName)) + '</span>'
+      + '<div class="avatar-overlay"><span>Edit</span></div>';
+  } else {
+    avatarEl.innerHTML = '<span class="avatar-fallback">' + escapeHtml(initials(user.fullName)) + '</span>'
+      + '<div class="avatar-overlay"><span>Edit</span></div>';
+  }
+
+  document.getElementById("profile-display-name").textContent = user.fullName || __t("profile.unnamed");
+
+  var role = user.role || "guest";
+  var badge = document.getElementById("profile-role-badge");
+  badge.textContent = __t("common." + role);
+  badge.className = "badge badge-" + role;
+
+  document.getElementById("profile-did").setAttribute("did", user.did);
+
+  document.getElementById("profile-name").value = user.fullName || "";
+  cancelEditName();
+
+  document.getElementById("profile-email-display").textContent = user.email || "—";
+
+  var emailBadge = document.getElementById("profile-email-badge");
+  var emailVerifyBtn = document.getElementById("profile-email-verify-btn");
+  if (user.email) {
+    emailBadge.style.display = "";
+    if (user.emailVerified) {
+      emailBadge.textContent = __t("profile.emailVerified");
+      emailBadge.className = "badge badge-verified";
+      emailVerifyBtn.style.display = "none";
+    } else {
+      emailBadge.textContent = __t("profile.emailUnverified");
+      emailBadge.className = "badge badge-unverified";
+      emailVerifyBtn.style.display = "";
+    }
+  } else {
+    emailBadge.style.display = "none";
+    emailVerifyBtn.style.display = "none";
+  }
+
+  if (user.createdAt) {
+    document.getElementById("profile-joined-cell").style.display = "";
+    document.getElementById("profile-joined-value").textContent = absoluteTime(user.createdAt);
+  }
+}
+
+function startEditName() {
+  document.getElementById("profile-header-info-view").style.display = "none";
+  document.getElementById("profile-name-editor").style.display = "";
+  document.getElementById("profile-name").focus();
+}
+
+function cancelEditName() {
+  document.getElementById("profile-name-editor").style.display = "none";
+  document.getElementById("profile-header-info-view").style.display = "";
+  if (profileData) document.getElementById("profile-name").value = profileData.fullName || "";
+}
+
+async function saveProfile() {
+  var body = {
+    fullName: document.getElementById("profile-name").value.trim(),
+  };
+  var data = await api("PUT", "/profile", body);
+  if (data.ok) {
+    profileData = data.user;
+    renderProfile(data.user);
+    showToast(__t("profile.updated"), "success");
+    var headerName = document.getElementById("header-user-name");
+    if (headerName) headerName.textContent = data.user.fullName || truncateDid(data.user.did);
+  }
+}
+
+async function changeEmail() {
+  var currentEmail = profileData ? profileData.email || "" : "";
+  var newEmail = await promptDialog({
+    title: __t("profile.changeEmailTitle"),
+    message: __t("profile.changeEmailMsg"),
+    placeholder: __t("profile.emailPlaceholder"),
+    defaultValue: currentEmail,
+    inputType: "email",
+  });
+  if (!newEmail || newEmail === currentEmail) return;
+  var result = await api("PUT", "/profile/email", { email: newEmail });
+  if (result.ok) {
+    profileData = result.user;
+    renderProfile(result.user);
+    showToast(__t("profile.emailUpdated"), "success");
+  }
+}
+
+var _lastVerifySentAt = 0;
+
+function verifyEmail() {
+  var email = profileData ? profileData.email : "";
+  if (!email) return;
+
+  var verifyBtn = document.getElementById("profile-email-verify-btn");
+  verifyBtn.disabled = true;
+
+  // Build or reuse dialog
+  var d = document.getElementById("verify-email-dialog");
+  if (!d) {
+    d = document.createElement("dialog");
+    d.id = "verify-email-dialog";
+    d.innerHTML = '<div class="dialog-content">'
+      + '<h3 id="verify-title"></h3>'
+      + '<p id="verify-message" class="dialog-desc"></p>'
+      + '<input class="input" id="verify-input" placeholder="000000" style="margin-top:12px;" />'
+      + '</div>'
+      + '<div class="dialog-actions">'
+      + '<button class="btn-text" id="verify-resend" style="margin-right:auto"></button>'
+      + '<button class="btn btn-secondary" id="verify-cancel">' + __t("common.cancel") + '</button>'
+      + '<button class="btn" id="verify-ok">' + __t("common.confirm") + '</button>'
+      + '</div>';
+    document.body.appendChild(d);
+  }
+
+  var titleEl = document.getElementById("verify-title");
+  var msgEl = document.getElementById("verify-message");
+  var inputEl = document.getElementById("verify-input");
+  var okBtn = document.getElementById("verify-ok");
+  var cancelBtn = document.getElementById("verify-cancel");
+  var resendBtn = document.getElementById("verify-resend");
+  var countdownTimer = null;
+
+  titleEl.textContent = __t("profile.verifyCode");
+  inputEl.value = "";
+
+  function cleanup() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    verifyBtn.disabled = false;
+    d.close();
+  }
+
+  function remainingCooldown() {
+    if (!_lastVerifySentAt) return 0;
+    return Math.max(0, Math.ceil((60000 - (Date.now() - _lastVerifySentAt)) / 1000));
+  }
+
+  function syncResendBtn() {
+    var remain = remainingCooldown();
+    resendBtn.style.display = "";
+    if (remain > 0) {
+      resendBtn.disabled = true;
+      resendBtn.textContent = __t("profile.emailResendCountdown", { seconds: remain });
+    } else {
+      resendBtn.disabled = false;
+      resendBtn.textContent = __t("profile.emailResendBtn");
+    }
+  }
+
+  function startCountdown() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    syncResendBtn();
+    countdownTimer = setInterval(function() {
+      if (remainingCooldown() <= 0) {
+        clearInterval(countdownTimer);
+        countdownTimer = null;
+      }
+      syncResendBtn();
+    }, 1000);
+  }
+
+  function sendCode() {
+    msgEl.textContent = __t("profile.emailSending");
+    inputEl.disabled = true;
+    okBtn.disabled = true;
+    resendBtn.style.display = "none";
+    if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
+
+    api("POST", "/profile/email/verify").then(function(sendResult) {
+      if (!sendResult.ok) {
+        msgEl.textContent = sendResult.error || __t("profile.emailSendFailed");
+        // If there's remaining cooldown, show countdown; otherwise show resend
+        if (remainingCooldown() > 0) {
+          startCountdown();
+        } else {
+          resendBtn.style.display = "";
+          resendBtn.disabled = false;
+          resendBtn.textContent = __t("profile.emailResendBtn");
+        }
+        return;
+      }
+      _lastVerifySentAt = Date.now();
+      msgEl.textContent = __t("profile.verifyCodeMsg", { email: email });
+      inputEl.disabled = false;
+      okBtn.disabled = false;
+      inputEl.focus();
+      startCountdown();
+    });
+  }
+
+  cancelBtn.onclick = function() { cleanup(); };
+  d.onclose = function() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    verifyBtn.disabled = false;
+  };
+
+  okBtn.onclick = function() {
+    var code = inputEl.value.trim();
+    if (!code) return;
+    okBtn.disabled = true;
+    api("PUT", "/profile/email/verify", { code: code }).then(function(result) {
+      if (result.ok) {
+        cleanup();
+        profileData = result.user;
+        renderProfile(result.user);
+        showToast(__t("profile.emailVerifiedSuccess"), "success");
+      } else {
+        okBtn.disabled = false;
+        msgEl.textContent = result.error || __t("profile.emailVerifyFailed");
+      }
+    });
+  };
+
+  resendBtn.onclick = function() { sendCode(); };
+
+  d.showModal();
+
+  // If still in cooldown from a previous send, skip sending and show code input directly
+  var remain = remainingCooldown();
+  if (remain > 0) {
+    msgEl.textContent = __t("profile.verifyCodeMsg", { email: email });
+    inputEl.disabled = false;
+    okBtn.disabled = false;
+    inputEl.focus();
+    startCountdown();
+  } else {
+    sendCode();
+  }
+}
+
+function triggerAvatarUpload() {
+  document.getElementById("avatar-file-input").click();
+}
+
+function resizeImage(file, maxSize) {
+  return new Promise(function(resolve, reject) {
+    var img = new Image();
+    img.onload = function() {
+      var canvas = document.createElement("canvas");
+      canvas.width = canvas.height = maxSize;
+      var ctx = canvas.getContext("2d");
+      var s = Math.min(img.width, img.height);
+      var sx = (img.width - s) / 2;
+      var sy = (img.height - s) / 2;
+      ctx.drawImage(img, sx, sy, s, s, 0, 0, maxSize, maxSize);
+      resolve(canvas.toDataURL("image/jpeg", 0.85));
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = function() {
+      URL.revokeObjectURL(img.src);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+async function handleAvatarFile(input) {
+  var file = input.files[0];
+  if (!file) return;
+  if (file.size > 10 * 1024 * 1024) {
+    showToast("Image must be under 10MB", "error");
+    input.value = "";
+    return;
+  }
+  try {
+    var base64 = await resizeImage(file, 200);
+    var data = await api("PUT", "/profile/avatar", { avatar: base64 });
+    if (data.ok) {
+      showToast("Avatar updated", "success");
+      loadProfile();
+    }
+  } catch (e) {
+    showToast("Failed to process image", "error");
+  }
+  input.value = "";
+}
+
+async function removeAvatar() {
+  var ok = await confirmDialog({ title: "Remove Avatar", message: "Remove your avatar? Your profile will show a default avatar.", confirmLabel: "Remove" });
+  if (!ok) return;
+  var data = await api("DELETE", "/profile/avatar");
+  if (data.ok) {
+    showToast("Avatar removed", "success");
+    loadProfile();
+  }
+}
+
+registerTab("profile", function() {
+  loadProfile();
+  if (typeof loadConnectedAccounts === "function") loadConnectedAccounts();
+});
+`;
+//# sourceMappingURL=tab-profile.js.map

package/dist/pages/admin/tab-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-profile.js","sourceRoot":"","sources":["../../../src/pages/admin/tab-profile.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAItE,MAAM,UAAU,cAAc,CAAC,CAAM;IACnC,OAAO,UAAU,CAAC;;8BAEU,CAAC,CAAC,eAAe,CAAC;4BACpB,CAAC,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6DA8BgB,CAAC,CAAC,aAAa,CAAC;;;oGAGuB,CAAC,CAAC,iBAAiB,CAAC;2DAC7D,CAAC,CAAC,aAAa,CAAC;mGACwB,CAAC,CAAC,eAAe,CAAC;;;;;;;;6CAQxE,CAAC,CAAC,eAAe,CAAC;;;;+DAIA,CAAC,CAAC,qBAAqB,CAAC;kHAC2B,CAAC,CAAC,qBAAqB,CAAC;;;;6CAI7F,CAAC,CAAC,gBAAgB,CAAC;;;;;;;IAO5D,yBAAyB,CAAC,CAAC,CAAC;;CAE/B,CAAC;AACF,CAAC;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsT1C,CAAC"}

package/dist/pages/admin/tab-settings.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Settings tab — OAuth providers, builtin providers, session, email config.
+ * Only visible to owner role.
+ */
+type TFn = (key: string, params?: Record<string, string>) => string;
+export declare function settingsTabHtml(t: TFn): string;
+export declare const SETTINGS_TAB_SCRIPT: string;
+export {};
+//# sourceMappingURL=tab-settings.d.ts.map

package/dist/pages/admin/tab-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-settings.d.ts","sourceRoot":"","sources":["../../../src/pages/admin/tab-settings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAgBpE,wBAAgB,eAAe,CAAC,CAAC,EAAE,GAAG,GAAG,MAAM,CA0J9C;AAED,eAAO,MAAM,mBAAmB,QAuT/B,CAAC"}