add register

user-interface/src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { isAuthenticated } from '@/services/apiAxios'
 
-const pagesWithoutGuard = ['login', 'app']
+const pagesWithoutGuard = ['login', 'app', 'register']
  
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,14 +22,20 @@ const router = createRouter({
       path: '/login',
       alias: '/login',
       name: 'login',
-      component: () => import('@/views/AuthView.vue'),
+      component: () => import('@/views/LoginView.vue'),
+    },
+    {
+      path: '/register',
+      alias: '/register',
+      name: 'register',
+      component: () => import('@/views/RegisterView.vue'),
     }
   ],
 })
 
 router.beforeEach(async (to, from) => {
   const isAuth = await isAuthenticated()
-  if (!isAuth && !pagesWithoutGuard.includes(to.name!.toString())) {
+  if (!isAuth && pagesWithoutGuard.includes(to.name!.toString())) {
     return { name: 'login' }
   }
 })

user-interface/src/services/apiAxios.ts

@@ -14,7 +14,11 @@ api.interceptors.request.use((config) => {
 })
 
 export const authAPI = {
-    register: (data: unknown) => api.post('/api/v1/auth/register', data),
+    register: (username: string, password: string)  => 
+        api.post(
+            '/api/v1/auth/register', 
+            { "username":username, "plain_password":password }
+        ),
     login: (username: string, password: string) => 
         api.post(
             '/api/v1/auth/login',

user-interface/src/views/LoginView.vue

@@ -46,7 +46,7 @@
                     required
                 ></b-input>
             </b-field>
-            <b-button type="is-primary" @click="login" >Login</b-button>
+            <b-button type="is-primary" @click="login">Login</b-button>
     </div>
 </template>
 

user-interface/src/views/RegisterView.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+    import router from '@/router/index' 
+    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 register() {
+        try {
+            const responseRegister = await authAPI.register(username.value, password.value)
+            if(responseRegister.status != 200)
+                throw new Error("Registred failed")
+            const responseLogin = await authAPI.login(username.value, password.value)
+            const { access_token, refresh_token } = responseLogin.data
+
+            localStorage.setItem('access_token', access_token)
+            localStorage.setItem('refresh_token', refresh_token)
+            
+            router.push({ path: '/experiment' })
+        } catch (err){
+            console.log(err)
+            Toast.open({message: "Registred 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="register">Register</b-button>
+    </div>
+</template>
+
+<style scoped>
+.container{
+        width: 20%;
+        background-color: #ffffff;
+        border-radius: 16px;
+        padding: 34px;
+    }
+</style>