dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

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

Browse source 
Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: #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
Show stats Download patch file Download diff file Expand all files Collapse all files

0
public/robots.txt Normal file
View file

8
sass/flash.scss
View file

@ -11,4 +11,12 @@
.header {
font-weight: 800;
}
&.info {
background-color: $warning-color;
}
&.success {
background-color: $success-color;
}
}

9
sass/navbar.scss
View file

@ -132,6 +132,8 @@
}
&:hover {
background-color: var(--default-color);
.navbar-link {
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
@ -252,6 +254,13 @@
padding-bottom: .5rem;
padding-top: .5rem;
hr {
background-color: var(--font-color);
border: none;
height: 2px;
margin: .5rem 0;
}
.navbar-item {
cursor: pointer;
padding-left: 1.5rem;

44
src/app.js
View file

@ -15,6 +15,7 @@ import { isXhr } from "./helpers";
import indexRouter from "./routes";
import maCollectionRouter from "./routes/ma-collection";
import monCompteRouter from "./routes/mon-compte";
import collectionRouter from "./routes/collection";
import importJobsRouter from "./routes/jobs";
@ -83,6 +84,7 @@ app.use(
);
app.use("/", indexRouter);
app.use("/mon-compte", monCompteRouter);
app.use("/ma-collection", maCollectionRouter);
app.use("/collection", collectionRouter);
app.use("/jobs", importJobsRouter);
@ -97,15 +99,22 @@ app.use((req, res) => {
} else {
res.status(404).render("index", {
page: { title: `404: Cette page n'existe pas.` },
errorCode: 404,
viewname: "error",
user: req.user || null,
config,
session: req.session || null,
flashInfo: null,
query: null,
params: null,
error: null,
flash: {
info: req.flash("info"),
error: [
...req.flash("error"),
...(req.session?.flash?.error || []),
],
success: req.flash("success"),
},
query: req.query,
params: req.params,
user: req.user,
config,
getBaseUrl: null,
errorCode: 404,
});
}
});
@ -122,15 +131,22 @@ app.use((error, req, res, next) => {
title: error.title || "500: Oups… le serveur a crashé !",
error,
},
errorCode: error.errorCode || 500,
viewname: "error",
user: req.user || null,
config,
session: req.session || null,
flashInfo: null,
query: null,
params: null,
error: null,
flash: {
info: req.flash("info"),
error: [
...req.flash("error"),
...(req.session?.flash?.error || []),
],
success: req.flash("success"),
},
query: req.query,
params: req.params,
user: req.user,
config,
getBaseUrl: null,
errorCode: error.errorCode || 500,
});
next();

5
src/middleware/Albums.js
View file

@ -98,7 +98,7 @@ class Albums extends Pages {
if (!this.req.user && !collectionUserId) {
throw new ErrorEvent(
401,
"Cette collection n'est pas publique",
"Collection",
"Cette collection n'est pas publique"
);
}
@ -114,7 +114,7 @@ class Albums extends Pages {
) {
throw new ErrorEvent(
401,
"Cette collection n'est pas publique",
"Collection",
"Cette collection n'est pas publique"
);
}
@ -233,6 +233,7 @@ class Albums extends Pages {
if (!user || !user.isPublicCollection) {
throw new ErrorEvent(
401,
"Collection non partagée",
"Cet utilisateur ne souhaite pas partager sa collection"
);
}

34
src/middleware/Me.js
View file

@ -1,15 +1,12 @@
import Joi from "joi";
import UsersModel from "../models/users";
import Pages from "./Pages";
/**
* Classe permettant la gestion de l'utilisateur connecté
*/
class Me {
constructor(req) {
this.req = req;
}
class Me extends Pages {
/**
* Méthode permettant de modifier le profil d'un utilisateur
* @return {Object}
@ -40,6 +37,33 @@ class Me {
return update;
}
/**
* Méthode permettant de modifier le mot de passe d'un utilisateur
*/
async updatePassword() {
const { body } = this.req;
const { _id } = this.req.user;
const schema = Joi.object({
oldPassword: Joi.string().required(),
password: Joi.string().required(),
passwordConfirm: Joi.ref("password"),
});
const value = await schema.validateAsync(body);
const user = await UsersModel.findById(_id);
if (!user.validPassword(value.oldPassword)) {
throw new Error("Votre ancien mot de passe n'est pas valide");
}
user.salt = value.password;
await user.save();
this.req.flash("success", "Profil correctement mis à jour");
}
}
export default Me;

17
src/middleware/Pages.js
View file

@ -52,21 +52,20 @@ class Pages {
*/
render() {
this.pageContent.session = this.req.session;
this.pageContent.flashInfo = this.req.flash("info");
this.pageContent.error = this.req.flash("error") || null;
this.pageContent.flash = {
info: this.req.flash("info"),
error: [
...this.req.flash("error"),
...(this.req.session?.flash?.error || []),
],
success: this.req.flash("success"),
};
this.pageContent.query = this.req.query;
this.pageContent.params = this.req.params;
this.pageContent.user = this.user;
this.pageContent.config = config;
this.pageContent.getBaseUrl = getBaseUrl(this.req);
if (this.req.session.flash && this.req.session.flash.error) {
// eslint-disable-next-line prefer-destructuring
this.pageContent.page.failureFlash =
this.req.session.flash.error[0];
this.req.session.flash = null;
}
return this.pageContent;
}
}

35
src/routes/mon-compte.js Normal file
View file

@ -0,0 +1,35 @@
import express from "express";
import { ensureLoggedIn } from "connect-ensure-login";
import Me from "../middleware/Me";
import render from "../libs/format";
// eslint-disable-next-line new-cap
const router = express.Router();
router
.route("/")
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
try {
const page = new Me(req, "mon-compte/index");
page.setPageTitle("Mon compte");
render(res, page);
} catch (err) {
next(err);
}
})
.post(ensureLoggedIn("/connexion"), async (req, res) => {
try {
const page = new Me(req, "mon-compte/index");
await page.updatePassword();
} catch (err) {
req.flash("error", err.toString());
}
res.redirect("/mon-compte");
});
export default router;

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>

42
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 ) ) {%>
<%
if ( flash.error.length > 0 ) {
for ( let i = 0 ; i < flash.error.length ; i += 1 ) {
%>
<div class="flash">
<% if ( page.failureFlash ) {%>
<div class="header">
Erreur
</div>
<div class="body">
<%= page.failureFlash %>
<%= flash.error[i].replace('Error: ', '') %>
</div>
</div>
<% } %>
<%
if (error && error.length > 0) {
for( let i = 0 ; i < error.length ; i += 1 ) {
}
}
if ( flash.info.length > 0 ) {
for ( let i = 0 ; i < flash.info.length ; i += 1 ) {
%>
<div class="flash info">
<div class="header">
Erreur
Information
</div>
<div class="body">
<%= error %>
<%= flash.info[i] %>
</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>
<%
}
}
%>
</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>