feat(toolbar): Make the login-success page have styles that blend with the login flow (#81230)

ryan953 · web-flow · commit a727fc629c8e · 2024-11-25T17:12:57.000-08:00
| With timeout (`?delay=3000`) | Debug Mode (`?delay=0`) | | --- | --- | | <img width="802" alt="SCR-20241125-pabk" src="https://github.com/user-attachments/assets/8af9b71b-229e-46e2-b542-6215a37e7a84"> | <img width="802" alt="SCR-20241125-nxmx" src="https://github.com/user-attachments/assets/ddc71216-563c-474e-b5c8-4016224e0649">
diff --git a/src/sentry/templates/sentry/toolbar/login-success.html b/src/sentry/templates/sentry/toolbar/login-success.html
@@ -1,56 +1,57 @@
-{# Auth redirect template for Dev Toolbar. Returned after successfully logging in to a requested organization. #}
+{% extends "sentry/bases/auth.html" %}
+
 {% load sentry_assets %}
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Sentry - Login Success</title>
-    <link rel="icon" type="image/png" href="{% absolute_asset_url "sentry" "images/favicon.png" %}">
-  </head>
-  <body>
-    <div>
-      <p>You are logged in!</p>
-      <p>This window will automatically close after {{ delay_sec }} seconds. If not then check the console for errors.</p>
-      <button type="button" id="close-popup">Close Popup</button>
-    </div>
-
-    {% script %}
-    <script>
-      (function() {
-        const orgSlug = '{{ organization_slug|escape }}';
-        const delay = {{ delay_ms|escapejs }};
-        const cookie = '{{ cookie|escapejs }}';
-        const token = '{{ token|escapejs }}';
-
-        if (window.location.origin === 'https://sentry.io') {
-          // User was already logged in and didn't get a redirect to the
-          // subdomained origin. Do that redirect now.
-          window.location.replace(`https://${orgSlug}.sentry.io${window.location.pathname}${window.location.search}`);
-          return;
-        }
+{% load i18n %}
+
+{% block title %}{% trans "Sentry Toolbar - Login Success" %} | {{ block.super }}{% endblock %}
+
+{% block auth_main %}
+  <div>
+    <h4>You're logged in!</h4>
+    {% if delay_sec %}
+    <p>This window will automatically close after {{ delay_sec }} seconds.</p>
+    <p>If not then check the console for errors.</p>
+    {% endif %}
+    <button type="button" id="close-popup" class="btn btn-primary">Close Popup</button>
+  </div>
+{% endblock %}
+
+{% block scripts_bottom %}
+  {{ block.super }}
+  {% script %}
+  <script>
+    (function() {
+      const orgSlug = '{{ organization_slug|escape }}';
+      const delay = {{ delay_ms|escapejs }};
+      const cookie = '{{ cookie|escapejs }}';
+      const token = '{{ token|escapejs }}';
+
+      if (window.location.origin === 'https://sentry.io') {
+        // User was already logged in and didn't get a redirect to the
+        // subdomained origin. Do that redirect now.
+        window.location.replace(`https://${orgSlug}.sentry.io${window.location.pathname}${window.location.search}`);
+        return;
+      }
+
+      document.getElementById('close-popup').addEventListener('click', () => {
+        window.close();
+      });
+
+      if (window.opener) {
+        window.opener.postMessage({
+          source: 'sentry-toolbar',
+          message: 'did-login',
+          cookie,
+          token,
+        }, window.location.origin);
 
-        document.getElementById('close-popup').addEventListener('click', () => {
-          window.close();
-        });
-
-        if (window.opener) {
-          window.opener.postMessage({
-            source: 'sentry-toolbar',
-            message: 'did-login',
-            cookie,
-            token,
-          }, window.location.origin);
-
-          if (delay && typeof delay === 'number') {
-            setTimeout(() => {
-              window.close();
-            }, delay);
-          }
+        if (delay && typeof delay === 'number') {
+          setTimeout(() => {
+            window.close();
+          }, delay);
         }
-      })();
-    </script>
-    {% endscript %}
-
-{% comment %}
-No need to close `body`. If we do then middleware will inject some extra markup
-we don't need. Browsers can figure out when it missing and deal with it.
-{% endcomment %}
+      }
+    })();
+  </script>
+  {% endscript %}
+{% endblock %}
