From 9def145a2056c1418a63bcc4a2114023aea4584a Mon Sep 17 00:00:00 2001
From: xaoccc <114498517+xaoccc@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:33:16 +0200
Subject: [PATCH] input validation
---
frontend/public/styles/theme.css | 2 +-
frontend/src/helpers.js | 23 +++++++++
frontend/src/pages/CreateGirl.jsx | 81 +++++++++++++++++++------------
frontend/src/pages/EditGirl.jsx | 56 ++++++++++++++-------
4 files changed, 114 insertions(+), 48 deletions(-)
create mode 100644 frontend/src/helpers.js
diff --git a/frontend/public/styles/theme.css b/frontend/public/styles/theme.css
index 5fcabbf..380412f 100644
--- a/frontend/public/styles/theme.css
+++ b/frontend/public/styles/theme.css
@@ -400,7 +400,7 @@ hr {
}
/* forms */
-input, textarea {
+input, textarea, select {
background-color: #eee;
width: 100%;
padding: 1rem;
diff --git a/frontend/src/helpers.js b/frontend/src/helpers.js
new file mode 100644
index 0000000..48471a2
--- /dev/null
+++ b/frontend/src/helpers.js
@@ -0,0 +1,23 @@
+export function createErrorMesage(target, message) {
+ const errorMessage = document.createElement('p');
+ errorMessage.classList.add('error-message');
+ errorMessage.textContent = message;
+ target.insertAdjacentElement('afterend', errorMessage);
+}
+
+export function changeInput(e) {
+ e.target.setCustomValidity('');
+ const nextElement = e.target.nextElementSibling;
+ if (nextElement && nextElement.classList.contains('error-message')) {
+ nextElement.remove();
+ }
+}
+
+export function validate(e, message) {
+ const nextElement = e.target.nextElementSibling;
+ if (nextElement && nextElement.classList.contains('error-message')) {
+ nextElement.remove();
+ }
+ e.target.setCustomValidity(' ');
+ createErrorMesage(e.target, message);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/CreateGirl.jsx b/frontend/src/pages/CreateGirl.jsx
index ea2d9a3..56aab7f 100644
--- a/frontend/src/pages/CreateGirl.jsx
+++ b/frontend/src/pages/CreateGirl.jsx
@@ -1,33 +1,34 @@
import { useNavigate } from 'react-router-dom';
import api from '../api';
import { useState } from 'react';
+import { validate, changeInput } from '../helpers';
export default function CreateGirl() {
const [image, setImage] = useState("");
const [name, setName] = useState("");
- const [bio, setBio] = useState("");
+ const [bio, setBio] = useState("");
const [age, setAge] = useState("");
const [height, setHeight] = useState("");
const [skinColor, setSkinColor] = useState("");
const [hairColor, setHairColor] = useState("");
- const [eyeColor, setEyeColor] = useState("");
+ const [eyeColor, setEyeColor] = useState("");
const navigate = useNavigate();
-
+
const createEvent = async (e) => {
- e.preventDefault();
- api.post("/api/girls/create/", { image, name, bio, age, skin_color: skinColor, hair_color: hairColor, eye_color: eyeColor, height })
- .then((res) => {
- if (res.status === 201) {
- console.log("Girl addes successfully!");
- navigate('/strip-club/');
-
- } else {
- console.log("Girl was not added!");
- }
-
- })
- .catch((error) => console.error(`Error: ${error}`));
-
+ e.preventDefault();
+ api.post("/api/girls/create/", { image, name, bio, age, skin_color: skinColor, hair_color: hairColor, eye_color: eyeColor, height })
+ .then((res) => {
+ if (res.status === 201) {
+ console.log("Girl addes successfully!");
+ navigate('/strip-club/');
+
+ } else {
+ console.log("Girl was not added!");
+ }
+
+ })
+ .catch((error) => console.error(`Error: ${error}`));
+
}
return (
@@ -73,18 +74,16 @@ export default function CreateGirl() {
id="age"
name="age"
required
- onChange={(e) => setAge(e.target.value)}
+ onChange={(e) => {
+ changeInput(e);
+ setAge(e.target.value);
+ }}
+ onInvalid={(e) => validate(e, 'Please enter a valid age. Age must be between 18 and 70')}
value={age}
min="18"
max="70"
/>
- {/* if (age < 18) {
- The minimum age is 18
- } else if (age > 70) {
- The maximum age is 70
- } else {
- null
- } */}
+
{(age) ? null : This field is required}
setHeight(e.target.value)}
+ onChange={(e) => {
+ changeInput(e);
+ setHeight(e.target.value);
+ }}
+ onInvalid={(e) => validate(e, 'Please enter a valid height. Height must be between 100cm and 200cm')}
value={height}
+ min="100"
+ max="200"
/>
{(height) ? null : This field is required}
- setSkinColor(e.target.value)}
value={skinColor}
- />
+ >
+
+
+
+
+
{(skinColor) ? null : This field is required}
- setHairColor(e.target.value)}
value={hairColor}
- />
+ >
+
+
+
+
+
+
+
+
+
+
+
{(hairColor) ? null : This field is required}
setAge(e.target.value)}
+ name="age"
+ onChange={(e) => {
+ changeInput(e);
+ setAge(e.target.value);
+ }}
+ onInvalid={(e) => validate(e, 'Please enter a valid age. Age must be between 18 and 70')}
value={age}
min="18"
max="70"
+ required
/>
- {/* if (age < 18) {
- The minimum age is 18
- } else if (age > 70) {
- The maximum age is 70
- } else {
- null
- } */}
{(age) ? null : This field is required}
setHeight(e.target.value)}
+ onChange={(e) => {
+ changeInput(e);
+ setHeight(e.target.value);
+ }}
+ onInvalid={(e) => validate(e, 'Please enter a valid height. Height must be between 100cm and 200cm')}
value={height}
+ min="100"
+ max="200"
+ required
/>
{(height) ? null : This field is required}
- setSkinColor(e.target.value)}
+ onChange={(e) => {
+ changeInput(e);
+ setSkinColor(e.target.value);
+ }}
value={skinColor}
- />
+ >
+
+
+
+
+
{(skinColor) ? null : This field is required}
- setHairColor(e.target.value)}
value={hairColor}
- />
+ >
+
+
+
+
+
+
+
+
+
+
{(hairColor) ? null : This field is required}