From ec9a9b59e1041d204b7c6bfde9c3c15b485abf0c Mon Sep 17 00:00:00 2001 From: SebClem Date: Sat, 28 May 2022 16:25:45 +0200 Subject: [PATCH] :hammer: Add snakbar --- .eslintcache | 1 - .gitignore | 5 +- .vscode/extensions.json | 3 +- .vscode/settings.json | 17 +++++ package.json | 2 + src/App.vue | 6 +- src/components/HeaderComponent.vue | 102 +++++++++++++++++++++++------ src/services/authService.ts | 41 ++++++++++-- src/stores/eventQueu.ts | 31 +++++++++ src/stores/user.ts | 7 +- src/views/HomeView.vue | 15 +++-- yarn.lock | 9 +++ 12 files changed, 198 insertions(+), 41 deletions(-) delete mode 100644 .eslintcache create mode 100644 .vscode/settings.json create mode 100644 src/stores/eventQueu.ts diff --git a/.eslintcache b/.eslintcache deleted file mode 100644 index d40f987..0000000 --- a/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"/root/github/claptrap-ui/.eslintrc.cjs":"1","/root/github/claptrap-ui/env.d.ts":"2","/root/github/claptrap-ui/src/components/HeaderComponent.vue":"3","/root/github/claptrap-ui/src/main.ts":"4","/root/github/claptrap-ui/src/plugins/webfontloader.ts":"5","/root/github/claptrap-ui/src/router/index.ts":"6","/root/github/claptrap-ui/src/shims-vuetify.d.ts":"7","/root/github/claptrap-ui/src/stores/coockiesStorage.ts":"8","/root/github/claptrap-ui/src/stores/user.ts":"9","/root/github/claptrap-ui/src/views/HomeView.vue":"10","/root/github/claptrap-ui/src/views/oauth/OauthCallbackView.vue":"11","/root/github/claptrap-ui/src/views/oauth/OauthRedirectView.vue":"12","/root/github/claptrap-ui/vite.config.ts":"13"},{"size":334,"mtime":1653426082929,"results":"14","hashOfConfig":"15"},{"size":281,"mtime":1653426082929,"results":"16","hashOfConfig":"15"},{"size":1671,"mtime":1653426082929,"results":"17","hashOfConfig":"15"},{"size":441,"mtime":1653426082929,"results":"18","hashOfConfig":"15"},{"size":370,"mtime":1653426082929,"results":"19","hashOfConfig":"15"},{"size":1191,"mtime":1653426082929,"results":"20","hashOfConfig":"15"},{"size":108,"mtime":1653426082929,"results":"21","hashOfConfig":"15"},{"size":386,"mtime":1653426082929,"results":"22","hashOfConfig":"15"},{"size":1795,"mtime":1653426152150,"results":"23","hashOfConfig":"15"},{"size":421,"mtime":1653426082929,"results":"24","hashOfConfig":"15"},{"size":668,"mtime":1653426082929,"results":"25","hashOfConfig":"15"},{"size":436,"mtime":1653426082929,"results":"26","hashOfConfig":"15"},{"size":713,"mtime":1653426220387,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ekl415",{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"52","messages":"53","suppressedMessages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"55","messages":"56","suppressedMessages":"57","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","suppressedMessages":"60","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"61","messages":"62","suppressedMessages":"63","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"64","messages":"65","suppressedMessages":"66","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/root/github/claptrap-ui/.eslintrc.cjs",[],[],"/root/github/claptrap-ui/env.d.ts",[],[],"/root/github/claptrap-ui/src/components/HeaderComponent.vue",[],[],"/root/github/claptrap-ui/src/main.ts",[],[],"/root/github/claptrap-ui/src/plugins/webfontloader.ts",[],[],"/root/github/claptrap-ui/src/router/index.ts",["67","68"],[],"/root/github/claptrap-ui/src/shims-vuetify.d.ts",[],[],"/root/github/claptrap-ui/src/stores/coockiesStorage.ts",["69"],[],"/root/github/claptrap-ui/src/stores/user.ts",["70"],[],"/root/github/claptrap-ui/src/views/HomeView.vue",[],[],"/root/github/claptrap-ui/src/views/oauth/OauthCallbackView.vue",[],[],"/root/github/claptrap-ui/src/views/oauth/OauthRedirectView.vue",["71"],[],"/root/github/claptrap-ui/vite.config.ts",[],[],{"ruleId":"72","severity":1,"message":"73","line":43,"column":24,"nodeType":"74","messageId":"75","endLine":43,"endColumn":28},{"ruleId":"76","severity":1,"message":"77","line":46,"column":7,"nodeType":"78","messageId":"79","endLine":46,"endColumn":10,"suggestions":"80"},{"ruleId":"72","severity":1,"message":"81","line":8,"column":7,"nodeType":"74","messageId":"75","endLine":8,"endColumn":12},{"ruleId":"72","severity":1,"message":"82","line":30,"column":13,"nodeType":"74","messageId":"75","endLine":30,"endColumn":18},{"ruleId":"72","severity":1,"message":"83","line":15,"column":7,"nodeType":"74","messageId":"75","endLine":15,"endColumn":11},"@typescript-eslint/no-unused-vars","'from' is defined but never used.","Identifier","unusedVar","@typescript-eslint/no-explicit-any","Unexpected any. Specify a different type.","TSAnyKeyword","unexpectedAny",["84","85"],"'index' is defined but never used.","'token' is assigned a value but never used.","'test' is assigned a value but never used.",{"messageId":"86","fix":"87","desc":"88"},{"messageId":"89","fix":"90","desc":"91"},"suggestUnknown",{"range":"92","text":"93"},"Use `unknown` instead, this will force you to explicitly, and safely assert the type is correct.","suggestNever",{"range":"92","text":"94"},"Use `never` instead, this is useful when instantiating generic type parameters that you don't need to know the type of.",[1077,1080],"unknown","never"] \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4cf79e6..7c417fc 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,7 @@ coverage # Editor directories and files .vscode/* !.vscode/extensions.json +!.vscode/settings.json .idea *.suo *.ntvs* @@ -27,4 +28,6 @@ coverage *.sln *.sw? .yarn/cache -.yarn/install-state.gz \ No newline at end of file +.yarn/install-state.gz + +.eslintcache \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json index a3ffb49..fa40b2f 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,7 +1,6 @@ { "recommendations": [ - "johnsoncodehk.volar", - "johnsoncodehk.vscode-typescript-vue-plugin", + "vue.volar", "arcanis.vscode-zipfs", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode" diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0a2328e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,17 @@ +{ + "search.exclude": { + "**/.yarn": true, + "**/.pnp.*": true, + "**/node_modules": true, + }, + "typescript.inlayHints.enumMemberValues.enabled": true, + "typescript.inlayHints.propertyDeclarationTypes.enabled": true, + "typescript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true, + "typescript.inlayHints.parameterNames.enabled": "literals", + "typescript.inlayHints.parameterTypes.enabled": true, + "javascript.inlayHints.enumMemberValues.enabled": true, + "javascript.inlayHints.propertyDeclarationTypes.enabled": true, + "javascript.inlayHints.parameterNames.suppressWhenArgumentMatchesName": true, + "javascript.inlayHints.parameterNames.enabled": "literals", + +} diff --git a/package.json b/package.json index e117186..138c029 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "@mdi/font": "5.9.55", "@types/js-cookie": "^3.0.2", + "@types/uuid": "^8.3.4", "@vue/cli": "^5.0.4", "axios": "^0.27.2", "jose": "^4.8.1", @@ -24,6 +25,7 @@ "pinia": "^2.0.13", "pinia-plugin-persistedstate": "^1.6.0", "roboto-fontface": "*", + "uuid": "^8.3.2", "vue": "^3.2.33", "vue-router": "^4.0.14", "vuetify": "^3.0.0-beta.2", diff --git a/src/App.vue b/src/App.vue index bc6e643..6aeb616 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,11 @@ - + + + + + diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue index aad38ea..328430e 100644 --- a/src/components/HeaderComponent.vue +++ b/src/components/HeaderComponent.vue @@ -3,9 +3,6 @@ Claptrap Bot - - mdi-exit-to-app - @@ -16,39 +13,57 @@ > - - - + + + + + Loading... + - - + +
{{ data.text }}
+ + diff --git a/src/services/authService.ts b/src/services/authService.ts index 52e767e..1fc62ee 100644 --- a/src/services/authService.ts +++ b/src/services/authService.ts @@ -1,5 +1,7 @@ +import { useEventQueuStore } from "@/stores/eventQueu"; import { useUserStore } from "@/stores/user"; import axios from "axios"; +import { useRouter } from "vue-router"; async function login(code: string): Promise { const userStore = useUserStore(); @@ -21,16 +23,45 @@ async function login(code: string): Promise { userStore.loginFail = false; console.log("Loggin success !"); + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "success", + text: "You are now logged in", + }); + return true; } catch (reason) { console.log("Loggin fail !"); console.log(reason); - userStore.token = ""; - userStore.userName = ""; - userStore.discordId = ""; - userStore.loginFail = true; + logout(false, true); + + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "error", + text: "Login fail, Please try aguain.", + }); return false; } } -export { login }; +function logout(expired: boolean, loginFail: boolean): void { + const userStore = useUserStore(); + const router = useRouter(); + + userStore.token = ""; + userStore.userName = ""; + userStore.discordId = ""; + userStore.loginFail = loginFail; + userStore.asExpired = expired; + + const eventQueuStore = useEventQueuStore(); + eventQueuStore.push({ + uuid: undefined, + type: "success", + text: "Disconnected", + }); +} + +export { login, logout }; diff --git a/src/stores/eventQueu.ts b/src/stores/eventQueu.ts new file mode 100644 index 0000000..3090bd4 --- /dev/null +++ b/src/stores/eventQueu.ts @@ -0,0 +1,31 @@ +import { defineStore } from "pinia"; +import { v4 as uuidv4 } from "uuid"; + +interface Event { + uuid: string | undefined; + type: string; + text: string; +} + +export const useEventQueuStore = defineStore({ + id: "eventQueu", + state: () => ({ + events: [] as Array, + }), + getters: { + size: (state) => { + return state.events.length; + }, + }, + actions: { + shift(): Event | undefined { + return this.events.shift(); + }, + push(event: Event) { + if (!event.uuid) { + event.uuid = uuidv4(); + } + this.events.push(event); + }, + }, +}); diff --git a/src/stores/user.ts b/src/stores/user.ts index aae5023..955ea13 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -1,6 +1,5 @@ import { defineStore } from "pinia"; import * as jose from "jose"; -import axios from "axios"; import { cookiesStorage } from "./coockiesStorage"; export const useUserStore = defineStore("user", { @@ -11,6 +10,7 @@ export const useUserStore = defineStore("user", { avatar: "", token: "", loginFail: false, + asExpired: false, }), getters: { isLoggedIn(): boolean { @@ -22,12 +22,13 @@ export const useUserStore = defineStore("user", { isExpired(): boolean { if (this.getTokenPayload?.exp) { const exp = new Date(this.getTokenPayload.exp * 1000); - return exp < new Date(); + const expired = exp < new Date(); + this.asExpired = expired; + return expired; } return true; }, getTokenPayload: (state) => { - const token = state.token; return jose.decodeJwt(state.token); }, }, diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8dc5acc..6ecb962 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,17 +1,18 @@ diff --git a/yarn.lock b/yarn.lock index 989ac1c..46bd1d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2026,6 +2026,13 @@ __metadata: languageName: node linkType: hard +"@types/uuid@npm:^8.3.4": + version: 8.3.4 + resolution: "@types/uuid@npm:8.3.4" + checksum: 6f11f3ff70f30210edaa8071422d405e9c1d4e53abbe50fdce365150d3c698fe7bbff65c1e71ae080cbfb8fded860dbb5e174da96fdbbdfcaa3fb3daa474d20f + languageName: node + linkType: hard + "@types/webfontloader@npm:^1.0.0": version: 1.6.34 resolution: "@types/webfontloader@npm:1.6.34" @@ -3609,6 +3616,7 @@ __metadata: "@types/js-cookie": ^3.0.2 "@types/jsdom": ^16.2.14 "@types/node": ^16.11.27 + "@types/uuid": ^8.3.4 "@types/webfontloader": ^1.0.0 "@vitejs/plugin-vue": ^2.3.1 "@vue/cli": ^5.0.4 @@ -3633,6 +3641,7 @@ __metadata: sass: ^1.38.0 sass-loader: ^10.0.0 typescript: ~4.6.3 + uuid: ^8.3.2 vite: ^2.9.5 vitest: ^0.9.3 vue: ^3.2.33