chore: completed implementation of transfer token

Author: SamTV12345

src/locales/de.json

@@ -56,11 +56,13 @@
 	"index.createOpenPad": "Pad öffnen",
   "index.settings": "Einstellungen",
   "index.receiveSessionTitle": "Sitzung empfangen",
+  "index.receiveSessionDescription": "Hier kannst du eine Etherpad-Sitzung aus einem anderen Browser oder Gerät empfangen. Bedenke allerdings, dass dadurch deine aktuelle Sitzung, falls vorhanden gelöscht wird.",
+  "index.code": "Übertragungscode",
   "index.transferSessionTitle": "Sitzung übertragen",
   "index.transferSession": "1. Sitzung übertragen",
   "index.copyLink": "2. Link kopieren",
-  "index.copyLinkButton": "Übertragungslink kopieren",
-  "index.copyLinkDescription": "Klicke auf den untenstehenden Button, um den Übertragungslink in deine Zwischenablage zu kopieren.",
+  "index.copyLinkButton": "Übertragungscode kopieren",
+  "index.copyLinkDescription": "Klicke auf den untenstehenden Button, um den Übertragungscode in deine Zwischenablage zu kopieren.",
   "index.transferToSystem": "3. Sitzung einfügen",
   "index.transferToSystemDescription": "Öffne den kopierten Link in dem neuen Browser oder Gerät, um deine aktuelle Etherpad-Sitzung zu übertragen.",
   "index.transferSessionNow": "Jetzt übertragen",

src/locales/en.json

@@ -37,6 +37,7 @@
   "index.settings": "Settings",
   "index.transferSessionTitle": "Transfer session",
   "index.receiveSessionTitle": "Receive session",
+  "index.receiveSessionDescription": "Here you can receive an Etherpad session from another browser or device. Please note, however, that this will delete your current session, if any.",
   "index.transferSession": "1. Transfer session",
   "index.transferSessionNow": "Transfer session now",
   "index.copyLink": "2. Copy link",

src/node/hooks/express/tokenTransfer.ts

@@ -37,6 +37,9 @@ export const expressCreateServer =  (hookName:string, {app}:ArgsExpressType) =>
     }
 
     const token = await db.get(`${tokenTransferKey}:${id}`)
+
+    res.cookie('token', tokenData.token, {path: '/', maxAge: 1000*60*60*24*365});
+    res.cookie('prefsHttp', tokenData.prefsHttp, {path: '/', maxAge: 1000*60*60*24*365});
     res.send(token);
   })
 }

src/static/js/welcome.ts

@@ -43,12 +43,6 @@ function handleTransferOfSession() {
       copyButton.style.justifyContent = 'center';
       copyButton.innerHTML = `${checkmark}`;
       copyButton.disabled = true;
-
-
-      // Show the new section
-      const linkDisplay = document.getElementById('transfer-to-system-section')
-      if (!linkDisplay) return;
-      linkDisplay.style.display = 'block';
     })
   });
 }
@@ -63,6 +57,8 @@ const handleSettingsButtonClick = () => {
     if (e.target === settingsDialog) {
       settingsDialog.close();
       settingsDialog.innerHTML = initialSettingsHtml;
+      handleMenuBarClicked();
+      handleTransferOfSession();
     }
   });
 
@@ -85,6 +81,32 @@ const handleMenuBarClicked = () => {
       (sections[index +1] as HTMLElement).style.display = 'block';
     });
   })
+
+  const transferSessionButton = document.getElementById('transferSessionButton')
+  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()
+        })
+    });
+  }
+
+  if (codeInputField) {
+    codeInputField.addEventListener('input', (e)=>{
+      if (e.target.value.length === 36) {
+          transferSessionButton?.removeAttribute('disabled');
+      } else {
+          transferSessionButton?.setAttribute('disabled', 'true');
+      }
+    })
+  }
+
 }
 
 window.addEventListener('load', () => {

src/static/skins/colibris/index.css

@@ -102,7 +102,7 @@ h1 {
   border-radius: 5px;
 }
 
-#button, #button:hover, #go2Name [type="submit"] {
+#button, #button:hover, #go2Name [type="submit"], #transferSessionButton {
   order: 2;
   margin-top: 0.5rem;
   line-height: 1.25rem;
@@ -117,10 +117,14 @@ h1 {
   cursor: pointer;
 }
 
-#go2Name [type="submit"]:hover {
+#go2Name [type="submit"]:hover, #transferSessionButton {
   background-color: oklch(52.7% 0.154 150.069)
 }
 
+#transferSessionButton:disabled {
+  opacity: 0.5;
+}
+
 #button, #button:hover {
   order: 2;
 }
@@ -134,7 +138,7 @@ h1 {
 }
 
 
-#go2Name [type="submit"] {
+#go2Name [type="submit"], #transferSessionButton {
   display: block;
   background-color: var(--ep-color);
   color: white;
@@ -245,6 +249,16 @@ a, a:visited, a:hover, a:active {
   padding: 1.5rem;
 }
 
+#codeInput {
+  height: auto;
+  position: static;
+  border: 1px solid var(--muted-border);
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  outline: none;
+  transition: border 0.2s;
+}
+
 @media (max-width: 640px) {
   #inner {
     max-width: 100%;

src/templates/index.html

@@ -171,7 +171,6 @@ <h1>Etherpad</h1>
                 <button data-l10n-id="index.transferSessionTitle" class="active-btn"></button>
                 <button data-l10n-id="index.receiveSessionTitle"></button>
           </div>
-
           <div>
 
             <!-- Initial link button -->
@@ -185,11 +184,17 @@ <h3 data-l10n-id="index.copyLink"></h3>
               <div data-l10n-id="index.copyLinkDescription"></div>
               <button type="button" class="btn-secondary" style="margin-top: 20px" data-l10n-id="index.copyLinkButton"></button>
             </div>
-
-            <div id="transfer-to-system-section" style="display: none; margin-top: 30px;">
-              <h3 data-l10n-id="index.transferToSystem"></h3>
-              <div data-l10n-id="index.transferToSystemDescription"></div>
+          </div>
+          <div id="transfer-to-system-section" style="display: none; margin-top: 30px;">
+            <h3 data-l10n-id="index.transferToSystem"></h3>
+            <div data-l10n-id="index.transferToSystemDescription"></div>
+            <p data-l10n-id="index.receiveSessionDescription"></p>
+            <div>
+              <label for="codeInput" data-l10n-id="index.code"></label>
+              <input type="text" id="codeInput"/>
             </div>
+
+            <button data-l10n-id="index.transferSessionTitle" id="transferSessionButton" disabled></button>
           </div>
 
           <div>