202 lines
9.1 KiB
Text
202 lines
9.1 KiB
Text
<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>
|