From b9f99aca3d24f6660595e990b39f63f8bd1a4cfb Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Wed, 17 Apr 2024 11:14:01 +0200
Subject: [PATCH] feat/created new sign up component
---
src/components/Login/LoginForm.vue | 28 +++++-------
src/components/SignUp/SignUp.vue | 12 +++++
src/components/SignUp/SignUpForm.vue | 60 +++++++++++++++++++++++++
src/router/index.ts | 6 +++
src/views/Authentication/SignUpView.vue | 15 +++++++
src/views/HomeView.vue | 4 +-
6 files changed, 106 insertions(+), 19 deletions(-)
create mode 100644 src/components/SignUp/SignUp.vue
create mode 100644 src/components/SignUp/SignUpForm.vue
create mode 100644 src/views/Authentication/SignUpView.vue
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 6b0da2a..4e3ded3 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -10,11 +10,11 @@ const handleSubmit = () => {
<template>
<div class="container-fluid">
<form id="loginForm" @submit.prevent="handleSubmit">
- <BaseInput id="usernameInput"
- input-id="username"
+ <BaseInput id="emailInput"
+ input-id="email"
type="text"
- label="Username"
- placeholder="Enter username"/>
+ label="Email"
+ placeholder="Enter your email"/>
<BaseInput id="passwordInput"
input-id="password"
type="password"
@@ -27,24 +27,16 @@ const handleSubmit = () => {
<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 0000000..4dff39d
--- /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 0000000..005282a
--- /dev/null
+++ b/src/components/SignUp/SignUpForm.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+const handleSubmit = () => {
+ alert("Expected to be transferred to initial configuration") // Todo remove this line
+}
+
+</script>
+
+<template>
+ <div class="container">
+ <form id="signUpForm" @submit.prevent="handleSubmit">
+ <BaseInput id="firstNameInput"
+ input-id="first-name"
+ type="text"
+ label="First name"
+ placeholder="Enter your first name"/>
+ <BaseInput id="surnameInput"
+ input-id="surname"
+ type="text"
+ label="Surname"
+ placeholder="Enter your surname"/>
+ <BaseInput id="emailInput"
+ input-id="email"
+ type="text"
+ label="Email"
+ placeholder="Enter your email"/>
+ <BaseInput id="passwordInput"
+ input-id="password"
+ type="password"
+ label="Password"
+ placeholder="Enter password"/>
+ <BaseInput 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 98101c6..88d0b9e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
// Import necessary dependencies from Vue Router and your views
import { createRouter, createWebHistory } from 'vue-router';
import LoginView from '../views/Authentication/LoginView.vue';
+import SignUp from '@/components/SignUp/SignUp.vue'
const routes = [
{
@@ -36,6 +37,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 0000000..ce0bd3a
--- /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 f30d424..70c5e64 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>
--
GitLab