diff --git a/src/components/UpdateUserComponents/UpdateUserLayout.vue b/src/components/UpdateUserComponents/UpdateUserLayout.vue
index d32a5c15ee3fae587a6ef15c422a251394c8bf17..6d5da25e9abc33a0c8cffbed8cbfdb7fa0aa1f78 100644
--- a/src/components/UpdateUserComponents/UpdateUserLayout.vue
+++ b/src/components/UpdateUserComponents/UpdateUserLayout.vue
@@ -1,8 +1,13 @@
<script setup lang="ts">
import BaseInput from "@/components/InputFields/BaseInput.vue";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {AuthenticationService, LeaderboardService, UserControllerService} from "@/api";
-const firstNameRef = ref('')
+
+
+
+
+const firstNameRef = ref()
const surnameRef = ref('')
const emailRef = ref('')
const passwordRef = ref('')
@@ -10,6 +15,26 @@ const confirmPasswordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
+
+async function setupForm() {
+ try {
+ let response = await UserControllerService.getUser();
+ console.log(response.firstName)
+
+ firstNameRef.value = response.firstName;
+ if (response.lastName != null) {
+ surnameRef.value = response.lastName;
+ }
+ if (response.email != null) {
+ emailRef.value = response.email
+ }
+ }catch (err){
+ console.error(err)
+ }
+}
+
+
+
const handleFirstNameInputEvent = (newValue: any) => {
firstNameRef.value = newValue
}
@@ -34,21 +59,28 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
const handleSubmit = async () => {
console.log(firstNameRef.value)
+ let isValid
+
samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
console.log(samePasswords.value)
+ formRef.value.classList.add("was-validated")
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")
+ // Check if the form is valid
+ if (form.checkValidity()) {
+ if(samePasswords.value){
+ console.log('Form is valid');
+ }
+ } else {
+ console.log('Form is not valid');
+ }
+
}
+onMounted(()=>{
+ setupForm()
+})
@@ -63,77 +95,79 @@ const handleSubmit = async () => {
<p class="h2">Username</p>
</div>
<div class="col-md-10">
- <form @submit.prevent="handleSubmit">
+ <form ref="formRef" @submit.prevent="handleSubmit" id="newForm">
<div class="row">
- <div class="form-group col-md-6">
+ <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"
+ <BaseInput :model-value="firstNameRef"
@input-change-event="handleFirstNameInputEvent"
- ref="firstNameRef"
- id="firstNameInput-change"
- input-id="first-name"
+ id="firstNameInputChange"
+ input-id="first-name-new"
type="text"
label="First name"
placeholder="Enter your first name"
- invalid-message="Please 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"
+ <BaseInput :model-value="surnameRef"
@input-change-event="handleSurnameInputEvent"
- ref="surnameRef"
id="surnameInput-change"
- input-id="surname"
+ input-id="surname-new"
type="text"
label="Surname"
placeholder="Enter your surname"
- invalid-message="Please 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"
+ <BaseInput :model-value="emailRef"
@input-change-event="handleEmailInputEvent"
- ref="emailRef"
id="emailInput-change"
- input-id="email"
+ input-id="email-new"
type="email"
label="Email"
placeholder="Enter your email"
- invalid-message="Invalid 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"
+ <BaseInput :model-value="passwordRef"
@input-change-event="handlePasswordInputEvent"
- ref="passwordRef"
id="passwordInput-change"
- input-id="password"
+ input-id="password-new"
type="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="Password"
placeholder="Enter password"
- invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+ 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">
<!-- <label for="inputPasswordConfirmed">Confirmed Password</label>
<input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat password">-->
- <BaseInput :modelValue="confirmPasswordRef.value"
+ <BaseInput :modelValue="confirmPasswordRef"
@input-change-event="handleConfirmPasswordInputEvent"
- ref="confirmPasswordRef"
id="confirmPasswordInput-change"
- input-id="confirmPassword"
+ input-id="confirmPassword-new"
type="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
label="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>
+ 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" @click="handleSubmit" class="btn btn-primary">Change settings</button>