From 6af79ecc0de0e51061a7fb73d2f0dcd0230604d3 Mon Sep 17 00:00:00 2001
From: Jianhui Zhao <zhaojh329@gmail.com>
Date: Mon, 16 Dec 2024 15:18:54 +0800
Subject: [PATCH] feat(ui): add an error page to show error message.

Signed-off-by: Jianhui Zhao <zhaojh329@gmail.com>
---
 api.go                 |  8 +++++++-
 ui/src/router/index.js |  7 +++++++
 ui/src/views/Error.vue | 39 +++++++++++++++++++++++++++++++++++++++
 ui/src/views/Rtty.vue  |  6 ++----
 4 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/views/Error.vue

diff --git a/api.go b/api.go
index 3878465..fddc5ac 100644
--- a/api.go
+++ b/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)
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
index 193e7e8..361e95d 100644
--- a/ui/src/router/index.js
+++ b/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
   }
 ]
 
diff --git a/ui/src/views/Error.vue b/ui/src/views/Error.vue
new file mode 100644
index 0000000..5735881
--- /dev/null
+++ b/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>
diff --git a/ui/src/views/Rtty.vue b/ui/src/views/Rtty.vue
index 995778c..3b4d09f 100644
--- a/ui/src/views/Rtty.vue
+++ b/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
           }