add user restriction

user-interface/src/components/CollectKnowledge.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
     import { BField, BInput, BButton, useToast } from "buefy";
-    import { apiClient } from "@/services/api";
+    //import { apiClient } from "@/services/api";
+    import api from "@/services/apiAxios"
+    import { AxiosResponse } from "axios";
     import { ref } from "vue";
 
-    import type { Knowledge } from "@/types/types";
+    import type { Knowledge, KnowledgeCreate } from "@/types/types";
     import { useStepStore } from '@/stores/step'
     import { useItemStore } from '@/stores/item'
 
+
     const stepStore = useStepStore()
     const itemStore = useItemStore()
 
@@ -16,16 +19,16 @@
     const Toast = useToast()
 
     async function postKnowledge(){
-        const knowledge: Knowledge = {
-            id: null,
+        const knowledge: KnowledgeCreate = {
             content: knowledgeModel.value,
             uri: uriModel.value
         }
         if(validation(knowledge)){
             try {
-                const response: Knowledge = await apiClient.post("api/v1/knowledges/", knowledge)
+                const response: AxiosResponse = await api.post("api/v1/knowledges/", knowledge)
+                const knowledge_data: Knowledge = response.data
                 Toast.open({message: "Knowledge collected", type: "is-success"})
-                itemStore.$patch({ knowledge:response })
+                itemStore.$patch({ knowledge: knowledge_data })
                 stepStore.nextStep()
             }
             catch {
@@ -34,7 +37,7 @@
         }
     }
 
-    function validation(knowledge: Knowledge){
+    function validation(knowledge: KnowledgeCreate){
         return knowledge.content && knowledge.uri
     }
 

user-interface/src/components/EvaluateQuestion.vue

@@ -1,20 +1,19 @@
 <script setup lang="ts">
     import { ref } from "vue";
     import { onBeforeMount } from 'vue'
-    import type { Knowledge } from "@/types/types";
-    import type { Question } from "@/types/types";
-    import type { Metric } from "@/types/types";
+
+    import type { Knowledge, Question, MetricCreate } from "@/types/types"
 
     //import { useStepStore } from '@/stores/step'
     import { useItemStore } from '@/stores/item'
 
-    import { apiClient } from "@/services/api";
+    import api from "@/services/apiAxios"
 
     //const stepStore = useStepStore()
     const itemStore = useItemStore()
 
     const questions = ref<Question[]>()
-    const metrics = ref<Metric[]>([])
+    const metrics = ref<MetricCreate[]>([])
 
     onBeforeMount(async () => {
         if(itemStore.knowledge != undefined){
@@ -33,13 +32,14 @@
     })
 
     async function getQuestions(knowledge: Knowledge): Promise<Question[]>{
-        return apiClient.get(`api/v1/knowledges/${knowledge.id}/questions`)
+        const response = await api.get(`api/v1/knowledges/${knowledge.id}/questions`)
+        const questions: Question[] = response.data
+        return questions
     }
 
     function initializeMetrics(questions: Question[]){
         questions.forEach((q)=>{
-              const metric: Metric = {
-                //id: null,
+              const metric: MetricCreate = {
                 question_id: q.id!,
                 need_index: -1
             }
@@ -52,14 +52,15 @@
             return metrics.value.findIndex((metric) => metric.question_id === question.id)
         }
         else{
-            throw new Error("The is no metrics element");
+            throw new Error("The is no metrics element")
         }
     }
 
     async function postMetrics(){
-        console.log(metrics.value)
         metrics.value?.forEach(async (metric) => {
-            await apiClient.post(`api/v1/metrics/`, metric)
+            const response = await api.post(`api/v1/metrics/`, metric)
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const metric_data = response.data
         })
     }
 </script>

user-interface/src/components/GenerateQuestion.vue

@@ -3,7 +3,7 @@
     import { BProgress } from "buefy";
     import type { Knowledge } from "@/types/types";
 
-    import { apiClient } from "@/services/api";
+    import api from "@/services/apiAxios";
     import { useItemStore } from '@/stores/item'
     import { useStepStore } from '@/stores/step'
 
@@ -17,7 +17,7 @@
     })
     
     async function generateQuestions (knowledge: Knowledge) {
-        await apiClient.post(`api/v1/knowledges/${knowledge.id}/questions`, null)
+        await api.post(`api/v1/knowledges/${knowledge.id}/questions`)
         stepStore.nextStep()
     }
 </script>

user-interface/src/router/index.ts

@@ -9,6 +9,12 @@ const router = createRouter({
       name: 'app',
       component: () => import('@/views/ExperimentView.vue'),
     },
+    {
+      path: '/login',
+      alias: '/login',
+      name: 'login',
+      component: () => import('@/views/AuthView.vue'),
+    }
   ],
 })
 

user-interface/src/services/apiAxios.ts

@@ -0,0 +1,26 @@
+import axios from "axios"
+
+const api = axios.create({
+    baseURL: import.meta.env.VITE_API_URL
+});
+
+api.interceptors.request.use((config) => {
+    const token = localStorage.getItem('access_token')
+    if (token){
+        config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+})
+
+export const authAPI = {
+    register: (data: unknown) => api.post('/api/v1/auth/register', data),
+    login: (username: string, password: string) => 
+        api.post(
+            '/api/v1/auth/login',
+            new URLSearchParams({ username, password }),
+            { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
+        ),
+    getMe: () => api.get('/auth/me')
+}
+
+export default api;

user-interface/src/types/types.d.ts

@@ -1,7 +1,13 @@
+interface KnowledgeCreate{
+    content: string,
+    uri: string,
+}
+
 interface Knowledge {
     id: number | null,
     content: string,
     uri: string,
+    user: User
 }
 
 interface Question {
@@ -9,12 +15,17 @@ interface Question {
     question: string,
     knowledgeId: number,
     metric: Metric | null
+    user: User
 }
 
-interface Metric {
-    //id: number | null,
+interface MetricCreate {
     question_id: number,
     need_index: number
 }
 
-export type {Knowledge, Question, Metric}
+interface User {
+    username: string,
+    token: string
+}
+
+export type {KnowledgeCreate, Knowledge, Question, MetricCreate}

user-interface/src/views/AuthView.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+    import { BField, BInput, BButton, useToast } from "buefy";
+    import { ref } from "vue"
+    import { authAPI } from '@/services/apiAxios'
+    
+    const username = ref<string>("")
+    const password = ref<string>("")
+
+    const Toast = useToast()
+
+    async function login() {
+        try {
+            const response = await authAPI.login(username.value, password.value)
+            const { access_token, refresh_token } = response.data
+
+            localStorage.setItem('access_token', access_token)
+            localStorage.setItem('refresh_token', refresh_token)
+            
+        } catch (err){
+            console.log(err)
+            Toast.open({message: "Login failed", type: "is-danger"})
+        }
+    }
+    
+</script>
+
+<template>
+    <div class="container">
+            <b-field label="Username">
+                <!-- @vue-ignore -->
+                <b-input
+                    v-model="username"
+                    placeholder="Alice"
+                    maxlength="20" 
+                    required
+                ></b-input>
+            </b-field>
+            <b-field label="Password">
+                <!-- @vue-ignore -->
+                <b-input
+                    v-model="password"
+                    maxlength="50"
+                    type="password"
+                    required
+                ></b-input>
+            </b-field>
+            <b-button type="is-primary" @click="login" >Login</b-button>
+    </div>
+</template>
+
+<style scoped>
+.container{
+        width: 20%;
+        background-color: #ffffff;
+        border-radius: 16px;
+        padding: 34px;
+    }
+</style>