User info page

3 files changed, 91 insertions, 2 deletions

diff --git a/app/src/router/index.ts b/app/src/router/index.ts
index a3dd783..3aebf85 100644
--- a/app/src/router/index.ts
+++ b/app/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "@ionic/vue-router";
 import { RouteRecordRaw } from "vue-router";
 import HomePage from "../views/HomePage.vue";
 import Sign from "../views/Sign.vue";
+import UserInfo from "../views/UserInfo.vue";
 
 const routes: Array<RouteRecordRaw> = [
     { path: "/", redirect: "/home" },
@@ -15,6 +16,11 @@ const routes: Array<RouteRecordRaw> = [
         component: Sign,
         name: "Sign",
     },
+    {
+        path: "/me",
+        component: UserInfo,
+        name: "UserInfo",
+    },
 ];
 
 const router = createRouter({
diff --git a/app/src/store/modules/auth.ts b/app/src/store/modules/auth.ts
index b511bff..b3e72de 100644
--- a/app/src/store/modules/auth.ts
+++ b/app/src/store/modules/auth.ts
@@ -48,8 +48,6 @@ const auth = {
 
             const res = { status: -1, data: null };
 
-            console.log(credentials);
-
             await fetch(`${api}/auth/login`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
@@ -71,6 +69,46 @@ const auth = {
 
             return res;
         },
+        // Get my information, based on the passed Authorization token
+        async getMe(context: AuthContext) {
+            const api = context.rootState.api;
+
+            await fetch(`${api}/users/me`, {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: "Bearer " + context.getters.accessToken,
+                },
+            })
+                .then(async (response) => {
+                    const data = await response.json();
+                    if (response.status != 200) {
+                        context.dispatch(
+                            "toast",
+                            {
+                                header: data.error,
+                                text: "",
+                                color: "danger",
+                            },
+                            { root: true }
+                        );
+                        context.commit("deleteAccessToken");
+                    } else {
+                        context.commit("saveUserInfo", data);
+                    }
+                })
+                .catch((e) => {
+                    context.dispatch(
+                        "toast",
+                        {
+                            header: e,
+                            text: "",
+                            color: "danger",
+                        },
+                        { root: true }
+                    );
+                });
+        },
         logout(context: AuthContext) {
             context.commit("deleteAccessToken");
         },
diff --git a/app/src/views/UserInfo.vue b/app/src/views/UserInfo.vue
new file mode 100644
index 0000000..f317cbd
--- /dev/null
+++ b/app/src/views/UserInfo.vue
@@ -0,0 +1,45 @@
+<template>
+  <ion-page>
+    <m6-header />
+    <ion-content :fullscreen="true">
+      <div>
+        <p>ID: {{ me.id }}</p>
+        <p>Name: {{ me.name }}</p>
+        <p>Email: {{ me.email }}</p>
+        <p>Is staff: {{ me.is_staff }}</p>
+      </div>
+    </ion-content>
+
+    <m6-footer />
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { IonPage, IonContent } from "@ionic/vue";
+import Header from "@/components/Header.vue";
+import Footer from "@/components/Footer.vue";
+
+import { mapGetters, mapActions } from "vuex";
+
+export default defineComponent({
+  name: "UserInfo",
+  components: {
+    IonContent,
+    IonPage,
+    "m6-header": Header,
+    "m6-footer": Footer,
+  },
+  computed: {
+    ...mapGetters("auth", ["isLogged", "me"]),
+  },
+  created() {
+    if (!this.isLogged) window.location.href = "/sign";
+
+    this.getMe();
+  },
+  methods: {
+    ...mapActions("auth", ["getMe"]),
+  },
+});
+</script>