Update handle in UI after changing

Also improve UX a bit
takingnames · Oct 1, 2024 · 8163670 · 8163670
1 parent 5318ec6
commit 8163670
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/atproto.js b/atproto.js
@@ -173,6 +173,15 @@ function logout() {
   localStorage.removeItem('login_data');
 }
 
+function setLoginDataHandle(newHandle) {
+  const loginDataJson = localStorage.getItem('login_data');
+  if (loginDataJson) {
+    const ld = JSON.parse(loginDataJson);
+    ld.handle = newHandle;
+    localStorage.setItem('login_data', JSON.stringify(ld));
+  }
+}
+
 async function login(handleOrServer) {
 
   let handle;
@@ -424,4 +433,5 @@ export {
   login,
   logout,
   inProd,
+  setLoginDataHandle,
 };
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
 
     <style>
 
-      #user-id {
+      .user-id {
         font-weight: bold;
       }
 
@@ -88,7 +88,7 @@ <h1>Custom Bluesky Handles</h1>
 
     <template id='logged-in-page'>
       <p>
-        Your current handle is <span id='user-id'></span> (<a id='logout-btn' href='/logout'>logout</a>)
+        Your current handle is <span class='user-id'></span> (<a id='logout-btn' href='/logout'>logout</a>)
       </p>
 
       <p>

diff --git a/ui.js b/ui.js
@@ -93,7 +93,7 @@ class LoggedInPage extends HTMLElement {
   connectedCallback() {
     const tmpl = cloneTemplate('logged-in-page');
 
-    const userIdEl = tmpl.querySelector('#user-id');
+    const userIdEl = tmpl.querySelector('.user-id');
     userIdEl.innerText = this.atClient.handle;
 
     const logoutBtn = tmpl.querySelector('#logout-btn');
@@ -155,7 +155,7 @@ async function setRecords(atClient, ndClient, statusText) {
 
   const newHandle = host ? `${host}.${domain}` : domain;
 
-  const failHtml = `Failed to update handle. <a href='${window.location.href}'>Restart</a>.`;
+  const failHtml = `Failed to update handle. <a href='${window.location.href}'>Start Over</a>.`;
 
   let attemptNum = 1;
   const intId = setInterval(async () => {
@@ -182,7 +182,10 @@ async function setRecords(atClient, ndClient, statusText) {
         statusText.innerHTML = failHtml;
         return;
       }
-      statusText.innerText = "Successfully updated handle";
+
+      atproto.setLoginDataHandle(newHandle);
+
+      statusText.innerHTML = `Successfully updated handle to <span class='user-id'>${newHandle}</span>. <a href='${window.location.href}'>Start Over</a>`;
     }
   }, 1000);
 }