web: implemented login

web/src/App.vue

@@ -1,13 +1,18 @@
 <template>
   <v-app>
     <v-main>
-      <HeaderBar />
-      <div class="ma-8">
-        <actionToolbar />
-        <li>
-          <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
-          <CategoryContainer licenseGroupName="Microsoft"/>
-        </li>
+      <div v-if="store.token === null">
+        <loginPage />
+      </div>
+      <div v-else>
+        <HeaderBar />
+        <div class="ma-8">
+          <actionToolbar />
+          <li>
+            <CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
+            <CategoryContainer licenseGroupName="Microsoft"/>
+          </li>
+        </div>
       </div>
 
     </v-main>
@@ -18,6 +23,8 @@
 import HeaderBar from './components/HeaderBar.vue';
 import CategoryContainer from './components/CategoryContainer.vue';
 import actionToolbar from './components/actionToolbar.vue';
+import { store } from './store';
+
 
 </script>
 

web/src/components/CategoryContainer.vue

@@ -6,8 +6,7 @@
       licenseKey="321z8321789"
       startDate="12.12.2020"
       endDate="13.12.2021"
-      amount="1"
-      tags=""
+      :amount=1
       notes="No notes"
     />
     <!-- <ListViewElement

web/src/components/HeaderBar.vue

@@ -29,6 +29,10 @@
 </script>
 
 <style scoped>
+.logo {
+  margin-right: 20%;
+  margin-left: 10px;
+}
 
 .compact-form {
     transform: scale(0.7);

web/src/components/ListViewElement.vue

@@ -48,7 +48,6 @@
     startDate: String,
     endDate: String,
     amount: Number,
-    tags: Array,
     notes: String,
   })
 

web/src/components/StartPage.vue

@@ -1,24 +0,0 @@
-<template>
-  <div style="display: flex;">
-    <div style="flex: 30%">
-      <h1>Start Page</h1>
-      <p>Welcome to the start page</p>
-    </div>
-  
-    <div style="flex: 70%;">
-      <h1>Start Page</h1>
-      <p>Welcome to the start page</p>
-    </div>
-  </div>
-
-
-</template>
-
-<script setup lang="ts">
-
-
-</script>
-
-<style scoped>
-
-</style>

web/src/components/loginPage.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-container>
+    <v-row justify="center">
+      <v-col cols="12" sm="8" md="4">
+        <v-card>
+          <v-card-title class="text-h5">Login</v-card-title>
+          <v-card-text>
+            <v-form>
+              <v-text-field v-model="email" label="Email" required></v-text-field>
+              <v-text-field v-model="password" label="Password" type="password" required></v-text-field>
+            </v-form>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn @click="login" color="primary">Login</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { store } from '@/store';
+
+const email = ref('')
+const password = ref('')
+
+async function login() {
+  try {
+    const response = await axios.post<string>("http://localhost:8080/api/v1/auth/login", { email: email.value, password: password.value})
+    if (response.status === 200) {
+      store.setToken(response.data)
+    } else {
+      alert("Invalid Credentials")
+    }
+
+  } catch(err) {
+    alert("Invalid Credentials")
+  }
+
+}
+
+
+/*
+setTimeout(() => {
+  console.log(email.value)
+  console.log(password.value)
+}, 3000);
+*/
+</script>
+
+<style scoped>
+
+</style>

web/src/store.ts

@@ -0,0 +1,8 @@
+import { reactive } from 'vue';
+
+export const store = reactive<{token: string | null, setToken: (token: string | null) => void}>({
+  token: null,
+  setToken: (token: string | null) => store.token = token
+});
+
+