Working login

src/components/NavBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useSiteControlStore } from '@/stores/siteControl.store'
+import { router } from '@/router/router'
 
 const activator =  ref(false);
 
@@ -24,6 +25,10 @@ function clickOrders() {
     activator.value = false;
   }
 }
+
+function routeLogin() {
+  router.push("/login");
+}
 </script>
 
 <template>
@@ -54,9 +59,9 @@ function clickOrders() {
       <div class="navbar-end">
         <div class="navbar-item">
           <div class="buttons">
-            <a class="button is-light">
+            <button class="button is-light" @click="routeLogin">
               Log in
-            </a>
+            </button>
           </div>
         </div>
       </div>

src/views/LoginView.vue

@@ -1,45 +1,76 @@
 <script setup lang="ts">
 import { Form, Field } from 'vee-validate';
 import * as Yup from 'yup';
+import { axiosInstance } from '@/main'
+import { router } from '@/router/router'
 
 const schema = Yup.object().shape({
-  username: Yup.string().required('Username is required'),
+  username: Yup.string().required('Nazwa użytkownika jest wymagana'),
-  password: Yup.string().required('Password is required')
+  password: Yup.string().required('Hasło jest wymagane')
 });
 
-function onSubmit(values : any) {
+async function onSubmit(values : any, { setErrors } : any) {
-  const { username, password } = values;
+  const { username, password, errors } = values;
+
+  console.log(username + ' ' + password);
+
+  const body = await axiosInstance.post('/login', {
+    username: username,
+    password: password
+  }).catch ((error) => {
+    console.log(error.response);
+    if(error.response.status == 401) {
+      setErrors({ apiError: "unauthorized" })
+      return;
+    }
+  });
+  if(body != undefined && body.status == 200) {
+    await router.push('/');
+  }
 
 }
 </script>
 
 <template>
-  <div>
+  <div class="container is-flex is-justify-content-space-evenly is-align-items-center" style="min-height: 100vh;">
-    <div class="alert alert-info">
+    <div class="box" style="width: 75%">
-      Username: test<br />
+      <h1 class="title is-3 mb-3">Login</h1>
-      Password: test
-    </div>
-    <h2>Login</h2>
       <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
         <div class="form-group">
-        <label>Username</label>
+          <div class="field mb-3">
-        <Field name="username" type="text" class="form-control" :class="{ 'is-invalid': errors.username }" />
+            <label class="label is-small">Nazwa użytkownika</label>
-        <div class="invalid-feedback">{{errors.username}}</div>
+            <div class="field is-small mb-3">
+              <Field class="input is-small"
+                     type="text"
+                    name="username"
+                     :class="{ 'is-danger': errors.username }"/>
+            </div>
+          </div>
+          <div class="has-text-danger">{{errors.username}}</div>
         </div>
         <div class="form-group">
-        <label>Password</label>
+          <div class="field mb-3">
-        <Field name="password" type="password" class="form-control" :class="{ 'is-invalid': errors.password }" />
+            <label class="label is-small">Hasło</label>
-        <div class="invalid-feedback">{{errors.password}}</div>
+            <div class="field is-small mb-3">
+              <Field class="input is-small"
+                     type="password"
+                     name="password"
+                     :class="{ 'is-danger': errors.password }"/>
+            </div>
+          </div>
+          <div class="has-text-danger">{{errors.password}}</div>
         </div>
         <div class="form-group">
-        <button class="btn btn-primary" :disabled="isSubmitting">
+          <button class="button is-info" :disabled="isSubmitting">
             <span v-show="isSubmitting" class="spinner-border spinner-border-sm mr-1"></span>
             Login
           </button>
         </div>
-      <div v-if="errors.apiError" class="alert alert-danger mt-3 mb-0">{{errors.apiError}}</div>
+        <div v-if="errors.apiError" class="has-text-danger mt-3 mb-3">Hasło lub nazwa użytkownika jest niepoprawna.</div>
       </Form>
     </div>
+
+  </div>
 </template>
 
 <style scoped>