auto logout

frontend/src/layouts/default/Drawer.vue

@@ -32,7 +32,7 @@
       </v-list-item>
     </v-list>
     <template v-slot:append>
-      <v-list-item prepend-icon="mdi-logout" :title="$t('menu.logout')" @click="logout"></v-list-item>
+      <v-list-item prepend-icon="mdi-logout" :title="$t('menu.logout')" @click="Logout"></v-list-item>
     </template>
   </v-navigation-drawer>
 </template>
@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import router from '@/router'
-import HttpUtil from '@/plugins/httputil'
+import { logout } from '@/plugins/httputil'
 
 const props = defineProps(['isMobile','displayDrawer'])
 
@@ -58,10 +58,7 @@ const menu = [
   { title: 'pages.settings', icon: 'mdi-cog',  path: '/settings' },
 ]
 
-const logout = async () => {
-  const response = await HttpUtil.get('api/logout')
-  if(response.success){
-    router.push('/login')
-  }
+const Logout = async () => {
+  logout()
 }
 </script>

frontend/src/locales/en.ts

@@ -17,6 +17,7 @@ export default {
   network: "Network",
   copyToClipboard: "Copy to clipboard",
   noData: "No data!",
+  invalidLogin: "Invalid Login!",
   online: "Online",
   pages: {
     login: "Login",
@@ -69,10 +70,12 @@ export default {
     del: "Delete",
     save: "Save",
     update: "Update",
+    submit: "Submit",
     close: "Close",
     restartApp: "Restart App",
   },
   login: {
+    title: "Login",
     username: "Username",
     unRules: "Username can not be empty",
     password: "Password",

frontend/src/locales/fa.ts

@@ -17,6 +17,7 @@ export default {
   network: "شبکه",
   copyToClipboard: "کپی در حافظه",
   noData: "بدون داده!",
+  invalidLogin: "ورود نامعتبر!",
   online: "آنلاین",
   pages: {
     login: "ورود",
@@ -69,10 +70,12 @@ export default {
     del: "حذف",
     save: "ذخیره",
     update: "بروزرسانی",
+    submit: "ارسال",
     close: "بستن",
     restartApp: "ریستارت پنل",
   },
   login: {
+    title: "ورود",
     username: "نام کاربری",
     unRules: "نام کاربری نمی‌تواند خالی باشد",
     password: "کلمه عبور",

frontend/src/plugins/httputil.ts

@@ -1,5 +1,6 @@
 import api from './api'
 import { i18n } from '@/locales'
+import router from '@/router'
 import Message from "@/store/modules/message"
 
 export interface Msg {
@@ -14,11 +15,23 @@ function _handleMsg(msg: any): void {
     return
   }
   if(msg.msg){
+    if (!msg.success && msg.msg == "Invalid login") {
+      sb.showMessage(i18n.global.t('invalidLogin'),'error', 5000)
+      logout()
+      return
+    }
     const message = msg.success ? i18n.global.t('success') + ": " + i18n.global.t('actions.' + msg.msg) : i18n.global.t('failed') + ": " + msg.msg
     sb.showMessage(message, msg.success ? 'success' : 'error', 5000)
   }
 }
 
+export const logout = async () => {
+  const response = await HttpUtils.get('api/logout')
+  if(response.success){
+    router.push('/login')
+  }
+}
+
 function _respToMsg(resp: any): Msg {
   const data = resp.data
   if (data == null) {

frontend/src/views/Login.vue

@@ -3,12 +3,12 @@
       <v-row justify="center" align="center">
         <v-col cols="12" sm="8" md="4">
           <v-card>
-            <v-card-title class="headline">Login</v-card-title>
+            <v-card-title class="headline" v-text="$t('login.title')"></v-card-title>
             <v-card-text>
               <v-form @submit.prevent="login" ref="form">
                 <v-text-field v-model="username" :label="$t('login.username')" :rules="usernameRules" required></v-text-field>
                 <v-text-field v-model="password" :label="$t('login.password')" :rules="passwordRules" type="password" required></v-text-field>
-                <v-btn :loading="loading" type="submit" color="primary" block class="mt-2">Login</v-btn>
+                <v-btn :loading="loading" type="submit" color="primary" block class="mt-2" v-text="$t('actions.submit')"></v-btn>
               </v-form>
               <v-select
                 density="compact"