Merge f5598fdb4e into 050869aecd

settings.json.docker

@@ -290,6 +290,7 @@
     "cmdShiftC": "${PAD_SHORTCUTS_ENABLED_CMD_SHIFT_C:true}", /* clear authorship */
     "cmdH":      "${PAD_SHORTCUTS_ENABLED_CMD_H:true}",       /* backspace */
     "ctrlHome":  "${PAD_SHORTCUTS_ENABLED_CTRL_HOME:true}",   /* scroll to top of pad */
+    "cmdEsc":    "${PAD_SHORTCUTS_ENABLED_CMD_ESC:true}",     /* Exit pad and go back to home */
     "pageUp":    "${PAD_SHORTCUTS_ENABLED_PAGE_UP:true}",
     "pageDown":  "${PAD_SHORTCUTS_ENABLED_PAGE_DOWN:true}"
   },
@@ -643,7 +644,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers"]
+      ["showusers", "gohome", "logout"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

settings.json.template

@@ -275,6 +275,7 @@
     "cmdShiftC": true, /* clear authorship */
     "cmdH":      true, /* backspace */
     "ctrlHome":  true, /* scroll to top of pad */
+    "cmdEsc":    true, /* Exit pad and go back to home */
     "pageUp":    true,
     "pageDown":  true
   },
@@ -642,7 +643,7 @@
     "right": [
       ["importexport", "timeslider", "savedrevision"],
       ["settings", "embed"],
-      ["showusers"]
+      ["showusers", "gohome", "logout"]
     ],
     "timeslider": [
       ["timeslider_export", "timeslider_returnToPad"]

src/locales/en.json

@@ -54,6 +54,9 @@
   "pad.toolbar.settings.title": "Settings",
   "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",
   "pad.colorpicker.cancel": "Cancel",

src/node/utils/Settings.ts

@@ -229,6 +229,7 @@ exports.padShortcutEnabled = {
     cmdShiftC: true,
     cmdH: true,
     ctrlHome: true,
+    cmdEsc: true,
     pageUp: true,
     pageDown: true,
 };
@@ -246,7 +247,7 @@ exports.toolbar = {
     right: [
         ['importexport', 'timeslider', 'savedrevision'],
         ['settings', 'embed'],
-        ['showusers'],
+        ['showusers', 'gohome', 'logout'],
     ],
     timeslider: [
         ['timeslider_export', 'timeslider_settings', 'timeslider_returnToPad'],

src/node/utils/toolbar.ts

@@ -241,6 +241,18 @@ module.exports = {
         embed: defaultButtonAttributes('embed'),
         showusers: defaultButtonAttributes('showusers'),
 
+        gohome:{
+            command: 'gohome',
+            localizationId: 'pad.toolbar.gohome.title',
+            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.css

@@ -12,6 +12,7 @@
 @import url("pad/gritter.css");
 @import url("pad/loadingbox.css");
 @import url("pad/form.css");
+@import url("pad/home.css");
 
 html {
   font-size: 15px;

src/static/css/pad/home.css

@@ -0,0 +1,10 @@
+/*.homeicon-exit:before {
+  content: "\2302"; 
+  margin-right: 3px;
+}
+
+.homeicon:hover{
+  background-color: grey;
+}
+
+*/

src/static/css/pad/icons.css

@@ -74,6 +74,12 @@
 .buttonicon-showusers:before {
   content: "\e835";
 }
+.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

@@ -387,6 +387,22 @@ exports.padeditbar = new class {
       $('#myusernameedit').trigger('focus');
     });
 
+    this.registerCommand('gohome', () => {
+      console.log('Go Home button clicked');
+      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');

src/tests/frontend-new/helper/padHelper.ts

@@ -20,6 +20,10 @@ export const toggleUserList = async (page: Page) => {
     await page.locator("button[data-l10n-id='pad.toolbar.showusers.title']").click()
 }
 
+export const leavePad = async (page: Page) => {
+    await page.locator("button[data-l10n-id='pad.toolbar.gohome.title']").click();
+}
+
 export const setUserName = async (page: Page, userName: string) => {
     await page.waitForSelector('[class="popup popup-show"]')
     await page.click("input[data-l10n-id='pad.userlist.entername']");

src/tests/frontend-new/specs/leavePadTests.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';  // Assuming Playwright is being used
+import { leavePad } from '../helper/padHelper';  // Import the exitPad function
+
+test('should exit the pad and return to the homepage', async ({ page }) => {
+    // Open a new pad (this can use helper.newPad() if it exists)
+    await page.goto('http://localhost:9001/p/test-' + Date.now());  // Or use helper.newPad()
+
+    // Ensure the page is loaded
+    await page.waitForLoadState('domcontentloaded');
+
+    // Click the exit button using the exitPad function
+    await leavePad(page);
+
+    // Verify that the page has navigated to the homepage
+    await expect(page).toHaveURL('http://localhost:9001/');
+});

src/tests/frontend/helper/ui.ts

@@ -85,6 +85,21 @@ helper.toggleUserList = async () => {
   await helper.waitForPromise(() => !isVisible);
 };
 
+helper.homeButton = () => helper.padChrome$("button[data-l10n-id='pad.toolbar.gohome.title']");
+
+helper.leavePad = async () => {
+    const button = helper.homeButton();
+    button.trigger('click');
+    await helper.waitForPromise(() => window.location.pathname === '/');
+};
+
+helper.newPad = async (page: Page) => {
+    // create a new pad before each test run
+    const padId = "FRONTEND_TESTS"+randomUUID();
+    await page.goto('http://localhost:9001/p/'+padId);
+    await page.waitForSelector('iframe[name="ace_outer"]');
+    return padId;
+}
 /**
  * Gets the user name input field
  *

src/tests/frontend/specs/leavePadTest.js

@@ -0,0 +1,10 @@
+describe("Leave Pad Functionality", function () {
+  beforeEach(async function () {
+      await helper.newPad(); // Open a new pad before each test
+  });
+
+  it("should leave the pad and go back to the homepage", async function () {
+      await helper.leavePad(); // Clicks the exit button
+      expect(window.location.pathname).toBe("/"); // Confirms we are on the homepage
+  });
+});

ui/pad.html

@@ -77,6 +77,16 @@
     <li data-type="button" data-key="savedRevision"><a class="grouped-right" data-l10n-id="pad.toolbar.savedRevision.title"><button class=" buttonicon buttonicon-savedRevision" data-l10n-id="pad.toolbar.savedRevision.title"></button
     ></a></li><li class="separator"></li><li data-type="button" data-key="settings"><a class="grouped-left" data-l10n-id="pad.toolbar.settings.title"><button class=" buttonicon buttonicon-settings" data-l10n-id="pad.toolbar.settings.title"></button></a></li>
     <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" 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>
 
   </ul>
   <span class="show-more-icon-btn"></span> <!-- use on small screen to display hidden toolbar buttons -->