MusicTopus/views/pages/mon-compte/index.ejs

<main class="layout-maxed collection" id="mon-compte">
    <h1>
        Mon compte
    </h1>

    <form method="POST" @submit.prevent="updateProfil">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
            <div class="box">
                <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="box">
                <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>
                        <textarea
                            name="mastodon.message"
                            id="mastodon.message"
                            v-model="formData.mastodon.message"
                        ></textarea>
                        <label for="mastodon.wantlist">Message pour la liste de souhaits</label>
                        <textarea
                            name="mastodon.wantlist"
                            id="mastodon.wantlist"
                            v-model="formData.mastodon.wantlist"
                        ></textarea>
                        <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>
                                <li>{genres}, exemple : Rock</li>
                                <li>{#genres}, exemple : #rock</li>
                                <li>{styles}, exemple : Hard Rock, Heavy Metal</li>
                                <li>{#styles}, exemple : #hardRock, #heavyMetal</li>
                            </ul>
                        </small>
                    </div>
                    <button type="button" class="button is-secondary mt-10" :disabled="loading" @click="testMastodon">
                        <span>Tester</span>
                    </button>
                </div>
            </div>
            <div class="box">
                <h2>Mes préférences</h2>
                <div>
                    <div class="field">
                        <label for="pagination">Pagination</label>
                        <select id="pagination" v-model="formData.pagination">
                            <option value="16">16 albums/page</option>
                            <option value="24">24 albums/page</option>
                            <option value="32">32 albums/page</option>
                            <option value="48">48 albums/page</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="box">
                <h2>Supprimer mon compte</h2>
                <div>
                    <p>
                        Vous souhaitez supprimer votre compte et vos collections ?
                        <br />
                        Rien de plus simple !
                        <br />
                        Il vous suffit de cliquer sur le bouton ci-dessous et l'on se charge de supprimer dans la seconde absolument toutes les données stockées sur cette instance vous concernant !
                    </p>

                    <div class="flash error">
                        <div class="header">
                            Attention
                        </div>
                        <div class="body">
                            Toute suppression est définitive
                        </div>
                    </div>

                    <div>
                        <label for="delete">
                            <input type="checkbox" id="delete" v-model="formData.delete">
                            J'ai compris
                        </label>
                    </div>

                    <button type="button" class="button is-danger mt-10" :disabled="deleting || !formData.delete" @click="deleteAccount">
                        <span v-if="!deleting">Supprimer</span>
                        <i class="icon-spin animate-spin" v-if="deleting"></i>
                    </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>

        </div>
    </form>
</main>

<script>
    const email = '<%= user.email %>';
    const username = '<%= user.username %>';
    const pagination = "<%= user.pagination || 16 %>";
    const mastodon = <%- JSON.stringify(user.mastodon || {publish: false, url: '', token: '', message: ''}) %>;
</script>