From cab31c1bd17308956c320acf9cbcec2fc10c1ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20H=C3=B8vik?= <andehovi@stud.ntnu.no>
Date: Mon, 22 Apr 2024 07:29:24 +0200
Subject: [PATCH] adjusted form for BaseInput
---
.../UpdateUserComponents/UpdateUserLayout.vue | 70 ++++++++++++-------
1 file changed, 44 insertions(+), 26 deletions(-)
diff --git a/src/components/UpdateUserComponents/UpdateUserLayout.vue b/src/components/UpdateUserComponents/UpdateUserLayout.vue
index 2cf4d65..d32a5c1 100644
--- a/src/components/UpdateUserComponents/UpdateUserLayout.vue
+++ b/src/components/UpdateUserComponents/UpdateUserLayout.vue
@@ -8,6 +8,7 @@ const emailRef = ref('')
const passwordRef = ref('')
const confirmPasswordRef = ref('')
const formRef = ref()
+let samePasswords = ref(true)
const handleFirstNameInputEvent = (newValue: any) => {
firstNameRef.value = newValue
@@ -30,18 +31,27 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
confirmPasswordRef.value = newValue
}
-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")
}
+
+
</script>
<template>
@@ -49,76 +59,84 @@ const handleSubmit = () => {
<!-- The userprofile and the form that will update name, email, password -->
<div class="row">
<div class="col-md-2 text-center">
- <img src="/src/assets/userprofile.png" class="img-fluid">
+ <img src="/src/assets/userprofile.png" class="img-fluid" alt="userprofile">
<p class="h2">Username</p>
</div>
<div class="col-md-10">
- <form class="needs-validation" novalidate>
+ <form @submit.prevent="handleSubmit">
<div class="row">
<div class="form-group col-md-6">
+ <!-- <label for="inputFirstName" class="form-label">First Name</label>
+ <input type="text" class="form-control" id="inputFirstName" placeholder="ex: Brian">-->
<BaseInput :model-value="firstNameRef.value"
- @input-change-event="handleFirstNameInputEvent"
+ @input-change-event="handleFirstNameInputEvent"
ref="firstNameRef"
- id="firstNameInput"
+ id="firstNameInput-change"
input-id="first-name"
type="text"
label="First name"
- placeholder="Enter your first name"/>
- <label for="inputFirstName" class="form-label">First Name</label>
- <input type="text" class="form-control" id="inputFirstName" placeholder="ex: Brian">
+ placeholder="Enter your first name"
+ invalid-message="Please enter your first name"/>
</div>
<div class="form-group col-md-6">
+ <!-- <label for="inputPassword4">Last Name</label>
+ <input type="text" class="form-control" id="inputLastName" placeholder="ex: Cox">-->
<BaseInput :model-value="surnameRef.value"
@input-change-event="handleSurnameInputEvent"
ref="surnameRef"
- id="surnameInput"
+ id="surnameInput-change"
input-id="surname"
type="text"
label="Surname"
- placeholder="Enter your surname"/>
- <label for="inputPassword4">Last Name</label>
- <input type="text" class="form-control" id="inputLastName" placeholder="ex: Cox">
+ placeholder="Enter your surname"
+ invalid-message="Please enter your surname"/>
</div>
</div>
<div class="form-group col-md-6">
+ <!-- <label for="inputAddress">Email</label>
+ <input type="email" class="form-control" id="inputMail" placeholder="ex: briancox@mail.com">-->
<BaseInput :model-value="emailRef.value"
@input-change-event="handleEmailInputEvent"
ref="emailRef"
- id="emailInput"
+ id="emailInput-change"
input-id="email"
type="email"
label="Email"
- placeholder="Enter your email"/>
- <label for="inputAddress">Email</label>
- <input type="email" class="form-control" id="inputMail" placeholder="ex: briancox@mail.com">
+ placeholder="Enter your email"
+ invalid-message="Invalid email"/>
</div>
<div class="row">
<div class="form-group col-md-6">
+ <!-- <label for="inputPassword">Password</label>
+ <input type="password" class="form-control" id="inputPassword" placeholder="Password with capital letter, number and a special character">-->
<BaseInput :model-value="passwordRef.value"
@input-change-event="handlePasswordInputEvent"
ref="passwordRef"
- id="passwordInput"
+ id="passwordInput-change"
input-id="password"
type="password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="Password"
- placeholder="Enter password"/>
- <label for="inputEmail4">Password</label>
- <input type="password" class="form-control" id="inputPassword" placeholder="Password with capital letter, number and a special character">
+ placeholder="Enter password"
+ invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
</div>
<div class="form-group col-md-6">
- <BaseInput :model-value="confirmPasswordRef.value"
+ <!-- <label for="inputPasswordConfirmed">Confirmed Password</label>
+ <input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat password">-->
+ <BaseInput :modelValue="confirmPasswordRef.value"
@input-change-event="handleConfirmPasswordInputEvent"
ref="confirmPasswordRef"
- id="confirmPasswordInput"
+ id="confirmPasswordInput-change"
input-id="confirmPassword"
type="password"
+ pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="Confirm Password"
- placeholder="Confirm password"/>
- <label for="inputPassword4">Confirmed Password</label>
- <input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat 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>
</div>
</div>
- <button type="submit" class="btn btn-primary">Change settings</button>
+ <button type="submit" @click="handleSubmit" class="btn btn-primary">Change settings</button>
</form>
</div>
</div>
--
GitLab