Merge branch 'feat/Login' into 'main'

Feat/login

See merge request !9

src/components/InputFields/BaseInput.vue

 <script setup lang="ts">
 
+const emit = defineEmits(['inputChangeEvent']);
 const props = defineProps({
   label: {
     type: String,
@@ -16,19 +17,33 @@ const props = defineProps({
   inputId: {
     type: String,
     required: true
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  isValid: {
+    type: Boolean,
+    default: false
   }
 });
+
+const onInputEvent = (event: any) => {
+  emit('inputChangeEvent', event.target.value)
+}
 </script>
 
 <template>
   <div>
     <label :for="inputId">{{ label }}</label>
-    <input :type="props.type"
+    <input :value="props.modelValue"
+           @input="onInputEvent"
+           :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 v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
+    <div v-else class="valid-feedback">Valid {{ label }}</div>
   </div>
 </template>
 

src/components/Login/LoginForm.vue

 <script setup lang="ts">
 import BaseInput from '@/components/InputFields/BaseInput.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
+
+const emailRef = ref()
+const passwordRef = ref()
+const formRef = ref()
+
+const handleEmailInputEvent = (newValue: any) => {
+  emailRef.value = newValue
+  console.log(emailRef.value)
+}
+
+const handlePasswordInputEvent = (newValue: any) => {
+  passwordRef.value = newValue
+}
 
 const handleSubmit = () => {
+  formRef.value.classList.add("was-validated")
   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"
+    <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="emailRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="emailInput"
+                 input-id="email"
+                 type="email"
+                 label="Email"
+                 placeholder="Enter your email"/>
+      <BaseInput :model-value="passwordRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="passwordInput"
                  input-id="password"
                  type="password"
                  label="Password"
                  placeholder="Enter password"/>
-      <button1 id="confirmButton" @click="handleSubmit" button-text="Login"></button1>
+      <button1 id="confirmButton" type="submit" @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;
+    max-width: 450px;
 }
 
 #loginForm {
   display: flex;
   flex-direction: column;
-  min-width: 280px;
-  width: 40%;
+  justify-items: center;
+}
+
+#emailInput, #passwordInput, #confirmButton {
+  margin: 1rem 0;
 }
 </style>
\ No newline at end of file

src/components/SignUp/SignUp.vue

+<script setup lang="ts">
+
+import SignUpForm from '@/components/SignUp/SignUpForm.vue'
+</script>
+
+<template>
+  <SignUpForm/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/components/SignUp/SignUpForm.vue

+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
+
+const firstNameRef = ref('')
+const surnameRef = ref('')
+const emailRef = ref('')
+const passwordRef = ref('')
+const confirmPasswordRef = ref('')
+const formRef = ref()
+
+const handleFirstNameInputEvent = (newValue: any) => {
+  firstNameRef.value = newValue
+  console.log(firstNameRef.value)
+}
+
+const handleSurnameInputEvent = (newValue: any) => {
+  surnameRef.value = newValue
+}
+
+const handleEmailInputEvent = (newValue: any) => {
+  emailRef.value = newValue
+}
+
+const handlePasswordInputEvent = (newValue: any) => {
+  passwordRef.value = newValue
+}
+
+const handleConfirmPasswordInputEvent = (newValue: any) => {
+  confirmPasswordRef.value = newValue
+}
+
+const handleSubmit = () => {
+  formRef.value.classList.add("was-validated")
+  alert("Expected to be transferred to initial configuration") // Todo remove this line
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="firstNameRef.value"
+                 @input-change-event="handleFirstNameInputEvent"
+                 ref="firstNameRef"
+                 id="firstNameInput"
+                 input-id="first-name"
+                 type="text"
+                 label="First name"
+                 placeholder="Enter your first name"/>
+      <BaseInput :model-value="surnameRef.value"
+                 @input-change-event="handleSurnameInputEvent"
+                 ref="surnameRef"
+                 id="surnameInput"
+                 input-id="surname"
+                 type="text"
+                 label="Surname"
+                 placeholder="Enter your surname"/>
+      <BaseInput :model-value="emailRef.value"
+                 @input-change-event="handleEmailInputEvent"
+                 ref="emailRef"
+                 id="emailInput"
+                 input-id="email"
+                 type="email"
+                 label="Email"
+                 placeholder="Enter your email"/>
+      <BaseInput :model-value="passwordRef.value"
+                 @input-change-event="handlePasswordInputEvent"
+                 ref="passwordRef"
+                 id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 label="Password"
+                 placeholder="Enter password"/>
+      <BaseInput :model-value="confirmPasswordRef.value"
+                 @input-change-event="handleConfirmPasswordInputEvent"
+                 ref="confirmPasswordRef"
+                 id="confirmPasswordInput"
+                 input-id="confirmPassword"
+                 type="password"
+                 label="Confirm Password"
+                 placeholder="Confirm password"/>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
+    </form>
+  </div>
+
+</template>
+
+<style scoped>
+
+.container {
+  max-width: 450px;
+}
+
+#signUpForm {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+}
+
+#firstNameInput, #surnameInput, #emailInput, #passwordInput, #confirmButton, #confirmPasswordInput {
+  margin: 1rem 0;
+}
+</style>
\ No newline at end of file

src/router/index.ts

@@ -2,6 +2,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import LoginView from '../views/Authentication/LoginView.vue';
 import { useUserInfoStore } from '@/stores/UserStore';
+import SignUp from '@/components/SignUp/SignUp.vue'
 
 const routes = [
   {
@@ -53,6 +54,11 @@ const routes = [
     name: 'login',
     component: LoginView,
   },
+  {
+    path: '/sign-up',
+    name: 'sign up',
+    component: () => import('@/views/Authentication/SignUpView.vue'),
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },

src/views/Authentication/SignUpView.vue

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

src/views/HomeView.vue

@@ -3,5 +3,7 @@
 </script>
 
 <template>
-    <RouterLink to="login">Login</RouterLink>
+  <RouterLink to="login">Login</RouterLink>
+  <br/>
+  <RouterLink to="sign-up">Sign up</RouterLink>
 </template>