Skip to content
Snippets Groups Projects
Commit 9afb6403 authored by Laczkó Csongor Loránd's avatar Laczkó Csongor Loránd
Browse files

feat: Implement frontend validation for registration and dog adding/editing

parent f2a16d28
No related branches found
No related tags found
No related merge requests found
......@@ -86,7 +86,7 @@ p {
}
.register-button {
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none mb-8;
}
.alert-success {
......
<template>
<div class="login-container">
<h1 class="title">Regisztráció</h1>
<div v-if="error" class="alert alert-error">
{{ error }}
<div v-if="errorMessage" class="alert alert-error">
{{ errorMessage }}
</div>
<form @submit.prevent="register">
<form @submit.prevent="validateAndRegister">
<div class="input-group">
<label for="username">Felhasználónév</label>
<input id="username" v-model="username" type="text" required autocomplete="username">
......@@ -20,28 +20,69 @@
<script>
import axios from '@/axiosConfig.js';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
name: 'Register',
data() {
return {
username: '',
password: '',
error: '',
setup() {
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const store = useStore();
const router = useRouter();
const validateAndRegister = () => {
if (validateForm()) {
register();
}
};
},
methods: {
async register() {
const validateForm = () => {
const usernameRegex = /^[a-zA-Z0-9]+$/;
const minLength = 5;
if (!username.value) {
errorMessage.value = 'Felhasználónév megadása kötelező';
return false;
}
if (username.value.length < minLength) {
errorMessage.value = 'A felhasználónév legalább 5 karakter hosszú kell legyen';
return false;
}
if (!username.value.match(usernameRegex)) {
errorMessage.value = 'Felhasználónév csak betűket és számokat tartalmazhat';
return false;
}
if (!password.value) {
errorMessage.value = 'Jelszó megadása kötelező';
return false;
}
if (password.value.length < minLength) {
errorMessage.value = 'A jelszó legalább 5 karakter hosszú kell legyen';
return false;
}
errorMessage.value = ''; // Clear the error message if all fields are valid
return true;
};
const register = async () => {
try {
const response = await axios.post('/api/register', {
username: this.username,
password: this.password
username: username.value,
password: password.value
});
// If registration is successful, redirect to login page
if (response.status === 201) {
this.$store.commit('setRegistrationSuccess', true);
this.$router.push('/login');
store.commit('setRegistrationSuccess', true);
router.push('/login');
}
} catch (error) {
// Handle error
......@@ -49,12 +90,19 @@ export default {
// Display error message
if (error.response && error.response.data) {
this.error = 'Registration failed: ' + error.response.data;
errorMessage.value = 'Registration failed: ' + error.response.data;
} else {
this.error = 'Registration failed: ' + error.message;
errorMessage.value = 'Registration failed: ' + error.message;
}
}
},
};
return {
username,
password,
errorMessage,
validateAndRegister,
};
},
};
</script>
......@@ -77,7 +125,7 @@ input {
}
button {
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none;
@apply px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none mb-8;
}
.title {
......
<template>
<div class="edit-dog-container">
<h1>Kutya hozzáadása</h1>
<form @submit.prevent="addDog">
<div v-if="errorMessage" class="alert alert-error">
{{ errorMessage }}
</div>
<form @submit.prevent="validateAndAddDog" enctype="multipart/form-data">
<div class="input-group">
<label for="name">Neve</label>
<input id="name" v-model="dog.name" type="text" required>
......@@ -27,12 +30,42 @@ export default {
data() {
return {
dog: {},
errorMessage: '',
};
},
computed: {
...mapState(['token']),
},
methods: {
validateAndAddDog() {
if (this.validateForm()) {
this.addDog();
}
},
validateForm() {
const name = this.dog.name;
const breed = this.dog.breed;
const age = this.dog.age;
const regex = /^[a-zA-ZáéíóöőúüűÁÉÍÓÖŐÚÜŰ]*$/;
if (!name.match(regex)) {
this.errorMessage = "Helytelen név. Csak betűket tartalmazhat.";
return false;
}
if (!breed.match(regex)) {
this.errorMessage = "Helytelen fajta. Csak betűket tartalmazhat.";
return false;
}
if (age < 0) {
this.errorMessage = "Helytelen kor. Nem lehet negatív.";
return false;
}
this.errorMessage = ''; // Clear the error message if all fields are valid
return true;
},
async addDog() {
const config = {
headers: { Authorization: `Bearer ${this.token}` },
......
<template>
<div class="edit-dog-container">
<h1>Kutya szerkesztése</h1>
<form @submit.prevent="editDog" enctype="multipart/form-data">
<div v-if="errorMessage" class="alert alert-error">
{{ errorMessage }}
</div>
<form @submit.prevent="validateAndEditDog" enctype="multipart/form-data">
<div class="input-group">
<label for="name">Neve</label>
<input id="name" v-model="dog.name" type="text" required>
......@@ -50,6 +53,7 @@ export default {
data() {
return {
dog: {},
errorMessage: '',
};
},
computed: {
......@@ -63,6 +67,35 @@ export default {
const response = await axios.get(`/api/dogs/${this.$route.params.id}`);
this.dog = response.data;
},
validateAndEditDog() {
if (this.validateForm()) {
this.editDog();
}
},
validateForm() {
const name = this.dog.name;
const breed = this.dog.breed;
const age = this.dog.age;
const regex = /^[a-zA-ZáéíóöőúüűÁÉÍÓÖŐÚÜŰ]*$/;
if (!name.match(regex)) {
this.errorMessage = "Helytelen név. Csak betűket tartalmazhat.";
return false;
}
if (!breed.match(regex)) {
this.errorMessage = "Helytelen fajta. Csak betűket tartalmazhat.";
return false;
}
if (age < 0) {
this.errorMessage = "Helytelen kor. Nem lehet negatív.";
return false;
}
this.errorMessage = ''; // Clear the error message if all fields are valid
return true;
},
async editDog() {
const pictureFile = this.$refs.pond.getFiles()[0].file;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment