First attempt at making a logout feature

settings.json.docker

@@ -644,7 +644,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers", "gohome"]
+      ["showusers", "gohome", "logout"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

settings.json.template

@@ -643,7 +643,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers", "gohome"]
+      ["showusers", "gohome", "logout"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

src/locales/en.json

@@ -55,6 +55,7 @@
   "pad.toolbar.embed.title": "Share and Embed this pad",
   "pad.toolbar.showusers.title": "Show the users on this pad",
   "pad.toolbar.gohome.title": "Go Home",
+  "pad.toolbar.logout.title": "Logout",
 
 
   "pad.colorpicker.save": "Save",

src/node/utils/Settings.ts

@@ -247,7 +247,7 @@ exports.toolbar = {
     right: [
         ['importexport', 'timeslider', 'savedrevision'],
         ['settings', 'embed'],
-        ['showusers', 'gohome'],
+        ['showusers', 'gohome', 'logout'],
     ],
     timeslider: [
         ['timeslider_export', 'timeslider_settings', 'timeslider_returnToPad'],

src/node/utils/toolbar.ts

@@ -247,6 +247,12 @@ module.exports = {
             class: 'buttonicon buttonicon-gohome',
         },  
 
+        logout:{
+            command: 'logout',
+            localizationId: 'pad.toolbar.logout.title',
+            class: 'buttonicon buttonicon-logout',
+        },  
+
         timeslider_export: {
             command: 'import_export',
             localizationId: 'timeslider.toolbar.exportlink.title',

src/static/css/pad/icons.css

@@ -77,6 +77,9 @@
 .buttonicon-gohome:before {
   content: "\e80b"; /* Assuming \e80b is the Unicode for the home icon */
 }
+.buttonicon-logout:before {
+  content: "\e800"; /* Assuming \e800 is the Unicode for the logout icon */
+}
 .buttonicon-savedRevision:before {
   content: "\e856";
 }

src/static/js/pad_editbar.ts

@@ -392,6 +392,17 @@ exports.padeditbar = new class {
       window.location.href = '/';
     });
 
+    this.registerCommand('logout', () => {
+      console.log('Logout button clicked');
+      // Clear session or authentication token
+      fetch('/logout', { method: 'POST' })
+        .then(response => {
+          if (response.ok) {
+            window.location.href = '/'; // Redirect to the home page
+          }
+        });
+    });
+
     this.registerCommand('embed', () => {
       this.setEmbedLinks();
       this.toggleDropDown('embed');

ui/pad.html

@@ -79,7 +79,12 @@
     <li data-type="button" data-key="embed"><a class="grouped-right" data-l10n-id="pad.toolbar.embed.title"><button class=" buttonicon buttonicon-embed" data-l10n-id="pad.toolbar.embed.title"></button></a></li><li class="separator"></li><li data-type="button" data-key="showusers"><a class="" data-l10n-id="pad.toolbar.showusers.title"><button class=" buttonicon buttonicon-showusers" data-l10n-id="pad.toolbar.showusers.title"></button></a></li>
     <li data-type="button" data-key="gohome">
       <a class="grouped_middle" data-l10n-id="pad.toolbar.gohome.title">
-        <button class="buttonicon buttonicon-gohome" data-l10n-id="pad.toolbar.gohome.title"></button>
+        <button class="buttonicon buttonicon-gohome" data-l10n-id="pad.toolbar.gohome.title" title="Go Home"></button>
+      </a>
+    </li>
+    <li data-type="button" data-key="logout">
+      <a class="grouped-right" data-l10n-id="pad.toolbar.logout.title">
+        <button class="buttonicon buttonicon-logout" data-l10n-id="pad.toolbar.logout.title" title="Logout"></button>
       </a>
     </li>