DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666

sergiught · 2023-03-10T11:22:21Z

🔧 Changes

This PR restored the Storybook preview functionality we had before when updating universal login branding templates. The feature was originally introduced through https://github.com/auth0/auth0-cli/pull/267/files#diff-1a3673a1bdb76086ba81986c7b6038734bd1a823766de0484f59e85bc6bc14a1, most of the core logic has been kept, however applied on a slightly modified package structure.

📚 References

🔬 Testing

📝 Checklist

All new/changed/fixed functionality is covered by tests (or N/A)
I have added documentation for all new/changed functionality (or N/A)

sergiught · 2023-03-10T14:31:35Z

README.md

+To change the text editor used for editing templates, rules, and actions, set the environment variable `EDITOR` to your
+preferred editor. If choosing a non-terminal editor, ensure that the command starts the editor and waits for the files
+to be closed before returning.
+
+Examples:

 ```shell
-export EDITOR="code -w"
-# or
+# Uses vscode with the --wait flag.
+export EDITOR="code --wait"
+
+# Uses sublime text with the --wait flag.
+export EDITOR="subl --wait"
+
+# Uses nano, a terminal based editor.
 export EDITOR="nano"
+
+# Uses vim, a terminal based editor.
+export EDITOR="vim"


It is vital that a non terminal editor is opened through the --wait (or similar) flag to ensure that the preview mechanism on the auth0 ul templates update works as expected.

sergiught · 2023-03-10T14:34:20Z

internal/cli/universal_login_templates.go

+		Short: "Update the custom template for Universal Login",
+		Long:  "Update the custom template for the New Universal Login Experience.",
+		Example: `  auth0 universal-login templates update
+  auth0 ul templates update`,


Removed support for piping the template as an input to the command as that would skip the preview mechanism due to the "shouldPrompt" logic we have and it would just make things more confusing.

Widcket · 2023-03-10T16:03:09Z

go.mod

 	github.com/getsentry/sentry-go v0.19.0
 	github.com/golang/mock v1.6.0
 	github.com/google/go-cmp v0.5.9
 	github.com/google/uuid v1.3.0
+	github.com/guiguan/caster v0.0.0-20191104051807-3736c4464f38


Should we rely on a dependency that has not been updated since Nov 2019? https://github.com/guiguan/caster

Ideally not, but swapping this with something else was outside the scope of the restoration efforts. I can look into this a bit if we have some extra time before GA to remove the dependency.

Widcket · 2023-03-10T16:06:48Z

internal/cli/data/branding/footer-template.liquid

+        <li><a href="https://company.com/privacy">Privacy Policy</a></li>
+        <li><a href="https://company.com/terms">Terms of Service</a></li>


Suggested change

<li><a href="https://company.com/privacy">Privacy Policy</a></li>

<li><a href="https://company.com/terms">Terms of Service</a></li>

<li><a href="https://example.com/privacy">Privacy Policy</a></li>

<li><a href="https://example.com/terms">Terms of Service</a></li>

Let's use the IANA reserved domains for those.

See https://www.iana.org/domains/reserved

This is the exact same example we showcase within our docs: https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates#page-footers

If we can improve over a docs snippet, why not?

I totally agree with you 👍🏻 I was just a bit wary of going off track on what we advertise within the docs themselves. I'll update this and the other snippets as well then.

342a03a (#666)

Widcket · 2023-03-10T16:09:39Z

internal/cli/data/branding/image-template.liquid

+    {%- auth0:head -%}
+    <style>
+      body {
+        background-image: url("https://images.unsplash.com/photo-1592450865877-e3a318ec3522?ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80");


Should we use something a little more generic as a base template?

Any examples in mind?

These ones are somewhat more in line with our new branding:

https://unsplash.com/photos/g1FlJUOIUXY

https://unsplash.com/photos/7FqOISWr5V0

https://unsplash.com/photos/D1BZo9JlKjM

https://unsplash.com/photos/KDFUR-sG2Ls

https://unsplash.com/photos/A2j_-nAmZag

https://unsplash.com/photos/WEjv3BMP2ik

Oh super 💯 , thanks let me put one of those in action 💪🏻

daa3674 (#666)

Can the background image extend all the way under the login box, instead of having a solid color? And can the login box be horizontally centered as well?

We could, however I believe it's beneficial to showcase some custom logic within these sample templates, to ensure customers are aware that complex customizations are possible. To that extent I also added a comment to showcase how to use the script tag for the preview, as mentioned here: https://community.auth0.com/t/the-script-tag-breaks-the-auth0-cli-storybook/90526

Nice pic, BTW.

Widcket · 2023-03-10T16:12:32Z

internal/cli/data/branding/storybook/iframe.html

@@ -0,0 +1,135 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,


Suggested change

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Universal Login Template</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,

342a03a (#666)

Widcket · 2023-03-10T16:43:03Z

internal/cli/universal_login_templates.go

+			if err := ansi.Waiting(func() (err error) {
+				currentTemplate, err = cli.api.Branding.UniversalLogin()
+				if err != nil {
+					if mErr, ok := err.(management.Error); ok && mErr.Status() == http.StatusNotFound {


Eventually we could extract this logic somewhere, as this pattern of checking for error 404 (Management API quirk) has popped up repeatedly.

Yep, definitely a good point. There's much to be improved in terms of refactoring and project structure still.

Widcket · 2023-03-10T16:45:07Z

internal/cli/universal_login_templates.go

+			cli.renderer.Heading("universal login template")
+
+			if currentTemplate == nil {
+				cli.renderer.Infof("No custom template found. To set one, run: `auth0 universal-login templates update`.")
+			}
+
+			fmt.Println(currentTemplate.GetBody())


Should we have this in a Renderer func, inside the display package as usual?

We actually already do cli.renderer.Output(currentTemplate.GetBody()) this was just moved but I can update it.

342a03a (#666)

I meant in a separate file inside the display package, as in:

But it's a nit anyway, nevermind.

Widcket · 2023-03-10T16:45:50Z

internal/cli/universal_login_templates.go

+		Use:   "update",
+		Args:  cobra.NoArgs,
+		Short: "Update the custom template for Universal Login",
+		Long:  "Update the custom template for the New Universal Login Experience.",


Suggested change

Long: "Update the custom template for the New Universal Login Experience.",

Long: "Update the custom template for the New Universal Login experience.",

This is usually capitalized within our docs, e.g. https://auth0.com/docs/api/management/v2#!/Branding/put_universal_login.

codecov-commenter · 2023-03-10T16:59:23Z

Codecov Report

Patch coverage: 7.09% and project coverage change: -0.81 ⚠️

Comparison is base (855584d) 51.28% compared to head (aa9d840) 50.48%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #666      +/-   ##
==========================================
- Coverage   51.28%   50.48%   -0.81%     
==========================================
  Files          92       93       +1     
  Lines       11576    11758     +182     
==========================================
- Hits         5937     5936       -1     
- Misses       5211     5394     +183     
  Partials      428      428

Impacted Files	Coverage Δ
internal/cli/universal_login.go	`53.75% <ø> (+12.59%)`	⬆️
internal/cli/universal_login_templates.go	`7.09% <7.09%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

Widcket · 2023-03-10T17:47:19Z

internal/cli/universal_login_templates.go

+		cli.renderer.Infof(
+			"%s Once you close the editor, you'll be prompted to save your changes. To cancel, press CTRL+C.",
+			ansi.Faint("Hint:"),


We should eventually add a renderer method for this.

Widcket

Nice work! I'd suggest replacing that unmaintained new dependency ASAP. Everything else is a non-blocking nit.

sergiught · 2023-03-10T17:55:16Z

Thanks @Widcket 🙇🏻 , I'm gonna follow up on that dep first thing next week.

sergiught force-pushed the DXCDT-392/restore-storybook branch from 7853cef to d224f2f Compare March 10, 2023 14:15

sergiught commented Mar 10, 2023

View reviewed changes

Restore the storybook preview on the universal login templates update

457c019

sergiught force-pushed the DXCDT-392/restore-storybook branch from d224f2f to 457c019 Compare March 10, 2023 14:36

sergiught marked this pull request as ready for review March 10, 2023 14:36

sergiught requested a review from a team as a code owner March 10, 2023 14:36

Widcket reviewed Mar 10, 2023

View reviewed changes

willvedd approved these changes Mar 10, 2023

View reviewed changes

Widcket reviewed Mar 10, 2023

View reviewed changes

Updates from feedback

342a03a

sergiught requested a review from Widcket March 10, 2023 16:58

Replace image

daa3674

Widcket reviewed Mar 10, 2023

View reviewed changes

Widcket approved these changes Mar 10, 2023

View reviewed changes

Update template

aa9d840

sergiught merged commit dca152f into main Mar 10, 2023

sergiught deleted the DXCDT-392/restore-storybook branch March 10, 2023 18:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666

DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666

sergiught commented Mar 10, 2023 •

edited

Loading

sergiught Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

sergiught Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

sergiught Mar 10, 2023

Widcket Mar 10, 2023

Widcket Mar 10, 2023

sergiught Mar 10, 2023

codecov-commenter commented Mar 10, 2023 •

edited

Loading

Widcket Mar 10, 2023

Widcket left a comment

sergiught commented Mar 10, 2023

		<li><a href="https://company.com/privacy">Privacy Policy</a></li>
		<li><a href="https://company.com/terms">Terms of Service</a></li>

		@@ -0,0 +1,135 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,

	Long: "Update the custom template for the New Universal Login Experience.",
	Long: "Update the custom template for the New Universal Login experience.",

DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666

DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666

Conversation

sergiught commented Mar 10, 2023 • edited Loading

🔧 Changes

📚 References

🔬 Testing

📝 Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-commenter commented Mar 10, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Widcket left a comment

Choose a reason for hiding this comment

sergiught commented Mar 10, 2023

sergiught commented Mar 10, 2023 •

edited

Loading

codecov-commenter commented Mar 10, 2023 •

edited

Loading