diff --git a/src/App.vue b/src/App.vue
index 12ad03a6b286a47ed6a392e7338562c82b213f64..dc693f471ad9c9828c6519d81cea07c8bd5ce5ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+// import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
</script>
<template>
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
index 91c39045671a85816e70cab8bd81ed8131b4452a..dc849d5cdde9afd61f9e53e53b4eaefba203bf64 100644
--- a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -22,6 +22,7 @@ const onChangedChallengeEvent = (value) => {
console.log('Reached')
chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
}
+ console.log(chosenChallenges.value)
}
const onClick = () => {
diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue
index 22ed03466408636bb262bb56fe77aa63f914b6ac..c773e4c203294cabd1dee9d555dd94b013961871 100644
--- a/src/components/InputFields/BaseInput.vue
+++ b/src/components/InputFields/BaseInput.vue
@@ -22,10 +22,6 @@ const props = defineProps({
type: String,
default: ""
},
- isValid: {
- type: Boolean,
- default: false
- },
min: {
type: String,
required: false
@@ -33,6 +29,14 @@ const props = defineProps({
pattern: {
type: String,
default: null
+ },
+ validMessage: {
+ type: String,
+ default: ''
+ },
+ invalidMessage: {
+ type: String,
+ default: ''
}
});
@@ -44,17 +48,16 @@ const onInputEvent = (event: any) => {
<template>
<div>
<label :for="inputId">{{ label }}</label>
- <input :value="props.modelValue"
+ <input :value="modelValue"
@input="onInputEvent"
- :type="props.type"
+ :type="type"
class="form-control"
- :placeholder="props.placeholder"
+ :placeholder="placeholder"
:id="inputId" required
:min="min"
- :pattern="pattern"
- />
- <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
- <div v-else class="valid-feedback">Valid {{ label }}</div>
+ :pattern="pattern"/>
+ <div class="valid-feedback">{{ validMessage }}</div>
+ <div class="invalid-feedback">{{ invalidMessage }}</div>
</div>
</template>
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 953ecb8e13403f5efcd766222a1f936b6280a630..21d4de86686d68850b9ee49b09cb9246be596ced 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -8,8 +8,8 @@ import { useRouter, useRoute } from 'vue-router';
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
import { useErrorStore } from '@/stores/ErrorStore';
-const emailRef = ref()
-const passwordRef = ref()
+const emailRef = ref('')
+const passwordRef = ref('')
const formRef = ref()
let errorMsg = ref('');
@@ -19,13 +19,18 @@ const userStore = useUserInfoStore();
const handleEmailInputEvent = (newValue: any) => {
emailRef.value = newValue
+ console.log(emailRef.value)
}
const handlePasswordInputEvent = (newValue: any) => {
passwordRef.value = newValue
+ console.log(passwordRef.value)
}
const handleSubmit = async () => {
+ console.log(emailRef.value)
+ console.log(passwordRef.value)
+
formRef.value.classList.add("was-validated")
const loginUserPayload: LoginRequest = {
email: emailRef.value,
@@ -64,11 +69,30 @@ const handleSubmit = async () => {
<h1>Sparesti.no</h1>
</div>
<form ref="formRef" id="loginForm" @submit.prevent="handleSubmit" novalidate>
- <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput" input-id="email"
- type="email" label="Email" placeholder="Enter your email" />
- <BaseInput pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" :model-value="passwordRef"
- @input-change-event="handlePasswordInputEvent" id="passwordInput" input-id="password" type="password"
- label="Password" placeholder="Enter password" />
+
+ <BaseInput :model-value="emailRef"
+ @input-change-event="handleEmailInputEvent"
+ id="emailInput"
+ input-id="email"
+ type="email"
+ label="Email"
+ placeholder="Enter your email"
+ valid-message="Valid email"
+ invalid-message="Invalid email"
+ />
+
+ <BaseInput :model-value="passwordRef"
+ @input-change-event="handlePasswordInputEvent"
+ id="passwordInput"
+ input-id="password"
+ type="password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
+ label="Password"
+ placeholder="Enter password"
+ valid-message="Valid password"
+ invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"
+ />
+
<p class="text-danger">{{ errorMsg }}</p>
<button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>
</form>
diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue
index b085f6ee59b1b3d38c777f8b041fa9d1b76013d6..9a8dab783a1c291575375d0f8ea69fb1d3a6b525 100644
--- a/src/components/SignUp/SignUpForm.vue
+++ b/src/components/SignUp/SignUpForm.vue
@@ -5,15 +5,18 @@ import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
+
const firstNameRef = ref('')
const surnameRef = ref('')
const emailRef = ref('')
const passwordRef = ref('')
const confirmPasswordRef = ref('')
const formRef = ref()
+let samePasswords = ref(true)
const handleFirstNameInputEvent = (newValue: any) => {
firstNameRef.value = newValue
+ console.log(firstNameRef.value)
}
const handleSurnameInputEvent = (newValue: any) => {
@@ -26,21 +29,30 @@ const handleEmailInputEvent = (newValue: any) => {
const handlePasswordInputEvent = (newValue: any) => {
passwordRef.value = newValue
+ console.log(passwordRef.value)
}
const handleConfirmPasswordInputEvent = (newValue: any) => {
confirmPasswordRef.value = newValue
+ console.log(confirmPasswordRef.value)
}
-const handleSubmit = () => {
+const handleSubmit = async () => {
+ console.log(firstNameRef.value)
+
+ samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
+ console.log(samePasswords.value)
const form = formRef.value;
// Check if the form is valid
if (form.checkValidity()) {
// Form is valid, submit the form or perform other actions
console.log('Form is valid');
+ } else {
+ console.log('Form is not valid');
}
+
formRef.value.classList.add("was-validated")
}
@@ -49,46 +61,54 @@ const handleSubmit = () => {
<template>
<div class="container">
<form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit">
- <BaseInput :model-value="firstNameRef.value"
+ <BaseInput :model-value="firstNameRef"
@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"
+ placeholder="Enter your first name"
+ invalid-message="Please enter your first name"/>
+ <BaseInput :model-value="surnameRef"
@input-change-event="handleSurnameInputEvent"
ref="surnameRef"
id="surnameInput"
input-id="surname"
type="text"
label="Surname"
- placeholder="Enter your surname"/>
- <BaseInput :model-value="emailRef.value"
+ placeholder="Enter your surname"
+ invalid-message="Please enter your surname"/>
+ <BaseInput :model-value="emailRef"
@input-change-event="handleEmailInputEvent"
ref="emailRef"
id="emailInput"
input-id="email"
type="email"
label="Email"
- placeholder="Enter your email"/>
- <BaseInput :model-value="passwordRef.value"
+ placeholder="Enter your email"
+ invalid-message="Invalid email"/>
+ <BaseInput :model-value="passwordRef"
@input-change-event="handlePasswordInputEvent"
ref="passwordRef"
id="passwordInput"
input-id="password"
type="password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="Password"
- placeholder="Enter password"/>
- <BaseInput :model-value="confirmPasswordRef.value"
+ placeholder="Enter password"
+ invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+ <BaseInput :modelValue="confirmPasswordRef"
@input-change-event="handleConfirmPasswordInputEvent"
ref="confirmPasswordRef"
id="confirmPasswordInput"
input-id="confirmPassword"
type="password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="Confirm Password"
- placeholder="Confirm password"/>
+ placeholder="Confirm password"
+ invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+ <p v-if="samePasswords" class="text-danger">The passwords are not identical</p>
<button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
</form>
</div>