Skip to content
Snippets Groups Projects
Commit adc0de7a authored by ArianaJogi's avatar ArianaJogi
Browse files

Changed the colour of error messages to red and did some small fixes in... 

Changed the colour of error messages to red and did some small fixes in EditProfileComponent.vue. Added code to EditUserComponent.vue to validate input and to check that no field is empty before saving the new information. Also added placeholders and changed the colour of error messages to red. #141
parent d85b4b8f
No related branches found
No related tags found
No related merge requests found
Pipeline #46237 passed
Stage: build
Stage: test
Stage: frontend
Hide whitespace changes
Inline Side-by-side
eaa_frontend/src/components/EditProfileComponent.vue
+ 8
− 18
View file @ adc0de7a
......@@ -84,15 +84,13 @@
</div>
<div class="user-tags-regions-species">
<h3>Funktsioonid*</h3>
<h3>Funktsioonid</h3>
<multiselect
v-model="editableUser.tags"
:options="tags"
:multiple="true"
:placeholder="editableUser.tags.length ? '' : 'Vali funktsioonid'"
:class="{'is-invalid': !isValidTags}"
/>
<div v-if="!isValidTags" class="error-message">Funktsioonid on kohustuslikud!</div>
<h3>Regioonid*</h3>
<multiselect
......@@ -102,7 +100,7 @@
:placeholder="editableUser.regions.length ? '' : 'Vali regioonid'"
:class="{'is-invalid': !isValidRegions}"
/>
<div v-if="!isValidRegions" class="error-message">Piirkonnad on kohustuslikud!</div>
<div v-if="!isValidRegions" class="error">Regioonid on kohustuslikud!</div>
<h3>Liigigrupid</h3>
<div>
......@@ -155,7 +153,6 @@ export default {
streetNrError: '',
postalcodeError: '',
formHasErrors: true,
isValidTags: true,
isValidRegions: true,
};
},
......@@ -295,9 +292,8 @@ export default {
if (!this.editableUser.postalCode) {
this.postalcodeError = 'Postiindeks on kohustuslik!';
}
this.isValidTags = this.editableUser.tags.length > 0;
this.isValidRegions = this.editableUser.regions.length;
return !this.firstNameError && !this.lastNameError && !this.birthDateError && !this.countyError && !this.cityError && !this.streetNameError && !this.phoneNrError && !this.emailError && !this.streetNrError && !this.postalcodeError && this.isValidTags && this.isValidRegions;
this.isValidRegions = this.editableUser.regions.length > 0;
return !this.firstNameError && !this.lastNameError && !this.birthDateError && !this.countyError && !this.cityError && !this.streetNameError && !this.phoneNrError && !this.emailError && !this.streetNrError && !this.postalcodeError && this.isValidRegions;
},
async saveChanges() {
if (!this.validateFields()) {
......@@ -457,19 +453,13 @@ button:hover {
justify-content: space-between;
}
.species-item-element {
background-color: #D6F4CD;
border-radius: 15px;
padding: 10px 20px;
margin: 5px;
font-size: 1.1em;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
display: inline-block;
}
.species-item-element span {
margin-right: 10px;
font-weight: bold;
font-size: large;
}
.error {
color: red;
}
</style>
\ No newline at end of file
eaa_frontend/src/components/EditUserComponent.vue
+ 170
− 22
View file @ adc0de7a
......@@ -15,18 +15,21 @@
<div class="user-details">
<h3>Kasutaja info</h3>
<div class="form-group">
<label for="firstName"><strong>Eesnimi: </strong></label>
<input v-model="editableUser.firstName" type="text" id="firstName" />
<label for="firstName"><strong>Eesnimi*: </strong></label>
<input v-model="editableUser.firstName" required type="text" id="firstName" @blur="validateWord('firstName')" placeholder="Eesnimi"/>
<span v-if="firstNameError" class="error">{{ firstNameError }}</span>
</div>
<div class="form-group">
<label for="lastName"><strong>Perekonnanimi: </strong></label>
<input v-model="editableUser.lastName" type="text" id="lastName" />
<label for="lastName"><strong>Perekonnanimi*: </strong></label>
<input v-model="editableUser.lastName" required type="text" id="lastName" @blur="validateWord('lastName')" placeholder="Perekonnanimi"/>
<span v-if="lastNameError" class="error">{{ lastNameError }}</span>
</div>
<div class="form-group">
<label for="birthDate"><strong>Sünnikuupäev: </strong></label>
<input v-model="editableUser.birthDate" type="date" id="birthDate" />
<label for="birthDate"><strong>Sünnikuupäev*: </strong></label>
<input v-model="editableUser.birthDate" required type="date" id="birthDate" />
<span v-if="birthDateError" class="error">{{ birthDateError }}</span>
</div>
<div class="form-group">
......@@ -36,46 +39,55 @@
</div>
<div class="user-roles">
<h3>Rollid</h3>
<h3>Rollid*</h3>
<multiselect
v-model="editableUser.roles"
:options="roles"
:multiple="true"
:placeholder="editableUser.roles.length ? '' : 'Vali rollid'"
:class="{'is-invalid': !isValidRoles}"
/>
<div v-if="!isValidRoles" class="error">Rollid on kohustuslikud!</div>
</div>
<div class="user-contact">
<h3>Kontakt</h3>
<div class="form-group">
<label for="phoneNr"><strong>Telefon: </strong></label>
<input v-model="editableUser.phoneNr" type="text" id="phoneNr" />
<label for="phoneNr"><strong>Telefon*: </strong></label>
<input v-model="editableUser.phoneNr" required type="text" id="phoneNr" @blur="validatePhoneNr" placeholder="Telefoni number"/>
<span v-if="phoneNrError" class="error">{{ phoneNrError }}</span>
</div>
<div class="form-group">
<label for="email"><strong>Email: </strong></label>
<input v-model="editableUser.email" type="email" id="email" />
<label for="email"><strong>Email*: </strong></label>
<input v-model="editableUser.email" required type="email" id="email" @blur="validateEmail" placeholder="Email"/>
<span v-if="emailError" class="error">{{ emailError }}</span>
</div>
</div>
<div class="user-address">
<h3>Asukoha info</h3>
<div class="form-group">
<label for="county"><strong>Maakond: </strong></label>
<input v-model="editableUser.county" type="text" id="county" />
<label for="county"><strong>Maakond*: </strong></label>
<input v-model="editableUser.county" required type="text" id="county" @blur="validateWord('county')" placeholder="Maakond"/>
<span v-if="countyError" class="error">{{ countyError }}</span>
</div>
<div class="form-group">
<label for="city"><strong>Linn: </strong></label>
<input v-model="editableUser.city" type="text" id="city" />
<label for="city"><strong>Linn*: </strong></label>
<input v-model="editableUser.city" required type="text" id="city" @blur="validateWord('city')" placeholder="Linn"/>
<span v-if="cityError" class="error">{{ cityError }}</span>
</div>
<div class="form-group">
<label for="address"><strong>Aadress: </strong></label>
<input v-model="editableUser.streetName" type="text" id="streetName">
<input v-model="editableUser.streetNr" type="text" id="streetNr">
<input v-model="editableUser.postalCode" type="text" id="postalCode">
<label for="address"><strong>Aadress*: </strong></label>
<input v-model="editableUser.streetName" required type="text" id="streetName" @blur="validateWord('streetName')" placeholder="Tänav">
<span v-if="streetNameError" class="error">{{ streetNameError }}</span>
<input v-model="editableUser.streetNr" required type="text" id="streetNr" placeholder="Maja ja/või korteri number">
<span v-if="streetNrError" class="error">{{ streetNrError }}</span>
<input v-model="editableUser.postalCode" required type="text" id="postalCode" @blur="validateNumber('postalCode')" placeholder="Postiindeks">
<span v-if="postalcodeError" class="error">{{ postalcodeError }}</span>
</div>
</div>
......@@ -87,15 +99,18 @@
:multiple="true"
:placeholder="editableUser.tags.length ? '' : 'Vali funktsioonid'"
/>
<h3>Regioonid</h3>
<h3>Regioonid*</h3>
<multiselect
v-model="editableUser.regions"
:options="regions"
:multiple="true"
:placeholder="editableUser.regions.length ? '' : 'Vali regioonid'"
:class="{'is-invalid': !isValidRegions}"
/>
<h3>Liigigrupid</h3>
<div v-if="!isValidRegions" class="error">Regioonid on kohustuslikud!</div>
<h3>Liigigrupid</h3>
<div v-for="(speciesItem, index) in editableUser.species" :key="speciesItem.id" class="species-item">
<div class="species-item-element">
<span>{{ speciesItem.name }}</span>
......@@ -150,12 +165,89 @@ export default {
tags: [],
regions: [],
species: [],
phoneNrError: '',
emailError: '',
firstNameError: '',
lastNameError: '',
birthDateError: '',
countyError: '',
cityError: '',
streetNameError: '',
streetNrError: '',
postalcodeError: '',
formHasErrors: true,
isValidRegions: true,
isValidRoles: true,
};
},
mounted() {
this.fetchData();
},
methods: {
validatePhoneNr() {
const phoneNrPattern = /^\+?\d+$/;
if (this.editableUser.phoneNr && !phoneNrPattern.test(this.editableUser.phoneNr)) {
this.phoneNrError = 'Telefoninumber võib sisaldada ainult numbreid!';
} else {
this.phoneNrError = '';
}
this.checkFormValidity();
},
validateEmail() {
if (this.editableUser.email && !this.editableUser.email.includes('@')) {
this.emailError = 'E-post peab sisaldama "@" sümbolit.';
} else {
this.emailError = '';
}
this.checkFormValidity();
},
validateNumber(field) {
const numberPattern = /^\d+$/;
if (field === "postalCode") {
if (this.editableUser.postalCode && !numberPattern.test(this.editableUser.postalCode)) {
this.postalcodeError = 'Postiindeks võib sisaldada ainult numbreid!';
}
}
this.checkFormValidity();
},
validateWord(field) {
const wordPattern = /^[A-Za-z ]+$/;
if (field === "firstName") {
if (this.editableUser.firstName && !wordPattern.test(this.editableUser.firstName)) {
this.firstNameError = 'Eesnimi võib sisaldada ainult tähti!';
}
} else if (field === "lastName") {
if (this.editableUser.lastName && !wordPattern.test(this.editableUser.lastName)) {
this.lastNameError = 'Perekonnanimi võib sisaldada ainult tähti!';
}
} else if (field === "county") {
if (this.editableUser.county && !wordPattern.test(this.editableUser.county)) {
this.countyError = 'Maakond võib sisaldada ainult tähti!';
}
} else if (field === "city") {
if (this.editableUser.city && !wordPattern.test(this.editableUser.city)) {
this.cityError = 'Linn võib sisaldada ainult tähti!';
}
} else if (field === "streetName") {
if (this.editableUser.streetName && !wordPattern.test(this.editableUser.streetName)) {
this.streetNameError = 'Tänav võib sisaldada ainult tähti!';
}
}
this.checkFormValidity();
},
checkFormValidity() {
// Kontrollib, kas kõik nõutavad väljad on täidetud
this.formHasErrors =
this.phoneNrError !== '' ||
this.emailError !== '' ||
this.firstNameError !== '' ||
this.lastNameError !== '' ||
this.countyError !== '' ||
this.cityError !== '' ||
this.streetNameError !== '' ||
this.streetNrError !== '' ||
this.postalcodeError !== '';
},
async fetchData() {
try {
const [tagsResponse, regionsResponse, rolesResponse, speciesResponse] = await Promise.all([
......@@ -195,7 +287,59 @@ export default {
this.$emit('close-popup');
}
},
validateFields() {
// Reset errors
this.firstNameError = '';
this.lastNameError = '';
this.countyError = '';
this.cityError = '';
this.streetNameError = '';
this.phoneNrError = '';
this.emailError = '';
this.streetNrError = '';
this.postalcodeError = '';
this.birthDateError = '';
// Check required fields
if (!this.editableUser.firstName) {
this.firstNameError = 'Eesnimi on kohustuslik!';
}
if (!this.editableUser.lastName) {
this.lastNameError = 'Perekonnanimi on kohustuslik!';
}
if (!this.editableUser.birthDate) {
this.birthDateError = 'Sünnikuupäev on kohustuslik!';
}
if (!this.editableUser.phoneNr) {
this.phoneNrError = 'Telefoni number on kohustuslik!';
}
if (!this.editableUser.email) {
this.emailError = 'Email on kohustuslik!';
}
if (!this.editableUser.county) {
this.countyError = 'Maakond on kohustuslik!';
}
if (!this.editableUser.city) {
this.cityError = 'Linn on kohustuslik!';
}
if (!this.editableUser.streetName) {
this.streetNameError = 'Tänav on kohustuslik!';
}
if (!this.editableUser.streetNr) {
this.streetNrError = 'Maja ja/või korteri number on kohustuslik!';
}
if (!this.editableUser.postalCode) {
this.postalcodeError = 'Postiindeks on kohustuslik!';
}
this.isValidRegions = this.editableUser.regions.length > 0;
this.isValidRoles = this.editableUser.roles.length > 0;
return !this.firstNameError && !this.lastNameError && !this.birthDateError && !this.countyError && !this.cityError && !this.streetNameError && !this.phoneNrError && !this.emailError && !this.streetNrError && !this.postalcodeError && this.isValidRegions && this.isValidRoles;
},
async saveChanges() {
if (!this.validateFields()) {
alert('Palun täitke kõik kohustuslikud väljad!');
return;
}
try {
const response = await fetch(`http://localhost:8080/api/users/edit/${this.editableUser.id}`, {
//const response = await fetch(`api/users/edit/${this.editableUser.id}`, {
......@@ -363,4 +507,8 @@ button:hover {
font-weight: bold;
font-size: large;
}
.error {
color: red;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment