From 4ff1b2fabe13b5236fb7c5c5d5cd8e23d7b65d83 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sat, 27 Mar 2021 14:02:10 +0100
Subject: [PATCH] feat(riot-v5): upgrade change-registry-url dialog

---
 .../dialogs/change-registry-url.riot          | 79 +++++++++++++++++++
 src/components/dialogs/dialogs-menu.riot      |  6 +-
 src/style.scss                                | 21 -----
 src/tags/dialogs/change.riot                  | 61 --------------
 4 files changed, 84 insertions(+), 83 deletions(-)
 create mode 100644 src/components/dialogs/change-registry-url.riot
 delete mode 100644 src/tags/dialogs/change.riot

diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot
new file mode 100644
index 0000000..d0e6e6e
--- /dev/null
+++ b/src/components/dialogs/change-registry-url.riot
@@ -0,0 +1,79 @@
+<!--
+ Copyright (C) 2016-2021 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/>.
+-->
+<change-registry-url>
+  <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
+    <div slot="title">Change your Server ?</div>
+    <div slot="content">
+      <select>
+        <option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
+      </select>
+    </div>
+    <div slot="action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }">
+        Change
+      </material-button>
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+        Cancel
+      </material-button>
+    </div>
+  </material-popup>
+  <script>
+    import {
+      getRegistryServers,
+      updateHistory
+    } from '../../scripts/utils';
+    import router from '../../scripts/router';
+    export default {
+      change(event) {
+        const select = this.$('select');
+        if (!select || !select.value || select.value.length === 0) {
+          return this.props.onNotify('The select field is empty. Please add an url.', true);
+        }
+        if (!select.value.startsWith('http')) {
+          return this.props.onNotify('The select field should start with http:// or https://.', true);
+        }
+        const url = select.value.trim().replace(/\/*$/, '');
+        const registryServer = getRegistryServers().filter(e => e !== url);
+        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
+        router.home()
+        this.props.onServerChange(url);
+        this.props.onClose()
+        setTimeout(() => updateHistory(url), 100);
+      },
+      getRegistryServers
+    }
+  </script>
+  <style>
+    :host select {
+      position: relative;
+      outline: 0;
+      box-shadow: none;
+      padding: 0;
+      width: 100%;
+      background: 0 0;
+      border: none;
+      font-weight: 400;
+      line-height: 24px;
+      height: 24px;
+      border-bottom: 1px solid #2f6975;
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      margin: 1.5em 0;
+    }
+  </style>
+</change-registry-url>
\ No newline at end of file
diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot
index cb9f00b..1a68414 100644
--- a/src/components/dialogs/dialogs-menu.riot
+++ b/src/components/dialogs/dialogs-menu.riot
@@ -23,12 +23,16 @@
   <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
   <add-registry-url opened="{ state['add-registry-url'] }" on-close="{ onClose('add-registry-url') }"
     on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></add-registry-url>
+  <change-registry-url opened="{ state['change-registry-url'] }" on-close="{ onClose('change-registry-url') }"
+    on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></change-registry-url>
   <script>
     import AddRegistryUrl from './add-registry-url.riot';
+    import ChangeRegistryUrl from './change-registry-url.riot';
 
     export default {
       components: {
-        AddRegistryUrl
+        AddRegistryUrl,
+        ChangeRegistryUrl
       },
       dropdownItems: [{
         title: 'Add URL',
diff --git a/src/style.scss b/src/style.scss
index 6b63682..64bd40c 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -358,27 +358,6 @@ material-footer {
   padding: 0.5em 1em;
 }
 
-.select-padding {
-  padding: 20px 0;
-}
-
-select {
-  position: relative;
-  outline: 0;
-  box-shadow: none;
-  padding: 0;
-  width: 100%;
-  background: 0 0;
-  border: none;
-  font-weight: 400;
-  line-height: 24px;
-  height: 24px;
-  border-bottom: 1px solid #2f6975;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
 .copy-to-clipboard {
   padding-left: 5px;
 }
diff --git a/src/tags/dialogs/change.riot b/src/tags/dialogs/change.riot
deleted file mode 100644
index 1801703..0000000
--- a/src/tags/dialogs/change.riot
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
- Copyright (C) 2016-2019 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/>.
--->
-<change>
-  <material-popup>
-    <div class="material-popup-title">Change your Server ?</div>
-    <div class="material-popup-content">
-      <div class="select-padding">
-        <select class="mdl-textfield__input mdl-textfield__select" name="server-list" ref="server-list">
-          <option each="{ url in registryUI.getRegistryServer() }" value={url}>{url}</option>
-        </select>
-      </div>
-    </div>
-    <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.changeTag.change();">Change</material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.changeTag.close();">Cancel</material-button>
-    </div>
-  </material-popup>
-  <script type="text/javascript">
-    registryUI.changeTag = registryUI.changeTag || {};
-    this.one('mount', function () {
-      registryUI.changeTag.dialog = this.tags['material-popup'];
-      registryUI.changeTag.dialog.getServerUrl = function () {
-        return this.refs['server-list']
-          ? this.refs['server-list'].value
-          : '';
-      };
-      registryUI.changeTag.dialog.on('updated', function () {
-        if (this.refs['server-list']) {
-          this.refs['server-list'].value = registryUI.url();
-        }
-      });
-    });
-    registryUI.changeTag.show = function () {
-      registryUI.changeTag.dialog.open();
-    };
-    registryUI.changeTag.change = function () {
-      if (registryUI.changeTag.dialog.getServerUrl().length > 0) {
-        registryUI.changeServer(registryUI.changeTag.dialog.getServerUrl());
-      }
-      registryUI.home();
-      registryUI.changeTag.dialog.close();
-    };
-    registryUI.changeTag.close = function () {
-      registryUI.changeTag.dialog.close();
-    };
-  </script>
-</change>
\ No newline at end of file