feat: Add data erasure request form and a new backend API endpoint for message submission.
This commit is contained in:
Van Leemput Dayron
@@ -3,6 +3,8 @@ import cors from 'cors';
|
||||
import dotenv from 'dotenv';
|
||||
import pool from './config/db';
|
||||
|
||||
import messagesRouter from './routes/messages';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
@@ -11,6 +13,8 @@ const port = process.env.PORT || 3000;
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
app.use('/api/messages', messagesRouter);
|
||||
|
||||
// Basic health check
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({ status: 'ok', timestamp: new Date() });
|
||||
|
||||
51
backend/src/routes/messages.ts
Normal file
51
backend/src/routes/messages.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import { Router, Request, Response } from 'express';
|
||||
import pool from '../config/db';
|
||||
import { RowDataPacket, ResultSetHeader } from 'mysql2';
|
||||
|
||||
const router = Router();
|
||||
|
||||
// Validation helper
|
||||
const isValidEmail = (email: string) => {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
};
|
||||
|
||||
router.post('/', async (req: Request, res: Response): Promise<void> => {
|
||||
const { nom, prenom, email, message } = req.body;
|
||||
|
||||
// 1. Validation
|
||||
const errors: string[] = [];
|
||||
|
||||
if (!nom || nom.trim() === '') errors.push('Le nom est requis.');
|
||||
if (!prenom || prenom.trim() === '') errors.push('Le prénom est requis.');
|
||||
if (!email || email.trim() === '') {
|
||||
errors.push("L'email est requis.");
|
||||
} else if (!isValidEmail(email)) {
|
||||
errors.push("L'format de l'email est invalide.");
|
||||
}
|
||||
// if (!message || message.trim() === '') errors.push('Le message est requis.'); // Message is now optional
|
||||
|
||||
if (errors.length > 0) {
|
||||
res.status(400).json({ status: 'error', errors });
|
||||
return;
|
||||
}
|
||||
|
||||
// Default message if empty
|
||||
const messageContent = (!message || message.trim() === '') ? 'Supprimer toutes les données' : message;
|
||||
|
||||
// 2. Insert into Database
|
||||
try {
|
||||
const query = 'INSERT INTO messages (nom, prenom, email, message) VALUES (?, ?, ?, ?)';
|
||||
const [result] = await pool.query<ResultSetHeader>(query, [nom, prenom, email, messageContent]);
|
||||
|
||||
res.status(201).json({
|
||||
status: 'success',
|
||||
message: 'Demande envoyée avec succès.',
|
||||
id: result.insertId
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Error inserting message:', error);
|
||||
res.status(500).json({ status: 'error', message: 'Erreur serveur lors de la sauvegarde.' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
280
frontend/package-lock.json
generated
280
frontend/package-lock.json
generated
@@ -9,6 +9,7 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^4.4.1",
|
||||
"axios": "^1.13.2",
|
||||
"framer-motion": "^12.23.24",
|
||||
"lucide-react": "^0.553.0",
|
||||
"react": "^19.2.0",
|
||||
@@ -2135,6 +2136,23 @@
|
||||
"dev": true,
|
||||
"license": "Python-2.0"
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.13.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
|
||||
"integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.4",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@@ -2211,6 +2229,19 @@
|
||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||
}
|
||||
},
|
||||
"node_modules/call-bind-apply-helpers": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/callsites": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
|
||||
@@ -2295,6 +2326,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@@ -2369,6 +2412,15 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||
@@ -2383,6 +2435,20 @@
|
||||
"node": ">=0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"gopd": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.250",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz",
|
||||
@@ -2390,6 +2456,51 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/es-define-property": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
|
||||
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-errors": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
|
||||
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-object-atoms": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
|
||||
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/es-set-tostringtag": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
|
||||
"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"es-errors": "^1.3.0",
|
||||
"get-intrinsic": "^1.2.6",
|
||||
"has-tostringtag": "^1.0.2",
|
||||
"hasown": "^2.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.25.12",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
|
||||
@@ -2758,6 +2869,42 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
|
||||
"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.23.24",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
|
||||
@@ -2800,6 +2947,15 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/function-bind": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
@@ -2810,6 +2966,43 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/get-intrinsic": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
|
||||
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"call-bind-apply-helpers": "^1.0.2",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"function-bind": "^1.1.2",
|
||||
"get-proto": "^1.0.1",
|
||||
"gopd": "^1.2.0",
|
||||
"has-symbols": "^1.1.0",
|
||||
"hasown": "^2.0.2",
|
||||
"math-intrinsics": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
|
||||
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dunder-proto": "^1.0.1",
|
||||
"es-object-atoms": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
|
||||
@@ -2836,6 +3029,18 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
|
||||
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/graphemer": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
|
||||
@@ -2853,6 +3058,45 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/has-symbols": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
|
||||
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/has-tostringtag": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
|
||||
"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"has-symbols": "^1.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/hasown": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
|
||||
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@@ -3070,6 +3314,15 @@
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/merge2": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
@@ -3094,6 +3347,27 @@
|
||||
"node": ">=8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -3312,6 +3586,12 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emailjs/browser": "^4.4.1",
|
||||
"axios": "^1.13.2",
|
||||
"framer-motion": "^12.23.24",
|
||||
"lucide-react": "^0.553.0",
|
||||
"react": "^19.2.0",
|
||||
|
||||
@@ -2,10 +2,11 @@ import { useState, useEffect } from 'react';
|
||||
import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
|
||||
import { LanguageProvider } from './contexts/LanguageContext';
|
||||
import Header from './components/Header';
|
||||
import Footer from './components/Footer';
|
||||
import Home from './components/Home';
|
||||
import TravelMate from './components/TravelMate';
|
||||
import Footer from './components/Footer';
|
||||
import Policies from './components/Policies';
|
||||
import TravelMate from './components/TravelMate';
|
||||
import EraseData from './components/TravelMate/EraseData';
|
||||
import ScrollToTop from './components/ScrollToTop';
|
||||
import './styles/main.scss';
|
||||
|
||||
@@ -59,8 +60,11 @@ function AppContent() {
|
||||
<main style={{ flex: 1 }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="travelmate" element={<TravelMate />} />
|
||||
<Route path="travelmate/policies" element={<Policies />} />
|
||||
<Route path="/travelmate" element={<TravelMate />} >
|
||||
<Route path="policies" element={<Policies />} />
|
||||
</Route>
|
||||
<Route path="/travelmate/erasedata" element={<EraseData />} />
|
||||
<Route path="/policies" element={<Policies />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -247,6 +247,7 @@ const TravelMate = () => {
|
||||
<h3 style={{ marginBottom: '1.5rem' }}>
|
||||
{t('policies.title')}
|
||||
</h3>
|
||||
<div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate/policies`}
|
||||
className="btn btn-secondary"
|
||||
@@ -259,6 +260,23 @@ const TravelMate = () => {
|
||||
>
|
||||
{t('travelmate.policies.link')}
|
||||
</Link>
|
||||
<Link
|
||||
to={`/${language}/travelmate/erasedata`}
|
||||
className="btn btn-secondary"
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
textDecoration: 'none',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
color: '#EF4444',
|
||||
borderColor: 'rgba(239, 68, 68, 0.2)'
|
||||
}}
|
||||
>
|
||||
<Shield size={18} />
|
||||
{t('travelmate.erasedata.link')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
200
frontend/src/components/TravelMate/EraseData.tsx
Normal file
200
frontend/src/components/TravelMate/EraseData.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { ArrowLeft, Send, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
|
||||
const EraseData = () => {
|
||||
const { t, language } = useLanguage();
|
||||
const [formData, setFormData] = useState({
|
||||
nom: '',
|
||||
prenom: '',
|
||||
email: '',
|
||||
message: '',
|
||||
confirm: false
|
||||
});
|
||||
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.confirm) return;
|
||||
|
||||
setStatus('submitting');
|
||||
setErrorMessage('');
|
||||
|
||||
try {
|
||||
// Using absolute URL for localhost dev, in prod simple /api might work if proxied or configured
|
||||
// Assuming localhost:3000 for backend based on previous steps
|
||||
await axios.post('http://localhost:3000/api/messages', {
|
||||
nom: formData.nom,
|
||||
prenom: formData.prenom,
|
||||
email: formData.email,
|
||||
message: formData.message
|
||||
});
|
||||
setStatus('success');
|
||||
setFormData({ nom: '', prenom: '', email: '', message: '', confirm: false });
|
||||
} catch (error: any) {
|
||||
console.error('Submission error', error);
|
||||
setStatus('error');
|
||||
setErrorMessage(error.response?.data?.message || 'Une erreur est survenue. Veuillez réessayer.');
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="erase-data-page" style={{ paddingTop: '100px', minHeight: '100vh', paddingBottom: '50px' }}>
|
||||
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px' }}>
|
||||
<Link
|
||||
to={`/${language}/travelmate`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '2rem',
|
||||
textDecoration: 'none',
|
||||
color: 'var(--text-color)',
|
||||
opacity: 0.8
|
||||
}}
|
||||
>
|
||||
<ArrowLeft size={18} />
|
||||
{t('policies.back')}
|
||||
</Link>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={containerVariants}
|
||||
style={{
|
||||
background: 'var(--card-bg, rgba(255, 255, 255, 0.05))',
|
||||
padding: '2.5rem',
|
||||
borderRadius: '1.5rem',
|
||||
border: '1px solid var(--border-color, rgba(255, 255, 255, 0.1))',
|
||||
}}
|
||||
>
|
||||
<h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>{t('erasedata.title')}</h1>
|
||||
<p style={{ marginBottom: '2rem', opacity: 0.8, lineHeight: '1.6' }}>
|
||||
{t('erasedata.description')}
|
||||
</p>
|
||||
|
||||
{status === 'success' ? (
|
||||
<div style={{
|
||||
padding: '2rem',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
borderRadius: '1rem',
|
||||
border: '1px solid rgba(16, 185, 129, 0.2)',
|
||||
textAlign: 'center',
|
||||
color: '#10B981'
|
||||
}}>
|
||||
<CheckCircle size={48} style={{ marginBottom: '1rem' }} />
|
||||
<h3>{t('erasedata.success.title')}</h3>
|
||||
<p>{t('erasedata.success.message')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.lastname')}</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.nom}
|
||||
onChange={e => setFormData({ ...formData, nom: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.firstname')}</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.prenom}
|
||||
onChange={e => setFormData({ ...formData, prenom: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.email')}</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={e => setFormData({ ...formData, email: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>{t('erasedata.form.message')}</label>
|
||||
<textarea
|
||||
required={false}
|
||||
rows={4}
|
||||
value={formData.message}
|
||||
onChange={e => setFormData({ ...formData, message: e.target.value })}
|
||||
className="form-input"
|
||||
style={{ width: '100%', padding: '0.8rem', borderRadius: '0.5rem', border: '1px solid var(--border-color)', background: 'rgba(0,0,0,0.2)', color: 'inherit' }}
|
||||
placeholder={t('erasedata.form.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', cursor: 'pointer', opacity: 0.9 }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
required
|
||||
checked={formData.confirm}
|
||||
onChange={e => setFormData({ ...formData, confirm: e.target.checked })}
|
||||
style={{ marginTop: '4px', width: '18px', height: '18px' }}
|
||||
/>
|
||||
<span style={{ fontSize: '0.9rem' }}>
|
||||
{t('erasedata.form.confirm')}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{status === 'error' && (
|
||||
<div style={{ color: '#EF4444', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '0.95rem' }}>
|
||||
<AlertCircle size={16} />
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!formData.confirm || status === 'submitting'}
|
||||
className="btn btn-primary"
|
||||
style={{
|
||||
marginTop: '1rem',
|
||||
padding: '1rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
opacity: (!formData.confirm || status === 'submitting') ? 0.5 : 1,
|
||||
cursor: (!formData.confirm || status === 'submitting') ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{status === 'submitting' ? t('erasedata.form.submitting') : (
|
||||
<>
|
||||
<Send size={18} />
|
||||
{t('erasedata.form.submit')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EraseData;
|
||||
@@ -172,7 +172,22 @@ const translations = {
|
||||
'travelmate.tech.api.3': 'CI/CD avec Gitea Actions',
|
||||
'travelmate.viewCode': 'Voir le code',
|
||||
|
||||
// Erase Data Page
|
||||
'erasedata.title': 'Demande de suppression de données',
|
||||
'erasedata.description': 'Conformément au RGPD et à notre politique de confidentialité, vous pouvez demander la suppression de vos données personnelles associées à Travel Mate. Veuillez remplir le formulaire ci-dessous.',
|
||||
'erasedata.success.title': 'Demande envoyée avec succès',
|
||||
'erasedata.success.message': 'Nous traiterons votre demande dans les plus brefs délais.',
|
||||
'erasedata.form.lastname': 'Nom',
|
||||
'erasedata.form.firstname': 'Prénom',
|
||||
'erasedata.form.email': 'Email du compte à supprimer',
|
||||
'erasedata.form.message': 'Message / Raison (Optionnel)',
|
||||
'erasedata.form.placeholder': 'Je souhaite supprimer mon compte car...',
|
||||
'erasedata.form.confirm': 'Je confirme vouloir supprimer mes données personnelles. Je comprends que cette action est irréversible et entraînera la perte de l\'accès à mon compte Travel Mate.',
|
||||
'erasedata.form.submit': 'Envoyer la demande',
|
||||
'erasedata.form.submitting': 'Envoi en cours...',
|
||||
|
||||
'travelmate.policies.link': 'Voir les politiques de confidentialité',
|
||||
'travelmate.erasedata.link': 'Supprimer mes données',
|
||||
|
||||
// Policies Page
|
||||
'policies.back': 'Retour',
|
||||
@@ -378,7 +393,22 @@ const translations = {
|
||||
'travelmate.tech.api.3': 'CI/CD with Gitea Actions',
|
||||
'travelmate.viewCode': 'View Code',
|
||||
|
||||
// Erase Data Page
|
||||
'erasedata.title': 'Data Erasure Request',
|
||||
'erasedata.description': 'In accordance with GDPR and our privacy policy, you can request the deletion of your personal data associated with Travel Mate. Please fill out the form below.',
|
||||
'erasedata.success.title': 'Request sent successfully',
|
||||
'erasedata.success.message': 'We will process your request as soon as possible.',
|
||||
'erasedata.form.lastname': 'Last Name',
|
||||
'erasedata.form.firstname': 'First Name',
|
||||
'erasedata.form.email': 'Account Email to Delete',
|
||||
'erasedata.form.message': 'Message / Reason (Optional)',
|
||||
'erasedata.form.placeholder': 'I wish to delete my account because...',
|
||||
'erasedata.form.confirm': 'I confirm that I want to delete my personal data. I understand that this action is irreversible and will result in the loss of access to my Travel Mate account.',
|
||||
'erasedata.form.submit': 'Send Request',
|
||||
'erasedata.form.submitting': 'Sending...',
|
||||
|
||||
'travelmate.policies.link': 'View Privacy Policy',
|
||||
'travelmate.erasedata.link': 'Request Data Erasure',
|
||||
|
||||
// Policies Page
|
||||
'policies.back': 'Back',
|
||||
|
||||
@@ -134,6 +134,19 @@ p {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
// Classes globales pour les boutons
|
||||
.btn {
|
||||
@include button-base();
|
||||
|
||||
&-primary {
|
||||
@include button-primary();
|
||||
}
|
||||
|
||||
&-secondary {
|
||||
@include button-secondary();
|
||||
}
|
||||
}
|
||||
|
||||
// Classes utilitaires
|
||||
.container {
|
||||
max-width: map-get($breakpoints, xl);
|
||||
|
||||
Reference in New Issue
Block a user