feat: replace alerts with toast notifications

open-isle-cli/src/main.js

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/global.css'
+import Toast, { POSITION } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 
 // Configurable API domain and port
 export const API_DOMAIN =
@@ -10,4 +12,7 @@ export const API_DOMAIN =
 export const API_PORT = process.env.VUE_APP_API_PORT || window.location.port
 export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
 
-createApp(App).use(router).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.use(Toast, { position: POSITION.TOP_RIGHT })
+app.mount('#app')

open-isle-cli/src/views/LoginPageView.vue

@@ -68,13 +68,13 @@ export default {
         const data = await res.json()
         if (res.ok && data.token) {
           localStorage.setItem('token', data.token)
-          alert('登录成功')
+          this.$toast.success('登录成功')
           this.$router.push('/')
         } else {
-          alert(data.error || '登录失败')
+          this.$toast.error(data.error || '登录失败')
         }
       } catch (e) {
-        alert('登录失败')
+        this.$toast.error('登录失败')
       }
     }
   }

open-isle-cli/src/views/SignupPageView.vue

@@ -111,12 +111,12 @@ export default {
         const data = await res.json()
         if (res.ok) {
           this.emailStep = 1
-          alert('验证码已发送，请查看邮箱')
+          this.$toast.success('验证码已发送，请查看邮箱')
         } else {
-          alert(data.error || '发送失败')
+          this.$toast.error(data.error || '发送失败')
         }
       } catch (e) {
-        alert('发送失败')
+        this.$toast.error('发送失败')
       }
     },
     async verifyCode() {
@@ -128,13 +128,13 @@ export default {
         })
         const data = await res.json()
         if (res.ok) {
-          alert('注册成功，请登录')
+          this.$toast.success('注册成功，请登录')
           this.$router.push('/login')
         } else {
-          alert(data.error || '注册失败')
+          this.$toast.error(data.error || '注册失败')
         }
       } catch (e) {
-        alert('注册失败')
+        this.$toast.error('注册失败')
       }
     }
   }