Merge pull request #4993 from node-red/login-prompt

Support custom login message and button

packages/node_modules/@node-red/editor-api/lib/auth/index.js

@@ -126,6 +126,14 @@ async function login(req,res) {
         if (themeContext.login && themeContext.login.image) {
             response.image = themeContext.login.image;
         }
+        if (themeContext.login?.message) {
+            response.loginMessage = themeContext.login?.message
+        }
+        if (themeContext.login?.button) {
+            response.prompts = [
+                { type: "button", ...themeContext.login.button }
+            ]
+        }
     }
     res.json(response);
 }

packages/node_modules/@node-red/editor-api/lib/editor/theme.js

@@ -206,14 +206,26 @@ module.exports = {
         }
 
         if (theme.login) {
+            let themeContextLogin = {}
+            let hasLoginTheme = false
             if (theme.login.image) {
                 url = serveFile(themeApp,"/login/",theme.login.image);
                 if (url) {
-                    themeContext.login = {
-                        image: url
-                    }
+                    themeContextLogin.image = url
+                    hasLoginTheme = true
                 }
             }
+            if (theme.login.message) {
+                themeContextLogin.message = theme.login.message
+                hasLoginTheme = true
+            }
+            if (theme.login.button) {
+                themeContextLogin.button = theme.login.button
+                hasLoginTheme = true
+            }
+            if (hasLoginTheme) {
+                themeContext.login = themeContextLogin
+            }
         }
         themeApp.get("/", async function(req,res) {
             const themePluginList = await runtimeAPI.plugins.getPluginsByType({type:"node-red-theme"});

packages/node_modules/@node-red/editor-client/src/js/user.js

@@ -168,6 +168,37 @@ RED.user = (function() {
                     }
 
 
+                } else {
+                    if (data.prompts) {
+                        if (data.loginMessage) {
+                            const sessionMessages = $("<div/>",{class:"form-row",style:"text-align: center"}).appendTo("#node-dialog-login-fields");
+                            $('<div>').text(data.loginMessage).appendTo(sessionMessages);
+                        }
+
+                        i = 0;
+                        for (;i<data.prompts.length;i++) {
+                            var field = data.prompts[i];
+                            var row = $("<div/>",{class:"form-row",style:"text-align: center"}).appendTo("#node-dialog-login-fields");
+                            var loginButton = $('<a href="#" class="red-ui-button"></a>',{style: "padding: 10px"}).appendTo(row).on("click", function() {
+                                document.location = field.url;
+                            });
+                            if (field.image) {
+                                $("<img>",{src:field.image}).appendTo(loginButton);
+                            } else if (field.label) {
+                                var label = $('<span></span>').text(field.label);
+                                if (field.icon) {
+                                    $('<i></i>',{class: "fa fa-2x "+field.icon, style:"vertical-align: middle"}).appendTo(loginButton);
+                                    label.css({
+                                        "verticalAlign":"middle",
+                                        "marginLeft":"8px"
+                                    });
+
+                                }
+                                label.appendTo(loginButton);
+                            }
+                            loginButton.button();
+                        }
+                    }
                 }
                 if (opts.cancelable) {
                     $("#node-dialog-login-cancel").button().on("click", function( event ) {