Auth: added

frontend/src/api/user.js

@@ -0,0 +1,47 @@
+const api_url = 'http://localhost:6060'
+const userAPIS = {
+  async getUserStatus() {
+    const res = await fetch(`${api_url}/api/v1/auth/status`, {
+      credentials: 'include'
+    })
+    return res.json()
+  },
+
+  async loginUser(formState) {
+    const res = await fetch(`${api_url}/api/v1/auth/signin`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(formState)
+    })
+    return await res.json()
+  },
+
+  async logoutUser() {
+    const res = await fetch(`${api_url}/api/v1/auth/logout`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({})
+    })
+    return await res.json()
+  },
+
+  async registerUser(formState) {
+    const res = await fetch(`${api_url}/api/v1/auth/signup`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(formState)
+    })
+    return res.json()
+  }
+}
+
+export default userAPIS

frontend/src/components/FormBase.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps(['btn-txt', 'api-endpoint'])
+</script>
+<template>
+  <form>
+    <slot></slot>
+    <button @click="formAction">{{ btnTxt }}</button>
+  </form>
+</template>
+<script>
+import AppStore from '@/stores/AppStore'
+export default {
+  data() {
+    return {
+      d: {
+        email: undefined,
+        password: undefined,
+        username: undefined
+      }
+    }
+  },
+  methods: {
+    formAction() {
+      console.log(this.d)
+      //AppStore.sendAdd(null, this.$props.apiEndpoint)
+    }
+  }
+}
+</script>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

frontend/src/router/index.js

@@ -2,6 +2,16 @@ import { createRouter, createWebHistory } from 'vue-router'
 import TrackerView from '../views/TrackerView.vue'
 import SignupView from '../views/SignupView.vue'
 import LoginView from '../views/LoginView.vue'
+import userAPIS from '../api/user'
+
+const authGuard = async () => {
+  console.log('1tady')
+  const data = await userAPIS.getUserStatus()
+  if (!data.data) {
+    console.log('tady')
+    throw router.push('/')
+  }
+}
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,7 +20,7 @@ const router = createRouter({
       path: '/',
       name: 'home',
       //component: HomeView
-      redirect: '/tracker' 
+      redirect: '/tracker'
     },
     {
       path: '/login',
@@ -26,7 +36,10 @@ const router = createRouter({
       path: '/tracker',
       name: 'tracker',
       component: TrackerView,
-      alias: '/'
+      alias: '/',
+      meta: {
+        requiresAuth: true
+      }
     },
     {
       path: '/about',
@@ -39,4 +52,18 @@ const router = createRouter({
   ]
 })
 
+router.beforeEach(async (to, from, next) => {
+  const requiresAuth = to.matched.some((x) => x.meta.requiresAuth)
+  const requiresGuest = to.matched.some((x) => x.meta.requiresGuest)
+
+  if (requiresAuth) {
+    const userStatus = await userAPIS.getUserStatus()
+    if (!userStatus.data) {
+      throw router.push('/login')
+    }
+  }
+
+  next()
+})
+
 export default router

frontend/src/stores/AppStore.js

@@ -20,7 +20,10 @@ export default {
   },
   async fetchData() {
     try {
-      const response = await fetch(this.api_url + '/task/get')
+      const response = await fetch(this.api_url + '/task/get', {
+        credentials: 'include'
+      })
+
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`)
       }
@@ -36,6 +39,7 @@ export default {
     try {
       const response = await fetch(this.api_url + url, {
         method: 'POST',
+        credentials: 'include',
         headers: {
           'Content-Type': 'application/json'
         },

frontend/src/views/LoginView.vue

@@ -1,15 +1,34 @@
+<script setup>
+import FormBase from '@/components/FormBase.vue'
+import router from '@/router'
+</script>
+
 <template>
-    <form>
-        <input type="email" placeholder="Email">
-        <input type="password" placeholder="Password">
-        <button>Log in</button>
-    </form>
+  <form>
+    <label for="email">Email:</label>
+    <input type="email" id="email" v-model="email" placeholder="Email" />
+    <label for="password">Password:</label>
+    <input type="password" id="password" v-model="password" placeholder="Password" />
+    <button @click.prevent="formAction">Log in</button>
+  </form>
 </template>
 
-<style>
-    form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+<script>
+import User from '@/api/user'
+export default {
+  data() {
+    return {
+      email: '',
+      password: ''
     }
-</style>
+  },
+  methods: {
+    async formAction() {
+      const status = await User.loginUser({ email: this.email, password: this.password })
+      if (status.code == 200) {
+        throw router.push('/')
+      }
+    }
+  }
+}
+</script>

frontend/src/views/SignupView.vue

@@ -1,3 +1,14 @@
+<script setup>
+import FormBase from '@/components/FormBase.vue'
+</script>
+
 <template>
-    <b>signup</b>
-</template>
+  <FormBase btn-txt="Signup" api-endpoint="/user/signup">
+    <label for="username">Username:</label>
+    <input type="text" id="username" placeholder="Username" />
+    <label for="email">Email:</label>
+    <input type="email" id="email" placeholder="Email" />
+    <label for="password">Password:</label>
+    <input type="password" id="password" placeholder="Password" />
+  </FormBase>
+</template>