Notifications in auth0 ul template update preview (#895)

* Adding notification in storybook * Adding notification in CLI * Adjust command path in helper text --------- Co-authored-by: Will Vedder <[email protected]> Co-authored-by: Sergiu Ghitea <[email protected]>
auth0 · Nov 2, 2023 · 991514d · 991514d
1 parent ad1ff8c
commit 991514d
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/internal/cli/data/branding/storybook/branding-customization-notification.js b/internal/cli/data/branding/storybook/branding-customization-notification.js
@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', function () {
+  var checkIfStorybookRendered = setInterval(function () {
+    var targetDiv = document.querySelectorAll("#panel-tab-content > div")[0];
+    if (targetDiv) {
+      clearInterval(checkIfStorybookRendered);
+      var insertHTML = `
+          <div 
+            id="branding-customization-notification"
+            style="
+              padding: 30px 20px 20px;
+              background: #ffff57;
+              margin: 0;
+              position:relative;
+            "
+          >
+              <p style="
+                  line-height: 1.45em;
+                  font-size: 1.4em;
+                ">An improved branding customization UI experience is available through the <b><code>auth0 universal-login customize</code></b> command.</p>
+              <button 
+                id="branding-close-button"
+                style="
+                  position: absolute;
+                  top:0px;
+                  right:0px;
+                  background: transparent;
+                  border: none;
+                  padding: 10px 15px;
+                  cursor:pointer;
+                  text-decoration: underline;
+                "
+              >Close</button>
+          </div>
+          `;
+      targetDiv.innerHTML = insertHTML + targetDiv.innerHTML;
+
+      var brandingCloseButton = document.getElementById('branding-close-button');
+      brandingCloseButton.addEventListener('click', function () {
+        var brandingCustomizationNotification = document.getElementById('branding-customization-notification');
+        if (brandingCustomizationNotification) {
+          brandingCustomizationNotification.remove();
+        }
+      });
+    }
+  }, 100);
+});
diff --git a/internal/cli/data/branding/storybook/index.html b/internal/cli/data/branding/storybook/index.html
@@ -52,4 +52,4 @@
 
 
 
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script></body></html>
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script><script src="./branding-customization-notification.js"></script></body></html>
diff --git a/internal/cli/universal_login_templates.go b/internal/cli/universal_login_templates.go
@@ -140,6 +140,8 @@ func updateBrandingTemplateCmd(cli *cli) *cobra.Command {
 		RunE: func(cmd *cobra.Command, args []string) error {
 			ctx := cmd.Context()
 
+			cli.renderer.Warnf("An improved branding customization UI experience is available through the `auth0 universal-login customize` command.")
+
 			var templateData *TemplateData
 			if err := ansi.Waiting(func() (err error) {
 				templateData, err = cli.fetchTemplateData(ctx)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,4 +52,4 @@



		window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script></body></html>
		window['DOCS_MODE'] = false;</script><script src="runtime~main.61b5b68c70da183b7397.manager.bundle.js"></script><script src="vendors~main.f2c971dea89201865b97.manager.bundle.js"></script><script src="main.10eb9558f241369aaa99.manager.bundle.js"></script><script src="./branding-customization-notification.js"></script></body></html>