From 9172c7da11121195c5dc0ddd08db33d4084ba827 Mon Sep 17 00:00:00 2001
From: mhdaltaweel <mohamad.altaweel91@gmail.com>
Date: Sun, 19 Nov 2023 16:45:25 +0100
Subject: [PATCH] creation compt e sans la base
---
app.js | 17 +++++
db/Database.js | 2 +
package-lock.json | 141 +++++++++++++++++++++++++++++++++++-
package.json | 3 +-
public/css/signup-style.css | 63 ++++++++++++++++
views/partials/footer.ejs | 6 ++
views/partials/header.ejs | 5 ++
views/signup.ejs | 33 +++++++++
8 files changed, 268 insertions(+), 2 deletions(-)
create mode 100644 public/css/signup-style.css
create mode 100644 views/partials/footer.ejs
create mode 100644 views/partials/header.ejs
create mode 100644 views/signup.ejs
diff --git a/app.js b/app.js
index e1232f3..e6f694f 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 08693a1..82f40cb 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 77fc4b1..ec38bde 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 75ec0ec..31f4d03 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 0000000..3e55e4b
--- /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 0000000..7a13595
--- /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 0000000..198f0c6
--- /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 0000000..b914845
--- /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>
--
GitLab