Rewrite login/logout page CSS handling to fix broken 2FA styles

Closes #218

Core/TweetDeckBrowser.cs

@@ -20,6 +20,7 @@ sealed class TweetDeckBrowser : IDisposable{
         private static UserConfig Config => Program.Config.User;
 
         private const string ErrorUrl = "http://td/error";
+        private const string TwitterStyleUrl = "https://abs.twimg.com/tduck/css";
 
         public bool Ready { get; private set; }
 
@@ -121,10 +122,15 @@ private void browser_FrameLoadStart(object sender, FrameLoadStartEventArgs e){
 
             if (frame.IsMain){
                 if (TwitterUtils.IsTwitterWebsite(frame)){
+                    string css = ScriptLoader.LoadResource("styles/twitter.css", browser);
+                    resourceHandlerFactory.RegisterHandler(TwitterStyleUrl, ResourceHandler.FromString(css, mimeType: "text/css"));
+
                     ScriptLoader.ExecuteFile(frame, "twitter.js", browser);
                 }
                 
-                frame.ExecuteJavaScriptAsync(TwitterUtils.BackgroundColorOverride);
+                if (!TwitterUtils.IsTwitterLogin2FactorWebsite(frame)){
+                    frame.ExecuteJavaScriptAsync(TwitterUtils.BackgroundColorOverride);
+                }
             }
         }
 

Core/Utils/TwitterUtils.cs

@@ -43,6 +43,10 @@ public static bool IsTwitterWebsite(IFrame frame){
             return frame.Url.Contains("//twitter.com/");
         }
 
+        public static bool IsTwitterLogin2FactorWebsite(IFrame frame){
+            return frame.Url.Contains("//twitter.com/account/login_verification");
+        }
+
         private static string ExtractMediaBaseLink(string url){
             int slash = url.LastIndexOf('/');
             return slash == -1 ? url : StringUtils.ExtractBefore(url, ':', slash);

Resources/Scripts/imports/styles/twitter.logout.css

@@ -1,38 +0,0 @@
-/*****************************/
-/* Fix min width and margins */
-/*****************************/
-
-.page-canvas {
-  width: auto !important;
-  max-width: 888px;
-}
-
-.signout-wrapper {
-  width: auto !important;
-  margin: 0 auto !important;
-}
-
-.signout {
-  margin: 60px 0 54px !important;
-}
-
-.buttons {
-  padding-bottom: 0 !important;
-}
-
-/*******************/
-/* General styling */
-/*******************/
-
-.aside {
-  /* hide elements around dialog */
-  display: none;
-}
-
-.buttons button, .buttons a {
-  /* style buttons */
-  display: inline-block;
-  margin: 0 4px !important;
-  border: 1px solid rgba(0, 0, 0, 0.3) !important;
-  border-radius: 0 !important;
-}

Resources/Scripts/styles/twitter.css

@@ -1,7 +1,7 @@
 /*********************/
 /* Center everything */
 /*********************/
-    
+
 #doc {
   width: 100%;
   height: 100%;
@@ -25,6 +25,17 @@
   margin: 0 auto !important;
 }
 
+.ResponsiveLayout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.Section {
+  padding: 36px !important;
+}
+
 /*******************/
 /* General styling */
 /*******************/
@@ -39,7 +50,7 @@ body {
   box-shadow: 0 0 150px rgba(255, 255, 255, 0.3) !important;
 }
 
-.topbar {
+.topbar, .TopNav {
   /* hide top bar */
   display: none !important;
 }
@@ -65,3 +76,42 @@ button[type='submit'] {
   margin-top: 15px !important;
   font-weight: bold !important;
 }
+
+/********************************************/
+/* Fix min width and margins on logout page */
+/********************************************/
+
+html[logout] .page-canvas {
+  width: auto !important;
+  max-width: 888px;
+}
+
+html[logout] .signout-wrapper {
+  width: auto !important;
+  margin: 0 auto !important;
+}
+
+html[logout] .signout {
+  margin: 60px 0 54px !important;
+}
+
+html[logout] .buttons {
+  padding-bottom: 0 !important;
+}
+
+/*******************************/
+/* General logout page styling */
+/*******************************/
+
+html[logout] .aside {
+  /* hide elements around dialog */
+  display: none;
+}
+
+html[logout] .buttons button, html[logout] .buttons a {
+  /* style buttons */
+  display: inline-block;
+  margin: 0 4px !important;
+  border: 1px solid rgba(0, 0, 0, 0.3) !important;
+  border-radius: 0 !important;
+}

Resources/Scripts/twitter.js

@@ -8,15 +8,15 @@
       return;
     }
     
-    let style = document.createElement("style");
+    let link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "https://abs.twimg.com/tduck/css";
     
-    style.innerText = `#import "styles/twitter.base.css"`;
+    document.head.appendChild(link);
     
     if (location.pathname === "/logout"){
-      style.innerText += `#import "styles/twitter.logout.css"`;
+      document.documentElement.setAttribute("logout", "");
     }
-    
-    document.head.appendChild(style);
   };
   
   setTimeout(injectCSS, 1);