public/js/main.js

@@ -2,13 +2,16 @@
  * Fonction permettant d'afficher un message dans un toastr
  * @param {String} message
  */
- function showToastr(message) {
+ function showToastr(message, success = false) {
     let x = document.getElementById("toastr");
     if ( message ) {
         x.getElementsByTagName("SPAN")[0].innerHTML = message;
     }
 
-    x.className = `${x.className} show`;
+    x.className = `${x.className} show`.replace("sucess", "");
+    if ( success ) {
+        x.className = `${x.className} success`;
+    }
     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
 };
 

sass/global.scss

@@ -82,4 +82,8 @@ html {
     @include respond-to("small-up") {
         display: initial;
     }
+}
+
+.is-danger {
+    color: $nord12;
 }

sass/ma-collection.scss

@@ -1,4 +1,9 @@
 .ma-collection {
+    h1 {
+        i {
+            cursor: pointer;
+        }
+    }
     .filters {
         display: flex;
         justify-content: end;

sass/toast.scss

@@ -13,6 +13,11 @@
     color: $button-alternate-color;
     border-radius: 6px;
 
+    &.success {
+        background-color: $success-color;
+        color: $button-font-color;
+    }
+
     &.show {
         visibility: visible;
         animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;

src/models/users.js

@@ -23,6 +23,10 @@ const UserSchema = new mongoose.Schema(
         },
         hash: String,
         salt: String,
+        isPublicCollection: {
+            type: Boolean,
+            default: false,
+        },
     },
     { timestamps: true }
 );

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

@@ -1,5 +1,8 @@
 <main class="layout-maxed ma-collection" id="app">
-    <h1>Ma collection</h1>
+    <h1>
+        Ma collection
+        <i class="icon-share" @click="toggleModalShare" aria-label="Partager ma collection" title="Votre collection sera visible en lecture aux personnes ayant le lien de partage"></i>
+    </h1>
     <div class="filters">
         <div class="field">
             <label for="artist">Artiste</label>
@@ -105,9 +108,35 @@
             </footer>
         </div>
     </div>
+    <div class="modal" :class="{'is-visible': showModalShare}">
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header>
+                Partager ma collection
+            </header>
+            <section>
+                Votre collection sera visible de toute personne disposant du lien suivant :
+                <br />
+                <a :href="shareLink" target="_blank">{{shareLink}}</a>
+                <br />
+                Ce lien permet uniquement de visualiser l'ensemble de votre collection mais ne perment <strong class="is-danger">en aucun cas</strong> de la modifier.
+                <br />
+                Vous pourrez à tout moment supprimer le lien de partage en cliquant à nouveau sur l'icône <i class="icon-share"></i> sur votre collection.
+            </section>
+            <footer>
+                <button class="button is-primary" @click="shareCollection">Partager</button>
+                <button class="button" @click="toggleModalShare">Annuler</button>
+            </footer>
+        </div>
+    </div>
 </main>
 
 <script>
+    const {
+        protocol,
+        host
+    } = window.location;
+
     Vue.createApp({
         data() {
             return {
@@ -124,6 +153,8 @@
                 order: 'asc',
                 itemId: null,
                 showModalDelete: false,
+                showModalShare: false,
+                shareLink: `${protocol}//${host}/collection/<%= user._id %>`,
             }
         },
         created() {
@@ -190,6 +221,9 @@
             toggleModal() {
                 this.showModalDelete = !this.showModalDelete;
             },
+            toggleModalShare() {
+                this.showModalShare = !this.showModalShare;
+            },
             showConfirmDelete(itemId) {
                 this.itemId = itemId;
                 this.toggleModal();
@@ -205,6 +239,22 @@
                     .finally(() => {
                         this.toggleModal();
                     });
+            },
+            shareCollection() {
+                axios.post(`/api/v1/me`, {
+                    isPublicCollection: true,
+                })
+                    .then( () => {
+                        showToastr("Collection partagée", true);
+
+                        window.open(this.shareLink, '_blank');
+                    })
+                    .catch((err) => {
+                        showToastr(err.response?.data?.message || "Impossible de supprimer cet album");
+                    })
+                    .finally(() => {
+                        this.toggleModalShare();
+                    });
             }
         }
   }).mount('#app');