From 826fd3daf70fd00fa95ea6abacdc8614a351fa65 Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Wed, 17 Apr 2024 10:15:55 +0200
Subject: [PATCH] feat/created new login component

---
 src/components/InputFields/BaseInput.vue    | 37 +++++++++++++++
 src/components/Login/Login.vue              | 13 ++++++
 src/components/Login/LoginForm.vue          | 50 +++++++++++++++++++++
 src/components/__tests__/HelloWorld.spec.ts | 11 -----
 src/views/Authentication/LoginView.vue      | 16 ++++++-
 src/views/HomeView.vue                      |  4 +-
 6 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 src/components/InputFields/BaseInput.vue
 create mode 100644 src/components/Login/Login.vue
 create mode 100644 src/components/Login/LoginForm.vue
 delete mode 100644 src/components/__tests__/HelloWorld.spec.ts

diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
new file mode 100644
index 0000000..5558323
--- /dev/null
+++ b/src/components/InputFields/BaseInput.vue
@@ -0,0 +1,37 @@
+<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
diff --git a/src/components/Login/Login.vue b/src/components/Login/Login.vue
new file mode 100644
index 0000000..25469a1
--- /dev/null
+++ b/src/components/Login/Login.vue
@@ -0,0 +1,13 @@
+<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
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
new file mode 100644
index 0000000..6b0da2a
--- /dev/null
+++ b/src/components/Login/LoginForm.vue
@@ -0,0 +1,50 @@
+<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
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
deleted file mode 100644
index 2533202..0000000
--- a/src/components/__tests__/HelloWorld.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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')
-  })
-})
diff --git a/src/views/Authentication/LoginView.vue b/src/views/Authentication/LoginView.vue
index 9095328..a2aa0f4 100644
--- a/src/views/Authentication/LoginView.vue
+++ b/src/views/Authentication/LoginView.vue
@@ -1,3 +1,15 @@
+<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
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 58542e7..f30d424 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+
 </script>
 
 <template>
-    Hallo
+    <RouterLink to="login">Login</RouterLink>
 </template>
-- 
GitLab