From ba2c5c7948e17db5a64f6491c60329f74b87ad16 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Tue, 4 Oct 2022 14:23:20 +0800
Subject: [PATCH] UX: Hide sidebar on 2FA route (#18464)

Internal Ref: /t/75929
---
 .../discourse/app/controllers/application.js  | 30 +++++++++----------
 .../app/routes/second-factor-auth.js          | 13 ++++++++
 .../acceptance/second-factor-auth-test.js     |  9 ++++++
 .../javascripts/wizard/addon/routes/wizard.js | 10 ++++++-
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/application.js b/app/assets/javascripts/discourse/app/controllers/application.js
index a7aede86aa2..1f4c3c7cd59 100644
--- a/app/assets/javascripts/discourse/app/controllers/application.js
+++ b/app/assets/javascripts/discourse/app/controllers/application.js
@@ -7,13 +7,15 @@ import { action } from "@ember/object";
 const HIDE_SIDEBAR_KEY = "sidebar-hidden";
 
 export default Controller.extend({
-  queryParams: ["enable_sidebar"],
+  queryParams: [{ sidebarQueryParamOverride: "enable_sidebar" }],
 
   showTop: true,
   showFooter: false,
   router: service(),
   showSidebar: false,
-  enable_sidebar: null,
+  sidebarQueryParamOverride: null,
+  sidebarDisabledRouteOverride: false,
+  showSiteHeader: true,
 
   init() {
     this._super(...arguments);
@@ -62,20 +64,25 @@ export default Controller.extend({
   },
 
   @discourseComputed(
-    "enable_sidebar",
+    "sidebarQueryParamOverride",
     "siteSettings.enable_sidebar",
-    "router.currentRouteName",
-    "canDisplaySidebar"
+    "canDisplaySidebar",
+    "sidebarDisabledRouteOverride"
   )
   sidebarEnabled(
     sidebarQueryParamOverride,
     enableSidebar,
-    currentRouteName,
-    canDisplaySidebar
+    canDisplaySidebar,
+    sidebarDisabledRouteOverride
   ) {
     if (!canDisplaySidebar) {
       return false;
     }
+
+    if (sidebarDisabledRouteOverride) {
+      return false;
+    }
+
     if (sidebarQueryParamOverride === "1") {
       return true;
     }
@@ -84,10 +91,6 @@ export default Controller.extend({
       return false;
     }
 
-    if (currentRouteName.startsWith("wizard")) {
-      return false;
-    }
-
     // Always return dropdown on mobile
     if (this.site.mobileView) {
       return false;
@@ -96,11 +99,6 @@ export default Controller.extend({
     return enableSidebar;
   },
 
-  @discourseComputed("router.currentRouteName")
-  showSiteHeader(currentRouteName) {
-    return !currentRouteName.startsWith("wizard");
-  },
-
   @action
   toggleSidebar() {
     // enables CSS transitions, but not on did-insert
diff --git a/app/assets/javascripts/discourse/app/routes/second-factor-auth.js b/app/assets/javascripts/discourse/app/routes/second-factor-auth.js
index 61d71fa5abc..50bfee3e1ae 100644
--- a/app/assets/javascripts/discourse/app/routes/second-factor-auth.js
+++ b/app/assets/javascripts/discourse/app/routes/second-factor-auth.js
@@ -26,9 +26,22 @@ export default DiscourseRoute.extend({
     }
   },
 
+  activate() {
+    this.controllerFor("application").setProperties({
+      sidebarDisabledRouteOverride: true,
+    });
+  },
+
+  deactivate() {
+    this.controllerFor("application").setProperties({
+      sidebarDisabledRouteOverride: false,
+    });
+  },
+
   setupController(controller, model) {
     this._super(...arguments);
     controller.resetState();
+
     if (model.error) {
       controller.displayError(model.error);
       controller.set("loadError", true);
diff --git a/app/assets/javascripts/discourse/tests/acceptance/second-factor-auth-test.js b/app/assets/javascripts/discourse/tests/acceptance/second-factor-auth-test.js
index f2ca7501553..32b57a7e6d7 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/second-factor-auth-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/second-factor-auth-test.js
@@ -283,4 +283,13 @@ acceptance("Second Factor Auth Page", function (needs) {
     );
     assert.equal(callbackCount, 1, "callback request has been performed");
   });
+
+  test("sidebar is disabled on 2FA route", async function (assert) {
+    this.siteSettings.enable_experimental_sidebar_hamburger = true;
+    this.siteSettings.enable_sidebar = true;
+
+    await visit("/session/2fa?nonce=ok110111");
+
+    assert.notOk(exists(".sidebar-container"), "does not display the sidebar");
+  });
 });
diff --git a/app/assets/javascripts/wizard/addon/routes/wizard.js b/app/assets/javascripts/wizard/addon/routes/wizard.js
index 73aa06c1420..0048317818e 100644
--- a/app/assets/javascripts/wizard/addon/routes/wizard.js
+++ b/app/assets/javascripts/wizard/addon/routes/wizard.js
@@ -8,14 +8,22 @@ export default Route.extend({
 
   activate() {
     document.body.classList.add("wizard");
+
     this.controllerFor("application").setProperties({
       showTop: false,
       showFooter: false,
+      sidebarDisabledRouteOverride: true,
+      showSiteHeader: false,
     });
   },
 
   deactivate() {
     document.body.classList.remove("wizard");
-    this.controllerFor("application").set("showTop", true);
+
+    this.controllerFor("application").setProperties({
+      showTop: true,
+      sidebarDisabledRouteOverride: false,
+      showSiteHeader: true,
+    });
   },
 });