diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
index 5558323b9a95e53825a222ac444c8a5ee5f8f23a..516faeb54655832d42eab147d6e3b38a16f89f1f 100644
--- a/src/components/InputFields/BaseInput.vue
+++ b/src/components/InputFields/BaseInput.vue
@@ -1,5 +1,6 @@
<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>
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 6b0da2a71cf6b6b87f27c8feaff2ef259c951520..150711c35baec1405f70edda8b6584bf759682e2 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -1,50 +1,62 @@
<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
diff --git a/src/components/SignUp/SignUp.vue b/src/components/SignUp/SignUp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4dff39dcd4bbe2a47e1471473d7a1632eb540827
--- /dev/null
+++ b/src/components/SignUp/SignUp.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import SignUpForm from '@/components/SignUp/SignUpForm.vue'
+</script>
+
+<template>
+ <SignUpForm/>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..04a8547844c7261753afb61f1d9323c9d773d889
--- /dev/null
+++ b/src/components/SignUp/SignUpForm.vue
@@ -0,0 +1,105 @@
+<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
diff --git a/src/router/index.ts b/src/router/index.ts
index af5845ba2cb88a0585ccbe4b7ce0615a06a458d4..817a2e9914271033617fe7f5d088d32d33ec153a 100644
--- a/src/router/index.ts
+++ b/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' },
diff --git a/src/views/Authentication/SignUpView.vue b/src/views/Authentication/SignUpView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ce0bd3ada3a372fbae632554d2e28bf02f92e162
--- /dev/null
+++ b/src/views/Authentication/SignUpView.vue
@@ -0,0 +1,15 @@
+<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
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f30d4244a9ec682c7a3c4d1c8a9bc3575779e181..70c5e6456e7f882ebbea3fa1476b4cae2fb52aa2 100644
--- a/src/views/HomeView.vue
+++ b/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>