diff --git a/app.js b/app.js index e1232f3b11156193f35770bef5ee0943a9cc84f9..e6f694fb56b33102065e1d13a49f652eaa21c169 100644 --- a/app.js +++ b/app.js @@ -3,16 +3,33 @@ const express = require('express'); const app = express(); const db = require('./db/Database.js'); + + + //Configuration const viewsPath = path.join(__dirname, 'views'); app.set("views", viewsPath); app.set("view engine", "ejs"); +// Ajoute ceci pour les fichiers statiques depuis le dossier public +app.use(express.static(path.join(__dirname, 'public'))); + //chemin d'accès app.get("/", defaut).get("/accueil",defaut); app.get("/db/:collection", collection).get("/db", dbAdmin); + + +//route pour creation compte +app.get("/signup" , (req ,res)=>{ + res.render("signup", { title: 'Inscription' }); +}); + app.all("*", (req, res) => res.status(404).send("<h1>Il semblerait que cette page n'existe pas.</h1>")); + + + + function defaut(req, res){ const ind = {method : req.method, url : req.url} res.render("index",ind); diff --git a/db/Database.js b/db/Database.js index 08693a157d1afd6915ba68ca58110fcd19feb36f..82f40cb04dfab819d498d98217c37557d281975e 100644 --- a/db/Database.js +++ b/db/Database.js @@ -1,3 +1,5 @@ + + const {MongoClient} = require('mongodb'); class Database{ diff --git a/package-lock.json b/package-lock.json index 77fc4b1cdc0fab107c3c71758964310788e36879..ec38bdef567801c6f8c22b528ba7cba7cc0656e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "dependencies": { "ejs": "^3.1.9", "express": "^4.18.2", - "mongodb": "^6.2.0" + "mongodb": "^6.2.0", + "mongoose": "^8.0.1" } }, "node_modules/@mongodb-js/saslprep": { @@ -534,6 +535,14 @@ "node": ">=10" } }, + "node_modules/kareem": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz", + "integrity": "sha512-7jFxRVm+jD+rkq3kY0iZDJfsO2/t4BBPeEb2qKn2lR/9KhuksYk5hxzfRYWMPV8P/x2d0kHD306YyWLzjjH+uA==", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -655,6 +664,72 @@ "whatwg-url": "^11.0.0" } }, + "node_modules/mongoose": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.1.tgz", + "integrity": "sha512-O3TJrtLCt4H1eGf2HoHGcnOcCTWloQkpmIP3hA9olybX3OX2KUjdIIq135HD5paGjZEDJYKn9fw4eH5N477zqQ==", + "dependencies": { + "bson": "^6.2.0", + "kareem": "2.5.1", + "mongodb": "6.2.0", + "mpath": "0.9.0", + "mquery": "5.0.0", + "ms": "2.1.3", + "sift": "16.0.1" + }, + "engines": { + "node": ">=16.20.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mongoose" + } + }, + "node_modules/mongoose/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/mpath": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz", + "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==", + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/mquery": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz", + "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==", + "dependencies": { + "debug": "4.x" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/mquery/node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/mquery/node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + }, "node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -854,6 +929,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/sift": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/sift/-/sift-16.0.1.tgz", + "integrity": "sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ==" + }, "node_modules/sparse-bitfield": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz", @@ -1363,6 +1443,11 @@ "minimatch": "^3.1.2" } }, + "kareem": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.5.1.tgz", + "integrity": "sha512-7jFxRVm+jD+rkq3kY0iZDJfsO2/t4BBPeEb2qKn2lR/9KhuksYk5hxzfRYWMPV8P/x2d0kHD306YyWLzjjH+uA==" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -1428,6 +1513,55 @@ "whatwg-url": "^11.0.0" } }, + "mongoose": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.0.1.tgz", + "integrity": "sha512-O3TJrtLCt4H1eGf2HoHGcnOcCTWloQkpmIP3hA9olybX3OX2KUjdIIq135HD5paGjZEDJYKn9fw4eH5N477zqQ==", + "requires": { + "bson": "^6.2.0", + "kareem": "2.5.1", + "mongodb": "6.2.0", + "mpath": "0.9.0", + "mquery": "5.0.0", + "ms": "2.1.3", + "sift": "16.0.1" + }, + "dependencies": { + "ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + } + } + }, + "mpath": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz", + "integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==" + }, + "mquery": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/mquery/-/mquery-5.0.0.tgz", + "integrity": "sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==", + "requires": { + "debug": "4.x" + }, + "dependencies": { + "debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "requires": { + "ms": "2.1.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + } + } + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -1573,6 +1707,11 @@ "object-inspect": "^1.9.0" } }, + "sift": { + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/sift/-/sift-16.0.1.tgz", + "integrity": "sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ==" + }, "sparse-bitfield": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz", diff --git a/package.json b/package.json index 75ec0ec33106ecb66e803668bb85e94b4bbec89d..31f4d0330fdbd4fbcde4d58e21fc40eb21e86db8 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "ejs": "^3.1.9", "express": "^4.18.2", - "mongodb": "^6.2.0" + "mongodb": "^6.2.0", + "mongoose": "^8.0.1" } } diff --git a/public/css/signup-style.css b/public/css/signup-style.css new file mode 100644 index 0000000000000000000000000000000000000000..3e55e4be03fbace171201812a378ab6c90f41717 --- /dev/null +++ b/public/css/signup-style.css @@ -0,0 +1,63 @@ +body, html { + height: 100%; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #f4f4f4; + } + + /* Conteneur pour la page signup, qui utilisera flex pour centrer le formulaire */ + .container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; /* Hauteur de la fenêtre de visualisation pour centrer verticalement */ + } + + .signup-form { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 100%; /* définir une largeur maximale si nécessaire */ + max-width: 320px; /* Une largeur maximale pour que le formulaire ne soit pas trop large */ + } + + +label { + display: block; + margin-bottom: 5px; +} + +input[type="text"], input[type="password"], input[type="email"] { + width: 100%; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + box-sizing: border-box; +} + +button { + background-color: #007bff; + color: white; + padding: 10px 15px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} + +/* Styles supplémentaires pour header et footer */ +header, footer { + text-align: center; + width: 100%; + } + + footer { + position: absolute; + bottom: 0; + left: 0; + } diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs new file mode 100644 index 0000000000000000000000000000000000000000..7a135954989f553a927af19669b6c45d68a2bca3 --- /dev/null +++ b/views/partials/footer.ejs @@ -0,0 +1,6 @@ +<footer> + <!-- Contenu de ton pied de page ici --> + <p> this is footer</p> +</footer> +</body> +</html> diff --git a/views/partials/header.ejs b/views/partials/header.ejs new file mode 100644 index 0000000000000000000000000000000000000000..198f0c617ecfdcfc721126d05b815cc36b51c8af --- /dev/null +++ b/views/partials/header.ejs @@ -0,0 +1,5 @@ + + <header> + <!-- Contenu de ton en-tête ici --> + <p>this is header</p> + </header> diff --git a/views/signup.ejs b/views/signup.ejs new file mode 100644 index 0000000000000000000000000000000000000000..b9148455b8bec736644a1933b50deec6e6f8dcfa --- /dev/null +++ b/views/signup.ejs @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Signup Page</title> + <link rel="stylesheet" href="/css/signup-style.css"> +</head> +<body> + <%- include('partials/header') %> + <div class="container"> + <div class="signup-form"> + <h2>Inscription</h2> + <form action="/signup" method="post"> + <div class="form-group"> + <label for="username">Nom d'utilisateur</label> + <input type="text" id="username" name="username" required> + </div> + <div class="form-group"> + <label for="email">Email</label> + <input type="email" id="email" name="email" required> + </div> + <div class="form-group"> + <label for="password">Mot de passe</label> + <input type="password" id="password" name="password" required> + </div> + <button type="submit">S'inscrire</button> + </form> + </div> + </div> +</body> + <%- include('partials/footer') %> +</html>