🔨 Add base login mecanisme

package.json

@@ -15,6 +15,7 @@
     "@mdi/font": "5.9.55",
     "@vue/cli": "^5.0.4",
     "axios": "^0.27.2",
+    "jose": "^4.8.1",
     "pinia": "^2.0.13",
     "roboto-fontface": "*",
     "vue": "^3.2.33",

src/router/index.ts

@@ -36,7 +36,7 @@ const router = createRouter({
       meta: {
         requiresAuth: false,
       },
-    }
+    },
   ],
 });
 

src/stores/user.ts

@@ -1,13 +1,64 @@
 import { defineStore } from "pinia";
+import * as jose from "jose";
+import axios from "axios";
 
 export const useUserStore = defineStore("user", {
   state: () => ({
-    name: undefined as string | undefined,
-    discordId: undefined as string | undefined,
-    token: undefined as string | undefined,
+    userName: "",
+    discordId: "",
+    token: "",
+    loginFail: false,
   }),
   getters: {
-    isLoggedIn: (state) => !!state.token,
+    isLoggedIn(): boolean {
+      if (this.token) {
+        return !this.isExpired;
+      }
+      return false;
+    },
+    isExpired(): boolean {
+      if (this.getTokenPayload?.exp) {
+        const exp = new Date(this.getTokenPayload.exp * 1000);
+        return exp < new Date();
+      }
+      return true;
+    },
+    getTokenPayload: (state) => {
+      return jose.decodeJwt(state.token);
+    },
+  },
+  actions: {
+    async login(code: string) {
+      const baseApi = import.meta.env.VITE_API_BASE_URL;
+      const baseUrl = window.location.origin;
+      try {
+        const response = await axios.post(baseApi + "auth/discord", {
+          redirectUri: baseUrl + "/oauth2/callback",
+          code: code,
+        });
+
+        this.token = response.data.token;
+        const payload = this.getTokenPayload;
+        if (payload.sub) {
+          this.userName = payload.sub;
+        }
+        if (payload.discord_id) {
+          this.discordId = payload.discord_id as string;
+        }
+
+        this.loginFail = false;
+        console.log("Loggin success !");
+        return true;
+      } catch (reason) {
+
+        console.log("Loggin fail !");
+        console.log(reason);
+        this.token = "";
+        this.userName = "";
+        this.discordId = "";
+        this.loginFail = true;
+        return false;
+      }
+    },
   },
-  actions: {},
 });

src/views/HomeView.vue

@@ -1,3 +1,17 @@
-<template>Home</template>
+<template>
+  <v-row v-if="loginFail" titl>
+    <v-col>
+      <v-alert title="Login Fail" closable type="error" density="compact">
+        Login fail, please try again.
+      </v-alert>
+    </v-col>
+  </v-row>
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useUserStore } from '@/stores/user';
+import { storeToRefs } from 'pinia';
+
+const userStore = useUserStore();
+const { loginFail } = storeToRefs(userStore);
+</script>

src/views/oauth/OauthCallbackView.vue

@@ -7,18 +7,19 @@
 </template>
 
 <script setup lang="ts">
-import axios from "axios";
-import { useRoute } from "vue-router";
-
-const baseApi = import.meta.env.VITE_API_BASE_URL;
-const baseUrl = window.location.origin;
+import { useUserStore } from "@/stores/user";
+import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
-
-axios.post(baseApi + "login/discord", {
-  redirectUri: baseUrl + "/oauth2/callback",
-  code: route.query.code,
+const router = useRouter();
+const userStore = useUserStore();
+if (route.query.code) {
+  userStore.login(route.query.code as string).then(() => {
+    router.push("/");
   });
+} else {
+  router.push({ name: "oauth-redirect" });
+}
 </script>
 
 <style scoped></style>

yarn.lock

@@ -3591,6 +3591,7 @@ __metadata:
     axios: ^0.27.2
     eslint: ^8.5.0
     eslint-plugin-vue: ^8.2.0
+    jose: ^4.8.1
     jsdom: ^19.0.0
     pinia: ^2.0.13
     prettier: ^2.5.1
@@ -6743,6 +6744,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jose@npm:^4.8.1":
+  version: 4.8.1
+  resolution: "jose@npm:4.8.1"
+  checksum: c3e239ccbb07863c28250aedea3e734e4a3b26abc1cbf6acf333381db5ef31e5d1eeced791299076f13b24f41b4b463a7a1e4eaa0079ae0febf9bfd60acb555a
+  languageName: node
+  linkType: hard
+
 "js-message@npm:1.0.7":
   version: 1.0.7
   resolution: "js-message@npm:1.0.7"