100 lines
3.2 KiB
Text
100 lines
3.2 KiB
Text
|
<main class="layout-maxed collection" id="app">
|
||
|
|
<h1>
|
||
|
|
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"
|
||
|
|
/>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
Vue.createApp({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
email: '<%= user.email %>',
|
||
|
|
username: '<%= user.username %>',
|
||
|
|
oldPassword: '',
|
||
|
|
password: '',
|
||
|
|
passwordConfirm: '',
|
||
|
|
loading: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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);
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}).mount('#app');
|
||
|
|
</script>
|