michael/MusicTopus
1
0
Fork 0
forked from dbroqua/MusicTopus
Code Pull requests Activity

#35 - Je peux accéder à mon compte (#44)

Browse source 
Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/44
This commit is contained in:
Damien Broqua 2022-04-10 15:21:15 +02:00
parent 226a9ef1d1
commit 48c997ae10
13 changed files with 284 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

2
views/error.ejs
View file

@ -1,10 +1,8 @@
<main class="layout-maxed error">
<h1><%= page.title %></h1>
<% if ( errorCode && errorCode === 404 ) { %>
<p class="text-center">
<img src="/img/404.svg" alt="Erreur 404" style="max-height: 400px;" />
</p>
<% } %>
<% if ( process.env.NODE_ENV !== 'production' ) { %>
<div>
<pre><%= page.error %></pre>

70
views/index.ejs
View file

@ -83,6 +83,10 @@
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/mon-compte">
Mon compte
</a>
<hr />
<a class="navbar-item" href="/ma-collection">
Ma collection
</a>
@ -125,32 +129,50 @@
<span></span>
</div>
<% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
<div class="flash">
<% if ( page.failureFlash ) {%>
<div class="header">
Erreur
<%
if ( flash.error.length > 0 ) {
for ( let i = 0 ; i < flash.error.length ; i += 1 ) {
%>
<div class="flash">
<div class="header">
Erreur
</div>
<div class="body">
<%= flash.error[i].replace('Error: ', '') %>
</div>
</div>
<div class="body">
<%= page.failureFlash %>
<%
}
}
if ( flash.info.length > 0 ) {
for ( let i = 0 ; i < flash.info.length ; i += 1 ) {
%>
<div class="flash info">
<div class="header">
Information
</div>
<div class="body">
<%= flash.info[i] %>
</div>
</div>
<% } %>
<%
if (error && error.length > 0) {
for( let i = 0 ; i < error.length ; i += 1 ) {
%>
<div class="header">
Erreur
</div>
<div class="body">
<%= error %>
</div>
<%
}
}
%>
</div>
<% } %>
<%
}
}
if ( flash.success.length > 0 ) {
for ( let i = 0 ; i < flash.success.length ; i += 1 ) {
%>
<div class="flash success">
<div class="header">
Succès
</div>
<div class="body">
<%= flash.success[i] %>
</div>
</div>
<%
}
}
%>
<%- include(viewname) %>

2
views/pages/ajouter-un-album.ejs
View file

@ -244,4 +244,4 @@
},
}
}).mount('#app');
</script>
</script>

16
views/pages/composants.ejs
View file

@ -274,6 +274,22 @@
Ceci est une erreur
</div>
</div>
<div class="flash info">
<div class="header">
Information
</div>
<div class="body">
Ceci est une information
</div>
</div>
<div class="flash success">
<div class="header">
Succès
</div>
<div class="body">
Ceci est un succès
</div>
</div>
<pre>
&lt;div class="flash"&gt;
&lt;div class="header"&gt;

99
views/pages/mon-compte/index.ejs Normal file
View file

@ -0,0 +1,99 @@
<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>