Tidy up branch/remote list in projectSettings

editor/js/ui/common/editableList.js

@@ -116,6 +116,11 @@
                 this.uiContainer.css("minHeight",minHeight);
                 this.element.css("minHeight",0);
             }
+            var maxHeight = this.element.css("maxHeight");
+            if (maxHeight !== '0px') {
+                this.uiContainer.css("maxHeight",maxHeight);
+                this.element.css("maxHeight",null);
+            }
             if (this.options.height !== 'auto') {
                 this.uiContainer.css("overflow-y","scroll");
                 if (!isNaN(this.options.height)) {

editor/js/ui/projectSettings.js

@@ -164,7 +164,7 @@ RED.projects.settings = (function() {
         var editButton = container.prev();
         editButton.hide();
         container.empty();
-        var bg = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
+        var bg = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').appendTo(container);
         var input = $('<input type="text" style="width: calc(100% - 150px); margin-right: 10px;">').val(summary||"").appendTo(container);
         $('<button class="editor-button">Cancel</button>')
             .appendTo(bg)
@@ -853,7 +853,7 @@ RED.projects.settings = (function() {
 
         }
 
-        var formButtons = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>').hide().appendTo(filesContainer);
+        var formButtons = $('<span class="button-row" style="position: relative; float: right; margin-right:0;"></span>').hide().appendTo(filesContainer);
         $('<button class="editor-button">Cancel</button>')
             .appendTo(formButtons)
             .click(function(evt) {
@@ -955,35 +955,40 @@ RED.projects.settings = (function() {
         var localBranchContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
         $('<h4></h4>').text("Branches").appendTo(localBranchContainer);
 
-        var row = $('<div class="user-settings-row projects-dialog-branch-list"></div>').appendTo(localBranchContainer);
+        var row = $('<div class="user-settings-row projects-dialog-list"></div>').appendTo(localBranchContainer);
 
 
         var branchList = $('<ol>').appendTo(row).editableList({
+            height: 'auto',
             addButton: false,
             scrollOnAdd: false,
             addItem: function(row,index,entry) {
-                var container = $('<div class="projects-dialog-branch-list-entry">').appendTo(row);
+                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
-                $('<span><i class="fa fa-code-fork"></i></span>').appendTo(container);
+                if (entry.current) {
-                $('<span class="branch-name">').text(entry.name).appendTo(container);
+                    container.addClass("current");
-                // if (entry.commit) {
+                }
-                //     $('<span class="commit">').text(entry.commit.sha).appendTo(container);
+                $('<span class="entry-icon"><i class="fa fa-code-fork"></i></span>').appendTo(container);
-                // }
+                var content = $('<span>').appendTo(container);
-
+                var topRow = $('<div>').appendTo(content);
+                $('<span class="entry-name">').text(entry.name).appendTo(topRow);
+                if (entry.commit) {
+                    $('<span class="entry-detail">').text(entry.commit.sha).appendTo(topRow);
+                }
                 if (entry.remote) {
-                    $('<span class="branch-remote-name">').text(entry.remote||"").appendTo(container);
+                    var bottomRow = $('<div>').appendTo(content);
+
+                    $('<span class="entry-detail entry-remote-name">').text(entry.remote||"").appendTo(bottomRow);
                     if (entry.status.ahead+entry.status.behind > 0) {
-                        $('<span class="branch-remote-status">'+
+                        $('<span class="entry-detail">'+
                             '<i class="fa fa-long-arrow-up"></i> <span>'+entry.status.ahead+'</span> '+
                             '<i class="fa fa-long-arrow-down"></i> <span>'+entry.status.behind+'</span>'+
-                            '</span>').appendTo(container);
+                            '</span>').appendTo(bottomRow);
                     }
                 }
 
-                var tools = $('<span class="projects-dialog-branch-list-entry-tools">').appendTo(container);
+                if (!entry.current) {
-                if (entry.current) {
+                    var tools = $('<span class="entry-tools">').appendTo(container);
-                    tools.text('current');
+                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
-                } else {
-                    $('<button class="editor-button editor-button-small">delete</button>')
                         .appendTo(tools)
                         .click(function(e) {
                             e.preventDefault();
@@ -1056,6 +1061,7 @@ RED.projects.settings = (function() {
 
             }
         });
+
         $.getJSON("projects/"+activeProject.name+"/branches",function(result) {
             if (result.branches) {
                 result.branches.sort(function(A,B) {
@@ -1069,6 +1075,7 @@ RED.projects.settings = (function() {
             }
         })
     }
+
     function createRemoteRepositorySection(activeProject,pane) {
         $('<h3></h3>').text("Version Control").appendTo(pane);
 
@@ -1077,152 +1084,195 @@ RED.projects.settings = (function() {
         var repoContainer = $('<div class="user-settings-section"></div>').appendTo(pane);
         var title = $('<h4></h4>').text("Git remotes").appendTo(repoContainer);
 
-        var editRepoButton = $('<button class="editor-button editor-button-small" style="float: right;">edit</button>')
+        var editRepoButton = $('<button class="editor-button editor-button-small" style="float: right; margin-right: 10px;">add remote</button>')
             .appendTo(title)
             .click(function(evt) {
-                editRepoButton.hide();
+                editRepoButton.attr('disabled',true);
-                formButtons.show();
+                addBranchDialog.slideDown(200, function() {
-
+                    addBranchDialog[0].scrollIntoView();
-                $('.projects-dialog-remote-list-entry-delete').show();
+                });
-                remoteListAddButton.show();
             });
 
 
+        var emptyItem = { empty: true };
 
-
+        row = $('<div class="user-settings-row projects-dialog-list"></div>').appendTo(repoContainer);
-        row = $('<div class="user-settings-row projects-dialog-remote-list"></div>').appendTo(repoContainer);
         var remotesList = $('<ol>').appendTo(row);
         remotesList.editableList({
-            addButton: 'add remote repository',
+            addButton: false,
             height: 'auto',
-            addItem: function(outer,index,entry) {
+            addItem: function(row,index,entry) {
 
-                var header = $('<div class="projects-dialog-remote-list-entry-header"></div>').appendTo(outer);
+                var container = $('<div class="projects-dialog-list-entry">').appendTo(row);
-                entry.header = $('<span>').text(entry.name||"Add new remote").appendTo(header);
+                if (entry.empty) {
-                var body = $('<div>').appendTo(outer);
+                    container.addClass('red-ui-search-empty');
-                entry.body = body;
+                    container.text("No remotes");
-                if (entry.name) {
+                    return;
-                    entry.removeButton = $('<button class="editor-button editor-button-small projects-dialog-remote-list-entry-delete">remove</button>')
+                } else {
-                        .hide()
+                    $('<span class="entry-icon"><i class="fa fa-globe"></i></span>').appendTo(container);
-                        .appendTo(header)
+                    var content = $('<span>').appendTo(container);
-                        .click(function(e) {
+                    $('<div class="entry-name">').text(entry.name).appendTo(content);
-                            entry.removed = true;
-                            body.fadeOut(100);
-                            entry.header.css("text-decoration","line-through")
-                            entry.header.css("font-style","italic")
-                            $(this).hide();
-                        });
                     if (entry.urls.fetch === entry.urls.push) {
-                        row = $('<div class="user-settings-row"></div>').appendTo(body);
+                        $('<div class="entry-detail">').text(entry.urls.fetch).appendTo(content);
-                        $('<label for=""></label>').text('URL').appendTo(row);
-                        $('<div class="uneditable-input">').text(entry.urls.fetch).appendTo(row);
                     } else {
-                        row = $('<div class="user-settings-row"></div>').appendTo(body);
+                        $('<div class="entry-detail">').text("fetch: "+entry.urls.fetch).appendTo(content);
-                        $('<label for=""></label>').text('Fetch URL').appendTo(row);
+                        $('<div class="entry-detail">').text("push: "+entry.urls.push).appendTo(content);
-                        $('<div class="uneditable-input">').text(entry.urls.fetch).appendTo(row);
-                        row = $('<div class="user-settings-row"></div>').appendTo(body);
-                        $('<label for=""></label>').text('Push URL').appendTo(row);
-                        $('<div class="uneditable-input">').text(entry.urls.push).appendTo(row);
-                    }
-                } else {
-                    row = $('<div class="user-settings-row"></div>').appendTo(body);
-                    $('<label for=""></label>').text('Remote name').appendTo(row);
-                    entry.nameInput = $('<input type="text">').appendTo(row);
 
-                    row = $('<div class="user-settings-row"></div>').appendTo(body);
-                    var fetchLabel = $('<label for=""></label>').text('URL').appendTo(row);
-                    entry.urlInput = $('<input type="text">').appendTo(row);
                     }
+                    var tools = $('<span class="entry-tools">').appendTo(container);
+                    $('<button class="editor-button editor-button-small"><i class="fa fa-trash"></i></button>')
+                        .appendTo(tools)
+                        .click(function(e) {
+                            e.preventDefault();
+                            var spinner = utils.addSpinnerOverlay(row).addClass('projects-dialog-spinner-contain');
+                            var notification = RED.notify("Are you sure you want to delete the remote '"+entry.name+"'?", {
+                                type: "warning",
+                                modal: true,
+                                fixed: true,
+                                buttons: [
+                                    {
+                                        text: RED._("common.label.cancel"),
+                                        click: function() {
+                                            spinner.remove();
+                                            notification.close();
+                                        }
+                                    },{
+                                        text: 'Delete remote',
+                                        click: function() {
+                                            notification.close();
+                                            var url = "projects/"+activeProject.name+"/remotes/"+entry.name;
+                                            var options = {
+                                                url: url,
+                                                type: "DELETE",
+                                                responses: {
+                                                    200: function(data) {
+                                                        row.fadeOut(200,function() {
+                                                            remotesList.editableList('removeItem',entry);
+                                                            setTimeout(spinner.remove, 100);
+                                                            activeProject.git.remotes = {};
+                                                            data.remotes.forEach(function(remote) {
+                                                                var name = remote.name;
+                                                                delete remote.name;
+                                                                activeProject.git.remotes[name] = remote;
+                                                            });
+                                                            if (data.remotes.length === 0) {
+                                                                remotesList.editableList('addItem',emptyItem);
+                                                            }
+                                                        });
+                                                    },
+                                                    400: {
+                                                        'unexpected_error': function(error) {
+                                                            console.log(error);
+                                                            spinner.remove();
+                                                        }
+                                                    },
+                                                }
+                                            }
+                                            utils.sendRequest(options);
+                                        }
+                                    }
+
+                                ]
+                            })
+                        });
+                }
+
+
             }
         });
 
-        var remoteListAddButton = row.find(".red-ui-editableList-addButton").hide();
+        var validateForm = function() {
+            var validName = /^[a-zA-Z0-9\-_]+$/.test(remoteNameInput.val());
+            var validRepo = /^(?:git|ssh|https?|[\d\w\.\-_]+@[\w\.]+):(?:\/\/)?[\w\.@:\/~_-]+\.git(?:\/?|\#[\d\w\.\-_]+?)$/.test(remoteURLInput.val());
+            saveButton.attr('disabled',(!validName || !validRepo))
+            remoteNameInput.toggleClass('input-error',remoteNameInputChanged&&!validName);
+            if (popover) {
+                popover.close();
+                popover = null;
+            }
+        };
+        var popover;
+        var addRemoteDialog = $('<div class="projects-dialog-list-dialog"></div>').hide().appendTo(row);
+        $('<div class="projects-dialog-list-dialog-header">').text('Add remote').appendTo(addRemoteDialog);
+
+        row = $('<div class="user-settings-row"></div>').appendTo(addRemoteDialog);
+        $('<label for=""></label>').text('Remote name').appendTo(row);
+        var remoteNameInput = $('<input type="text">').appendTo(row).on("change keyup paste",function() {
+            remoteNameInputChanged = true;
+            validateForm();
+        });
+        var remoteNameInputChanged = false;
+        $('<label class="projects-edit-form-sublabel"><small>Must contain only A-Z 0-9 _ -</small></label>').appendTo(row).find("small");
+        row = $('<div class="user-settings-row"></div>').appendTo(addRemoteDialog);
+        var fetchLabel = $('<label for=""></label>').text('URL').appendTo(row);
+        var remoteURLInput = $('<input type="text">').appendTo(row).on("change keyup paste",validateForm);
 
         var hideEditForm = function() {
-            editRepoButton.show();
+            editRepoButton.attr('disabled',false);
-            formButtons.hide();
+            addRemoteDialog.hide();
-            $('.projects-dialog-remote-list-entry-delete').hide();
+            remoteNameInput.val("");
-            remoteListAddButton.hide();
+            remoteURLInput.val("");
+            if (popover) {
+                popover.close();
+                popover = null;
             }
-
+        }
-        var formButtons = $('<span class="button-group" style="position: relative; float: right; margin-right:0;"></span>')
+        var formButtons = $('<span class="button-row" style="position: relative; float: right; margin: 10px;"></span>')
-            .hide().appendTo(repoContainer);
+            .appendTo(addRemoteDialog);
         $('<button class="editor-button">Cancel</button>')
             .appendTo(formButtons)
             .click(function(evt) {
                 evt.preventDefault();
-
-                var items = remotesList.editableList('items');
-                items.each(function() {
-                    var data = $(this).data('data');
-                    if (!data.name) {
-                        remotesList.editableList('removeItem',data);
-                    } else if (data.removed) {
-                        delete data.removed;
-                        data.body.show();
-                        data.header.css("text-decoration","");
-                        data.header.css("font-style","");
-                    }
-                })
-
-
                 hideEditForm();
             });
-        var saveButton = $('<button class="editor-button">Save</button>')
+        var saveButton = $('<button class="editor-button">Add remote</button>')
             .appendTo(formButtons)
             .click(function(evt) {
                 evt.preventDefault();
-                var spinner = utils.addSpinnerOverlay(repoContainer);
+                var spinner = utils.addSpinnerOverlay(addRemoteDialog).addClass('projects-dialog-spinner-contain');
 
-                var body = {
+                var payload = {
-                    remotes: {}
+                    name: remoteNameInput.val(),
+                    url: remoteURLInput.val()
                 }
-
-                var items = remotesList.editableList('items');
-                items.each(function() {
-                    var data = $(this).data('data');
-                    if (!data.name) {
-                        body.remotes[data.nameInput.val()] = {
-                            url: data.urlInput.val()
-                        };
-                        remotesList.editableList('removeItem',data);
-                    } else if (data.removed) {
-                        body.remotes[data.name] = {
-                            removed: true
-                        };
-                        delete data.removed;
-                        data.body.show();
-                        data.header.css("text-decoration","");
-                        data.header.css("font-style","");
-                    }
-                })
-
                 var done = function(err) {
                     spinner.remove();
                     if (err) {
-                        console.log(err);
                         return;
                     }
                     hideEditForm();
                 }
-                var payload = { git: body };
-
                 // console.log(JSON.stringify(payload,null,4));
                 RED.deploy.setDeployInflight(true);
                 utils.sendRequest({
-                    url: "projects/"+activeProject.name,
+                    url: "projects/"+activeProject.name+"/remotes",
-                    type: "PUT",
+                    type: "POST",
                     responses: {
                         0: function(error) {
                             done(error);
                         },
                         200: function(data) {
-                            activeProject.git.remotes = data.git.remotes;
+                            activeProject.git.remotes = {};
-
+                            data.remotes.forEach(function(remote) {
+                                var name = remote.name;
+                                delete remote.name;
+                                activeProject.git.remotes[name] = remote;
+                            });
                             updateForm();
                             done();
                         },
                         400: {
+                            'git_remote_already_exists': function(error) {
+                                popover = RED.popover.create({
+                                    target: remoteNameInput,
+                                    direction: 'right',
+                                    size: 'small',
+                                    content: "Remote already exists",
+                                    autoClose: 6000
+                                }).open();
+                                remoteNameInput.addClass('input-error');
+                                done(error);
+                            },
                             'unexpected_error': function(error) {
                                 console.log(error);
                                 done(error);
@@ -1233,13 +1283,18 @@ RED.projects.settings = (function() {
             });
         var updateForm = function() {
             remotesList.editableList('empty');
+            var count = 0;
             if (activeProject.git.hasOwnProperty('remotes')) {
                 for (var name in activeProject.git.remotes) {
                     if (activeProject.git.remotes.hasOwnProperty(name)) {
+                        count++;
                         remotesList.editableList('addItem',{name:name,urls:activeProject.git.remotes[name]});
                     }
                 }
             }
+            if (count === 0) {
+                remotesList.editableList('addItem',emptyItem);
+            }
         }
         updateForm();
     }

editor/js/ui/projects.js

@@ -584,6 +584,7 @@ RED.projects = (function() {
                             $(".projects-dialog-screen-create-row").hide();
                             $(".projects-dialog-screen-create-row-"+$(this).data('type')).show();
                             validateForm();
+                            projectNameInput.focus();
                         })
 
 
@@ -679,12 +680,12 @@ RED.projects = (function() {
                         })
 
                         row = $('<div class="form-row projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" checked style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="default" name="projects-encryption-key"> <span style="vertical-align: middle;">Use default key</span></label>').appendTo(row);
+                        $('<label class="projects-edit-form-inline-label">Encryption key</label>').appendTo(row);
-                        row = $('<div class="form-row projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
+                        // row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        $('<label class="projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="custom" name="projects-encryption-key"> <span style="vertical-align: middle;">Use custom key</span></label>').appendTo(row);
+                        emptyProjectCredentialInput = $('<input type="password"></input>').appendTo(row);
-                        row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
-                        emptyProjectCredentialInput = $('<input disabled type="password" style="margin-left: 25px; width: calc(100% - 30px);"></input>').appendTo(row);
                         emptyProjectCredentialInput.on("change keyup paste", validateForm);
+                        $('<label class="projects-edit-form-sublabel"><small>A phrase to secure your credentials with</small></label>').appendTo(row);
+
 
                         row = $('<div class="form-row projects-encryption-disabled-row"></div>').hide().appendTo(credentialsRightBox);
                         $('<div class="" style="padding: 5px 20px;"><i class="fa fa-warning"></i> The credentials file will not be encrypted and its contents easily read</div>').appendTo(row);
@@ -770,6 +771,9 @@ RED.projects = (function() {
 
                         createAsEmpty.click();
 
+                        setTimeout(function() {
+                            projectNameInput.focus();
+                        },50);
                         return container;
                     },
                     buttons: [
@@ -1057,7 +1061,7 @@ RED.projects = (function() {
         dialogBody.append(container);
         dialog.dialog('option','title',screen.title||"");
         dialog.dialog("open");
-        dialog.dialog({position: { 'my': 'center', 'at': 'center', 'of': window }});
+        dialog.dialog({position: { 'my': 'center top', 'at': 'center top+10%', 'of': window }});
     }
 
     var selectedProject = null;
@@ -1179,7 +1183,7 @@ RED.projects = (function() {
                     resultCallbackArgs = {error:responses.statusText};
                     return;
                 } else if (options.handleAuthFail !== false && xhr.responseJSON.error === 'git_auth_failed') {
-                    var url = activeProject.git.remotes.origin.fetch;
+                    var url = activeProject.git.remotes[options.remote||'origin'].fetch;
                     var message = $('<div>'+
                         '<div class="form-row">Authentication required for repository:</div>'+
                         '<div class="form-row"><div style="margin-left: 20px;">'+url+'</div></div>'+

editor/sass/mixins.scss

@@ -94,6 +94,10 @@
         border-bottom-right-radius: 0;
     }
 
+    .button-row &:not(:first-child) {
+        margin-left: 15px;
+    }
+
     &:focus {
         outline: 1px solid $workspace-button-color-focus-outline;
     }

editor/sass/projects.scss

@@ -675,78 +675,71 @@
     }
 }
 
-.projects-dialog-remote-list-entry-header {
+.projects-dialog-list {
-    padding: 8px 10px;
+    position: relative;
+    .red-ui-editableList-container {
+        padding: 1px;
         background: #f6f6f6;
-    margin-bottom: 8px;
+        li:last-child {
-}
-.projects-dialog-remote-list-entry-delete {
-    float: right;
-}
-.projects-dialog-remote-list-entry-copy {
-    float: right;
-}
-
-/*
-.expandable-list-entry {
-    .exandable-list-entry-header {
-        padding: 15px 0;
-        cursor: pointer;
-        &:hover {
-            background: #f3f3f3;
-        }
-        i {
-            width: 16px;
-            text-align: center;
-        }
-        .fa-angle-right {
-            color: #333;
-            transition: all 0.2s ease-in-out;
-        }
-    }
-    &.expanded .fa-angle-right {
-        transform: rotate(90deg);
-    }
-}
-*/
-
-.projects-dialog-branch-list {
-    .red-ui-editableList-container li:last-child {
             border-bottom: none;
         }
+    }
 }
 
-.projects-dialog-branch-list-entry {
+.projects-dialog-list-entry {
+    &.red-ui-search-empty {
+        padding: 0;
+    }
+
     span {
         display: inline-block;
     }
-    span:first-child {
+    .entry-icon {
         text-align: center;
         min-width: 30px;
-    }
+        vertical-align: top;
-    .branch-name {
-        min-width: 150px;
-    }
-    .branch-remote-name {
-        color: #aaa;
-        font-size: 0.9em;
-        min-width: 150px;
-    }
-    .branch-remote-status {
-        color: #aaa;
-        font-size: 0.9em;
-    }
-    .commit {
-        color: #aaa;
-        font-size: 0.9em;
-        padding: 2px 5px;
-
-    }
-
-    .projects-dialog-branch-list-entry-tools {
-        float: right;
-        margin-right: 20px;
-        font-size: 0.9em;
         color: #999;
     }
+    .entry-name {
+        min-width: 250px;
+    }
+    &.current .entry-name {
+        font-weight: bold;
+    }
+    .entry-detail {
+        color: #aaa;
+        font-size: 0.9em;
+    }
+
+    .entry-remote-name {
+        min-width: 250px;
+    }
+
+
+    .entry-tools {
+        float: right;
+        margin-right: 10px;
+    }
+}
+.projects-dialog-list-dialog {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    left: 10px;
+    background: white;
+    border-radius: 4px;
+    border: 1px solid $secondary-border-color;
+    .projects-edit-form-sublabel {
+        margin-top: -8px !important;
+        display: block !important;
+        width: auto !important;
+    }
+
+    .projects-dialog-list-dialog-header {
+        font-weight: bold;
+        background: #f3f3f3;
+        margin-top: 0 !important;
+        padding: 5px 10px;
+        margin-bottom: 10px;
+    }
 }

red/api/editor/projects/index.js

@@ -77,7 +77,7 @@ module.exports = {
             //TODO: validate the payload properly
             if (req.body.active) {
                 var currentProject = runtime.storage.projects.getActiveProject(req.user);
-                if (req.params.id !== currentProject.name) {
+                if (!currentProject || req.params.id !== currentProject.name) {
                     runtime.storage.projects.setActiveProject(req.user, req.params.id).then(function() {
                         res.redirect(303,req.baseUrl + '/');
                     }).catch(function(err) {
@@ -465,8 +465,52 @@ module.exports = {
             })
         });
 
+        // Get a list of remotes
+        app.get("/:id/remotes", needsPermission("projects.read"), function(req, res) {
+            var projectName = req.params.id;
+            runtime.storage.projects.getRemotes(req.user, projectName).then(function(data) {
+                res.json(data);
+            })
+            .catch(function(err) {
+                console.log(err.stack);
+                if (err.code) {
+                    res.status(400).json({error:err.code, message: err.message});
+                } else {
+                    res.status(400).json({error:"unexpected_error", message:err.toString()});
+                }
+            })
+        });
 
+        // Add a remote
+        app.post("/:id/remotes", needsPermission("projects.write"), function(req,res) {
+            var projectName = req.params.id;
+            runtime.storage.projects.addRemote(req.user, projectName, req.body).then(function() {
+                res.redirect(303,req.baseUrl+"/"+projectName+"/remotes");
+            }).catch(function(err) {
+                console.log(err.stack);
+                if (err.code) {
+                    res.status(400).json({error:err.code, message: err.message});
+                } else {
+                    res.status(400).json({error:"unexpected_error", message:err.toString()});
+                }
+            })
+        });
 
+        // Delete a remote
+        app.delete("/:id/remotes/:remoteName", needsPermission("projects.write"), function(req, res) {
+            var projectName = req.params.id;
+            var remoteName = req.params.remoteName;
+            runtime.storage.projects.removeRemote(req.user, projectName, remoteName).then(function(data) {
+                res.redirect(303,req.baseUrl+"/"+projectName+"/remotes");
+            })
+            .catch(function(err) {
+                if (err.code) {
+                    res.status(400).json({error:err.code, message: err.message});
+                } else {
+                    res.status(400).json({error:"unexpected_error", message:err.toString()});
+                }
+            });
+        });
 
         return app;
     }

red/runtime/storage/localfilesystem/projects/Project.js

@@ -117,7 +117,6 @@ Project.prototype.loadRemotes = function() {
     }).then(function() {
         return project.loadBranches();
     }).then(function() {
-
         var allRemotes = Object.keys(project.remotes);
         var match = "";
         allRemotes.forEach(function(remote) {
@@ -519,6 +518,41 @@ Project.prototype.setBranch = function (branchName, isCreate) {
 Project.prototype.getBranchStatus = function (branchName) {
     return gitTools.getBranchStatus(this.path,branchName);
 };
+
+
+
+Project.prototype.getRemotes = function (user) {
+    return gitTools.getRemotes(this.path).then(function(remotes) {
+        var result = [];
+        for (var name in remotes) {
+            if (remotes.hasOwnProperty(name)) {
+                remotes[name].name = name;
+                result.push(remotes[name]);
+            }
+        }
+        return {remotes:result};
+    })
+};
+Project.prototype.addRemote = function(user,remote,options) {
+    var project = this;
+    return gitTools.addRemote(this.path,remote,options).then(function() {
+        return project.loadRemotes()
+    });
+}
+Project.prototype.updateRemote = function(user,remote,options) {
+    // TODO: once the sshkey support is added, move the updating of remotes,
+    // including their auth details, down here.
+}
+Project.prototype.removeRemote = function(user, remote) {
+    // TODO: if this was the last remote using this url, then remove the authCache
+    // details.
+    var project = this;
+    return gitTools.removeRemote(this.path,remote).then(function() {
+        return project.loadRemotes()
+    });
+}
+
+
 Project.prototype.getFlowFile = function() {
     console.log("Project.getFlowFile = ",this.paths.flowFile);
     if (this.paths.flowFile) {

red/runtime/storage/localfilesystem/projects/git/index.js

@@ -58,6 +58,8 @@ function runGitCommand(args,cwd,env) {
                     err.code = "git_pull_merge_conflict";
                 } else if (/not fully merged/.test(stderr)) {
                     err.code = "git_delete_branch_unmerged";
+                } else if (/remote .* already exists/.test(stderr)) {
+                    err.code = "git_remote_already_exists";
                 }
                 return reject(err);
             }

red/runtime/storage/localfilesystem/projects/index.js

@@ -252,6 +252,21 @@ function getBranchStatus(user, project,branchName) {
     checkActiveProject(project);
     return activeProject.getBranchStatus(branchName);
 }
+
+
+function getRemotes(user, project) {
+    checkActiveProject(project);
+    return activeProject.getRemotes(user);
+}
+function addRemote(user, project, options) {
+    checkActiveProject(project);
+    return activeProject.addRemote(user, options.name, options);
+}
+function removeRemote(user, project, remote) {
+    checkActiveProject(project);
+    return activeProject.removeRemote(user, remote);
+}
+
 function getActiveProject(user) {
     return activeProject;
 }
@@ -473,6 +488,9 @@ module.exports = {
     deleteBranch: deleteBranch,
     setBranch: setBranch,
     getBranchStatus:getBranchStatus,
+    getRemotes: getRemotes,
+    addRemote: addRemote,
+    removeRemote: removeRemote,
 
     getFlows: getFlows,
     saveFlows: saveFlows,