Add auth awareness to ui

public/index.html

@@ -36,6 +36,7 @@
                 <a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>
                 <a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>
             </span></li>
+        <li><span class="user hide"><i class="fa fa-user"></i> <span class="username"></span></span></li>
         <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
     <ul>
 </div>
@@ -255,12 +256,12 @@
 <script src="orion/built-editor.min.js"></script>
 <script src="d3.v3.min.js"></script>
 <script src="red/main.js"></script>
+<script src="red/settings.js"></script>
 <script src="red/comms.js"></script>
 <script src="red/ui/state.js"></script>
 <script src="red/nodes.js"></script>
 <script src="red/history.js"></script>
 <script src="red/validators.js"></script>
-<script src="red/settings.js"></script>
 <script src="red/ui/menu.js"></script>
 <script src="red/ui/keyboard.js"></script>
 <script src="red/ui/tabs.js"></script>

public/red/main.js

@@ -268,8 +268,7 @@ var RED = (function() {
         $("#btn-deploy img").attr("src",deploymentTypes[type].img);
     }
 
-    function load() {
+    function loadEditor() {
-        RED.settings.init(function() {
         RED.menu.init({id:"btn-sidemenu",
             options: [
                 {id:"btn-sidebar",label:"Sidebar",toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true},
@@ -311,15 +310,32 @@ var RED = (function() {
             ]
         });
         
-            RED.menu.init({id:"workspace-subflow-edit-menu",
+        if (RED.settings.user) {
-                options: [
+            $("#header .username").html(RED.settings.user.username);
-                    {id:"btn-subflow-add-input",label:"Add Input", onselect:function() { }},
+            $("#header .user").show();
-                    {id:"btn-subflow-add-output",label:"Add Output", onselect:function() { }},
+            RED.menu.addItem("btn-sidemenu", null);
-                    {id:"btn-subflow-edit-name",label:"Edit Name", onselect:function() { }},
+            RED.menu.addItem("btn-sidemenu",{
-                    {id:"btn-subflow-delete",label:"Delete", onselect:function() { }},
+                id:"btn-logout",
-                ]
+                icon:"fa fa-user",
+                label:"Logout",
+                onselect:function() {
+                    // TODO: invalidate token
+                    
+                    $.ajax({
+                        url: "auth/revoke",
+                        type: "POST",
+                        data: {token:RED.settings.get("auth-tokens").access_token},
+                        success: function() {
+                            RED.settings.remove("auth-tokens");
+                            document.location.reload(true);
+                        }
+                    })
+                    
+                }
             });
             
+        }
+    
         $("#main-container").show();
         $("#btn-deploy").show();
         $("#btn-sidemenu").show();
@@ -332,9 +348,20 @@ var RED = (function() {
         RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();});
         RED.comms.connect();
         loadNodeList();
-        },
+    }
-        function(err,msg) {
+    
-            if (err == 401) {
+    function showLogin() {
+        var dialog = $("#node-dialog-login");
+        dialog.dialog({
+            autoOpen: false,
+            dialogClass: "ui-dialog-no-close",
+            modal: true,
+            closeOnEscape: false,
+            width: 600,
+            resizable: false,
+            draggable: false
+        });
+        $("#node-dialog-login-fields").empty();
         $.ajax({
             dataType: "json",
             url: "auth/login",
@@ -352,23 +379,26 @@ var RED = (function() {
                         $("#node-dialog-login-submit").button("option","disabled",true);
                         $("#node-dialog-login-failed").hide();
                         $(".login-spinner").show();
+                        
+                        var body = {
+                            client_id: "node-red-admin",
+                            grant_type: "password",
+                            scope:"*"
+                        }
+                        for (var i=0;i<data.prompts.length;i++) {
+                            var field = data.prompts[i];
+                            body[field.id] = $("#node-dialog-login-"+field.id).val();
+                        }
                         $.ajax({
                             url:"auth/token",
                             type: "POST",
-                                    data: {
+                            data: body
-                                        grant_type: "password",
-                                        username: $("#node-dialog-login-username").val(),
-                                        password: $("#node-dialog-login-password").val(),
-                                        client_id: "node-red-admin",
-                                        scope:"*"
-                                        }
                         }).done(function(data,textStatus,xhr) {
-                                    $.ajaxSetup({
+                            RED.settings.set("auth-tokens",data);
-                                        headers:{"authorization":"bearer "+data.access_token} 
-                                    });
                             $("#node-dialog-login").dialog("close");
                             load();
                         }).fail(function(jqXHR,textStatus,errorThrown) {
+                            RED.settings.remove("auth-tokens");
                             $("#node-dialog-login-failed").show();
                         }).always(function() {
                             $("#node-dialog-login-submit").button("option","disabled",false);
@@ -377,22 +407,21 @@ var RED = (function() {
                         event.preventDefault();
                     });
                 }
+                dialog.dialog("open");
             }     
         });
+    }
 
-                var dialog = $("#node-dialog-login");
+    function load() {
-                dialog.dialog({
+        RED.settings.init(function(err,msg) {
-                    autoOpen: false,
+            if (err) {
-                    dialogClass: "ui-dialog-no-close",
+                if (err === 401) {
-                    modal: true,
+                    showLogin();
-                    closeOnEscape: false,
+                } else {
-                    width: 600,
+                    console.log("Unexpected error:",err,msg);
-                    resizable: false,
+                }
-                    draggable: false,
+            } else {
-                    open: function(event, ui) { console.log("opening");$(".ui-dialog-titlebar", ui.dialog || ui).hide(); }
+                loadEditor();
-                });
-                dialog.dialog("open");
-            
             }
         });
     }

public/red/settings.js

@@ -58,7 +58,20 @@ RED.settings = (function () {
         }
     };
 
-    var init = function (then,otherwise) {
+    var init = function (done) {
+        
+        $.ajaxSetup({
+            beforeSend: function(jqXHR,settings) {
+                // Only attach auth header for requests to relative paths
+                if (!/^\s*(https?:|\/|\.)/.test(settings.url)) {
+                    var auth_tokens = RED.settings.get("auth-tokens");
+                    if (auth_tokens) {
+                        jqXHR.setRequestHeader("authorization","bearer "+auth_tokens.access_token);
+                    }
+                }
+            }
+        });
+        
         $.ajax({
             headers: {
                 "Accept": "application/json"
@@ -69,11 +82,10 @@ RED.settings = (function () {
             success: function (data) {
                 setProperties(data);
                 console.log("Node-RED: " + data.version);
-                console.log(data);
+                done(null);
-                then();
             },
             error: function(jqXHR,textStatus,errorThrown) {
-                otherwise(jqXHR.status,textStatus);
+                done(jqXHR.status,textStatus);
             }
         });
     };

public/red/ui/menu.js

@@ -140,7 +140,7 @@ RED.menu = (function() {
 
         var button = $("#"+options.id);
 
-        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"}).insertAfter(button);
+        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu"}).insertAfter(button);
 
         for (var i=0;i<options.options.length;i++) {
             var opt = options.options[i];

public/style.css

@@ -29,8 +29,11 @@ body {
     background: #000;
     box-sizing: border-box;
     padding: 0px 0px 0px 20px;
+    color: #C7C7C7;
+    font-size: 14px;
 }
 
+
 #dropTarget {
     position: absolute;
     top: 0; bottom: 0;
@@ -66,7 +69,6 @@ span.logo {
     font-size: 30px;
     line-height: 30px;
     text-decoration: none;
-    color: #C7C7C7;
 }
 span.logo span {
     vertical-align: middle;

red/api/auth/index.js

@@ -18,6 +18,7 @@ var passport = require("passport");
 var oauth2orize = require("oauth2orize");
 
 var strategies = require("./strategies");
+var tokens = require("./tokens");
 
 var settings = require("../../settings");
 
@@ -62,11 +63,19 @@ function login(req,res) {
     res.json(response);
 }
 
+function revoke(req,res) {
+    var token = req.body.token;
+    tokens.revoke(token).then(function() {
+        res.send(200);
+    });
+}
+
 module.exports = {
     authenticate: authenticate,
     ensureClientSecret: ensureClientSecret,
     authenticateClient: authenticateClient,
     getToken: getToken,
     errorHandler: server.errorHandler(),
-    login: login
+    login: login,
+    revoke: revoke
 }

red/api/auth/tokens.js

@@ -35,6 +35,10 @@ module.exports = {
         var token = generateToken(256);
         tokens[token] = {user:user,client:client,scope:scope};
         return when.resolve(token);
+    },
+    revoke: function(token) {
+        delete tokens[token];
+        return when.resolve();
     }
     
 };

red/api/index.js

@@ -35,55 +35,56 @@ var errorHandler = function(err,req,res,next) {
 
 function init(adminApp) {
     
-    var apiApp = express();
+    
+    // Editor
+    if (!settings.disableEditor) {
+        var editorApp = express();
+        editorApp.get("/",ui.ensureSlash);
+        editorApp.get("/icons/:icon",ui.icon);
+        editorApp.use("/",ui.editor);
+        adminApp.use(editorApp);
+    }
 
     adminApp.use(express.json());
     adminApp.use(express.urlencoded());
     
     //TODO: all passport references ought to be in ./auth
-    apiApp.use(passport.initialize());
+    adminApp.use(passport.initialize());
     
-    apiApp.use(auth.authenticate);
+    adminApp.use(auth.authenticate);
-    apiApp.post("/auth/token",
+    adminApp.post("/auth/token",
         auth.ensureClientSecret,
         auth.authenticateClient,
         auth.getToken,
         auth.errorHandler
     );
-    apiApp.get("/auth/login",auth.login);
+    adminApp.get("/auth/login",auth.login);
+    adminApp.post("/auth/revoke",auth.revoke);
+    
 
     // Flows
-    apiApp.get("/flows",flows.get);
+    adminApp.get("/flows",flows.get);
-    apiApp.post("/flows",flows.post);
+    adminApp.post("/flows",flows.post);
     
     // Nodes
-    apiApp.get("/nodes",nodes.getAll);
+    adminApp.get("/nodes",nodes.getAll);
-    apiApp.post("/nodes",nodes.post);
+    adminApp.post("/nodes",nodes.post);
 
-    apiApp.get("/nodes/:mod",nodes.getModule);
+    adminApp.get("/nodes/:mod",nodes.getModule);
-    apiApp.put("/nodes/:mod",nodes.putModule);
+    adminApp.put("/nodes/:mod",nodes.putModule);
-    apiApp.delete("/nodes/:mod",nodes.delete);
+    adminApp.delete("/nodes/:mod",nodes.delete);
     
-    apiApp.get("/nodes/:mod/:set",nodes.getSet);
+    adminApp.get("/nodes/:mod/:set",nodes.getSet);
-    apiApp.put("/nodes/:mod/:set",nodes.putSet);
+    adminApp.put("/nodes/:mod/:set",nodes.putSet);
 
     // Library
-    library.init(apiApp);
+    library.init(adminApp);
-    apiApp.post(new RegExp("/library/flows\/(.*)"),library.post);
+    adminApp.post(new RegExp("/library/flows\/(.*)"),library.post);
-    apiApp.get("/library/flows",library.getAll);
+    adminApp.get("/library/flows",library.getAll);
-    apiApp.get(new RegExp("/library/flows\/(.*)"),library.get);
+    adminApp.get(new RegExp("/library/flows\/(.*)"),library.get);
     
     // Settings
-    apiApp.get("/settings",info.settings);
+    adminApp.get("/settings",info.settings);
-    
-    // Editor
-    if (!settings.disableEditor) {
-        adminApp.get("/",ui.ensureSlash);
-        adminApp.get("/icons/:icon",ui.icon);
-        adminApp.use("/",ui.editor);
-    }
-    
-    adminApp.use(apiApp);
     
     // Error Handler
     adminApp.use(errorHandler);