@issue-86 #90
18 changed files with 420 additions and 147 deletions
|
|
@ -22,7 +22,7 @@ module.exports = {
|
|||
camelcase: [
|
||||
"error",
|
||||
{
|
||||
allow: ["artists_sort"],
|
||||
allow: ["artists_sort", "access_token", "api_url", "media_ids"],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ Vue.createApp({
|
|||
items: [],
|
||||
details: {},
|
||||
modalIsVisible: false,
|
||||
submitting: false,
|
||||
formats: [
|
||||
"Vinyl",
|
||||
"Acetate",
|
||||
|
|
@ -160,12 +161,18 @@ Vue.createApp({
|
|||
});
|
||||
},
|
||||
add() {
|
||||
axios
|
||||
if (this.submitting) {
|
||||
return true;
|
||||
}
|
||||
this.submitting = true;
|
||||
|
||||
return axios
|
||||
.post("/api/v1/albums", this.details)
|
||||
.then(() => {
|
||||
window.location.href = "/ma-collection";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.submitting = false;
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible d'ajouter cet album pour le moment…"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
const { protocol, host } = window.location;
|
||||
|
||||
let timeout = null;
|
||||
|
||||
/**
|
||||
* Fonction permettant d'afficher un message dans un toastr
|
||||
* @param {String} message
|
||||
|
|
@ -11,12 +13,23 @@ function showToastr(message, success = false) {
|
|||
x.getElementsByTagName("SPAN")[0].innerHTML = message;
|
||||
}
|
||||
|
||||
x.className = `${x.className} show`.replace("sucess", "");
|
||||
if (success) {
|
||||
x.className = `${x.className} success`;
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
x.classList.remove("show");
|
||||
}
|
||||
setTimeout(() => {
|
||||
x.className = x.className.replace("show", "");
|
||||
|
||||
x.classList.remove("success");
|
||||
x.classList.remove("error");
|
||||
if (success) {
|
||||
x.classList.add("success");
|
||||
} else {
|
||||
x.classList.add("error");
|
||||
}
|
||||
|
||||
x.classList.add("show");
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
x.classList.remove("show");
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
|
|||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
// eslint-disable-next-line no-undef
|
||||
email,
|
||||
// eslint-disable-next-line no-undef
|
||||
|
|
@ -9,20 +10,92 @@ if (typeof email !== "undefined" && typeof username !== "undefined") {
|
|||
oldPassword: "",
|
||||
password: "",
|
||||
passwordConfirm: "",
|
||||
// eslint-disable-next-line no-undef
|
||||
mastodon: mastodon || {
|
||||
publish: false,
|
||||
url: "",
|
||||
token: "",
|
||||
message:
|
||||
"Je viens d'ajouter {artist} - {album} à ma collection !",
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
errors: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
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);
|
||||
// }
|
||||
async testMastodon() {
|
||||
const { url, token } = this.formData.mastodon;
|
||||
|
||||
if (!url) {
|
||||
this.errors.push("emptyUrl");
|
||||
}
|
||||
if (!token) {
|
||||
this.errors.push("emptyToken");
|
||||
}
|
||||
|
||||
if (this.errors.length > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.post(`/api/v1/mastodon`, { url, token });
|
||||
|
||||
showToastr("Configuration valide !", true);
|
||||
} catch (err) {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de tester cette configuration",
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
async updateProfil() {
|
||||
this.errors = [];
|
||||
const { oldPassword, password, passwordConfirm, mastodon } =
|
||||
this.formData;
|
||||
|
||||
if (password && !oldPassword) {
|
||||
this.errors.push("emptyPassword");
|
||||
}
|
||||
|
||||
if (password !== passwordConfirm) {
|
||||
this.errors.push("passwordsDiffer");
|
||||
}
|
||||
|
||||
if (this.errors.length > 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
const data = {
|
||||
mastodon,
|
||||
};
|
||||
|
||||
if (password) {
|
||||
data.password = password;
|
||||
data.oldPassword = oldPassword;
|
||||
}
|
||||
|
||||
try {
|
||||
await axios.patch(`/api/v1/me`, data);
|
||||
|
||||
showToastr("Profil mis à jour", true);
|
||||
} catch (err) {
|
||||
showToastr(
|
||||
err.response?.data?.message ||
|
||||
"Impossible de mettre à jour votre profil"
|
||||
);
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
|
||||
return true;
|
||||
},
|
||||
},
|
||||
}).mount("#mon-compte");
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
"gulp-uglify": "^3.0.2",
|
||||
"joi": "^17.6.0",
|
||||
"knacss": "^8.0.4",
|
||||
"mastodon": "^1.2.2",
|
||||
"mongoose": "^6.2.1",
|
||||
"mongoose-unique-validator": "^3.0.0",
|
||||
"nodemailer": "^6.7.8",
|
||||
|
|
|
|||
|
|
@ -22,10 +22,12 @@ $nord15: #b48ead;
|
|||
|
||||
$primary-color: $nord8;
|
||||
$danger-color: $nord11;
|
||||
$error-color: $nord12;
|
||||
$warning-color: $nord13;
|
||||
$success-color: $nord14;
|
||||
$primary-color-hl: darken($primary-color, $hoverAmount);
|
||||
$danger-color-hl: darken($danger-color, $hoverAmount);
|
||||
$error-color-hl: darken($error-color, $hoverAmount);
|
||||
$warning-color-hl: darken($warning-color, $hoverAmount);
|
||||
$success-color-hl: darken($success-color, $hoverAmount);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
.error {
|
||||
main {
|
||||
&.error {
|
||||
min-height: calc(100vh - 3.25rem - 100px);
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -42,6 +42,7 @@
|
|||
@import './loader';
|
||||
|
||||
@import './error';
|
||||
@import './messages.scss';
|
||||
@import './500';
|
||||
@import './home';
|
||||
@import './ajouter-un-album';
|
||||
|
|
|
|||
9
sass/messages.scss
Normal file
9
sass/messages.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.message {
|
||||
margin: 8px 0;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
|
||||
&.error {
|
||||
color: $error-color-hl;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,15 +3,18 @@
|
|||
min-width: 250px;
|
||||
max-width: 360px;
|
||||
position: fixed;
|
||||
z-index: 31;
|
||||
z-index: 66;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
font-size: 17px;
|
||||
|
||||
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
|
||||
&.error {
|
||||
background-color: $danger-color;
|
||||
color: $button-alternate-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $success-color;
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import importJobsRouter from "./routes/jobs";
|
|||
|
||||
import importAlbumRouterApiV1 from "./routes/api/v1/albums";
|
||||
import importSearchRouterApiV1 from "./routes/api/v1/search";
|
||||
import importMastodonRouterApiV1 from "./routes/api/v1/mastodon";
|
||||
import importMeRouterApiV1 from "./routes/api/v1/me";
|
||||
import importContactRouterApiV1 from "./routes/api/v1/contact";
|
||||
|
||||
|
|
@ -84,6 +85,7 @@ app.use("/collection", collectionRouter);
|
|||
app.use("/jobs", importJobsRouter);
|
||||
app.use("/api/v1/albums", importAlbumRouterApiV1);
|
||||
app.use("/api/v1/search", importSearchRouterApiV1);
|
||||
app.use("/api/v1/mastodon", importMastodonRouterApiV1);
|
||||
app.use("/api/v1/me", importMeRouterApiV1);
|
||||
app.use("/api/v1/contact", importContactRouterApiV1);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
import { format as formatDate } from "date-fns";
|
||||
import fs from "fs";
|
||||
|
||||
import Mastodon from "mastodon";
|
||||
import { v4 } from "uuid";
|
||||
import axios from "axios";
|
||||
import Pages from "./Pages";
|
||||
import Export from "./Export";
|
||||
|
||||
|
|
@ -40,9 +44,83 @@ class Albums extends Pages {
|
|||
id: album._id,
|
||||
};
|
||||
|
||||
try {
|
||||
const User = await UsersModel.findOne({ _id: user._id });
|
||||
|
||||
const { mastodon: mastodonConfig } = User;
|
||||
|
||||
const { publish, token, url, message } = mastodonConfig;
|
||||
|
||||
if (publish && url && token) {
|
||||
const M = new Mastodon({
|
||||
access_token: token,
|
||||
api_url: url,
|
||||
});
|
||||
|
||||
const video =
|
||||
data.videos && data.videos.length > 0
|
||||
? data.videso[0].uri
|
||||
: "";
|
||||
|
||||
const status = `${(
|
||||
message ||
|
||||
"Je viens d'ajouter {artist} - {album} à ma collection !"
|
||||
)
|
||||
.replaceAll("{artist}", data.artists[0].name)
|
||||
.replaceAll("{format}", data.formats[0].name)
|
||||
.replaceAll("{year}", data.year)
|
||||
.replaceAll("{video}", video)
|
||||
.replaceAll("{album}", data.title)}
|
||||
|
||||
Publié automatiquement via #musictopus`;
|
||||
|
||||
const media_ids = [];
|
||||
|
||||
if (data.images.length > 0) {
|
||||
for (let i = 0; i < data.images.length; i += 1) {
|
||||
if (media_ids.length === 4) {
|
||||
break;
|
||||
}
|
||||
|
||||
const filename = `${v4()}.jpg`;
|
||||
const file = `/tmp/${filename}`;
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const { data: buff } = await axios.get(
|
||||
data.images[i].uri,
|
||||
{
|
||||
responseType: "arraybuffer",
|
||||
}
|
||||
);
|
||||
|
||||
fs.writeFileSync(file, buff);
|
||||
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const { data: media } = await M.post("media", {
|
||||
file: fs.createReadStream(file),
|
||||
});
|
||||
|
||||
const { id } = media;
|
||||
|
||||
media_ids.push(id);
|
||||
|
||||
fs.unlinkSync(file);
|
||||
}
|
||||
}
|
||||
|
||||
await M.post("statuses", { status, media_ids });
|
||||
}
|
||||
|
||||
const job = new JobsModel(jobData);
|
||||
|
||||
job.save();
|
||||
} catch (err) {
|
||||
throw new ErrorEvent(
|
||||
500,
|
||||
"Mastodon",
|
||||
"Album ajouté à votre collection mais impossible de publier sur Mastodon"
|
||||
);
|
||||
}
|
||||
|
||||
return album;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,21 +12,41 @@ class Me extends Pages {
|
|||
* @return {Object}
|
||||
*/
|
||||
async patchMe() {
|
||||
const { body, user } = this.req;
|
||||
const { body } = this.req;
|
||||
const { _id } = this.req.user;
|
||||
|
||||
const schema = Joi.object({
|
||||
isPublicCollection: Joi.boolean(),
|
||||
oldPassword: Joi.string(),
|
||||
password: Joi.string(),
|
||||
passwordConfirm: Joi.ref("password"),
|
||||
mastodon: {
|
||||
publish: Joi.boolean(),
|
||||
url: Joi.string().uri().allow(null, ""),
|
||||
token: Joi.string().allow(null, ""),
|
||||
message: Joi.string().allow(null, ""),
|
||||
},
|
||||
});
|
||||
|
||||
const value = await schema.validateAsync(body);
|
||||
const update = await UsersModel.findByIdAndUpdate(
|
||||
user._id,
|
||||
{ $set: value },
|
||||
{ new: true }
|
||||
);
|
||||
const user = await UsersModel.findById(_id);
|
||||
|
||||
if (value.oldPassword) {
|
||||
if (!user.validPassword(value.oldPassword)) {
|
||||
throw new Error("Votre ancien mot de passe n'est pas valide");
|
||||
}
|
||||
}
|
||||
|
||||
user.mastodon = value.mastodon;
|
||||
|
||||
if (value.password) {
|
||||
user.salt = value.password;
|
||||
}
|
||||
|
||||
user.save();
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
this.req.login(update, (err) => {
|
||||
this.req.login(user, (err) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
|
@ -35,34 +55,7 @@ class Me extends Pages {
|
|||
});
|
||||
});
|
||||
|
||||
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");
|
||||
return user;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,12 @@ const UserSchema = new mongoose.Schema(
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
mastodon: {
|
||||
publish: Boolean,
|
||||
token: String,
|
||||
url: String,
|
||||
message: String,
|
||||
},
|
||||
},
|
||||
{
|
||||
timestamps: true,
|
||||
|
|
|
|||
28
src/routes/api/v1/mastodon.js
Normal file
28
src/routes/api/v1/mastodon.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import express from "express";
|
||||
import { ensureLoggedIn } from "connect-ensure-login";
|
||||
|
||||
import Mastodon from "mastodon";
|
||||
import { sendResponse } from "../../../libs/format";
|
||||
|
||||
// eslint-disable-next-line new-cap
|
||||
const router = express.Router();
|
||||
|
||||
router.route("/").post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const { url, token } = req.body;
|
||||
|
||||
const M = new Mastodon({
|
||||
access_token: token,
|
||||
api_url: url,
|
||||
});
|
||||
|
||||
const data = await M.post("statuses", {
|
||||
status: "Test d'intégration de Mastodon sur mon compte #musictopus 👌",
|
||||
});
|
||||
return sendResponse(req, res, data);
|
||||
} catch (err) {
|
||||
return next(err);
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -8,9 +8,7 @@ import render from "../libs/format";
|
|||
// eslint-disable-next-line new-cap
|
||||
const router = express.Router();
|
||||
|
||||
router
|
||||
.route("/")
|
||||
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
router.route("/").get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const page = new Me(req, "mon-compte/index");
|
||||
|
||||
|
|
@ -20,16 +18,6 @@ router
|
|||
} 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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
Mon compte
|
||||
</h1>
|
||||
|
||||
<form method="POST" @submit.prevent="updateProfil">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<form method="POST" action="/mon-compte" @submit="updateProfil">
|
||||
|
||||
<div>
|
||||
<h2>Mes données personnelles</h2>
|
||||
<div>
|
||||
<div class="field">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input
|
||||
|
|
@ -14,7 +16,7 @@
|
|||
disabled
|
||||
name="email"
|
||||
id="email"
|
||||
v-model="email"
|
||||
v-model="formData.email"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
|
@ -25,7 +27,7 @@
|
|||
disabled
|
||||
name="username"
|
||||
id="username"
|
||||
v-model="username"
|
||||
v-model="formData.username"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
|
@ -34,21 +36,21 @@
|
|||
type="password"
|
||||
name="oldPassword"
|
||||
id="oldPassword"
|
||||
required
|
||||
placeholder="Saisisssez votre mot de passe actuel"
|
||||
v-model="oldPassword"
|
||||
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></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"
|
||||
v-model="formData.password"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
|
@ -57,21 +59,86 @@
|
|||
type="password"
|
||||
name="passwordConfirm"
|
||||
id="passwordConfirm"
|
||||
required
|
||||
placeholder="Confirmez votre nouveau mot de passe"
|
||||
v-model="passwordConfirm"
|
||||
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>
|
||||
<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>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const email = '<%= user.email %>';
|
||||
const username = '<%= user.username %>';
|
||||
const mastodon = <%- JSON.stringify(user.mastodon) %>;
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue