DXCDT-392: Restore the storybook preview functionality on the universal login templates update #666
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,10 +7,12 @@ require ( | |
| github.com/auth0/go-auth0 v0.15.1 | ||
| github.com/briandowns/spinner v1.23.0 | ||
| github.com/charmbracelet/glamour v0.6.0 | ||
| github.com/fsnotify/fsnotify v1.6.0 | ||
| 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 | ||
|
There was a problem hiding this comment. Should we rely on a dependency that has not been updated since Nov 2019? https://github.com/guiguan/caster There was a problem hiding this comment. 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. |
||
| github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 | ||
| github.com/lestrrat-go/jwx v1.2.25 | ||
| github.com/logrusorgru/aurora v2.0.3+incompatible | ||
|
|
@@ -25,6 +27,7 @@ require ( | |
| github.com/tidwall/pretty v1.2.1 | ||
| github.com/zalando/go-keyring v0.2.2 | ||
| golang.org/x/oauth2 v0.6.0 | ||
| golang.org/x/sync v0.1.0 | ||
| golang.org/x/sys v0.6.0 | ||
| golang.org/x/term v0.6.0 | ||
| golang.org/x/text v0.8.0 | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| {%- auth0:head -%} | ||
| </head> | ||
| <body> | ||
| {%- auth0:widget -%} | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,55 @@ | ||||||||||
| <!DOCTYPE html> | ||||||||||
| <html lang="{{locale}}"> | ||||||||||
| <head> | ||||||||||
| {%- auth0:head -%} | ||||||||||
| <style> | ||||||||||
| body { | ||||||||||
| background-image: radial-gradient(white, rgb(200, 200, 200)); | ||||||||||
| } | ||||||||||
| .footer { | ||||||||||
| background-color: rgb(120, 120, 120); | ||||||||||
| position: absolute; | ||||||||||
| bottom: 0; | ||||||||||
| left: 0; | ||||||||||
| padding: 16px 0; | ||||||||||
| width: 100%; | ||||||||||
| color: white; | ||||||||||
| /* Use a high z-index for future-proofing */ | ||||||||||
| z-index: 10; | ||||||||||
| } | ||||||||||
| .footer ul { | ||||||||||
| text-align: center; | ||||||||||
| } | ||||||||||
| .footer ul li { | ||||||||||
| display: inline-block; | ||||||||||
| margin: 0 4px; | ||||||||||
| } | ||||||||||
| .footer ul li:not(:first-of-type) { | ||||||||||
| margin-left: 0; | ||||||||||
| } | ||||||||||
| .footer ul li:not(:first-of-type)::before { | ||||||||||
| content: ''; | ||||||||||
| display: inline-block; | ||||||||||
| vertical-align: middle; | ||||||||||
| width: 4px; | ||||||||||
| height: 4px; | ||||||||||
| margin-right: 4px; | ||||||||||
| background-color: white; | ||||||||||
| border-radius: 50%; | ||||||||||
| } | ||||||||||
| .footer a { | ||||||||||
| color: white; | ||||||||||
| } | ||||||||||
| </style> | ||||||||||
| <title>{{ prompt.screen.texts.pageTitle }}</title> | ||||||||||
| </head> | ||||||||||
| <body class="_widget-auto-layout"> | ||||||||||
| {%- auth0:widget -%} | ||||||||||
| <footer class="footer"> | ||||||||||
| <ul> | ||||||||||
| <li><a href="https://company.com/privacy">Privacy Policy</a></li> | ||||||||||
| <li><a href="https://company.com/terms">Terms of Service</a></li> | ||||||||||
|
There was a problem hiding this comment.
Suggested change
Let's use the IANA reserved domains for those. There was a problem hiding this comment. There was a problem hiding this comment. 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 There was a problem hiding this comment. If we can improve over a docs snippet, why not? There was a problem hiding this comment. 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. |
||||||||||
| </ul> | ||||||||||
| </footer> | ||||||||||
| </body> | ||||||||||
| </html> | ||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="{{locale}}"> | ||
| <head> | ||
| {%- 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"); | ||
|
There was a problem hiding this comment. Should we use something a little more generic as a base template? There was a problem hiding this comment. Any examples in mind? There was a problem hiding this comment. These ones are somewhat more in line with our new branding: There was a problem hiding this comment. Oh super 💯 , thanks let me put one of those in action 💪🏻 There was a problem hiding this comment. 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? There was a problem hiding this comment. 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 |
||
| background-size: cover; | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| } | ||
| .prompt-wrapper { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| width: 480px; | ||
| height: 100%; | ||
| justify-content: center; | ||
| background-color: rgb(60,60,60); | ||
| } | ||
| </style> | ||
| <title>{{ prompt.screen.texts.pageTitle }}</title> | ||
|
|
||
| </head> | ||
| <body class="_widget-auto-layout"> | ||
| {% if prompt.name == "login" or prompt.name == "signup" %} | ||
| <div class="prompt-wrapper"> | ||
| {%- auth0:widget -%} | ||
| </div> | ||
| {% else %} | ||
| {%- auth0:widget -%} | ||
| {% endif %} | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /** | ||
| * Prism: Lightweight, robust, elegant syntax highlighting | ||
| * | ||
| * @license MIT <https://opensource.org/licenses/MIT> | ||
| * @author Lea Verou <https://lea.verou.me> | ||
| * @namespace | ||
| * @public | ||
| */ |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| /*! | ||
| * OverlayScrollbars | ||
| * https://github.com/KingSora/OverlayScrollbars | ||
| * | ||
| * Version: 1.13.0 | ||
| * | ||
| * Copyright KingSora | Rene Haas. | ||
| * https://github.com/KingSora | ||
| * | ||
| * Released under the MIT license. | ||
| * Date: 02.08.2020 | ||
| */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is vital that a non terminal editor is opened through the
--wait(or similar) flag to ensure that the preview mechanism on theauth0 ul templates updateworks as expected.