settings page working :D

tangle-explorer-web/src/pages/Settings.vue

@@ -1,13 +1,51 @@
 <template lang="html">
+  <div class="container">
+    <div class='settings-table'>
+      <legend>
+        Settings
+      </legend>
 
+      <form @submit.prevent='apply()'>
+        <table class="wrap striped">
+            <tbody>
+                <tr>
+                    <td>Node URL</td>
+                    <td><input class="input" type="url" v-model="settings.nodeUrl" required /></td>
+                </tr>
+            </tbody>
+        </table>
+        <input type="submit" class="primary btn" value="Apply" />
+        <input type="button" @click="reset()" class="destructive btn" value="Reset to default settings" />
+      </form>
+    </div>
+  </div>
 </template>
 
 <script>
+const settings = require('@/utils/settings.js').default
 export default {
+  methods: {
+    reset() {
+      var reset = confirm("Are you sure you want to reset to default settings?")
+      if(reset) {
+        settings.resetToDefault()        
+        window.location.reload()
+      }
+    },
+    apply() {
+      var oldSettings = settings.get()
+      settings.set(this.settings)
+      if(this.settings.nodeUrl !== oldSettings.nodeUrl) {
+        var restart = confirm("You've changed the Node address. It's recommended that you reload the page after applying the settings. Would you like to reload now?")
+        if(restart) {
+          window.location.reload()
+        }
+      }
+    }
+  },
   data() {
-    settings = store.get('settings') || {}
     return {
-      settings
+      settings: settings.get()
     }
   }
 }

tangle-explorer-web/src/styles/buttons.styl

@@ -0,0 +1,35 @@
+.btn
+  display inline-block
+  font-weight 400
+  line-height 1.25
+  text-align center
+  white-space nowrap
+  vertical-align middle
+  -webkit-user-select none
+  -moz-user-select none
+  -ms-user-select none
+  user-select none
+  border 1px solid transparent
+  padding .5rem 1rem
+  font-size 1rem
+  border-radius .25rem
+  -webkit-transition all .2s ease-in-out
+  -o-transition all .2s ease-in-out
+  transition all .2s ease-in-out
+  cursor pointer
+
+  &.destructive
+    color white
+    box-shadow 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3)
+    background -webkit-linear-gradient(315deg,#cb3733, #e65b57)
+    background linear-gradient(135deg,#cb3733, #e65b57)
+    letter-spacing 0.5px
+    border none
+
+  &.primary
+    color white
+    box-shadow 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3)
+    background -webkit-linear-gradient(315deg,#2c3e50, #56636f)
+    background linear-gradient(135deg,#2c3e50, #56636f)
+    letter-spacing 0.5px
+    border none

tangle-explorer-web/src/styles/layout.styl

@@ -1,5 +1,6 @@
 @import "./media-mixin.styl"
 @import "./workarounds.styl"
+@import "./buttons.styl"
 
 .container
   width 100%
@@ -23,6 +24,19 @@ legend {
   width 100%
 }
 
+form
+  .input
+    border 1px solid #56636f
+    padding 10px
+    border-radius 5px
+    width 100%
+
+    -webkit-transition all .2s ease-in-out
+    -o-transition all .2s ease-in-out
+    transition all .2s ease-in-out
+    &:focus
+      box-shadow 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3)
+
 .page-loading
   text-align center
   padding 25px

tangle-explorer-web/src/utils/settings.js

@@ -4,6 +4,9 @@ const defaultSettings = {
 }
 
 export default {
+  resetToDefault() {
+    store.remove('settings')
+  },
   set(settings) {
     store.set('settings', settings)
   },