feat(ui): add an error page to show error message.

Signed-off-by: Jianhui Zhao <[email protected]>

api.go

@@ -251,7 +251,13 @@ func apiStart(br *broker) {
 
 	authorized.GET("/connect/:devid", func(c *gin.Context) {
 		if c.GetHeader("Upgrade") != "websocket" {
-			c.Redirect(http.StatusFound, "/rtty/"+c.Param("devid"))
+			devid := c.Param("devid")
+			if _, ok := br.devices[devid]; !ok {
+				c.Redirect(http.StatusFound, "/error/offline")
+				return
+			}
+
+			c.Redirect(http.StatusFound, "/rtty/"+devid)
 			return
 		}
 		serveUser(br, c)

http.go

@@ -303,7 +303,7 @@ func httpProxyRedirect(br *broker, c *gin.Context) {
 
 	_, ok := br.devices[devid]
 	if !ok {
-		c.Status(http.StatusNotFound)
+		c.Redirect(http.StatusFound, "/error/offline")
 		return
 	}
 

ui/src/router/index.js

@@ -9,6 +9,7 @@ import axios from 'axios'
 import Login from '../views/Login.vue'
 import Home from '../views/Home.vue'
 import Rtty from '../views/Rtty.vue'
+import Error from '../views/Error.vue'
 
 const routes = [
   {
@@ -26,6 +27,12 @@ const routes = [
     name: 'Rtty',
     component: Rtty,
     props: true
+  },
+  {
+    path: '/error/:err',
+    name: 'Error',
+    component: Error,
+    props: true
   }
 ]
 

ui/src/views/Error.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="text">
+    <span>Oops...</span>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Error',
+  props: {
+    err: String
+  },
+  computed: {
+    message() {
+      const err = this.err
+
+      if (err === 'offline')
+        return this.$t('Device offline')
+      else if (err === 'full')
+        return this.$t('Sessions is full')
+      return ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+  font: 400 3vmin "Courgette";
+  text-align: center;
+  color: red;
+}
+
+.text span {
+  font-size: 8vmin;
+  margin-bottom: 10px;
+}
+</style>

ui/src/views/Rtty.vue

@@ -242,12 +242,10 @@ export default {
         const msg = JSON.parse(data)
         if (msg.type === 'login') {
           if (msg.err === LoginErrorOffline) {
-            this.$message.error(this.$t('Device offline'))
-            this.$router.push('/')
+            this.$router.push('/error/offline')
             return
           } else if (msg.err === LoginErrorBusy) {
-            this.$message.error(this.$t('Sessions is full'))
-            this.$router.push('/')
+            this.$router.push('/error/full')
             return
           }