diff --git a/package-lock.json b/package-lock.json
index 05f3e7c65d110dbcb2eaa13715d7dac5e3c88dc5..a6ed31a273aee9cac16d186fcb460766fb11efe2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@popperjs/core": "^2.11.8",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
+ "install": "^0.13.0",
"js-cookie": "^3.0.5",
"oh-vue-icons": "^1.0.0-rc3",
"pinia": "^2.1.7",
@@ -5018,6 +5019,14 @@
"node": ">=10"
}
},
+ "node_modules/install": {
+ "version": "0.13.0",
+ "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+ "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
"node_modules/is-ci": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
diff --git a/package.json b/package.json
index fe648fd2342c222ce21ce8de1351ed04156581de..2921e68310887cd68a8d08bdc7617da10c3597d9 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"@popperjs/core": "^2.11.8",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
+ "install": "^0.13.0",
"js-cookie": "^3.0.5",
"oh-vue-icons": "^1.0.0-rc3",
"pinia": "^2.1.7",
diff --git a/src/components/UpdateUserComponents/UpdateUserLayout.vue b/src/components/UpdateUserComponents/UpdateUserLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bc0de4f4828781d99da0623070b4ff4f995154bd
--- /dev/null
+++ b/src/components/UpdateUserComponents/UpdateUserLayout.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import BaseInput from "@/components/InputFields/BaseInput.vue";
+import {onMounted, ref} from "vue";
+import {AuthenticationService, LeaderboardService, UserControllerService, type UserUpdateDTO} from "@/api";
+
+
+
+
+
+const firstNameRef = ref()
+const surnameRef = ref('')
+const emailRef = ref('')
+const passwordRef = ref('')
+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
+}
+
+
+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 = async () => {
+
+ samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
+ console.log(samePasswords.value)
+ formRef.value.classList.add("was-validated")
+ const form = formRef.value;
+
+ const updateUserPayload: UserUpdateDTO = {
+ firstName: firstNameRef.value,
+ lastName: surnameRef.value,
+ email: emailRef.value,
+ password: passwordRef.value
+ };
+
+
+
+
+
+ if (form.checkValidity()) {
+ if(samePasswords.value){
+ try {
+ UserControllerService.update({requestBody: updateUserPayload})
+
+ }catch (err){
+ cosole.error(err)
+ }
+ }
+ } else {
+ console.log('Form is not valid');
+ }
+
+}
+onMounted(()=>{
+ setupForm()
+})
+
+
+
+</script>
+
+<template>
+ <div class="container">
+ <!-- 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" alt="userprofile">
+ <p class="h2">Username</p>
+ </div>
+ <div class="col-md-10">
+ <form ref="formRef" @submit.prevent="handleSubmit" id="newForm">
+ <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"
+ @input-change-event="handleFirstNameInputEvent"
+ id="firstNameInputChange"
+ input-id="first-name-new"
+ type="text"
+ label="First name"
+ 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"
+ @input-change-event="handleSurnameInputEvent"
+ id="surnameInput-change"
+ input-id="surname-new"
+ type="text"
+ label="Surname"
+ 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"
+ @input-change-event="handleEmailInputEvent"
+ id="emailInput-change"
+ input-id="email-new"
+ type="email"
+ label="Email"
+ 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"
+ @input-change-event="handlePasswordInputEvent"
+ id="passwordInput-change"
+ 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"
+ />
+ </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"
+ @input-change-event="handleConfirmPasswordInputEvent"
+ id="confirmPasswordInput-change"
+ 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>
+ </div>
+ </div>
+ <button type="submit" @click="handleSubmit" class="btn btn-primary">Change settings</button>
+ </form>
+ </div>
+ </div>
+ <!-- Maybe a profile-pictures here that collapses or not -->
+ <div class="row">
+ <div class="col">
+ <p>
+ <a class="btn" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+ Profile Pictures
+ </a>
+ </p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="collapse" id="collapseExample">
+ <div class="card card-body">
+ This is the content of the user profile
+ </div>
+ </div>
+ </div>
+ <!-- Div that contains the configuration -->
+ <div class="row">
+ <div class="col"><p>
+ <a class="btn" data-bs-toggle="collapse" href="#collapseConfiguration" role="button" aria-expanded="false" aria-controls="collapseConfiguration">
+ User Configuration
+ </a>
+ </p></div>
+ </div>
+ <div class="row">
+ <div class="collapse" id="collapseConfiguration">
+ <div class="card card-body">
+ This is the configuration of the user configuration
+ </div>
+ </div>
+ </div>
+ </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/UserProfile/UserProfileLayout.vue b/src/components/UserProfile/UserProfileLayout.vue
index e36115715e64b79691d773ea44286d46558620fd..6d212adbab50a7a91949b465d6f6ac755f3914d4 100644
--- a/src/components/UserProfile/UserProfileLayout.vue
+++ b/src/components/UserProfile/UserProfileLayout.vue
@@ -15,6 +15,10 @@ let route = useRouter()
function toRoadmap(){
route.push('/roadmap')
}
+
+function toUpdateUserSettings(){
+ route.push('/update-user')
+}
</script>
<template>
@@ -23,7 +27,7 @@ function toRoadmap(){
<div class="col">
<img src="/src/assets/userprofile.png" class="img-fluid">
<p class="h2">Username</p>
- <p><a class="link-dark" href="#">Edit profile</a></p>
+ <p><a class="link-dark" @click="toUpdateUserSettings" href="#">Edit profile</a></p>
</div>
</div>
<div class="row">
diff --git a/src/router/index.ts b/src/router/index.ts
index d1d9d544da43d7e815c5a7ef0cd4670807e48fdf..1f5b39ed6f608232c44060a8e73a7ace61d144ae 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,6 +4,7 @@ import LoginView from '../views/Authentication/LoginView.vue';
import { useUserInfoStore } from '@/stores/UserStore';
import UserProfileView from "@/views/User/UserProfileView.vue";
import SignUp from '@/components/SignUp/SignUp.vue'
+import UpdateUserView from "@/views/UpdateUser/UpdateUserView.vue";
const routes = [
@@ -33,6 +34,16 @@ const routes = [
name: 'test',
component: () => import('@/views/TestView.vue'),
},
+ {
+ path: '/profile',
+ name: 'profile',
+ component: UserProfileView
+ },
+ {
+ path: 'update-user',
+ name: 'update-user',
+ component: UpdateUserView
+ },
{
path: 'roadmap',
name: 'roadmap',
diff --git a/src/views/UpdateUser/UpdateUserView.vue b/src/views/UpdateUser/UpdateUserView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aae915c1e1225dca1b3f6ac4b34e5b987c765515
--- /dev/null
+++ b/src/views/UpdateUser/UpdateUserView.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+import UpdateUserLayout from "@/components/UpdateUserComponents/UpdateUserLayout.vue";
+</script>
+
+<template>
+<UpdateUserLayout></UpdateUserLayout>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file