[remove] Add new menu dialog for removing servers

index.html

@@ -45,6 +45,7 @@
     </main>
     <change></change>
     <add></add>
+    <remove></remove>
     <footer class="mdl-mini-footer">
       <div class="mdl-mini-footer__left-section">
         <div class="mdl-logo">Docker Registry UI</div>
@@ -59,6 +60,7 @@
   <script src="taglist.tag" type="riot/tag"></script>
   <script src="add.tag" type="riot/tag"></script>
   <script src="change.tag" type="riot/tag"></script>
+  <script src="remove.tag" type="riot/tag"></script>
   <script src="menu.tag" type="riot/tag"></script>
   <script src="app.tag" type="riot/tag"></script>
   <script src="node_modules/riot/riot+compiler.min.js"></script>

menu.tag

@@ -22,6 +22,7 @@
     <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
       <li class="mdl-menu__item" onclick="registryUI.addTag.show();">Add URL</li>
       <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li>
+      <li class="mdl-menu__item" onclick="registryUI.removeTag.show();">Remove URL</li>
     </ul>
   </div>
 

remove.tag

@@ -0,0 +1,64 @@
+<!--
+ Copyright (C) 2016  Jones Magloire @Joxit
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<remove>
+  <dialog id="remove-server-dialog" class="mdl-dialog">
+    <h4 class="mdl-dialog__title">Remove your Registry Server ?</h4>
+    <div class="mdl-dialog__content">
+      <div class="mdl-textfield mdl-js-textfield">
+        <ul class="mdl-list">
+          <li class="mdl-list__item" each="{ url in registryUI.getRegistryServer() }">
+            <span class="mdl-list__item-primary-content">
+              <a href="#" onClick="registryUI.removeTag.removeUrl('{url}');">
+                <i class="material-icons mdl-list__item-icon">delete</i>
+              </a>
+              <span class="url">{url}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="mdl-dialog__actions">
+      <button type="button" class="mdl-button close" onClick="registryUI.removeTag.close();">Close</button>
+    </div>
+  </dialog>
+  <script type="text/javascript">
+    registryUI.removeTag = registryUI.removeTag || {}
+    registryUI.removeTag.update = this.update;
+
+    registryUI.removeTag.removeUrl = function (url) {
+      registryUI.removeServer(url);
+      registryUI.removeTag.update();
+    };
+
+    registryUI.removeTag.close = function () {
+      registryUI.removeTag.dialog.close();
+      registryUI.removeTag.update();
+    };
+
+    registryUI.removeTag.show = function () {
+      registryUI.removeTag.update();
+      registryUI.removeTag.dialog.showModal();
+    };
+
+    this.on('updated', function () {
+      registryUI.removeTag.dialog = this['remove-server-dialog'];
+      if (!registryUI.removeTag.dialog.showModal) {
+        dialogPolyfill.registerDialog(registryUI.removeTag.dialog);
+      }
+    });
+  </script>
+</remove>

script.js

@@ -50,6 +50,16 @@ registryUI.changeServer = function(url) {
   registryServer = [url].concat(registryServer);
   localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
+registryUI.removeServer = function(url) {
+  var registryServer = registryUI.getRegistryServer();
+  url = url.trim().replace(/\/*$/, '');
+  var index = registryServer.indexOf(url);
+  if (index == -1) {
+    return;
+  }
+  registryServer.splice(index, 1);
+  localStorage.setItem('registryServer', JSON.stringify(registryServer));
+}
 registryUI.catalog = {};
 registryUI.taglist = {};
 
@@ -57,5 +67,6 @@ riot.mount('catalog');
 riot.mount('taglist');
 riot.mount('add');
 riot.mount('change');
+riot.mount('remove');
 riot.mount('menu');
 riot.mount('app');

style.css

@@ -44,3 +44,8 @@ html > body {
   width: 100%;
   border: none;
 }
+
+.url {
+  font-size: 14px;
+  word-break: break-all;
+}