develop (#91)
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/91 Co-authored-by: dbroqua <contact@darkou.fr> Co-committed-by: dbroqua <contact@darkou.fr>
This commit is contained in:
parent
e0f227af08
commit
4109186a47
29 changed files with 497 additions and 325 deletions
|
@ -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>
|
||||
|
|
|
@ -497,9 +497,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>
|
||||
<a class="button is-danger" href="/se-deconnecter">
|
||||
Déconnexion
|
||||
</a>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue