Merge branch 'feat/Login' into 'main'

feat/created new login component

See merge request !4

src/components/InputFields/BaseInput.vue

+<script setup lang="ts">
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  inputId: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <div>
+    <label :for="inputId">{{ label }}</label>
+    <input :type="props.type"
+           class="form-control"
+           :placeholder="props.placeholder"
+           :id="inputId" required />
+    <div class="invalid-feedback">Invalid {{ label }}</div>
+    <div class="valid-feedback">Correct {{ label }}</div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/Login/Login.vue

+<script setup lang="ts">
+import LoginForm from '@/components/Login/LoginForm.vue'
+</script>
+
+<template>
+  <div class="container-fluid">
+    <LoginForm/>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file

src/components/Login/LoginForm.vue

+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const handleSubmit = () => {
+  alert("Expected to be logged in when backend are finished") // Todo remove this line
+}
+</script>
+
+<template>
+  <div class="container-fluid">
+    <form id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput id="usernameInput"
+                 input-id="username"
+                 type="text"
+                 label="Username"
+                 placeholder="Enter username"/>
+      <BaseInput id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 label="Password"
+                 placeholder="Enter password"/>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Login"></button1>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.container-fluid {
+  height: 91vh;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+
+#usernameInput, #passwordInput, #confirmButton {
+  margin: 15px 0;
+}
+
+#confirmButton {
+  justify-content: center;
+}
+
+#loginForm {
+  display: flex;
+  flex-direction: column;
+  min-width: 280px;
+  width: 40%;
+}
+</style>
\ No newline at end of file

src/components/__tests__/HelloWorld.spec.ts

-import { describe, it, expect } from 'vitest'
-
-import { mount } from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
-
-describe('HelloWorld', () => {
-  it('renders properly', () => {
-    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
-  })
-})

src/views/Authentication/LoginView.vue

+<script setup lang="ts">
+import Footer from '@/components/BaseComponents/Footer.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import Login from '@/components/Login/Login.vue'
+</script>
+
 <template>
-    Hallo
-</template>
\ No newline at end of file
+  <Menu/>
+  <Login/>
+  <Footer/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/HomeView.vue

 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+
 </script>
 
 <template>
-    Hallo
+    <RouterLink to="login">Login</RouterLink>
 </template>