mdb to bulma + view my collection

.gitignore

@@ -121,3 +121,4 @@ dist
 dist
 yarn.lock
 public/css
+public/css

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "start": "node ./dist/bin/www",
     "dev": "npm-run-all build sass start",
-    "watch": "nodemon",
+    "watch": "nodemon -e js,scss",
-    "sass": "npx sass sass/*.scss public/css/main.css -s compressed",
+    "sass": "npx sass sass/index.scss public/css/main.css -s compressed",
     "prebuild": "rimraf dist",
     "build": "babel ./src --out-dir dist --copy-files",
     "test": "jest",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "axios": "^0.26.0",
+    "bulma": "^0.9.3",
     "connect-ensure-login": "^0.1.1",
     "connect-flash": "^0.1.1",
     "connect-mongo": "^4.6.0",
@@ -53,8 +54,6 @@
     "ejs": "^3.1.6",
     "express": "^4.17.2",
     "express-session": "^1.17.2",
-    "jquery": "^3.6.0",
-    "mdb-ui-kit": "^3.10.2",
     "moment": "^2.29.1",
     "mongoose": "^6.2.1",
     "mongoose-unique-validator": "^3.0.0",
@@ -67,7 +66,8 @@
   "nodemonConfig": {
     "exec": "npm run dev",
     "watch": [
-      "src/*"
+      "src/*",
+      "sass/*"
     ],
     "ignore": [
       "**/__tests__/**",

public/css/main.css

@@ -1 +0,0 @@
-#toastr{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#9c3030;color:#fff;text-align:left;border-radius:2px;padding:16px;position:fixed;z-index:1;right:30px;top:30px;font-size:17px}#toastr.show{visibility:visible;animation:toastrFadein .5s,toastrFadeout .5s 2.5s}@keyframes toastrFadein{from{top:0;opacity:0}to{top:30px;opacity:1}}@keyframes toastrFadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}/*# sourceMappingURL=main.css.map */

sass/bulma.scss

@@ -0,0 +1 @@
+@use '../node_modules/bulma/bulma.sass';

sass/index.scss

@@ -0,0 +1,3 @@
+@use './bulma.scss';
+@use './toast.scss';
+@use './pagination.scss';

sass/pagination.scss

@@ -0,0 +1,15 @@
+.pagination-link, 
+.pagination-link, 
+.pagination-next, 
+.pagination-next, 
+.pagination-previous, 
+.pagination-previous {
+  &.is-disabled,
+  &[disabled] {
+    background-color: #dbdbdb;
+    border-color: #dbdbdb;
+    box-shadow: none;
+    color: #7a7a7a;
+    opacity: .5;
+  }
+}

sass/toast.scss

@@ -1,14 +1,9 @@
 #toastr {
     visibility: hidden;
     min-width: 250px;
-    margin-left: -125px;
+    max-width: 360px;
-    background-color: rgb(156, 48, 48);
-    color: #fff;
-    text-align: left;
-    border-radius: 2px;
-    padding: 16px;
     position: fixed;
-    z-index: 1;
+    z-index: 31;
     right: 30px;
     top: 30px;
     font-size: 17px;

src/app.js

@@ -9,6 +9,8 @@ import MongoStore from "connect-mongo";
 
 import config, { env, mongoDbUri, secret } from "./config";
 
+import { isXhr } from "./helpers";
+
 import indexRouter from "./routes";
 import addAlbumRouter from "./routes/addAlbum";
 import importRouterApiV1 from "./routes/api/v1";
@@ -68,18 +70,6 @@ app.set("views", path.join(__dirname, "../views"));
 app.set("view engine", "ejs");
 
 app.use(express.static(path.join(__dirname, "../public")));
-app.use(
-    "/libs/jquery",
-    express.static(path.join(__dirname, "../node_modules/jquery/dist/"))
-);
-app.use(
-    "/libs/mdb-ui-kit/css",
-    express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/css"))
-);
-app.use(
-    "/libs/mdb-ui-kit/js",
-    express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/js"))
-);
 app.use(
     "/libs/vue",
     express.static(path.join(__dirname, "../node_modules/vue/dist"))
@@ -96,7 +86,7 @@ app.use("/api/v1/albums", importAlbumRouterApiV1);
 
 // Handle 404
 app.use((req, res) => {
-    if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) {
+    if (isXhr(req)) {
         res.status(404).send({ message: "404: Not found" });
     } else {
         res.status(404).render("index", {
@@ -116,7 +106,7 @@ app.use((req, res) => {
 
 // Handle 500
 app.use((error, req, res, next) => {
-    if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) {
+    if (isXhr(req)) {
         const { message, errorCode, date } = error;
         res.status(error.errorCode || 500).send({ message, errorCode, date });
     } else {

src/helpers/index.js

@@ -23,3 +23,16 @@ export const getAlbumDetails = async (id) => {
 
     return res;
 };
+
+export const isXhr = (req) => {
+    const is = req.xhr;
+    if (!is) {
+        for (let i = 0; i < req.rawHeaders.length; i += 1) {
+            if (req.rawHeaders[i].indexOf("application/json") !== -1) {
+                return true;
+            }
+        }
+    }
+
+    return is;
+};

src/middleware/Albums.js

@@ -73,13 +73,49 @@ class Albums extends Pages {
             discogsId: body.id,
             User: user._id,
         };
-        data.released = moment(data.released.replace("-00", "-01"));
+        data.released = data.released
+            ? moment(data.released.replace("-00", "-01"))
+            : null;
         delete data.id;
 
         const album = new AlbumsModel(data);
 
         return album.save();
     }
+
+    async getAll() {
+        const {
+            page = 1,
+            limit = 4,
+            sort = "artists_sort",
+            order = "asc",
+        } = this.req.query;
+
+        const skip = (page - 1) * limit;
+
+        const count = await AlbumsModel.count({
+            user: this.req.user._id,
+        });
+
+        const rows = await AlbumsModel.find(
+            {
+                user: this.req.user._id,
+            },
+            [],
+            {
+                skip,
+                limit,
+                sort: {
+                    [sort]: order.toLowerCase() === "asc" ? 1 : -1,
+                },
+            }
+        );
+
+        return {
+            rows,
+            count,
+        };
+    }
 }
 
 export default Albums;

src/routes/api/v1/albums.js

@@ -7,7 +7,19 @@ import Albums from "../../../middleware/Albums";
 // eslint-disable-next-line new-cap
 const router = express.Router();
 
-router.route("/").post(ensureLoggedIn("/connexion"), async (req, res, next) => {
+router
+    .route("/")
+    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+        try {
+            const albums = new Albums(req);
+            const data = await albums.getAll();
+
+            sendResponse(req, res, data);
+        } catch (err) {
+            next(err);
+        }
+    })
+    .post(ensureLoggedIn("/connexion"), async (req, res, next) => {
         try {
             const data = await Albums.postAddOne(req);
 

src/routes/index.js

@@ -72,6 +72,18 @@ router
         }
     });
 
+router
+    .route("/ma-collection")
+    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+        try {
+            const page = new Pages(req, "mon-compte/ma-collection");
+
+            render(res, page);
+        } catch (err) {
+            next(err);
+        }
+    });
+
 router.route("/se-deconnecter").get((req, res) => {
     req.logout();
     req.session.destroy(() => {

views/index.ejs

@@ -1,37 +1,159 @@
 <!doctype html>
 <html lang="fr">
-    <%- include('partials/head'); %>
+    <head>
-    <body>
+        <meta charset="utf-8">
-        <header>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
-            <%- include('partials/header'); %>
-        </header>
     
+        <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
+        <link rel="icon" type="image/png" href="/favicon.png" />
 
-        <div id="toastr"></div>
+        <link
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+            rel="stylesheet"
+        />
     
-        <main class="mt-4 mb-5">
+        <link href="/css/main.css" rel="stylesheet" />
     
-            <% if ( page.failureFlash ) {%>
+        <script src="/libs/axios/axios.min.js"></script>
-                <div class="alert alert-danger" role="alert">
+        <script src="/libs/vue/vue.global.prod.js"></script>
-                    <%= page.failureFlash %>
+    
+        <script>
+            function showToastr(message) {
+                var x = document.getElementById("toastr");
+                if ( message ) {
+                    x.getElementsByTagName("SPAN")[0].innerHTML = message;
+                }
+                
+                x.className = `${x.className} show`;
+                setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+            };
+    
+            document.addEventListener('DOMContentLoaded', () => {
+                const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+                if ($navbarBurgers.length > 0) {
+                    $navbarBurgers.forEach( el => {
+                        el.addEventListener('click', () => {
+                            const target = el.dataset.target;
+                            const $target = document.getElementById(target);
+    
+                            el.classList.toggle('is-active');
+                            $target.classList.toggle('is-active');
+                        });
+                    });
+                }
+            });
+
+            // document.addEventListener('DOMContentLoaded', () => {
+            //     (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
+            //         const $notification = $delete.parentNode;
+
+            //         $delete.addEventListener('click', () => {
+            //             $notification.parentNode.removeChild($notification);
+            //         });
+            //     });
+            // });
+        </script>
+    </head>
+    <body class="has-navbar-fixed-top">
+        <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+                <a class="navbar-item" href="/">
+                    Ma CDThèque
+                </a>
+          
+                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+          
+            <div id="navbarBasicExample" class="navbar-menu">
+                <% if ( user ) { %>
+                <div class="navbar-start">
+                    <a class="navbar-item" href="/ajouter-un-album">
+                        Ajouter un album
+                    </a>
+          
+                    <div class="navbar-item has-dropdown is-hoverable">
+                        <a class="navbar-link">
+                            Mon compte
+                        </a>
+          
+                        <div class="navbar-dropdown">
+                            <a class="navbar-item" href="/ma-collection">
+                                Ma collection
+                            </a>
+                        </div>
+                    </div>
                 </div>
                 <% } %>
           
+                <div class="navbar-end">
+                    <div class="navbar-item">
+                        <div class="buttons">
+                            <% if ( !user ) { %>
+                            <a class="button is-link" href="/connexion">
+                                <strong>Connexion</strong>
+                            </a>
+                            <% } else { %>
+                            <a class="button is-danger" href="/se-deconnecter">
+                                Déconnexion
+                            </a>
+                            <% } %>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+
+        <div id="toastr" class="notification is-danger">
+            <button class="delete"></button>
+            <span></span>
+        </div>
+
+        <main class="mt-4 mb-5">
+            <% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
+                <div class="columns is-mobile">
+                    <div class="
+                        column 
+                        is-10-mobile is-offset-1-mobile
+                        is-8-tablet is-offset-2-tablet
+                        is-6-desktop is-offset-3-desktop
+                        is-4-widescreen is-offset-4-widescreen
+                    ">
+                        <% if ( page.failureFlash ) {%>
+                        <article class="message is-danger">
+                            <div class="message-header">
+                                <p>Erreur</p>
+                            </div>
+                            <div class="message-body">
+                                <%= page.failureFlash %>
+                            </div>
+                        </article>
+                        <% } %>    
                         <%
                             if (error && error.length > 0) {
                                 for( let i = 0 ; i < error.length ; i += 1 ) {
                         %>
-                        <div class="alert alert-danger" role="alert">
+                        <article class="message is-danger">
+                            <div class="message-header">
+                                <p>Erreur</p>
+                                <button class="delete" aria-label="delete"></button>
+                            </div>
+                            <div class="message-body">
                                 <%= error %>
                             </div>
+                        </article>
                         <%
                             }
                         } 
                         %>
+                    </div>
+                </div>
+            <% } %>
             <%- include(viewname) %>
         </main>
-        <footer class="bg-light text-lg-start">
-            <%- include('partials/footer'); %>
-        </footer>
     </body>
 </html>

views/pages/ajouter-un-album/form.ejs

@@ -1,117 +1,166 @@
-<div class="container-fluid" id="app">
+<div class="container" id="app">
-    <form class="bg-white rounded shadow-5-strong p-5" method="POST" @submit="add">
+    <form method="POST" @submit="add">
-        <div class="row">
+        <div class="columns is-mobile">
-            <div class="col-12 col-sm-3 p-2 text-center">
+            <div class="column is-12-mobile is-4-desktop">
+                <div class="has-text-centered">
                     <img src="<%= page.values.thumb %>" alt="Miniature" />
                     <hr />
                     <img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
                     <hr />
+                </div>
                 <ol>
                     <li v-for="track in album.tracklist">{{ track.title }} ({{track.duration}})</li>
                 </ol>
             </div>
-            <div class="col-12 col-sm-9 p-2">
+            <div class="column is-12-mobile is-8-desktop">
-                <div class="row">
+                <div class="column is-12">
-                    <div class="col-12 p-2">
+                    <div class="columns is-mobile">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12">
-                            <input type="text" id="title" name="title" class="form-control" v-model="album.title" disabled />
+                            <div class="field">
-                            <label class="form-label" for="artists">Titre</label>
+                                <label class="label" for="artists">Titre</label>
+                                <div class="control">
+                                    <input type="text" id="title" name="title" class="input" v-model="album.title" disabled />
+                                </div>
                             </div>
                     
-                        <div class="form-outline mb-4" v-for="artist in album.artists">
+                            <div class="field" v-for="artist in album.artists">
-                            <input type="text" id="artists" name="artists" class="form-control" v-model="artist.name" disabled />
+                                <label class="label" for="artists">Artiste</label>
-                            <label class="form-label" for="artists">Artiste</label>
+                                <div class="control">
+                                    <input type="text" id="artists" name="artists" class="input" v-model="artist.name" disabled />
+                                </div>
+                            </div>
                         </div>   
                     </div>             
                     <hr />
-                    <div class="col-12 col-sm-6 p-2" v-for="genre in album.genres">
+                    <div class="columns is-mobile is-multiline">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop" v-for="genre in album.genres">
-                            <input type="text" id="genres" name="genres" class="form-control" v-model="genre" disabled />
+                            <div class="field">
-                            <label class="form-label" for="company">Genre</label>
+                                <label class="label" for="company">Genre</label>
+                                <div class="control">
+                                    <input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column is-12-mobile is-6-desktop" v-for="style in album.styles">
+                            <div class="field">
+                                <label class="label" for="company">Style</label>
+                                <div class="control">
+                                    <input type="text" id="style" name="style" class="input" v-model="style" disabled />
                                 </div>
                             </div>
-                    <div class="col-12 col-sm-6 p-2" v-for="style in album.styles">
-                        <div class="form-outline mb-4">
-                            <input type="text" id="style" name="style" class="form-control" v-model="style" disabled />
-                            <label class="form-label" for="company">Style</label>
                         </div>
                     </div>                    
                     <hr />
-                    <div class="col-12 col-sm-6 p-2">
+                    <div class="columns is-mobile">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop">
-                            <input type="text" id="year" name="year" class="form-control" v-model="album.year" disabled />
+                            <div class="field">
-                            <label class="form-label" for="year">Année</label>
+                                <label class="label" for="year">Année</label>
+                                <div class="control">
+                                    <input type="text" id="year" name="year" class="input" v-model="album.year" disabled />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="column is-12-mobile is-6-desktop">
+                            <div class="field">
+                                <label class="label" for="released">Date de sortie</label>
+                                <div class="control">
+                                    <input type="text" id="released" name="released" class="input" v-model="album.released" disabled />
                                 </div>
                             </div>
-                    <div class="col-12 col-sm-6 p-2">
-                        <div class="form-outline mb-4">
-                            <input type="text" id="released" name="released" class="form-control" v-model="album.released" disabled />
-                            <label class="form-label" for="released">Date de sortie</label>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2">
+                    <div class="columns is-mobile">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop">
-                            <input type="text" id="country" name="country" class="form-control" v-model="album.country" disabled />
+                            <div class="field">
-                            <label class="form-label" for="country">Pays</label>
+                                <label class="label" for="country">Pays</label>
+                                <div class="control">
+                                    <input type="text" id="country" name="country" class="input" v-model="album.country" disabled />
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2">
+                    <div class="columns is-mobile">
+                        <div class="column is-12">
+                            <span class="label">Codes barres</span>
                             <ol>
                                 <li v-for="identifier in album.identifiers">
                                     {{identifier.value}} ({{identifier.type}})
                                 </li>
                             </ol>
                         </div>
+                    </div>                    
                     <hr />
-                    <div class="col-12 p-2">
+                    <div class="columns is-mobile">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12">
-                            <textarea id="notes" id="notes" name="notes" class="form-control" v-model="album.notes" disabled></textarea>
+                            <div class="field">
-                            <label class="form-label" for="country">Notes</label>
+                                <label class="label" for="country">Notes</label>
+                                <div class="control">
+                                    <textarea id="notes" id="notes" name="notes" class="textarea" rows="8" v-model="album.notes" disabled></textarea>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2" v-for="format in album.formats">
+                    <div class="columns is-mobile is-multiline">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop" v-for="format in album.formats">
-                            <input type="text" id="format" name="format" class="form-control" v-model="format.name" disabled />
+                            <div class="field">
-                            <label class="form-label" for="format">Format</label>
+                                <label class="label" for="format">Format</label>
+                                <div class="control">
+                                    <input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2" v-for="label in album.labels">
+                    <div class="columns is-mobile is-multiline">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop" v-for="label in album.labels">
-                            <input type="text" id="label" name="label" class="form-control" v-model="label.name" disabled />
+                            <div class="field">
-                            <label class="form-label" for="label">Label</label>
+                                <label class="label" for="label">Label</label>
+                                <div class="control">
+                                    <input type="text" id="label" name="label" class="input" v-model="label.name" disabled />
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2" v-for="company in album.companies">
+                    <div class="columns is-mobile is-multiline">
-                        <div class="form-outline mb-4">
+                        <div class="column is-12-mobile is-6-desktop" v-for="company in album.companies">
-                            <input type="text" id="company" name="company" class="form-control" v-model="company.name" disabled />
+                            <div class="field">
-                            <label class="form-label" for="company">Société</label>
+                                <label class="label" for="label">Société</label>
+                                <div class="control">
+                                    <input type="text" id="company" name="company" class="input" v-model="company.name" disabled />
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2">
+                    <div class="columns is-mobile is-multiline">
+                        <div class="column is-12-mobile">
+                            <span class="label">Vidéos</span>
                             <ol>
                                 <li v-for="video in album.videos">
                                     <a :href="video.uri" target="_blank">{{video.title}}</a>
                                 </li>
                             </ol>
                         </div>
+                    </div>
                     <hr />
-                    <div class="col-12 col-sm-6 p-2">
+                    <div class="columns is-mobile is-multiline">
-                        <ol>
+                        <div class="column is-12-mobile">
+                            <span class="label">Artistes</span>
+                            <ul>
                                 <li v-for="extraartist in album.extraartists">
                                     {{extraartist.name}} ({{extraartist.role}})
                                 </li>
-                        </ol>
+                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
-        <button type="submit" class="btn btn-primary btn-block">Ajouter</button>
+        </div>
+        <button type="submit" class="button is-primary is-fullwidth">Ajouter</button>
     </form>
 </div>
 
@@ -134,7 +183,6 @@
                         window.location.href = '/ma-collection';
                     })
                     .catch((err) => {
-                        console.log('ERR:', err.response);
                         showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
                     });
             }

views/pages/ajouter-un-album/search.ejs

@@ -1,16 +1,19 @@
-<div class="container-fluid" id="app">
+<div class="container" id="app">
     <form @submit="search">
-        <div class="input-group mb-3">
+        <div class="field has-addons">
-            <div class="form-outline">
+            <div class="control">
-                <input v-model="q" type="search" id="q" class="form-control" />
+                <input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
-                <label class="form-label" for="q">Nom de l'album ou code barre</label>
             </div>
-            <button type="submit" class="btn btn-primary">
+            <div class="control">
+                <button class="button is-link" :disabled="loading">
+                    <span class="icon">
                         <i class="fas fa-search"></i>
+                      </span>
                 </button>
             </div>
+        </div>
     </form>
-    <table class="table table-striped table-hover table-sm align-middle">
+    <table class="table is-striped is-hoverable is-fullwidth">
         <thead>
             <tr>
                 <th>Pochette</th>
@@ -23,6 +26,11 @@
             </tr>
         </thead>
         <tbody>
+            <tr v-if="loading">
+                <td colspan="7">
+                    Chargement en cours…
+                </td>
+            </tr>
             <tr v-for="item in items">
                 <td>
                     <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
@@ -56,6 +64,7 @@
         data() {
             return {
                 q: '',
+                loading: false,
                 items: [],
             }
         },
@@ -63,6 +72,12 @@
             search(event) {
                 event.preventDefault();
 
+                if ( this.loading ) {
+                    return false;
+                }
+
+                this.loading = true;
+
                 axios.get(`/api/v1/search?q=${this.q}`)
                     .then( response => {
                         const {
@@ -95,8 +110,11 @@
 
                         this.items = items;
                     })
-                    .catch( err => {
+                    .catch((err) => {
-                        console.log('err:', err);
+                        showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
+                    })
+                    .finally(() => {
+                        this.loading = false;
                     });
             }
         }

views/pages/connexion.ejs

@@ -1,29 +1,37 @@
 <div class="container">
-    <div class="row justify-content-center">
+    <div class="columns is-mobile">
-        <div class="col-xl-5 col-md-8">
+        <div class="
-            <form class="bg-white rounded shadow-5-strong p-5" method="POST">
+            column 
-                <div class="text-center">
+            is-10-mobile is-offset-1-mobile
+            is-8-tablet is-offset-2-tablet
+            is-6-desktop is-offset-3-desktop
+            is-4-widescreen is-offset-4-widescreen
+        ">
+            <form class="box" method="POST">
+                <div class="has-text-centered">
                     <img class="mb-4" src="/img/logo.png" alt="DarKou">
                 </div>
-                <h4>Connexion</h4>
+                <div class="is-size-3">
-            
+                    Connexion
-                <div class="form-outline mb-4">
+                </div>
-                    <input type="email" id="email" name="email" class="form-control" />
+                <div class="field">
-                    <label class="form-label" for="email">Adresse e-mail</label>
+                    <label class="label" for="email">Adresse e-mail</label>
+                    <div class="control">
+                        <input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
+                    </div>
+                </div>              
+                <div class="field">
+                    <label class="label" for="password">Mot de passe</label>
+                    <div class="control">
+                        <input class="input" type="password" name="password" id="password" placeholder="********">
+                    </div>
                 </div>
 
-                <div class="form-outline mb-4">
+                <div class="has-text-right mb-3">
-                    <input type="password" id="password" name="password" class="form-control" />
-                    <label class="form-label" for="password">Mot de passe</label>
-                </div>
-
-                <div class="row mb-4">
-                    <div class="col text-end">
                     <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
                 </div>
-                </div>
               
-                <button type="submit" class="btn btn-primary btn-block">Connexion</button>
+                <button class="button is-link">Connexion</button>
               </form>
         </div>
     </div>

views/pages/inscription.ejs

@@ -1,34 +1,43 @@
 <div class="container">
-    <div class="row justify-content-center">
+    <div class="columns is-mobile">
-        <div class="col-xl-5 col-md-8">
+        <div class="
-            <form class="bg-white rounded shadow-5-strong p-5" method="POST">
+            column 
-                <div class="text-center">
+            is-10-mobile is-offset-1-mobile
+            is-8-tablet is-offset-2-tablet
+            is-6-desktop is-offset-3-desktop
+            is-4-widescreen is-offset-4-widescreen
+        ">
+            <form class="box" method="POST">
+                <div class="has-text-centered">
                     <img class="mb-4" src="/img/logo.png" alt="DarKou">
                 </div>
-                <h4>Inscription</h4>
+                <div class="is-size-3">
-            
+                    Inscription
-                <div class="form-outline mb-4">
+                </div>
-                    <input type="text" id="username" name="username" class="form-control" />
+                <div class="field">
-                    <label class="form-label" for="username">Nom d'utilisateur</label>
+                    <label class="label" for="email">Nom d'utilisateur</label>
+                    <div class="control">
+                        <input class="input" type="text" name="username" id="username" placeholder="ex : darkou">
+                    </div>
+                </div>  
+                <div class="field">
+                    <label class="label" for="email">Adresse e-mail</label>
+                    <div class="control">
+                        <input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
+                    </div>
+                </div>              
+                <div class="field">
+                    <label class="label" for="password">Mot de passe</label>
+                    <div class="control">
+                        <input class="input" type="password" name="password" id="password" placeholder="********">
+                    </div>
                 </div>
 
-                <div class="form-outline mb-4">
+                <div class="has-text-right mb-3">
-                    <input type="email" id="email" name="email" class="form-control" />
-                    <label class="form-label" for="email">Adresse e-mail</label>
-                </div>
-
-                <div class="form-outline mb-4">
-                    <input type="password" id="password" name="password" class="form-control" />
-                    <label class="form-label" for="password">Mot de passe</label>
-                </div>
-
-                <div class="row mb-4">
-                    <div class="col text-end">
                     <p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
                 </div>
-                </div>
               
-                <button type="submit" class="btn btn-primary btn-block">Inscription</button>
+                <button class="button is-link">Inscription</button>
               </form>
         </div>
     </div>

views/pages/mon-compte/ma-collection.ejs

@@ -0,0 +1,133 @@
+<div class="container" id="app">
+    <table class="table is-striped is-hoverable is-fullwidth">
+        <thead>
+            <tr>
+                <th>Pochette</th>
+                <th>Artiste</th>
+                <th>Titre</th>
+                <th>Année</th>
+                <th>Pays</th>
+                <th>Format</th>
+                <th>Genres</th>
+                <th>Styles</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-if="loading">
+                <td colspan="8">
+                    Chargement en cours…
+                </td>
+            </tr>
+            <tr v-if="!loading" v-for="item in items">
+                <td>
+                    <img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
+                </td>
+                <td>{{ item.artists_sort }}</td>
+                <td>
+                    <a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
+                </td>
+                <td>{{ item.year }}</td>
+                <td>{{ item.country }}</td>
+                <td>
+                    <ul>
+                        <li v-for="format in item.formats">{{ format.name }}</li>
+                    </ul>                    
+                </td>
+                <td>
+                    <ul>
+                        <li v-for="genre in item.genres">{{ genre }}</li>
+                    </ul>
+                </td>
+                <td>
+                    <ul>
+                        <li v-for="style in item.styles">{{ style }}</li>
+                    </ul>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    <nav class="pagination" role="navigation" aria-label="pagination">
+        <a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
+        <a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
+        <ul class="pagination-list">
+            <li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
+                <a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
+            </li>
+            <!-- <li>
+                <span class="pagination-ellipsis">&hellip;</span>
+            </li>
+            <li>
+                <a class="pagination-link" aria-label="Goto page 45">45</a>
+            </li>
+            <li>
+                <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+            </li>
+            <li>
+                <a class="pagination-link" aria-label="Goto page 47">47</a>
+            </li>
+            <li>
+                <span class="pagination-ellipsis">&hellip;</span>
+            </li>
+            <li>
+                <a class="pagination-link" aria-label="Goto page 86">86</a>
+            </li> -->
+            </ul>
+    </nav>
+</div>
+
+<script>
+    Vue.createApp({
+        data() {
+            return {
+                loading: false,
+                items: [],
+                total: 0,
+                page: 1,
+                totalPages: 1,
+                limit: 5,
+            }
+        },
+        created() {
+            this.fetch();
+        },
+        methods: {
+            fetch() {
+                this.loading = true;
+        
+                axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}`)
+                    .then( response => {
+                        this.items = response.data.rows;
+                        this.total = response.data.count;
+                        this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
+
+                        console.log('total:', this.total, (this.page * this.limit));
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de charger votre collection");
+                    })
+                    .finally(() => {
+                        this.loading = false;
+                    });
+            },
+            next(event) {
+                event.preventDefault();
+
+                this.page += 1;
+
+                this.fetch();
+            },
+            previous(event) {
+                event.preventDefault();
+
+                this.page -= 1;
+
+                this.fetch();
+            },
+            goTo(page) {
+                this.page = page;
+
+                this.fetch();
+            }
+        }
+  }).mount('#app')
+</script>

views/partials/footer.ejs

@@ -1,2 +0,0 @@
-
-    <script type="text/javascript" src="/libs/mdb-ui-kit/js/mdb.min.js"></script>

views/partials/head.ejs

@@ -1,39 +0,0 @@
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
-    <link rel="icon" type="image/png" href="/favicon.png" />
-
-    <link
-        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
-        rel="stylesheet"
-    />
-    <link
-        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-        rel="stylesheet"
-    />
-    <link
-        href="/libs/mdb-ui-kit/css/mdb.min.css"
-        rel="stylesheet"
-    />
-
-    <link href="/css/main.css" rel="stylesheet" />
-
-    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
-
-    <script src="/libs/axios/axios.min.js"></script>
-    <script src="/libs/vue/vue.global.prod.js"></script>
-
-    <script>
-        function showToastr(message) {
-            var x = document.getElementById("toastr");
-            if ( message ) {
-                x.innerHTML = message;
-            }
-            
-            x.className = "show";
-            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
-        };
-    </script>
-</head>

views/partials/header.ejs

@@ -1,49 +0,0 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container-fluid">
-        <button
-            class="navbar-toggler"
-            type="button"
-            data-mdb-toggle="collapse"
-            data-mdb-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent"
-            aria-expanded="false"
-            aria-label="Toggle navigation"
-        >
-            <i class="fas fa-bars"></i>
-        </button>
-  
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <a class="navbar-brand mt-2 mt-lg-0" href="/">
-                Ma CDThèque
-            </a>
-        </div>
-  
-        <% if ( user ) { %>
-            <div class="d-flex align-items-center">
-                <a class="text-reset me-3" href="/ajouter-un-album">
-                    Ajouter un album
-                </a>
-                <div class="dropdown">
-                    <a
-                        class="dropdown-toggle d-flex align-items-center hidden-arrow"
-                        href="#"
-                        id="navbarDropdownMenuAvatar"
-                        role="button"
-                        data-mdb-toggle="dropdown"
-                        aria-expanded="false"
-                    >
-                        Mon compte
-                    </a>
-                    <ul
-                        class="dropdown-menu dropdown-menu-end"
-                        aria-labelledby="navbarDropdownMenuAvatar"
-                    >
-                        <li><a class="dropdown-item" href="/ma-collection">Ma collection</a></li>
-                        <li><hr class="dropdown-divider" /></li>
-                        <li><a class="dropdown-item" href="/se-deconnecter">Déconnexion</a></li>
-                    </ul>
-                </div>
-            </div>
-        <% } %>
-    </div>
-</nav>