auth base

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="root" id="root">
     <Header />
+    <Auth />
     <router-view v-slot="{ Component }">
       <div class="layout">
         <transition name="page" mode="out-in">
@@ -13,6 +14,7 @@
 
 <script setup lang="ts">
 import Header from '@/components/Header.vue'
+import Auth from '@/components/Auth.vue'
 </script>
 
 <style scoped>

src/components/Auth.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { makeAPIRequest } from '@/utils/http'
+import { useAuthStore } from '@/stores/auth'
+
+import { ref } from 'vue'
+import router from '@/router'
+
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+
+const authError = ref('')
+
+async function submitForm() {
+  const data = await makeAPIRequest(
+    '/user/login',
+    'POST',
+    {},
+    { username: username.value, password: password.value }
+  )
+
+  if (data.status === 200) {
+    authError.value = ''
+    localStorage.setItem('auth_token', data.json.token)
+    authStore.authDialogOpened = false
+    await authStore.prepareStore()
+    await router.push('/')
+  } else {
+    authError.value = 'Авторизация не удалась.'
+  }
+}
+</script>
+
+<template>
+  <div v-if="authStore.authDialogOpened">
+    <button @click="authStore.authDialogOpened = false">x</button>
+    <form @submit.prevent="submitForm">
+      <div>
+        <div>Имя пользователя</div>
+        <input type="text" id="username" v-model="username" placeholder="Введи имя пользователя" />
+      </div>
+      <div>
+        <div>Пароль</div>
+        <input type="password" id="password" v-model="password" placeholder="Введи пароль" />
+      </div>
+      <p v-if="authError.length > 0">{{ authError }}</p>
+      <button type="submit">Войти</button>
+    </form>
+  </div>
+</template>
+
+<style scoped></style>

src/components/Header.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
 import { getTitle } from '@/utils/env'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
 </script>
 
 <template>
   <h1>{{ getTitle() }}</h1>
+  <div v-if="authStore.isAuthorized">
+    <button type="button">
+      {{ authStore.user.username }}
+    </button>
+    <button type="button" @click="authStore.logout">leave</button>
+  </div>
+  <div v-else>
+    <button type="button" @click="authStore.authDialogOpened = !authStore.authDialogOpened">
+      Войти
+    </button>
+  </div>
 </template>
 
 <style scoped></style>

src/components/forms/ScaleQuestion.vue

@@ -16,9 +16,7 @@
         <span>{{ n }}</span>
       </label>
     </div>
-    <button v-if="selectedValue !== null" @click="cancelSelection">
-      Отменить выбор
-    </button>
+    <button v-if="selectedValue !== null" @click="cancelSelection">Отменить выбор</button>
   </div>
 </template>
 

src/stores/auth.ts

@@ -0,0 +1,44 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { makeAPIRequest } from '@/utils/http'
+
+export const useAuthStore = defineStore('auth', () => {
+  const authDialogOpened = ref(false)
+  const isAuthorized = ref(false)
+
+  const user = ref({
+    id: 0,
+    username: ''
+  })
+
+  const prepareStore = async () => {
+    if (localStorage.getItem('auth_token')) {
+      const data = await makeAPIRequest('/user/get', 'POST', {}, {}, true)
+      if (data.status !== 200) {
+        localStorage.removeItem('auth_token')
+        return (isAuthorized.value = false)
+      } else {
+        isAuthorized.value = true
+        user.value = {
+          id: data.json.id,
+          username: data.json.username
+        }
+      }
+    } else {
+      isAuthorized.value = false
+    }
+  }
+
+  const logout = () => {
+    localStorage.removeItem('auth_token')
+    isAuthorized.value = false
+    authDialogOpened.value = false
+    user.value = {
+      id: 0,
+      username: ''
+    }
+  }
+
+  prepareStore()
+  return { authDialogOpened, isAuthorized, user, prepareStore, logout }
+})

src/utils/http.ts

@@ -12,7 +12,7 @@ export function makeAPIRequest(
         'Content-Type': 'application/json'
       }
     }
-    if (useAuthorization) options.headers.Authorization = `${localStorage.getItem('auth_token')}`
+    if (useAuthorization) options.headers['x-token'] = `${localStorage.getItem('auth_token')}`
 
     if (method !== 'GET') {
       options.body = JSON.stringify(body)

src/views/Auth.vue

@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template></template>
-
-<style scoped></style>

src/views/form/View.vue

@@ -111,9 +111,7 @@ onMounted(async () => {
             @input="answers[question.id].value = $event"
           />
         </div>
-        <button type="submit" v-if="currentPageNumber === pageCount - 1">
-          Отправить
-        </button>
+        <button type="submit" v-if="currentPageNumber === pageCount - 1">Отправить</button>
         <button type="submit" v-else>Дальше</button>
       </form>
     </div>