2023-08-02 16:11:57 +02:00
32 changed files with 530 additions and 337 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -22,7 +22,7 @@ module.exports = {
        camelcase: [
            "error",
            {
-                allow: ["artists_sort"],
+                allow: ["artists_sort", "access_token", "api_url", "media_ids"],
            },
        ],
    },
--- a/docker-compose.yml.dev
+++ b/docker-compose.yml.dev
@ -3,7 +3,7 @@ version: "2.4"
 services:
  musictopus-www:
    container_name: musictopus-www
-    image: "node:16"
+    image: "node:18"
    restart: always
    user: "node"
    working_dir: /home/node/app
--- a/docker-compose.yml.prod
+++ b/docker-compose.yml.prod
@ -3,7 +3,7 @@ version: "2.4"
 services:
  musictopus-www:
    container_name: musictopus-www
-    image: "node:16"
+    image: "node:18"
    restart: always
    user: "node"
    working_dir: /home/node/app
--- a/javascripts/ajouter-un-album.js
+++ b/javascripts/ajouter-un-album.js
@ -9,6 +9,7 @@ Vue.createApp({
            items: [],
            details: {},
            modalIsVisible: false,
+            submitting: false,
            formats: [
                "Vinyl",
                "Acetate",
@ -160,12 +161,18 @@ Vue.createApp({
                });
        },
        add() {
-            axios
+            if (this.submitting) {
+                return true;
+            }
+            this.submitting = true;
+
+            return axios
                .post("/api/v1/albums", this.details)
                .then(() => {
                    window.location.href = "/ma-collection";
                })
                .catch((err) => {
+                    this.submitting = false;
                    showToastr(
                        err.response?.data?.message ||
                            "Impossible d'ajouter cet album pour le moment…"
--- a/javascripts/collection.js
+++ b/javascripts/collection.js
@ -21,7 +21,7 @@ Vue.createApp({
            showModalDelete: false,
            showModalShare: false,
            // eslint-disable-next-line no-undef
-            shareLink: `${protocol}//${host}/collection/${userId}`,
+            shareLink: `/collection/${userId}`,
            // eslint-disable-next-line no-undef
            isPublicCollection,
            // eslint-disable-next-line no-undef
@ -67,7 +67,7 @@ Vue.createApp({

            let url = `/api/v1/albums?page=${this.page}&limit=${this.limit}&sort=${this.sort}&order=${this.order}`;
            if (this.artist) {
-                url += `&artists_sort=${this.formatParams(this.artist)}`;
+                url += `&artist=${this.formatParams(this.artist)}`;
            }
            if (this.format) {
                url += `&format=${this.formatParams(this.format)}`;
@ -218,5 +218,20 @@ Vue.createApp({
                    this.toggleModalShare();
                });
        },
+        renderAlbumTitle(item) {
+            let render = '';
+
+            for ( let i = 0 ; i < item.artists.length ; i += 1 ) {
+                const {
+                    name,
+                    join,
+                } = item.artists[i];
+                render += `${name} ${join ? `${join} ` : ''}`;
+            }
+
+            render += `- ${item.title}`;
+
+            return render;
+        }
    },
 }).mount("#collection");
--- a/javascripts/main.js
+++ b/javascripts/main.js
@ -1,6 +1,8 @@
 /* eslint-disable no-unused-vars */
 const { protocol, host } = window.location;

+let timeout = null;
+
 /**
 * Fonction permettant d'afficher un message dans un toastr
 * @param {String} message
@ -11,12 +13,23 @@ function showToastr(message, success = false) {
        x.getElementsByTagName("SPAN")[0].innerHTML = message;
    }

-    x.className = `${x.className} show`.replace("sucess", "");
-    if (success) {
-        x.className = `${x.className} success`;
+    if (timeout) {
+        clearTimeout(timeout);
+        x.classList.remove("show");
    }
-    setTimeout(() => {
-        x.className = x.className.replace("show", "");
+
+    x.classList.remove("success");
+    x.classList.remove("error");
+    if (success) {
+        x.classList.add("success");
+    } else {
+        x.classList.add("error");
+    }
+
+    x.classList.add("show");
+
+    timeout = setTimeout(() => {
+        x.classList.remove("show");
    }, 3000);
 }

@ -30,80 +43,6 @@ function hideToastr() {
    x.getElementsByTagName("SPAN")[0].innerHTML = "";
 }

-/**
- * Fonction permettant de récupérer la valeur d'un cookie
- * @param {String} cname
- * @param {String} defaultValue
- *
- * @return {String}
- */
-function getCookie(cname, defaultValue = "false") {
-    const name = `${cname}=`;
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const ca = decodedCookie.split(";");
-    for (let i = 0; i < ca.length; i += 1) {
-        let c = ca[i];
-        while (c.charAt(0) === " ") {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) === 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return defaultValue;
-}
-
-/**
- * Fonction permettant de créer un cookie
- * @param {String} cname
- * @param {String} cvalue
- * @param {Number} exdays
- */
-function setCookie(cname, cvalue, exdays = 30) {
-    const d = new Date();
-    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
-    const expires = `expires=${d.toUTCString()}`;
-    document.cookie = `${cname}=${cvalue};${expires};path=/`;
-}
-
-/**
- * Fonction de (dé)charger le thème accessible
- * @param {String} value
- */
-function setAriaTheme(value) {
-    const { body } = document;
-    if (value === "true") {
-        const classesString = body.className || "";
-        if (classesString.indexOf("is-accessible") === -1) {
-            body.classList.add("is-accessible");
-        }
-    } else {
-        body.classList.remove("is-accessible");
-    }
-}
-
-/**
- * Fonction de (dé)charger  le thème accessible
- */
-function switchAriaTheme() {
-    const { body } = document;
-
-    body.classList.toggle("is-accessible");
-
-    setCookie("ariatheme", body.classList.contains("is-accessible"));
-}
-
-/**
- * Fonction permettant de switcher de thème clair/sombre
- * @param {Object} e
- */
-function switchTheme(e) {
-    const theme = e.target.checked ? "dark" : "light";
-
-    document.documentElement.setAttribute("data-theme", theme);
-    setCookie("theme", theme);
-}
-
 /**
 * Ensemble d'actions effectuées au chargement de la page
 */
@ -123,29 +62,4 @@ document.addEventListener("DOMContentLoaded", () => {
            });
        });
    }
-
-    const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
-    if (switchAriaThemeBtn) {
-        switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
-    }
-    setAriaTheme(getCookie("ariatheme"));
-
-    const toggleSwitch = document.querySelector(
-        '.theme-switch input[type="checkbox"]'
-    );
-    if (toggleSwitch) {
-        toggleSwitch.addEventListener("change", switchTheme, false);
-    }
-
-    let currentThemeIsDark = getCookie("theme");
-    if (currentThemeIsDark === "false" && window.matchMedia) {
-        currentThemeIsDark = window.matchMedia("(prefers-color-scheme: dark)")
-            .matches
-            ? "dark"
-            : "light";
-    }
-    switchTheme({ target: { checked: currentThemeIsDark === "dark" } });
-    if (toggleSwitch) {
-        toggleSwitch.checked = currentThemeIsDark === "dark";
-    }
 });
--- a/javascripts/mon-compte/index.js
+++ b/javascripts/mon-compte/index.js
@ -2,27 +2,100 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
    Vue.createApp({
        data() {
            return {
-                // eslint-disable-next-line no-undef
-                email,
-                // eslint-disable-next-line no-undef
-                username,
-                oldPassword: "",
-                password: "",
-                passwordConfirm: "",
+                formData: {
+                    // eslint-disable-next-line no-undef
+                    email,
+                    // eslint-disable-next-line no-undef
+                    username,
+                    oldPassword: "",
+                    password: "",
+                    passwordConfirm: "",
+                    // eslint-disable-next-line no-undef
+                    mastodon: mastodon || {
+                        publish: false,
+                        url: "",
+                        token: "",
+                        message:
+                            "Je viens d'ajouter {artist} - {album} à ma collection !",
+                    },
+                },
                loading: false,
+                errors: [],
            };
        },
        methods: {
            // eslint-disable-next-line no-unused-vars
-            async updateProfil(event) {
-                // try {
-                //     if ( this.password !== this.passwordConfirm ) {
-                //         throw "La confirnation du mot de passe ne correspond pas";
-                //     }
-                // } catch(err) {
-                //     event.preventDefault();
-                //     showToastr(err);
-                // }
+            async testMastodon() {
+                const { url, token } = this.formData.mastodon;
+
+                if (!url) {
+                    this.errors.push("emptyUrl");
+                }
+                if (!token) {
+                    this.errors.push("emptyToken");
+                }
+
+                if (this.errors.length > 0) {
+                    return false;
+                }
+
+                try {
+                    await axios.post(`/api/v1/mastodon`, { url, token });
+
+                    showToastr("Configuration valide !", true);
+                } catch (err) {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de tester cette configuration",
+                        false
+                    );
+                }
+
+                return true;
+            },
+            // eslint-disable-next-line no-unused-vars
+            async updateProfil() {
+                this.errors = [];
+                const { oldPassword, password, passwordConfirm, mastodon } =
+                    this.formData;
+
+                if (password && !oldPassword) {
+                    this.errors.push("emptyPassword");
+                }
+
+                if (password !== passwordConfirm) {
+                    this.errors.push("passwordsDiffer");
+                }
+
+                if (this.errors.length > 0) {
+                    return false;
+                }
+
+                this.loading = true;
+
+                const data = {
+                    mastodon,
+                };
+
+                if (password) {
+                    data.password = password;
+                    data.oldPassword = oldPassword;
+                }
+
+                try {
+                    await axios.patch(`/api/v1/me`, data);
+
+                    showToastr("Profil mis à jour", true);
+                } catch (err) {
+                    showToastr(
+                        err.response?.data?.message ||
+                            "Impossible de mettre à jour votre profil"
+                    );
+                }
+
+                this.loading = false;
+
+                return true;
            },
        },
    }).mount("#mon-compte");
--- a/javascripts/theme.js
+++ b/javascripts/theme.js
@ -0,0 +1,71 @@
+/**
+ * Fonction permettant de sauvegarder dans le stockage local le choix du thème
+ * @param {String} scheme
+ */
+function saveColorScheme(scheme) {
+    localStorage.setItem("theme", scheme);
+}
+
+/**
+ * Fonction permettant de changer le thème du site
+ * @param {String} scheme
+ */
+function setColorScheme(scheme) {
+    document.documentElement.setAttribute("data-theme", scheme);
+}
+
+/**
+ * Fonction permettant de récupérer le thème du système
+ * @return {String}
+ */
+function getPreferredColorScheme() {
+    if (window.matchMedia) {
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            return "dark";
+        }
+        return "light";
+    }
+    return "light";
+}
+
+// INFO: On place un event sur le bouton
+const toggleSwitch = document.querySelector(
+    '.theme-switch input[type="checkbox"]'
+);
+
+/**
+ * Event permettant de détecter les changements de thème du système
+ */
+if (window.matchMedia) {
+    const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    colorSchemeQuery.addEventListener("change", () => {
+        const selectedColorScheme = localStorage.getItem("theme") || "system";
+
+        if (selectedColorScheme === "system") {
+            const preferedColorScheme = getPreferredColorScheme();
+            setColorScheme(preferedColorScheme);
+
+            toggleSwitch.checked = preferedColorScheme === "dark";
+        }
+    });
+}
+
+const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme();
+
+// INFO: Au chargement de la page on détecte le thème à charger
+setColorScheme(currentTheme);
+
+toggleSwitch.checked = currentTheme === "dark";
+
+toggleSwitch.addEventListener(
+    "change",
+    (e) => {
+        e.preventDefault();
+
+        const scheme = e.target.checked ? "dark" : "light";
+
+        saveColorScheme(scheme);
+        setColorScheme(scheme);
+    },
+    false
+);
--- a/package.json
+++ b/package.json
@ -14,7 +14,7 @@
    "prepare": "npx husky install"
  },
  "engines": {
-    "node": "16.x",
+    "node": "16.x || 18.x",
    "yarn": "1.x"
  },
  "repository": {
@ -63,6 +63,7 @@
    "gulp-uglify": "^3.0.2",
    "joi": "^17.6.0",
    "knacss": "^8.0.4",
+    "mastodon": "^1.2.2",
    "mongoose": "^6.2.1",
    "mongoose-unique-validator": "^3.0.0",
    "nodemailer": "^6.7.8",
--- a/sass/colors.scss
+++ b/sass/colors.scss
@ -22,10 +22,12 @@ $nord15: #b48ead;

 $primary-color: $nord8;
 $danger-color: $nord11;
+$error-color: $nord12;
 $warning-color: $nord13;
 $success-color: $nord14;
 $primary-color-hl: darken($primary-color, $hoverAmount);
 $danger-color-hl: darken($danger-color, $hoverAmount);
+$error-color-hl: darken($error-color, $hoverAmount);
 $warning-color-hl: darken($warning-color, $hoverAmount);
 $success-color-hl: darken($success-color, $hoverAmount);

--- a/sass/error.scss
+++ b/sass/error.scss
@ -1,4 +1,6 @@
-.error {
-    min-height: calc(100vh - 3.25rem - 100px);
-    padding-top: 4rem;
+main {
+    &.error {
+        min-height: calc(100vh - 3.25rem - 100px);
+        padding-top: 4rem;
+    }
 }
--- a/sass/flash.scss
+++ b/sass/flash.scss
@ -8,10 +8,6 @@
    width: calc(100% - 6rem);
    margin: 2rem auto;

-    .header {
-        font-weight: 800;
-    }
-
    &.info {
        background-color: $warning-color;
    }
--- a/sass/fonts.scss
+++ b/sass/fonts.scss
--- a/sass/forms.scss
+++ b/sass/forms.scss
@ -24,9 +24,6 @@
        }
    }

-    label {
-        font-weight: 800;
-    }
    input,
    textarea,
    select {
--- a/sass/global.scss
+++ b/sass/global.scss
@ -7,19 +7,10 @@ html {
        display: flex;
        flex-direction: column;
        padding-top: 3.5rem;
-        font-family: 'open_sansregular';
-        font-weight: 400;
+        font-family: 'lucioleregular';
        min-height: 100vh;
        color: var(--font-color);
-        @include transition() {}
-
-        &.is-accessible {
-            font-family: 'lucioleregular';
-
-            .text-justify {
-                text-align: left;
-            }
-        }
+        @include transition();

        footer.footer {
            margin-top: auto;
--- a/sass/index.scss
+++ b/sass/index.scss
@ -42,6 +42,7 @@
@import './loader';

@import './error';
+@import './messages.scss';
@import './500';
@import './home';
@import './ajouter-un-album';
--- a/sass/list.scss
+++ b/sass/list.scss
@ -42,7 +42,6 @@
        }

        .title {
-            font-weight: 800;
            font-size: 1.4rem;
        }

--- a/sass/messages.scss
+++ b/sass/messages.scss
@ -0,0 +1,9 @@
+.message {
+    margin: 8px 0;
+    padding: 0;
+    font-size: 0.8rem;
+
+    &.error {
+        color: $error-color-hl;
+    }
+}
--- a/sass/navbar.scss
+++ b/sass/navbar.scss
@ -33,7 +33,6 @@
                word-break: break-word;
                color: var(--font-color);
                font-size: 2rem;
-                font-weight: 600;
                line-height: 1.125;
                margin-left: .5rem !important;
                @include transition() {}
--- a/sass/toast.scss
+++ b/sass/toast.scss
@ -3,16 +3,19 @@
    min-width: 250px;
    max-width: 360px;
    position: fixed;
-    z-index: 31;
+    z-index: 66;
    right: 30px;
    top: 30px;
    font-size: 17px;

    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
-    background-color: $danger-color;
-    color: $button-alternate-color;
    border-radius: 6px;

+    &.error {
+        background-color: $danger-color;
+        color: $button-alternate-color;
+    }
+
    &.success {
        background-color: $success-color;
        color: $button-font-color;
--- a/src/app.js
+++ b/src/app.js
@ -22,11 +22,13 @@ import importJobsRouter from "./routes/jobs";

 import importAlbumRouterApiV1 from "./routes/api/v1/albums";
 import importSearchRouterApiV1 from "./routes/api/v1/search";
+import importMastodonRouterApiV1 from "./routes/api/v1/mastodon";
 import importMeRouterApiV1 from "./routes/api/v1/me";
 import importContactRouterApiV1 from "./routes/api/v1/contact";

 passportConfig(passport);

+mongoose.set("strictQuery", false);
 mongoose
    .connect(mongoDbUri, { useNewUrlParser: true, useUnifiedTopology: true })
    .catch(() => {
@ -83,6 +85,7 @@ app.use("/collection", collectionRouter);
 app.use("/jobs", importJobsRouter);
 app.use("/api/v1/albums", importAlbumRouterApiV1);
 app.use("/api/v1/search", importSearchRouterApiV1);
+app.use("/api/v1/mastodon", importMastodonRouterApiV1);
 app.use("/api/v1/me", importMeRouterApiV1);
 app.use("/api/v1/contact", importContactRouterApiV1);

--- a/src/middleware/Albums.js
+++ b/src/middleware/Albums.js
@ -1,5 +1,9 @@
 import { format as formatDate } from "date-fns";
+import fs from "fs";

+import Mastodon from "mastodon";
+import { v4 } from "uuid";
+import axios from "axios";
 import Pages from "./Pages";
 import Export from "./Export";

@ -40,9 +44,83 @@ class Albums extends Pages {
            id: album._id,
        };

-        const job = new JobsModel(jobData);
+        try {
+            const User = await UsersModel.findOne({ _id: user._id });

-        job.save();
+            const { mastodon: mastodonConfig } = User;
+
+            const { publish, token, url, message } = mastodonConfig;
+
+            if (publish && url && token) {
+                const M = new Mastodon({
+                    access_token: token,
+                    api_url: url,
+                });
+
+                const video =
+                    data.videos && data.videos.length > 0
+                        ? data.videso[0].uri
+                        : "";
+
+                const status = `${(
+                    message ||
+                    "Je viens d'ajouter {artist} - {album} à ma collection !"
+                )
+                    .replaceAll("{artist}", data.artists[0].name)
+                    .replaceAll("{format}", data.formats[0].name)
+                    .replaceAll("{year}", data.year)
+                    .replaceAll("{video}", video)
+                    .replaceAll("{album}", data.title)}
+
+Publié automatiquement via #musictopus`;
+
+                const media_ids = [];
+
+                if (data.images.length > 0) {
+                    for (let i = 0; i < data.images.length; i += 1) {
+                        if (media_ids.length === 4) {
+                            break;
+                        }
+
+                        const filename = `${v4()}.jpg`;
+                        const file = `/tmp/${filename}`;
+
+                        // eslint-disable-next-line no-await-in-loop
+                        const { data: buff } = await axios.get(
+                            data.images[i].uri,
+                            {
+                                responseType: "arraybuffer",
+                            }
+                        );
+
+                        fs.writeFileSync(file, buff);
+
+                        // eslint-disable-next-line no-await-in-loop
+                        const { data: media } = await M.post("media", {
+                            file: fs.createReadStream(file),
+                        });
+
+                        const { id } = media;
+
+                        media_ids.push(id);
+
+                        fs.unlinkSync(file);
+                    }
+                }
+
+                await M.post("statuses", { status, media_ids });
+            }
+
+            const job = new JobsModel(jobData);
+
+            job.save();
+        } catch (err) {
+            throw new ErrorEvent(
+                500,
+                "Mastodon",
+                "Album ajouté à votre collection mais impossible de publier sur Mastodon"
+            );
+        }

        return album;
    }
@ -80,7 +158,7 @@ class Albums extends Pages {
            exportFormat = "json",
            sort = "artists_sort",
            order = "asc",
-            artists_sort,
+            artist,
            format,
            year,
            genre,
@ -92,8 +170,8 @@ class Albums extends Pages {

        const where = {};

-        if (artists_sort) {
-            where.artists_sort = artists_sort;
+        if (artist) {
+            where["artists.name"] = artist;
        }
        if (format) {
            where["formats.name"] = format;
@ -236,7 +314,7 @@ class Albums extends Pages {
     */
    async loadMyCollection() {
        const artists = await Albums.getAllDistincts(
-            "artists_sort",
+            "artists.name",
            this.req.user._id
        );
        const formats = await Albums.getAllDistincts(
@ -301,7 +379,7 @@ class Albums extends Pages {
            );
        }

-        const artists = await Albums.getAllDistincts("artists_sort", userId);
+        const artists = await Albums.getAllDistincts("artists.name", userId);
        const formats = await Albums.getAllDistincts("formats.name", userId);
        const years = await Albums.getAllDistincts("year", userId);
        const genres = await Albums.getAllDistincts("genres", userId);
--- a/src/middleware/Me.js
+++ b/src/middleware/Me.js
@ -12,21 +12,41 @@ class Me extends Pages {
     * @return {Object}
     */
    async patchMe() {
-        const { body, user } = this.req;
+        const { body } = this.req;
+        const { _id } = this.req.user;

        const schema = Joi.object({
            isPublicCollection: Joi.boolean(),
+            oldPassword: Joi.string(),
+            password: Joi.string(),
+            passwordConfirm: Joi.ref("password"),
+            mastodon: {
+                publish: Joi.boolean(),
+                url: Joi.string().uri().allow(null, ""),
+                token: Joi.string().allow(null, ""),
+                message: Joi.string().allow(null, ""),
+            },
        });

        const value = await schema.validateAsync(body);
-        const update = await UsersModel.findByIdAndUpdate(
-            user._id,
-            { $set: value },
-            { new: true }
-        );
+        const user = await UsersModel.findById(_id);
+
+        if (value.oldPassword) {
+            if (!user.validPassword(value.oldPassword)) {
+                throw new Error("Votre ancien mot de passe n'est pas valide");
+            }
+        }
+
+        user.mastodon = value.mastodon;
+
+        if (value.password) {
+            user.salt = value.password;
+        }
+
+        user.save();

        await new Promise((resolve, reject) => {
-            this.req.login(update, (err) => {
+            this.req.login(user, (err) => {
                if (err) {
                    return reject(err);
                }
@ -35,34 +55,7 @@ class Me extends Pages {
            });
        });

-        return update;
-    }
-
-    /**
-     * Méthode permettant de modifier le mot de passe d'un utilisateur
-     */
-    async updatePassword() {
-        const { body } = this.req;
-        const { _id } = this.req.user;
-
-        const schema = Joi.object({
-            oldPassword: Joi.string().required(),
-            password: Joi.string().required(),
-            passwordConfirm: Joi.ref("password"),
-        });
-
-        const value = await schema.validateAsync(body);
-        const user = await UsersModel.findById(_id);
-
-        if (!user.validPassword(value.oldPassword)) {
-            throw new Error("Votre ancien mot de passe n'est pas valide");
-        }
-
-        user.salt = value.password;
-
-        await user.save();
-
-        this.req.flash("success", "Profil correctement mis à jour");
+        return user;
    }
 }

--- a/src/models/users.js
+++ b/src/models/users.js
@ -29,6 +29,12 @@ const UserSchema = new mongoose.Schema(
            type: Boolean,
            default: false,
        },
+        mastodon: {
+            publish: Boolean,
+            token: String,
+            url: String,
+            message: String,
+        },
    },
    {
        timestamps: true,
--- a/src/routes/api/v1/mastodon.js
+++ b/src/routes/api/v1/mastodon.js
@ -0,0 +1,28 @@
+import express from "express";
+import { ensureLoggedIn } from "connect-ensure-login";
+
+import Mastodon from "mastodon";
+import { sendResponse } from "../../../libs/format";
+
+// eslint-disable-next-line new-cap
+const router = express.Router();
+
+router.route("/").post(ensureLoggedIn("/connexion"), async (req, res, next) => {
+    try {
+        const { url, token } = req.body;
+
+        const M = new Mastodon({
+            access_token: token,
+            api_url: url,
+        });
+
+        const data = await M.post("statuses", {
+            status: "Test d'intégration de Mastodon sur mon compte #musictopus 👌",
+        });
+        return sendResponse(req, res, data);
+    } catch (err) {
+        return next(err);
+    }
+});
+
+export default router;
--- a/src/routes/mon-compte.js
+++ b/src/routes/mon-compte.js
@ -8,28 +8,16 @@ import render from "../libs/format";
 // eslint-disable-next-line new-cap
 const router = express.Router();

-router
-    .route("/")
-    .get(ensureLoggedIn("/connexion"), async (req, res, next) => {
-        try {
-            const page = new Me(req, "mon-compte/index");
+router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
+    try {
+        const page = new Me(req, "mon-compte/index");

-            page.setPageTitle("Mon compte");
+        page.setPageTitle("Mon compte");

-            render(res, page);
-        } catch (err) {
-            next(err);
-        }
-    })
-    .post(ensureLoggedIn("/connexion"), async (req, res) => {
-        try {
-            const page = new Me(req, "mon-compte/index");
-
-            await page.updatePassword();
-        } catch (err) {
-            req.flash("error", err.toString());
-        }
-        res.redirect("/mon-compte");
-    });
+        render(res, page);
+    } catch (err) {
+        next(err);
+    }
+});

 export default router;
--- a/views/index.ejs
+++ b/views/index.ejs
@ -105,9 +105,6 @@
                    </div>
                    <div class="navbar-item">
                        <div class="buttons">
-                            <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
-                                <i class="icon-eye"></i>
-                            </button>
                            <% if ( !user ) { %>
                            <a class="button is-primary" href="/connexion">
                                <strong>Connexion</strong>
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@ -180,7 +180,7 @@
                </div>
            </section>
            <footer>
-                <button class="button is-primary" @click="add">Ajouter</button>
+                <button :class="['button is-primary', submitting ? 'is-disabled' : '']" @click="add">Ajouter</button>
                <button class="button" @click="toggleModal">Annuler</button>
            </footer>
        </div>
--- a/views/pages/collection.ejs
+++ b/views/pages/collection.ejs
@ -11,9 +11,11 @@
        } %>
    </h1>
    <% if ( pageType === 'private' ) { %>
-        <a :href="shareLink" v-if="isPublicCollection" target="_blank">
-            <i class="icon-share"></i> Voir ma collection partagée
-        </a>
+        <div>
+            <a :href="shareLink" v-if="isPublicCollection" target="_blank">
+                <i class="icon-share"></i> Voir ma collection partagée
+            </a>
+        </div>
    <% } %>

    <%- include('../components/filters/index') %>
@ -28,7 +30,7 @@
        <div class="item" v-if="!loading" v-for="item in items">
            <span class="title">
                <% if ( pageType === 'private' ) { %>
-                    <a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
+                    <a :href="'/ma-collection/' + item._id">{{ renderAlbumTitle(item) }}</a>
                    <i class="icon-trash" @click="showConfirmDelete(item._id)"></i>
                <% } else { %>
                    {{ item.artists_sort}} - {{ item.title }}
--- a/views/pages/composants.ejs
+++ b/views/pages/composants.ejs
@ -497,9 +497,6 @@
            &lt;/div&gt;
            &lt;div class="navbar-item"&gt;
                &lt;div class="buttons"&gt;
-                    &lt;button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site"&gt;
-                        &lt;i class="icon-eye"&gt;&lt;/i&gt;
-                    &lt;/button&gt;
                    &lt;a class="button is-danger" href="/se-deconnecter"&gt;
                        Déconnexion
                    &lt;/a&gt;
--- a/views/pages/mon-compte/index.ejs
+++ b/views/pages/mon-compte/index.ejs
@ -3,75 +3,142 @@
        Mon compte
    </h1>

-    <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-        <form method="POST" action="/mon-compte" @submit="updateProfil">
-
-            <div class="field">
-                <label for="email">Adresse e-mail</label>
-                <input
-                    type="email"
-                    readonly
-                    disabled
-                    name="email"
-                    id="email"
-                    v-model="email"
-                />
+    <form method="POST" @submit.prevent="updateProfil">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+            <div>
+                <h2>Mes données personnelles</h2>
+                <div>
+                    <div class="field">
+                        <label for="email">Adresse e-mail</label>
+                        <input
+                            type="email"
+                            readonly
+                            disabled
+                            name="email"
+                            id="email"
+                            v-model="formData.email"
+                        />
+                    </div>
+                    <div class="field">
+                        <label for="username">Nom d'utilisateur</label>
+                        <input
+                            type="string"
+                            readonly
+                            disabled
+                            name="username"
+                            id="username"
+                            v-model="formData.username"
+                        />
+                    </div>
+                    <div class="field">
+                        <label for="oldPassword">Mot de passe actuel</label>
+                        <input
+                            type="password"
+                            name="oldPassword"
+                            id="oldPassword"
+                            placeholder="Saisisssez votre mot de passe actuel"
+                            v-model="formData.oldPassword"
+                        />
+                        <div class="message error" v-if="errors.includes('emptyPassword')">
+                            Pour changer votre mot de passe vous devez saisir votre mot de passe actuel
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label for="password">Nouveau mot de passe</label>
+                        <input
+                            type="password"
+                            name="password"
+                            id="password"
+                            placeholder="Saisisssez votre nouveau mot de passe"
+                            v-model="formData.password"
+                        />
+                    </div>
+                    <div class="field">
+                        <label for="passwordConfirm">Nouveau mot de passe (confirmation)</label>
+                        <input
+                            type="password"
+                            name="passwordConfirm"
+                            id="passwordConfirm"
+                            placeholder="Confirmez votre nouveau mot de passe"
+                            v-model="formData.passwordConfirm"
+                        />
+                        <div class="message error" v-if="errors.includes('passwordsDiffer')">
+                            La confirmation ne correspond pas avec votre nouveau mot de passe
+                        </div>
+                    </div>
+                </div>
            </div>
-            <div class="field">
-                <label for="username">Nom d'utilisateur</label>
-                <input
-                    type="string"
-                    readonly
-                    disabled
-                    name="username"
-                    id="username"
-                    v-model="username"
-                />
-            </div>
-            <div class="field">
-                <label for="oldPassword">Mot de passe actuel</label>
-                <input
-                    type="password"
-                    name="oldPassword"
-                    id="oldPassword"
-                    required
-                    placeholder="Saisisssez votre mot de passe actuel"
-                    v-model="oldPassword"
-                />
-            </div>
-            <div></div>
-            <div class="field">
-                <label for="password">Nouveau mot de passe</label>
-                <input
-                    type="password"
-                    name="password"
-                    id="password"
-                    required
-                    placeholder="Saisisssez votre nouveau mot de passe"
-                    v-model="password"
-                />
-            </div>
-            <div class="field">
-                <label for="passwordConfirm">Nouveau mot de passe (confirmation)</label>
-                <input
-                    type="password"
-                    name="passwordConfirm"
-                    id="passwordConfirm"
-                    required
-                    placeholder="Confirmez votre nouveau mot de passe"
-                    v-model="passwordConfirm"
-                />
+            <div>
+                <h2>Mon activité</h2>
+                <div>
+                    <div class="field">
+                        <label for="mastodon.publish">Publier sur le fédiverse lorsque j'ajoute un album</label>
+                        <select id="format" v-model="formData.mastodon.publish">
+                            <option value="true">Oui</option>
+                            <option value="false">Non</option>
+                        </select>
+                        <!-- <input
+                            type="checkbox"
+                            name="mastodon.publish"
+                            id="mastodon.publish"
+                            v-model="mastodon.publish"
+                        /> -->
+                    </div>
+                    <div class="field">
+                        <label for="mastodon.url">Url de l'API de votre instance</label>
+                        <input
+                            type="text"
+                            name="mastodon.url"
+                            id="mastodon.url"
+                            v-model="formData.mastodon.url"
+                            placeholder="https://mastodon.social/api/v1/"
+                        />
+                    </div>
+                    <div class="field">
+                        <label for="mastodon.token">Jeton d'accès (droits nécessaires : write:media et write:statuses)</label>
+                        <input
+                            type="text"
+                            name="mastodon.token"
+                            id="mastodon.token"
+                            v-model="formData.mastodon.token"
+                        />
+                    </div>
+                    <div class="field">
+                        <label for="mastodon.message">Message</label>
+                        <input
+                            type="text"
+                            name="mastodon.message"
+                            id="mastodon.message"
+                            v-model="formData.mastodon.message"
+                        />
+                        <small>
+                            Variables possibles :
+                            <ul>
+                                <li>{artist}, exemple : Iron Maiden</li>
+                                <li>{album}, exemple : Powerslave</li>
+                                <li>{format}, exemple : Cassette</li>
+                                <li>{year}, exemple: 1984</li>
+                                <li>{video}, exemple : https://www.youtube.com/watch?v=Qx0s8OqgBIw</li>
+                            </ul>
+                        </small>
+                    </div>
+                    <button type="button" class="button is-secondary mt-10" :disabled="loading" @click="testMastodon">
+                        <span>Tester</span>
+                    </button>
+                </div>
            </div>

            <button type="submit" class="button is-primary mt-10" :disabled="loading">
                <span v-if="!loading">Mettre à jour</span>
                <i class="icon-spin animate-spin" v-if="loading"></i>
            </button>
-        </form>
-    </div>
+
+        </div>
+    </form>
 </main>

 <script>
    const email = '<%= user.email %>';
    const username = '<%= user.username %>';
+    const mastodon = <%- JSON.stringify(user.mastodon) %>;
  </script>
--- a/views/pages/mon-compte/ma-collection/details.ejs
+++ b/views/pages/mon-compte/ma-collection/details.ejs
@ -1,7 +1,11 @@
 <main class="layout-maxed ma-collection-details" id="ma-collection-details" v-cloak @keyup="changeImage">

    <h1>
-        <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artists_sort=${item.artists_sort}`">{{item.artists_sort}}</a> - {{item.title}}
+        <template v-for="artist in item.artists">
+            <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artist=${artist.name}`">{{artist.name}}</a>
+            <template v-if="artist.join">&nbsp;{{artist.join}}&nbsp;</template>
+        </template>
+        - {{item.title}}
        <i class="icon-trash" title="Supprimer cette fiche" @click="showConfirmDelete()"></i>
        <i class="icon-refresh" title="Mettre à jour les données de cette fiche" @click="updateItem()"></i>
    </h1>