docker-compose.yml.dev

@@ -20,7 +20,11 @@ services:
       - mymusiclibrary-db
     environment:
       NODE_ENV: ${NODE_ENV}
+      PORT: ${PORT}
+      MONGODB_URI: ${MONGODB_URI}
+      SECRET: ${SECRET}
       DISCOGS_TOKEN: ${DISCOGS_TOKEN}
+      FORMSPREE_ID: ${FORMSPREE_ID}
     networks:
       - mymusiclibrary
   mymusiclibrary-db:

docker-compose.yml.prod

@@ -20,7 +20,11 @@ services:
       - mymusiclibrary-db
     environment:
       NODE_ENV: ${NODE_ENV}
+      PORT: ${PORT}
+      MONGODB_URI: ${MONGODB_URI}
+      SECRET: ${SECRET}
       DISCOGS_TOKEN: ${DISCOGS_TOKEN}
+      FORMSPREE_ID: ${FORMSPREE_ID}
     networks:
       - mymusiclibrary
   mymusiclibrary-db:

sass/error.scss

@@ -0,0 +1,10 @@
+.error {
+    min-height: calc(100vh - 3.25rem - 100px);
+    padding-top: 4rem;
+
+    pre {
+        padding: 0.75rem;
+        border: 1px dotted #cecccc;
+        background: #f9f9f9;
+    }
+}

sass/forms.scss

@@ -24,6 +24,7 @@
         font-weight: 800;
     }
     input,
+    textarea,
     select {
         border-radius: 0.375rem;
         box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);

sass/index.scss

@@ -36,7 +36,9 @@
 @import './pagination';
 @import './icons';
 
+@import './error';
 @import './home';
 @import './connexion';
 @import './ajouter-un-album';
-@import './ma-collection';
+@import './ma-collection';
+@import './nous-contacter';

sass/nous-contacter.scss

@@ -0,0 +1,15 @@
+.nous-contacter {
+    width: calc(100% - 2rem);
+    margin: 2rem auto;
+
+    @include respond-to("small-up") {
+        width: 55%;
+    }
+    @include respond-to("medium-up") {
+        width: 35%;
+    }
+
+    button {
+        margin-top: 2rem;
+    }
+}

src/config/index.js

@@ -1,3 +1,5 @@
+console.log("formspreeId: process.env.FORMSPREE_ID:", process.env.FORMSPREE_ID);
+
 module.exports = {
     nodeEnv: process.env.NODE_ENV || "development",
     port: parseInt(process.env.PORT || "3001", 10),
@@ -5,4 +7,5 @@ module.exports = {
         process.env.MONGODB_URI || "mongodb://mymusiclibrary-db/mymusiclibrary",
     secret: process.env.SECRET || "waemaeMe5ahc6ce1chaeKohKa6Io8Eik",
     discogsToken: process.env.DISCOGS_TOKEN,
+    formspreeId: process.env.FORMSPREE_ID,
 };

src/routes/index.js

@@ -107,6 +107,18 @@ router
         }
     });
 
+router.route("/nous-contacter").get(async (req, res, next) => {
+    try {
+        const page = new Albums(req, "nous-contacter");
+
+        await page.loadMyCollection();
+
+        render(res, page);
+    } catch (err) {
+        next(err);
+    }
+});
+
 router.route("/se-deconnecter").get((req, res) => {
     req.logout();
     req.session.destroy(() => {

views/error.ejs

@@ -1,11 +1,11 @@
-<div class="container">
+<main class="layout-maxed error">
-    <section class="px-md-5 mx-md-5 dark-grey-text mb-4">
+    <h1><%= page.title %></h1>
-        <h1><%= page.title %></h1>
+    <% if ( errorCode && errorCode === 404 ) { %>
-        <% if ( errorCode && errorCode === 404 ) { %>
+    <p class="text-center">
-            <img src="/img/404.svg" alt="Erreur 404" style="max-height: 400px;" />
+        <img src="/img/404.svg" alt="Erreur 404" style="max-height: 400px;" />
-        <% } %>
+    </p>
-        <pre>
+    <% } %>
-            <%= page.error %>
+    <div>
-        </pre>
+        <pre><%= page.error %></pre>
-    </section>
+    </div>
-</div>
+</main>

views/index.ejs

@@ -86,6 +86,9 @@
                 <% } %>
           
                 <div class="navbar-end">
+                    <a class="navbar-item" href="/nous-contacter">
+                        Nous contacter
+                    </a>
                     <% if ( user ) { %>
                     <div class="navbar-item has-dropdown">
                         <a class="navbar-link">

views/pages/nous-contacter.ejs

@@ -0,0 +1,22 @@
+<section class="nous-contacter">
+    <h1>Nous contacter</h1>
+    <form action="https://formspree.io/f/<%= config.formspreeId %>" method="POST">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
+            <div class="field">
+                <label for="email">Addresse e-mail*</label>
+                <input type="email" name="email" id="email" required />
+            </div>
+            <div class="field">
+                <label for="name">Prénom, nom</label>
+                <input type="text" name="name" id="name" />
+            </div>
+        </div>
+        
+        <div class="field">
+            <label for="message">Message*</label>
+            <textarea name="message" id="message" rows="6" required ></textarea>
+        </div>
+        
+        <button type="submit" class="button is-primary">Envoyer</button>
+    </form>
+</section>