feat: add logout and exit buttons to settings popup (fixes #5633)

compiled_ejs.txt

@@ -0,0 +1,10 @@
+function anonymous(data) {
+            var include = function (path, includeData) {
+                var d = utils_js_1.default.shallowCopy(utils_js_1.default.createNullProtoObjWherePossible(), data);
+                if (includeData) {
+                    d = utils_js_1.default.shallowCopy(d, includeData);
+                }
+                return includeFile(path, opts)(d);
+            };
+            return fn.apply(opts.context, [data || utils_js_1.default.createNullProtoObjWherePossible(), escapeFn, include, rethrow]);
+        }

src/locales/en.json

@@ -94,6 +94,9 @@
   "pad.settings.fontType.normal": "Normal",
   "pad.settings.language": "Language:",
   "pad.settings.deletePad": "Delete Pad",
+  "pad.settings.logout": "Logout",
+  "pad.settings.exit": "Exit to Home",
+  "pad.logout.confirm": "Are you sure you want to logout? This will clear your session.",
   "pad.delete.confirm": "Do you really want to delete this pad?",
   "pad.settings.about": "About",
   "pad.settings.poweredBy": "Powered by",

src/static/js/pad_editor.ts

@@ -22,7 +22,7 @@
  * limitations under the License.
  */
 
-import padutils,{Cookies} from "./pad_utils";
+import padutils, { Cookies } from "./pad_utils";
 const padcookie = require('./pad_cookie').padcookie;
 const Ace2Editor = require('./ace').Ace2Editor;
 import html10n from '../js/vendors/html10n'
@@ -86,21 +86,35 @@ const padeditor = (() => {
       // delete pad
       $('#delete-pad').on('click', () => {
         if (window.confirm(html10n.get('pad.delete.confirm'))) {
-          pad.collabClient.sendMessage({type: 'PAD_DELETE', data:{padId: pad.getPadId()}});
+          pad.collabClient.sendMessage({ type: 'PAD_DELETE', data: { padId: pad.getPadId() } });
           // redirect to home page after deletion
           window.location.href = '/';
         }
       })
 
+      // exit button - redirect to home without clearing cookies
+      $('#exit-pad').on('click', () => {
+        window.location.href = '/';
+      });
+
+      // logout button - clear cookies and redirect to home
+      $('#logout-pad').on('click', () => {
+        if (window.confirm(html10n.get('pad.logout.confirm'))) {
+          Cookies.remove('token');
+          Cookies.remove('language');
+          window.location.href = '/';
+        }
+      });
+
       // theme switch
-      $('#theme-switcher').on('click',()=>{
-          if (skinVariants.isDarkMode()) {
-            skinVariants.setDarkModeInLocalStorage(false);
-            skinVariants.updateSkinVariantsClasses(['super-light-toolbar super-light-editor light-background']);
-          } else {
-            skinVariants.setDarkModeInLocalStorage(true);
-            skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
-          }
+      $('#theme-switcher').on('click', () => {
+        if (skinVariants.isDarkMode()) {
+          skinVariants.setDarkModeInLocalStorage(false);
+          skinVariants.updateSkinVariantsClasses(['super-light-toolbar super-light-editor light-background']);
+        } else {
+          skinVariants.setDarkModeInLocalStorage(true);
+          skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
+        }
       })
 
       // Language
@@ -194,7 +208,7 @@ exports.focusOnLine = (ace) => {
       const lineNumberInt = parseInt(lineNumber.substr(1));
       if (lineNumberInt) {
         const $inner = $('iframe[name="ace_outer"]').contents().find('iframe')
-            .contents().find('#innerdocbody');
+          .contents().find('#innerdocbody');
         const line = $inner.find(`div:nth-child(${lineNumberInt})`);
         if (line.length !== 0) {
           let offsetTop = line.offset().top;
@@ -204,9 +218,9 @@ exports.focusOnLine = (ace) => {
             offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
           }
           const $outerdocHTML = $('iframe[name="ace_outer"]').contents()
-              .find('#outerdocbody').parent();
-          $outerdoc.css({top: `${offsetTop}px`}); // Chrome
-          $outerdocHTML.animate({scrollTop: offsetTop}); // needed for FF
+            .find('#outerdocbody').parent();
+          $outerdoc.css({ top: `${offsetTop}px` }); // Chrome
+          $outerdocHTML.animate({ scrollTop: offsetTop }); // needed for FF
           const node = line[0];
           ace.callWithAce((ace) => {
             const selection = {

src/static/skins/colibris/src/components/popup.css

@@ -86,6 +86,16 @@
   background-color: #ff7b72;
 }
 
+#exit-pad {
+  background-color: #58a6ff;
+  margin-left: 8px;
+}
+
+#logout-pad {
+  background-color: #f85149;
+  margin-left: 8px;
+}
+
 #theme-switcher div {
   position: relative;
   width: 30px;

src/templates/pad.html

@@ -164,6 +164,8 @@ <h2 data-l10n-id="pad.settings.myView"></h2>
             <% e.end_block(); %>
           </div>
           <button data-l10n-id="pad.settings.deletePad" id="delete-pad">Delete pad</button>
+        <button data-l10n-id="pad.settings.exit" id="exit-pad">Exit to Home</button>
+        <button data-l10n-id="pad.settings.logout" id="logout-pad">Logout</button>
         <div id="theme-switcher" style="display: none;">
           <svg width="2rem" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />

test_ejs.cjs

@@ -0,0 +1,7 @@
+const path = require('path');
+const fs = require('fs');
+const ejsPath = path.resolve('src/node_modules/ejs/lib/cjs/ejs.js');
+const ejs = require(ejsPath);
+const compiled = ejs.compile('<%= "hello" %>');
+fs.writeFileSync('compiled_ejs.txt', compiled.toString());
+console.log('Written to compiled_ejs.txt');