Update unit tests and Add Readme & examples (#1002)

* Add readme & examples, update unit tests and parse the rendering_mode while updating to advanced * Update docs link * Update yaml examples
auth0 · Dec 16, 2024 · 7c5c4a6 · 7c5c4a6
1 parent d9b23b6
commit 7c5c4a6
Show file tree

Hide file tree

Showing 11 changed files with 383 additions and 4 deletions.
diff --git a/docs/resource-specific-documentation.md b/docs/resource-specific-documentation.md
@@ -12,6 +12,8 @@ The Deploy CLI's own client grant is intentionally not exported nor configurable
 
 Multilingual custom text prompts follow a particular hierarchy. Under the root-level `prompts` resource property is a proprietary `customText` property that is used to bundle custom text translations with other prompts settings. Underneath `customText` is the two-character language code. Thirdly is the prompt ID, followed by the screen ID, followed by text ID.
 
+RenderSettings of a prompt-screen follow a particular hierarchy. Under the root-level `prompts` we store `screenRenderers` property that is used to configure the rendering settings of a given prompt & screen. Thirdly is the prompt Name, followed by the screen Name mapped to the respective renderer configs file. Refer [more](https://auth0.com/docs/customize/login-pages/advanced-customizations/getting-started/configure-acul-screens) on this.
+
 **Hierarchy**
 
 ```yaml
@@ -21,11 +23,29 @@ prompts:
       <PROMPT_ID>: # prompt ID
         <SCREEN_ID>: # prompt screen ID
           <TEXT_ID>: 'Some text'
+    screenRenderers:
+      - <PROMPT-NAME>:
+          <SCREEN-NAME>: ./prompts/screenRenderSettings/promptName_screenName.json #Add the renderer configs for a given prompt & a given screen
 ```
 
-**Example**
+**YAML Example**
+
+```
+Folder structure when in YAML mode.
+
+./prompts/
+    /screenRenderSettings
+        /signup-id_signup-id.json
+        /login-id_login-id.json
+        /login-passwordless_login-passwordless-email-code.json
+        /login-passwordless_login-passwordless-sms-otp.json
+        /login-password_login-password.json
+        /signup-password_signup-password.json
+./tenant.yaml
+```
 
 ```yaml
+# Contents of ./tenant.yaml
 prompts:
   identifier_first: true
   universal_login_experience: classic
@@ -43,7 +63,60 @@ prompts:
         mfa-login-options:
           pageTitle: 'Log in to ${clientName}'
           authenticatorNamesSMS: 'SMS'
+  screenRenderers:
+    - signup-id:
+        signup-id: ./prompts/screenRenderSettings/signup-id_signup-id.json
+    - login-passwordless:
+        login-passwordless-email-code: ./prompts/screenRenderSettings/login-passwordless_login-passwordless-email-code.json
+        login-passwordless-sms-otp: ./prompts/screenRenderSettings/login-passwordless_login-passwordless-sms-otp.json
+```
+
+**Directory Example**
+
 ```
+Folder structure when in directory mode.
+
+./prompts/
+    /screenRenderSettings
+        /signup-id_signup-id.json
+        /login-id_login-id.json
+        /login-passwordless_login-passwordless-email-code.json
+        /login-passwordless_login-passwordless-sms-otp.json
+        /login-password_login-password.json
+        /signup-password_signup-password.json
+    /custom-text.json
+    /prompts.json
+```
+
+Contents of `promptName_screenName.json`
+
+```json
+{
+  "prompt": "signup-id",
+  "screen": "signup-id",
+  "rendering_mode": "advanced",
+  "context_configuration": [
+    "branding.settings",
+    "branding.themes.default"
+  ],
+  "default_head_tags_disabled": false,
+  "head_tags": [
+    {
+      "tag": "script",
+      "attributes": {
+        "src": "URL_TO_YOUR_ASSET",
+        "async": true,
+        "defer": true,
+        "integrity": [
+          "ASSET_SHA"
+        ]
+      }
+    }
+  ]
+}
+```
+
+
 
 ## Databases
 

diff --git a/examples/directory/prompts/custom-text.json b/examples/directory/prompts/custom-text.json
@@ -0,0 +1,9 @@
+{
+  "en": {
+    "login-id": {
+      "login-id": {
+        "invalid-email-format": "Email is not valid."
+      }
+    }
+  }
+}
diff --git a/examples/directory/prompts/prompts.json b/examples/directory/prompts/prompts.json
@@ -0,0 +1,6 @@
+{
+  "universal_login_experience": "new",
+  "identifier_first": false,
+  "webauthn_platform_first_factor": true,
+  "enable_ulp_wcag_compliance": false
+}
diff --git a/examples/directory/prompts/screenRenderSettings/login-id_login-id.json b/examples/directory/prompts/screenRenderSettings/login-id_login-id.json
@@ -0,0 +1,33 @@
+{
+  "prompt": "login-id",
+  "screen": "login-id",
+  "rendering_mode": "advanced",
+  "context_configuration": [
+    "branding.settings",
+    "branding.themes.default"
+  ],
+  "default_head_tags_disabled": true,
+  "head_tags": [
+    {
+      "tag": "script",
+      "attributes": {
+        "src": "http://127.0.0.1:8090/index.js",
+        "defer": true
+      }
+    },
+    {
+      "tag": "link",
+      "attributes": {
+        "rel": "stylesheet",
+        "href": "http://127.0.0.1:8090/index.css"
+      }
+    },
+    {
+      "tag": "meta",
+      "attributes": {
+        "name": "viewport",
+        "content": "width=device-width, initial-scale=1"
+      }
+    }
+  ]
+}
diff --git a/examples/directory/prompts/screenRenderSettings/signup-id_signup-id.json b/examples/directory/prompts/screenRenderSettings/signup-id_signup-id.json
@@ -0,0 +1,20 @@
+{
+  "prompt": "signup-id",
+  "screen": "signup-id",
+  "rendering_mode": "advanced",
+  "context_configuration": [],
+  "default_head_tags_disabled": false,
+  "head_tags": [
+    {
+      "tag": "script",
+      "attributes": {
+        "src": "URL_TO_YOUR_ASSET",
+        "async": true,
+        "defer": true,
+        "integrity": [
+          "ASSET_SHA"
+        ]
+      }
+    }
+  ]
+}
diff --git a/examples/yaml/prompts/screenRenderSettings/login-id_login-id.json b/examples/yaml/prompts/screenRenderSettings/login-id_login-id.json
@@ -0,0 +1,33 @@
+{
+  "prompt": "login-id",
+  "screen": "login-id",
+  "rendering_mode": "advanced",
+  "context_configuration": [
+    "branding.settings",
+    "branding.themes.default"
+  ],
+  "default_head_tags_disabled": true,
+  "head_tags": [
+    {
+      "tag": "script",
+      "attributes": {
+        "src": "http://127.0.0.1:8090/index.js",
+        "defer": true
+      }
+    },
+    {
+      "tag": "link",
+      "attributes": {
+        "rel": "stylesheet",
+        "href": "http://127.0.0.1:8090/index.css"
+      }
+    },
+    {
+      "tag": "meta",
+      "attributes": {
+        "name": "viewport",
+        "content": "width=device-width, initial-scale=1"
+      }
+    }
+  ]
+}
diff --git a/examples/yaml/prompts/screenRenderSettings/signup-id_signup-id.json b/examples/yaml/prompts/screenRenderSettings/signup-id_signup-id.json
@@ -0,0 +1,20 @@
+{
+  "prompt": "signup-id",
+  "screen": "signup-id",
+  "rendering_mode": "advanced",
+  "context_configuration": [],
+  "default_head_tags_disabled": false,
+  "head_tags": [
+    {
+      "tag": "script",
+      "attributes": {
+        "src": "URL_TO_YOUR_ASSET",
+        "async": true,
+        "defer": true,
+        "integrity": [
+          "ASSET_SHA"
+        ]
+      }
+    }
+  ]
+}
diff --git a/examples/yaml/tenant.yaml b/examples/yaml/tenant.yaml
@@ -184,3 +184,19 @@ triggers:
   post-user-registration: []
   pre-user-registration: []
   send-phone-message: []
+
+prompts:
+  customText:
+    en:
+      login-id:
+        login-id:
+          invalid-email-format: Email is not valid.
+  enable_ulp_wcag_compliance: false
+  identifier_first: false
+  partials: {}
+  screenRenderers:
+    - signup-id:
+        signup-id: ./prompts/screenRenderSettings/signup-id_signup-id.json
+    - login-passwordless:
+        login-passwordless-email-code: ./prompts/screenRenderSettings/login-passwordless_login-passwordless-email-code.json
+        login-passwordless-sms-otp: ./prompts/screenRenderSettings/login-passwordless_login-passwordless-sms-otp.json
diff --git a/src/tools/auth0/handlers/prompts.ts b/src/tools/auth0/handlers/prompts.ts
@@ -608,6 +608,7 @@ export default class PromptsHandler extends DefaultHandler {
     } else {
       updatePayload = {
         ...updatePrams,
+        rendering_mode
       };
     }