ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-10-28 09:53:04 +01:00
parent 3367fea887
commit 34172beb12
14 changed files with 2407 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
06_react/uebungen/u17-18_validator-blur/package-lock.json
Generated
+2273
View File
File diff suppressed because it is too large Load Diff
06_react/uebungen/u17-18_validator-blur/package.json
+2 -1
View File
@@ -14,7 +14,8 @@
"react": "^19.3.1",
"react-dom": "^19.3.1",
"react-icons": "^5.7.0",
"react-router-dom": "^7.18.4"
"react-router-dom": "^7.18.5",
"validator": "^13.15.35"
},
"devDependencies": {
"@types/react": "^19.3.0",
06_react/uebungen/u17-18_validator-blur/src/components/forms/FormContact.jsx
+31 -13
View File
@@ -1,15 +1,17 @@
import { useState } from 'react';
import validate from '../../utils/validators/validate';
const INITIAL_FORM_DATA = {
firstname: '', //
lastname: '',
email: '',
message: '',
};
const FormContact = (props) => {
// const { } = props;
const [formData, setFormData] = useState({
firstname: '', //
lastname: '',
email: '',
message: '',
});
const [formData, setFormData] = useState(INITIAL_FORM_DATA);
const [errors, setErrors] = useState({});
@@ -25,12 +27,7 @@ const FormContact = (props) => {
console.log('Form submitted ....');
// TODO: send over AJAX/Fetch
form.reset();
setFormData({
firstname: '', //
lastname: '',
email: '',
message: '',
});
setFormData(INITIAL_FORM_DATA);
setErrors({});
} else {
console.warn('Form submit error');
@@ -47,6 +44,23 @@ const FormContact = (props) => {
// console.log('Formdata', formData);
};
const handleBlur = (e) => {
const { name, value } = e.target;
const validationErrors = validate({ ...formData, [name]: value });
setErrors((state) => {
const nextErrors = { ...state };
if (validationErrors[name]) {
nextErrors[name] = validationErrors[name];
} else {
delete nextErrors[name];
}
return nextErrors;
});
};
return (
<form className="m-form-contact form-contact" noValidate onSubmit={handleSubmit}>
<div className="row">
@@ -62,6 +76,7 @@ const FormContact = (props) => {
className={`form-control input-firstname ${errors.firstname ? 'is-invalid' : ''}`}
value={formData.firstname}
onChange={handleChange}
onBlur={handleBlur}
/>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.firstname}</div>
@@ -79,6 +94,7 @@ const FormContact = (props) => {
className={`form-control input-lastname ${errors.lastname ? 'is-invalid' : ''}`}
value={formData.lastname}
onChange={handleChange}
onBlur={handleBlur}
/>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.lastname}</div>
@@ -99,6 +115,7 @@ const FormContact = (props) => {
className={`form-control input-email ${errors.email ? 'is-invalid' : ''}`}
value={formData.email}
onChange={handleChange}
onBlur={handleBlur}
/>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.email}</div>
@@ -119,7 +136,8 @@ const FormContact = (props) => {
id="textarea-message"
className={`form-control textarea-message ${errors.message ? 'is-invalid' : ''}`}
value={formData.message}
onChange={handleChange}></textarea>
onChange={handleChange}
onBlur={handleBlur}></textarea>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.message}</div>
</div>
06_react/uebungen/u17-18_validator-blur/src/utils/validators/validate.js
+17 -8
View File
@@ -1,25 +1,34 @@
import validator from 'validator';
const validate = (formData) => {
const errors = {};
const emailRegEx = new RegExp(
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
);
const firstname = formData.firstname.trim();
const lastname = formData.lastname.trim();
const email = formData.email.trim();
const message = formData.message.trim();
if (!formData.firstname) {
if (validator.isEmpty(firstname)) {
errors.firstname = 'Firstname is required';
} else if (!validator.isLength(firstname, { min: 2, max: 50 })) {
errors.firstname = 'Firstname must be between 2 and 50 characters';
}
if (!formData.lastname) {
if (validator.isEmpty(lastname)) {
errors.lastname = 'Lastname is required';
} else if (!validator.isLength(lastname, { min: 2, max: 60 })) {
errors.lastname = 'Lastname must be between 2 and 60 characters';
}
if (!formData.email) {
if (validator.isEmpty(email)) {
errors.email = 'Email is required';
} else if (!emailRegEx.test(formData.email)) {
} else if (!validator.isEmail(email)) {
errors.email = 'Email is invalid';
}
if (!formData.message) {
if (validator.isEmpty(message)) {
errors.message = 'Message is required';
} else if (!validator.isLength(message, { min: 10, max: 1000 })) {
errors.message = 'Message must be between 10 and 1000 characters';
}
return errors;
06_react/unterricht/tag37/01_react-with-routes/.env-sample
+2
View File
@@ -0,0 +1,2 @@
# VITE_ als Präfix notwendig
VITE_SECRET_TOKEN="secret-token"
06_react/unterricht/tag37/01_react-with-routes/package-lock.json
Generated
+8 -8
View File
@@ -12,7 +12,7 @@
"react": "^19.3.1",
"react-dom": "^19.3.1",
"react-icons": "^5.7.0",
"react-router-dom": "^7.18.4"
"react-router-dom": "^7.18.5"
},
"devDependencies": {
"@types/react": "^19.3.0",
@@ -1615,9 +1615,9 @@
}
},
"node_modules/react-router": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
"integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
"version": "7.18.5",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.5.tgz",
"integrity": "sha512-dTgvcXDOrLPrlLHrcZAqWveiK1hMSqN+rGAJzegP8HtmNkfRxOoshGWBNX3ZJ0cZjOHkRdlUJtaIhZMLLyGyPw==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
@@ -1637,12 +1637,12 @@
}
},
"node_modules/react-router-dom": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
"integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
"version": "7.18.5",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.5.tgz",
"integrity": "sha512-9HcfDMU6JJ/fp6gJZYGwNE6RknVGS4kBjH1HkNw959mCJi70TVwdipQWv2FEol9uGpi+SZTFtVpJPtEQfayeOw==",
"license": "MIT",
"dependencies": {
"react-router": "7.18.4"
"react-router": "7.18.5"
},
"engines": {
"node": ">=20.0.0"
06_react/unterricht/tag37/01_react-with-routes/package.json
+1 -1
View File
@@ -14,7 +14,7 @@
"react": "^19.3.1",
"react-dom": "^19.3.1",
"react-icons": "^5.7.0",
"react-router-dom": "^7.18.4"
"react-router-dom": "^7.18.5"
},
"devDependencies": {
"@types/react": "^19.3.0",
06_react/unterricht/tag37/01_react-with-routes/src/main.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'; // js
import 'bootstrap/dist/js/bootstrap.bundle.js'; // js
// import './styles/main.scss';
const root = createRoot(document.getElementById('root'));
06_react/unterricht/tag37/01_react-with-routes/src/routes/Router.jsx
+7 -2
View File
@@ -20,8 +20,13 @@ import UserPage from '../pages/UserPage';
// <RouterProvider router={router}>{/*<App />*/}</RouterProvider>;
const checkAuth = () => {
// localStorage.setItem('token', 'secret-token'); // wird in localStorage nach erfolgreicher Anmeldung abgelegt
const passToken = import.meta.env.VITE_SECRET_TOKEN;
console.log(passToken);
const token = localStorage.getItem('token');
return token && token === 'secret-token' ? true : false;
return token && token === passToken ? true : false;
};
const ProtectedRoute = (props) => {
@@ -55,7 +60,7 @@ const Router = () => {
<Route path="/user" element={<UserPage />}>
<Route index element={<h5>Index</h5>} />
<Route path="profile" element={<h5>Profile</h5>} />
<Route path="profile/:userId" element={<UserProfilePage />} />
<Route path="dashboard" element={<h5>Dashboard</h5>} />
<Route path="settings" element={<h5>Settings</h5>} />
</Route>
06_react/unterricht/tag37/02_react-with-forms/package-lock.json
Generated
+8 -8
View File
@@ -13,7 +13,7 @@
"react-dom": "^19.3.1",
"react-hook-form": "^7.91.0",
"react-icons": "^5.7.0",
"react-router-dom": "^7.18.4"
"react-router-dom": "^7.18.5"
},
"devDependencies": {
"@types/react": "^19.3.0",
@@ -1638,9 +1638,9 @@
}
},
"node_modules/react-router": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
"integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
"version": "7.18.5",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.5.tgz",
"integrity": "sha512-dTgvcXDOrLPrlLHrcZAqWveiK1hMSqN+rGAJzegP8HtmNkfRxOoshGWBNX3ZJ0cZjOHkRdlUJtaIhZMLLyGyPw==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
@@ -1660,12 +1660,12 @@
}
},
"node_modules/react-router-dom": {
"version": "7.18.4",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
"integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
"version": "7.18.5",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.5.tgz",
"integrity": "sha512-9HcfDMU6JJ/fp6gJZYGwNE6RknVGS4kBjH1HkNw959mCJi70TVwdipQWv2FEol9uGpi+SZTFtVpJPtEQfayeOw==",
"license": "MIT",
"dependencies": {
"react-router": "7.18.4"
"react-router": "7.18.5"
},
"engines": {
"node": ">=20.0.0"
06_react/unterricht/tag37/02_react-with-forms/package.json
+1 -1
View File
@@ -15,7 +15,7 @@
"react-dom": "^19.3.1",
"react-hook-form": "^7.91.0",
"react-icons": "^5.7.0",
"react-router-dom": "^7.18.4"
"react-router-dom": "^7.18.5"
},
"devDependencies": {
"@types/react": "^19.3.0",
06_react/unterricht/tag37/02_react-with-forms/src/components/forms/FormContact.jsx
+5 -2
View File
@@ -24,7 +24,7 @@ const FormContact = (props) => {
// AJAX/FETCH send to server
console.log('FormData: ', formData);
setFormData(INITIAL_FORM_DATA); // reset
form.reset(); // not necessary in react
// e.currentTarget.reset(); // not necessary in react
setErrors({});
} else {
console.error('Form submit error');
@@ -39,7 +39,7 @@ const FormContact = (props) => {
setFormData((state) => ({ ...state, [name]: value }));
// console.log({ [e.target.name]: e.target.value });
// console.log('formData: ', formData);
console.log('formData: ', formData);
};
return (
@@ -72,6 +72,7 @@ const FormContact = (props) => {
name="lastname"
id="input-lastname"
onChange={handleChange}
value={formData.lastname}
className={`form-control ${errors.lastname ? 'is-invalid' : ''}`}
/>
<div className="invalid-feedback">{errors?.lastname || 'Error'}</div>
@@ -89,6 +90,7 @@ const FormContact = (props) => {
id="input-email"
name="email"
onChange={handleChange}
value={formData.email}
className={`form-control ${errors.email ? 'is-invalid' : ''}`}
/>
<div className="invalid-feedback">{errors?.email || 'Error'}</div>
@@ -107,6 +109,7 @@ const FormContact = (props) => {
cols="30"
rows="5"
onChange={handleChange}
value={formData.message}
className={`form-control ${errors.message ? 'is-invalid' : ''}`}></textarea>
<div className="invalid-feedback">{errors?.message || 'Error'}</div>
</div>
06_react/unterricht/tag37/02_react-with-forms/src/components/forms/react-hook-form/FormContact.jsx
+50 -34
View File
@@ -1,27 +1,41 @@
import { useState } from 'react';
import { useForm } from 'react-hook-form';
// import validate from '../../../utils/validators/validate';
const FormContact = (props) => {
// const { } = props;
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
// EventHandlers
// EventHandlers =======
const onSubmit = (data) => {
// Event wird nur getriggert, wenn kein Fehler
console.log('submitted');
console.log();
if (errors) {
console.log(errors);
}
console.log('Form data:', data);
// fetch('/send', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json',
// },
// body: JSON.stringify(data),
// })
// .then((res) => res.json())
// .then((data) => console.log(data))
// .catch((err) => console.error(err));
};
if (errors) {
console.log(errors);
}
return (
<form className="m-form-contact form-contact" noValidate={true} onSubmit={handleSubmit(onSubmit)}>
<form className="m-form-contact form-contact" noValidate onSubmit={handleSubmit(onSubmit)}>
<div className="row">
<div className="col-12 col-sm-6">
<div className="col-12 col-md">
<div className="mb-3">
<label htmlFor="input-firstname" className="form-label">
Firstname
@@ -31,17 +45,17 @@ const FormContact = (props) => {
name="firstname"
id="input-firstname"
{...register('firstname', {
required: 'Firstname is required',
mixLength: { value: 2, message: 'Firstname must have at least 2 characters.' },
required: 'Firstname is invalid',
minLength: { value: 2, message: 'Firstname must have at least 2 Characters' },
maxLength: 60,
})}
className={`form-control ${errors.firstname ? 'is-invalid' : ''}`}
className={`form-control input-firstname ${errors.firstname ? 'is-invalid' : ''}`}
/>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.firstname?.message || 'Error'}</div>
</div>
</div>
<div className="col-12 col-sm-6">
<div className="col-12 col-md">
<div className="mb-3">
<label htmlFor="input-lastname" className="form-label">
Lastname
@@ -50,38 +64,37 @@ const FormContact = (props) => {
type="text"
name="lastname"
id="input-lastname"
{...register('lastname', {
required: 'Lastname is required',
mixLength: { value: 2, message: 'Lastname must have at least 2 characters.' },
maxLength: 80,
})}
className={`form-control ${errors.lastname ? 'is-invalid' : ''}`}
{...register('lastname', { required: 'Lastname is invalid' })}
className={`form-control input-lastname ${errors.lastname ? 'is-invalid' : ''}`}
/>
<div className="invalid-feedback">{errors?.lastname?.message || 'Error'}</div>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.lastname?.message}</div>
</div>
</div>
</div>
<div className="row">
<div className="col">
<div className="mb-3">
<label htmlFor="input-email" className="form-label">
Email
E-Mail
</label>
<input
type="email"
id="input-email"
name="email"
id="input-email"
{...register('email', {
required: 'Email is not valid',
pattern:
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
required: 'Email is required!!!',
pattern: { value: /^\S+@\S+\.\S+$/, message: 'Invalid email' },
})}
className={`form-control ${errors.email ? 'is-invalid' : ''}`}
className={`form-control input-email ${errors.email ? 'is-invalid' : ''}`}
/>
<div className="invalid-feedback">{errors?.email?.message || 'Error'}</div>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">Email is required</div>
</div>
</div>
</div>
<div className="row">
<div className="col">
<div className="mb-3">
@@ -90,24 +103,27 @@ const FormContact = (props) => {
</label>
<textarea
name="message"
cols={4}
rows={6}
id="textarea-message"
cols="30"
rows="5"
{...register('message', {
required: 'Message invalid',
minLength: { value: 10, message: 'Message to short' },
maxLength: { value: 1000, message: 'Message to long' },
})}
className={`form-control ${errors.message ? 'is-invalid' : ''}`}></textarea>
<div className="invalid-feedback">{errors?.message?.message || 'Error'}</div>
className={`form-control textarea-message ${errors.message ? 'is-invalid' : ''}`}></textarea>
<div className="valid-feedback">OK</div>
<div className="invalid-feedback">{errors?.message?.message}</div>
</div>
</div>
</div>
<div className="row">
<div className="col">
<button type="submit" className="btn btn-dark button-send-contact">
Send
</button>
<div className="mb-3">
<button type="submit" className="btn btn-dark button-form-send">
Send Message
</button>
</div>
</div>
</div>
</form>
06_react/unterricht/tag37/02_react-with-forms/src/utils/validators/validate.js
+1 -1
View File
@@ -1,4 +1,4 @@
const validate = (formData) => {
const validate = (formData, requiredFiedls = []) => {
const errors = {};
const emailRegExp = new RegExp(