frontend: handle session transfer request failures

Only treat a session transfer as successful after receiving a successful response with the expected payload, and restore usable controls on errors.

Fixes #8172

Author: Fhatu12

src/locales/en.json

@@ -225,6 +225,7 @@
   "index.copyLink": "2. Copy link",
   "index.copyLinkDescription": "Click on the button below to copy the link to your clipboard.",
   "index.copyLinkButton": "Copy link to clipboard",
+  "index.sessionTransferError": "Unable to transfer the session. Please try again.",
   "index.transferToSystem": "3. Copy session to new system",
   "index.transferToSystemDescription": "Open the copied link in the target browser or device to transfer your session.",
   "index.code": "Code",

src/static/js/welcome.ts

@@ -1,3 +1,5 @@
+import html10n from './vendors/html10n';
+
 const checkmark = '<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor"><path vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>';
 
 function getCookie(name: string) {
@@ -11,46 +13,137 @@ function getCookie(name: string) {
 
 const cp = (window as any).clientVars?.cookiePrefix || '';
 
+const sessionTransferErrorFallback = () =>
+  html10n.get('index.sessionTransferError') || 'Unable to transfer the session. Please try again.';
+
+const safeJson = async (response: Response): Promise<unknown> => {
+  try {
+    return await response.json();
+  } catch {
+    return null;
+  }
+};
+
+const responseErrorMessage = (responseData: unknown): string => {
+  const data = responseData as Record<string, unknown>;
+  if (
+    responseData &&
+    typeof responseData === 'object' &&
+    'error' in responseData &&
+    typeof data.error === 'string' &&
+    data.error.trim() !== ''
+  ) {
+    return data.error;
+  }
+  return sessionTransferErrorFallback();
+};
+
+const showSessionTransferError = (element: HTMLElement | null, message: string) => {
+  if (!element) return;
+  element.textContent = message;
+  element.style.display = 'block';
+};
+
+const hideSessionTransferError = (element: HTMLElement | null) => {
+  if (!element) return;
+  element.textContent = '';
+  element.style.display = 'none';
+};
+
 function handleTransferOfSession() {
   const transferNowButton = document.querySelector('[data-l10n-id="index.transferSessionNow"]')! as HTMLButtonElement;
 
   transferNowButton.addEventListener('click', async () => {
+    const originalButtonContent = transferNowButton.innerHTML;
+    const copyLinkSection = document.getElementById('copy-link-section');
+    const errorElement = document.getElementById('transfer-session-error');
+    hideSessionTransferError(errorElement);
+    if (copyLinkSection) copyLinkSection.style.display = 'none';
     transferNowButton.style.display = 'inline-flex';
     transferNowButton.style.alignItems = 'center';
     transferNowButton.style.justifyContent = 'center';
-    transferNowButton.innerHTML = `${checkmark}`;
     transferNowButton.disabled = true;
 
-    // The author token is HttpOnly (ether/etherpad#6701 PR3) so we cannot
-    // read it via document.cookie. Send only the JS-readable prefsHttp; the
-    // server reads the token off the request's own cookie jar.
-    const responseWithId = await fetch("./tokenTransfer", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        prefsHttp: getCookie(`${cp}prefsHttp`) || getCookie('prefsHttp'),
-      })
-    })
+    try {
+      // The author token is HttpOnly (ether/etherpad#6701 PR3) so we cannot
+      // read it via document.cookie. Send only the JS-readable prefsHttp; the
+      // server reads the token off the request's own cookie jar.
+      const responseWithId = await fetch("./tokenTransfer", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          prefsHttp: getCookie(`${cp}prefsHttp`) || getCookie('prefsHttp'),
+        })
+      });
 
-    const copyLinkSection = document.getElementById('copy-link-section')
-    if (!copyLinkSection) return;
-    copyLinkSection.style.display = 'block';
-
-    const copyButton = document.querySelector('#copy-link-section .btn-secondary') as HTMLButtonElement
-    const responseData = await responseWithId.json();
-    copyButton.addEventListener('click', async ()=>{
-      await navigator.clipboard.writeText(responseData.id);
-      copyButton.style.display = 'inline-flex';
-      copyButton.style.alignItems = 'center';
-      copyButton.style.justifyContent = 'center';
-      copyButton.innerHTML = `${checkmark}`;
-      copyButton.disabled = true;
-    })
+      const responseData = await safeJson(responseWithId);
+      if (!responseWithId.ok) {
+        throw new Error(responseErrorMessage(responseData));
+      }
+      const transferData = responseData as Record<string, unknown>;
+      if (!responseData || typeof responseData !== 'object' ||
+          !('id' in responseData) || typeof transferData.id !== 'string' ||
+          transferData.id.trim() === '') {
+        throw new Error(sessionTransferErrorFallback());
+      }
+
+      if (!copyLinkSection) throw new Error(sessionTransferErrorFallback());
+      copyLinkSection.style.display = 'block';
+
+      const copyButton = document.querySelector('#copy-link-section .btn-secondary') as HTMLButtonElement;
+      copyButton.disabled = false;
+      copyButton.onclick = async () => {
+        await navigator.clipboard.writeText(transferData.id as string);
+        copyButton.style.display = 'inline-flex';
+        copyButton.style.alignItems = 'center';
+        copyButton.style.justifyContent = 'center';
+        copyButton.innerHTML = `${checkmark}`;
+        copyButton.disabled = true;
+      };
+      transferNowButton.innerHTML = `${checkmark}`;
+    } catch (err) {
+      if (copyLinkSection) copyLinkSection.style.display = 'none';
+      transferNowButton.innerHTML = originalButtonContent;
+      transferNowButton.disabled = false;
+      showSessionTransferError(
+          errorElement,
+          err instanceof Error && err.message ? err.message : sessionTransferErrorFallback());
+    }
   });
 }
 
+const isValidTransferCode = (code: string) => code.length === 36;
+
+async function redeemTransferCode(
+    code: string,
+    transferSessionButton: HTMLButtonElement,
+    errorElement: HTMLElement | null) {
+  hideSessionTransferError(errorElement);
+  transferSessionButton.disabled = true;
+
+  try {
+    const response = await fetch("./tokenTransfer/"+code, {
+      method: 'GET'
+    });
+    const responseData = await safeJson(response);
+    if (!response.ok) {
+      throw new Error(responseErrorMessage(responseData));
+    }
+    const transferData = responseData as Record<string, unknown>;
+    if (!responseData || typeof responseData !== 'object' ||
+        !('ok' in responseData) || transferData.ok !== true) {
+      throw new Error(sessionTransferErrorFallback());
+    }
+    window.location.reload()
+  } catch (err) {
+    transferSessionButton.disabled = !isValidTransferCode(code);
+    showSessionTransferError(
+        errorElement,
+        err instanceof Error && err.message ? err.message : sessionTransferErrorFallback());
+  }
+}
 
 const handleSettingsButtonClick = () => {
   const settingsButton = document.querySelector('.settings-button')!;
@@ -86,24 +179,22 @@ const handleMenuBarClicked = () => {
     });
   })
 
-  const transferSessionButton = document.getElementById('transferSessionButton')
+  const transferSessionButton = document.getElementById('transferSessionButton') as HTMLButtonElement | null;
   const codeInputField = document.getElementById('codeInput') as HTMLInputElement
   if (transferSessionButton) {
     transferSessionButton.addEventListener('click', ()=>{
-      const code = codeInputField.value
-      fetch("./tokenTransfer/"+code, {
-        method: 'GET'
-      })
-        .then(res => res.json())
-        .then(()=>{
-          window.location.reload()
-        })
+      const code = codeInputField.value;
+      redeemTransferCode(
+          code,
+          transferSessionButton,
+          document.getElementById('receive-session-error'));
     });
   }
 
   if (codeInputField) {
     codeInputField.addEventListener('input', (e)=>{
-      if ((e.target as HTMLInputElement).value?.length === 36) {
+      hideSessionTransferError(document.getElementById('receive-session-error'));
+      if (isValidTransferCode((e.target as HTMLInputElement).value)) {
           transferSessionButton?.removeAttribute('disabled');
       } else {
           transferSessionButton?.setAttribute('disabled', 'true');

src/templates/index.html

@@ -184,6 +184,7 @@ <h1>Etherpad</h1>
             <h3 data-l10n-id="index.transferSession"></h3>
             <div data-l10n-id="index.transferSessionDescription"></div>
             <button type="button" class="btn-secondary" style="margin-top: 20px" data-l10n-id="index.transferSessionNow"></button>
+            <div id="transfer-session-error" role="alert" aria-live="assertive" style="display: none; color: #b00020; margin-top: 10px;"></div>
 
             <!-- Copy link button -->
             <div style="display: none" id="copy-link-section">
@@ -202,6 +203,7 @@ <h3 data-l10n-id="index.transferToSystem"></h3>
             </div>
 
             <button data-l10n-id="index.transferSessionTitle" id="transferSessionButton" disabled></button>
+            <div id="receive-session-error" role="alert" aria-live="assertive" style="display: none; color: #b00020; margin-top: 10px;"></div>
           </div>
 
           <div>