Merge pull request #882 from auth0/feature/auth0-universal-login-cust…

…omize

DXCDT-544: Add `universal-login customize` command

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.2.0](https://github.com/auth0/auth0-cli/tree/v1.2.0) (Nov 2, 2023)
+
+[Full Changelog](https://github.com/auth0/auth0-cli/compare/v1.1.2...v1.2.0)
+
+### Added
+
+- `universal-login customize` command for customizing the branding for the new Universal Login Experience [#882]
+
 ## [v1.1.2](https://github.com/auth0/auth0-cli/tree/v1.1.2) (Sept 29, 2023)
 
 [Full Changelog](https://github.com/auth0/auth0-cli/compare/v1.1.1...v1.1.2)
@@ -220,6 +228,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updating of action triggers which inevitably results in error [#597]
 
 [unreleased]: https://github.com/auth0/auth0-cli/compare/v1.0.0...HEAD
+[#882]: https://github.com/auth0/auth0-cli/issues/882
 [#858]: https://github.com/auth0/auth0-cli/issues/858
 [#857]: https://github.com/auth0/auth0-cli/issues/857
 [#856]: https://github.com/auth0/auth0-cli/issues/856

Makefile

@@ -8,6 +8,9 @@ GO_PKG := github.com/auth0/$(NAME)
 GO_BIN ?= $(shell go env GOPATH)/bin
 GO_PACKAGES := $(shell go list ./... | grep -vE "vendor|tools|mock")
 
+UNIVERSAL_LOGIN_ASSETS_EXTERNAL_DIR ?= ./../ulp-branding-app
+UNIVERSAL_LOGIN_ASSETS_INTERNAL_DIR = ./internal/cli/data/universal-login
+
 ## Configuration for build-info
 BUILD_DIR ?= $(CURDIR)/out
 BUILD_INFO_PKG := $(GO_PKG)/internal/buildinfo
@@ -68,6 +71,22 @@ $(GO_BIN)/commander:
 $(GO_BIN)/auth0:
 	@$(MAKE) install
 
+#-----------------------------------------------------------------------------------------------------------------------
+# Assets
+#-----------------------------------------------------------------------------------------------------------------------
+.PHONY: assets
+
+assets: ## Generate Universal Login embeddable assets
+	${call print, "Generating Universal Login embeddable assets"}
+	@if [ ! -d "${UNIVERSAL_LOGIN_ASSETS_EXTERNAL_DIR}" ]; \
+	then \
+	  	${call print_warning, "No such file or directory: ${UNIVERSAL_LOGIN_ASSETS_EXTERNAL_DIR}"}; \
+		exit 1; \
+	fi
+	@rm -rf "${UNIVERSAL_LOGIN_ASSETS_INTERNAL_DIR}"
+	@cd "${UNIVERSAL_LOGIN_ASSETS_EXTERNAL_DIR}" && npm install && npm run build
+	@cp -r "${UNIVERSAL_LOGIN_ASSETS_EXTERNAL_DIR}/dist" "${UNIVERSAL_LOGIN_ASSETS_INTERNAL_DIR}"
+
 #-----------------------------------------------------------------------------------------------------------------------
 # Documentation
 #-----------------------------------------------------------------------------------------------------------------------
@@ -167,5 +186,5 @@ define print
 endef
 
 define print_warning
-	@printf "${TEXT_INVERSE}${COLOR_WHITE} ! ${COLOR_YELLOW} %-75s ${COLOR_WHITE} ${RESET}\n" $(1)
+	printf "${TEXT_INVERSE}${COLOR_WHITE} !! ${COLOR_YELLOW} %-75s ${COLOR_WHITE} ${RESET}\n" $(1)
 endef

docs/auth0_universal-login.md

@@ -9,6 +9,7 @@ Manage a consistent, branded Universal Login experience that can handle all of y
 
 ## Commands
 
+- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience
 - [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
 - [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
 - [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates

docs/auth0_universal-login_customize.md

@@ -0,0 +1,43 @@
+---
+layout: default
+parent: auth0 universal-login
+has_toc: false
+---
+# auth0 universal-login customize
+
+Customize and preview changes to the Universal Login experience. This command will open a webpage within your browser where you can edit and preview your branding changes. For a comprehensive list of editable parameters and their values please visit the [Management API Documentation](https://auth0.com/docs/api/management/v2).
+
+## Usage
+```
+auth0 universal-login customize [flags]
+```
+
+## Examples
+
+```
+  auth0 universal-login customize
+  auth0 ul customize
+```
+
+
+
+
+## Inherited Flags
+
+```
+      --debug           Enable debug mode.
+      --no-color        Disable colors.
+      --no-input        Disable interactivity.
+      --tenant string   Specific tenant to use.
+```
+
+
+## Related Commands
+
+- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience
+- [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
+- [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
+- [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates
+- [auth0 universal-login update](auth0_universal-login_update.md) - Update the custom branding settings for Universal Login
+
+

docs/auth0_universal-login_show.md

@@ -40,6 +40,7 @@ auth0 universal-login show [flags]
 
 ## Related Commands
 
+- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience
 - [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
 - [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
 - [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates

docs/auth0_universal-login_update.md

@@ -50,6 +50,7 @@ auth0 universal-login update [flags]
 
 ## Related Commands
 
+- [auth0 universal-login customize](auth0_universal-login_customize.md) - Customize the Universal Login experience
 - [auth0 universal-login prompts](auth0_universal-login_prompts.md) - Manage custom text for prompts
 - [auth0 universal-login show](auth0_universal-login_show.md) - Display the custom branding settings for Universal Login
 - [auth0 universal-login templates](auth0_universal-login_templates.md) - Manage custom Universal Login templates

go.mod

@@ -13,6 +13,7 @@ require (
 	github.com/golang/mock v1.6.0
 	github.com/google/go-cmp v0.6.0
 	github.com/google/uuid v1.4.0
+	github.com/gorilla/websocket v1.5.0
 	github.com/hashicorp/go-version v1.6.0
 	github.com/hashicorp/hc-install v0.6.1
 	github.com/hashicorp/terraform-exec v0.19.0

go.sum

@@ -86,6 +86,8 @@ github.com/google/uuid v1.4.0 h1:MtMxsa51/r9yyhkyLsVeVt0B+BGQZzpQiTQ4eHZ8bc4=
 github.com/google/uuid v1.4.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/css v1.0.0 h1:BQqNyPTi50JCFMTw/b67hByjMVXZRwGha6wxVGkeihY=
 github.com/gorilla/css v1.0.0/go.mod h1:Dn721qIggHpt4+EFCcTLTU/vk5ySda2ReITrtgBl60c=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/hashicorp/go-cleanhttp v0.5.2 h1:035FKYIWjmULyFRBKPs8TBQoi0x6d9G4xc9neXJWAZQ=
 github.com/hashicorp/go-cleanhttp v0.5.2/go.mod h1:kO/YDlP8L1346E6Sodw+PrpBSV4/SoxCXGY6BqNFT48=
 github.com/hashicorp/go-version v1.6.0 h1:feTTfFNnjP967rlCxM/I9g701jU+RN74YKx2mOkIeek=

internal/auth0/auth0.go

@@ -12,6 +12,7 @@ type API struct {
 	Anomaly          AnomalyAPI
 	AttackProtection AttackProtectionAPI
 	Branding         BrandingAPI
+	BrandingTheme    BrandingThemeAPI
 	Client           ClientAPI
 	ClientGrant      ClientGrantAPI
 	Connection       ConnectionAPI
@@ -38,6 +39,7 @@ func NewAPI(m *management.Management) *API {
 		Anomaly:          m.Anomaly,
 		AttackProtection: m.AttackProtection,
 		Branding:         m.Branding,
+		BrandingTheme:    m.BrandingTheme,
 		Client:           m.Client,
 		ClientGrant:      m.ClientGrant,
 		Connection:       m.Connection,

internal/auth0/branding_theme.go

@@ -0,0 +1,17 @@
+//go:generate mockgen -source=branding_theme.go -destination=mock/branding_theme_mock.go -package=mock
+
+package auth0
+
+import (
+	"context"
+
+	"github.com/auth0/go-auth0/management"
+)
+
+type BrandingThemeAPI interface {
+	Default(ctx context.Context, opts ...management.RequestOption) (theme *management.BrandingTheme, err error)
+	Create(ctx context.Context, theme *management.BrandingTheme, opts ...management.RequestOption) (err error)
+	Read(ctx context.Context, id string, opts ...management.RequestOption) (theme *management.BrandingTheme, err error)
+	Update(ctx context.Context, id string, theme *management.BrandingTheme, opts ...management.RequestOption) (err error)
+	Delete(ctx context.Context, id string, opts ...management.RequestOption) (err error)
+}

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);
+});

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>