Add option to prevent accidental signout

src/globals-site.ts

@@ -9,6 +9,9 @@ export const BANNER_HEIGHT_TOP = `${121}px`; // default height of top ad banner
 export const BANNER_HEIGHT_MID = `${360}px`; // default height of page ad modules
 
 export const ID = {
+    siteHeader: "siteHeader",
+    signoutButton: "signoutForm",
+    signinButton: "btnSignin",
     textarea: "__laika_cnt.textarea.0",
 };
 
@@ -25,13 +28,15 @@ export const CLASS = {
     isReader: "isReader",
     bbImage: "bbImage",
     imgControls: "imgControls",
+    errorDialog: "errorDialog",
 };
 
 export const PATH = {
     EDIT_MODE_FORUM: /^\/forum\/.*\/(svara(\?citera)?|redigera|ny\-trad)/,
     EDIT_MODE_MARKET: /^\/marknad\/(.+\/redigera|ny\-annons)$/,
     EDIT_MODE_PM: /^\/pm\/(.+\/svara|nytt\-meddelande)/,
     SETTINGS: "/profil/installningar",
+    SIGNOUT: "/konto/rpc",
 };
 
 export const TAG = {

src/operations.ts

@@ -8,6 +8,7 @@ import { isOnBSCPreferencesPage, isOnSweclockersSettingsPage, isInEditMode } fro
 import INSERT_PREFERENCES_MENU from "./operations/insert-preferences-menu";
 import INSERT_PREFERENCES_LINK from "./operations/insert-preferences-link";
 import INSERT_EDITING_TOOLS from "./operations/insert-editing-tools";
+import PREVENT_ACCIDENTAL_SIGNOUT from "./operations/prevent-accidental-signout";
 import * as DarkTheme from "./operations/dark-theme";
 
 const ALWAYS: boolean = true;
@@ -58,6 +59,12 @@ const OPERATIONS: ReadonlyArray<Operation> = [
         selectors: { lastTab: SELECTOR.lastNavigationTab },
         action: DarkTheme.insertToggle,
     }),
+    new DependentOperation({
+        description: "prevent accidental signout",
+        condition: Preferences.get(P.general._.prevent_accidental_signout),
+        selectors: { siteHeader: SELECTOR.siteHeader },
+        action: PREVENT_ACCIDENTAL_SIGNOUT,
+    }),
     new DependentOperation({
         description: "insert preferences link",
         condition: isOnSweclockersSettingsPage(),

src/operations/prevent-accidental-signout.ts

@@ -0,0 +1,61 @@
+import * as SITE from "globals-site";
+import * as CONFIG from "globals-config";
+import * as T from "text";
+
+export default (e: { siteHeader: HTMLElement }) => {
+    const signinButton = e.siteHeader.querySelector("#" + SITE.ID.signinButton);
+    const signoutButton = e.siteHeader.querySelector("#" + SITE.ID.signoutButton);
+    if (signoutButton === null) {
+        return signinButton !== null;
+    }
+    const parent = signoutButton.parentElement as HTMLElement;
+    const safeSignoutForm = signoutButton.cloneNode(true);
+    signoutButton.remove();
+    safeSignoutForm.addEventListener("click", function() {
+        if (confirm(T.general.signout_confirmation)) {
+            const request = new Taiga.Xhr.JsonRpc.Request();
+            request.setUrl(SITE.PATH.SIGNOUT);
+            request.setMethod("signout");
+            request.onError(errorHandler);
+            request.onSuccess(() => window.location.reload());
+            request.send();
+        }
+    });
+    parent.appendChild(safeSignoutForm);
+}
+
+function errorHandler() {
+    const dialog = new Common.Windows.MessageDialog();
+    dialog.addClass(SITE.CLASS.errorDialog);
+    dialog.setMessage(T.general.signout_error);
+    dialog.setModal(true);
+    dialog.openWindow();
+    dialog.centerOnScreen();
+}
+
+declare namespace Common {
+    namespace Windows {
+        class MessageDialog {
+            addClass(x: string): void
+            setMessage(x: string): void
+            setModal(x: boolean): void
+            openWindow(): void
+            centerOnScreen(): void
+        }
+    }
+}
+
+declare namespace Taiga {
+    namespace Xhr {
+        namespace JsonRpc {
+            class Request {
+                setUrl(x: string): void
+                setMethod(x: string): void
+                setParams(x: { csrf: string }): void
+                onError(f: () => void): void
+                onSuccess(f: () => void): void
+                send(): void
+            }
+        }
+    }
+}

src/preferences/general.ts

@@ -16,6 +16,11 @@ export default {
         default: true,
         label: T.preferences.general.lock_heights,
     }),
+    prevent_accidental_signout: new BooleanPreference({
+        key: "prevent_accidental_signout",
+        default: true,
+        label: T.preferences.general.prevent_accidental_signout,
+    }),
     compact_layout: new BooleanPreference({
         key: "compact_layout",
         default: true,

src/selectors.ts

@@ -11,6 +11,7 @@ const settingsNavigationItem = `${settingsNavigation} > li.${C.menuItem}`;
 export default {
     textarea: "textarea#" + CSS.escape(SITE.ID.textarea),
     lastNavigationTab: `.${C.menu} > li.${C.menuItem}:last-child`,
+    siteHeader: `#` + SITE.ID.siteHeader,
     settingsNavigation,
     settingsNavigationItem,
     settingsNavigationLabel: `${settingsNavigationItem} > a.${C.link} > span.${C.icon} + span.${C.label}`,

src/text.ts

@@ -4,6 +4,9 @@ import { InsertButtonDescription } from "./types";
 export const general = {
     dark_theme_toggle_tooltip_on: "Blargmodes mörka tema",
     dark_theme_toggle_tooltip_off: "Standardutseendet",
+    signout_confirmation: `Är du säker på att du vill logga ut?`,
+    // Copied from SweClockers:
+    signout_error: `Ett fel har uppstått och utloggningen misslyckades. Var god ladda om sidan och försök igen. Rensa cookies i din webbläsare för att logga ut manuellt.`,
 };
 
 export const preferences = {
@@ -15,6 +18,7 @@ export const preferences = {
     general: {
         label: `Allmänt`,
         lock_heights: `Lås höjden på reklam etc`,
+        prevent_accidental_signout: `Fråga vid utloggning`,
         compact_layout: `Kompakt layout`,
         highlight_own_posts: `Framhäv egna inlägg`,
         hide_image_controls: `Dölj zoom- och länkikoner i bilder`,