fix spammer route, add error message if unauthorized

plugins/ui/files.go

@@ -241,7 +241,10 @@ body.fade {
                 <span>Password:</span>
                 <input class="input" placeholder="Username" name="password">
               </div>
-              <button type="submit" class="button is-primary">Login</button>
+              <button type="submit" :disabled="loginError?true:false"
+                :class="loginError?'button is-danger':'button is-primary'">
+                {{ loginButtonText }}
+              </button>
             </form>
           </div>
 
@@ -452,6 +455,7 @@ Vue.component('empty-icon', {
   info: {},
   selectedTxHash:null,
   tps:0,
+  loginError:'',
 }
 `,
 	"js/main.js":`new Vue({
@@ -469,9 +473,14 @@ Vue.component('empty-icon', {
       const formData = new FormData(e.target);
       const pass = formData.get('password')
       const user = formData.get('username')
-      const r = await api.get('login?username='+user+'&password='+pass)
-      if(r.token){
-        this.init()
+      try{
+        const r = await api.get('login?username='+user+'&password='+pass)
+        if(r.token){
+          this.init()
+        }
+      }catch(e){
+        this.loginError = 'Not Authorized'
+        setTimeout(()=>this.loginError='',2000)
       }
     },
     async init() {
@@ -499,11 +508,11 @@ Vue.component('empty-icon', {
     },
     footerContainerStyle() {
       const size = Math.max(window.innerHeight-this.headerSize, 300)
-      return 'height:calc('+(size-1 )+'px - 3.6rem);'
+      return 'height:calc('+(size-1)+'px - 3.6rem);'
     },
     startSpam() {
       console.log('start spam', this.tpsToSpam)
-      api.get('spammer?cmd=start&tps='+this.tpsToSpam+')')
+      api.get('spammer?cmd=start&tps='+this.tpsToSpam)
     },
     stopSpam() {
       console.log('stop spam')
@@ -576,6 +585,9 @@ Vue.component('empty-icon', {
     infoKeys() {
       return ['TPS', 'Node ID', 'Neighbors', 'Peers', 'Uptime']
     },
+    loginButtonText() {
+      return this.loginError || 'Login'
+    },
     infoValues() {
       const i = this.info
       return i.id ? [
@@ -922,23 +934,37 @@ const logLevels = [{
 const api = {
   get: async function(u) {
     const url = this.trim('/'+u)
-    const r = await fetch(this.addToken(url))
-    const j = await r.json()
-    if(url.startsWith('login') && j.token) {
-      localStorage.setItem('token', j.token)
-      await sleep(1)
+    try{
+      const r = await fetch(this.addToken(url))
+      const j = await r.json()
+      if (!(r.status >= 200 && r.status < 300)) {
+        throw new Error(j)
+      }
+      if(url.startsWith('login') && j.token) {
+        localStorage.setItem('token', j.token)
+        await sleep(1)
+      }
+      return j
+    } catch(e) {
+      throw e
     }
-    return j
   },
   post: async function(u, data){
     const url = this.trim('/'+u)
-    const r = await fetch(this.addToken(url), {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      data: JSON.stringify(data)
-    })
-    const j = await r.json()
-    return j
+    try{
+      const r = await fetch(this.addToken(url), {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        data: JSON.stringify(data)
+      })
+      const j = await r.json()
+      if (!(r.status >= 200 && r.status < 300)) {
+        throw new Error(j)
+      }
+      return j
+    } catch(e) {
+      throw e
+    }
   },
   trim: function(s) {
     return s.replace(/^\//, '');

plugins/ui/src/index.html

@@ -33,7 +33,10 @@
                 <span>Password:</span>
                 <input class="input" placeholder="Username" name="password">
               </div>
-              <button type="submit" class="button is-primary">Login</button>
+              <button type="submit" :disabled="loginError?true:false"
+                :class="loginError?'button is-danger':'button is-primary'">
+                {{ loginButtonText }}
+              </button>
             </form>
           </div>
 

plugins/ui/src/js/initials.js

@@ -10,4 +10,5 @@ var initialData = {
   info: {},
   selectedTxHash:null,
   tps:0,
+  loginError:'',
 }

plugins/ui/src/js/main.js

@@ -13,9 +13,14 @@ new Vue({
       const formData = new FormData(e.target);
       const pass = formData.get('password')
       const user = formData.get('username')
-      const r = await api.get('login?username='+user+'&password='+pass)
-      if(r.token){
-        this.init()
+      try{
+        const r = await api.get('login?username='+user+'&password='+pass)
+        if(r.token){
+          this.init()
+        }
+      }catch(e){
+        this.loginError = 'Not Authorized'
+        setTimeout(()=>this.loginError='',2000)
       }
     },
     async init() {
@@ -43,11 +48,11 @@ new Vue({
     },
     footerContainerStyle() {
       const size = Math.max(window.innerHeight-this.headerSize, 300)
-      return 'height:calc('+(size-1 )+'px - 3.6rem);'
+      return 'height:calc('+(size-1)+'px - 3.6rem);'
     },
     startSpam() {
       console.log('start spam', this.tpsToSpam)
-      api.get('spammer?cmd=start&tps='+this.tpsToSpam+')')
+      api.get('spammer?cmd=start&tps='+this.tpsToSpam)
     },
     stopSpam() {
       console.log('stop spam')
@@ -120,6 +125,9 @@ new Vue({
     infoKeys() {
       return ['TPS', 'Node ID', 'Neighbors', 'Peers', 'Uptime']
     },
+    loginButtonText() {
+      return this.loginError || 'Login'
+    },
     infoValues() {
       const i = this.info
       return i.id ? [

plugins/ui/src/js/utils.js

@@ -36,23 +36,37 @@ const logLevels = [{
 const api = {
   get: async function(u) {
     const url = this.trim('/'+u)
-    const r = await fetch(this.addToken(url))
-    const j = await r.json()
-    if(url.startsWith('login') && j.token) {
-      localStorage.setItem('token', j.token)
-      await sleep(1)
+    try{
+      const r = await fetch(this.addToken(url))
+      const j = await r.json()
+      if (!(r.status >= 200 && r.status < 300)) {
+        throw new Error(j)
+      }
+      if(url.startsWith('login') && j.token) {
+        localStorage.setItem('token', j.token)
+        await sleep(1)
+      }
+      return j
+    } catch(e) {
+      throw e
     }
-    return j
   },
   post: async function(u, data){
     const url = this.trim('/'+u)
-    const r = await fetch(this.addToken(url), {
-      method: 'POST',
-      headers: {'Content-Type': 'application/json'},
-      data: JSON.stringify(data)
-    })
-    const j = await r.json()
-    return j
+    try{
+      const r = await fetch(this.addToken(url), {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        data: JSON.stringify(data)
+      })
+      const j = await r.json()
+      if (!(r.status >= 200 && r.status < 300)) {
+        throw new Error(j)
+      }
+      return j
+    } catch(e) {
+      throw e
+    }
   },
   trim: function(s) {
     return s.replace(/^\//, '');