From 9036d057e602a6eb90a0e750977e6476d1254840 Mon Sep 17 00:00:00 2001 From: Evert Date: Sun, 4 Feb 2018 18:25:45 +0200 Subject: [PATCH] Add Gravatar --- server/api/image.js | 9 ++++++ server/api/index.js | 2 +- server/routes/api.js | 27 +++++++++++++++++ views/includes/avatar.pug | 2 +- views/user/partials/avatar.pug | 53 +++++++++++++++++++++++++++++++--- 5 files changed, 87 insertions(+), 6 deletions(-) diff --git a/server/api/image.js b/server/api/image.js index 1c3ca0a..276a419 100644 --- a/server/api/image.js +++ b/server/api/image.js @@ -1,12 +1,15 @@ import gm from 'gm' import url from 'url' import path from 'path' +import crypto from 'crypto' import uuid from 'uuid/v4' import http from '../../scripts/http' const fs = require('fs-extra') +const gravatar = 'https://www.gravatar.com/avatar/' + const uploads = path.join(__dirname, '../../', 'usercontent') const images = path.join(uploads, 'images') const maxFileSize = 1000000 @@ -72,6 +75,11 @@ async function imageBase64 (baseObj) { return {file: fpath} } +function gravatarURL (email) { + let sum = crypto.createHash('md5').update(email).digest('hex') + return gravatar + sum + '.jpg' +} + async function downloadImage (imgUrl, designation) { if (!imgUrl) return null if (!designation) designation = 'download' @@ -166,5 +174,6 @@ module.exports = { downloadImage: downloadImage, uploadImage: uploadImage, imageBase64: imageBase64, + gravatarURL: gravatarURL, types: imageTypes } diff --git a/server/api/index.js b/server/api/index.js index 3dbd4da..8c3c346 100644 --- a/server/api/index.js +++ b/server/api/index.js @@ -201,7 +201,7 @@ const API = { } } - await API.User.update(user, {avatar_file: fileName}) + let u = await API.User.update(user, {avatar_file: fileName}) return fileName }, removeAvatar: async function (user) { diff --git a/server/routes/api.js b/server/routes/api.js index 70a0330..45cce29 100644 --- a/server/routes/api.js +++ b/server/routes/api.js @@ -380,6 +380,7 @@ router.post('/avatar', uploadLimiter, wrap(async (req, res, next) => { req.session.user.avatar_file = avatarFile } + req.flash('message', {error: false, text: 'Success!'}) res.status(200).jsonp({}) })) @@ -417,6 +418,32 @@ router.get('/avatar/:id', wrap(async (req, res, next) => { res.redirect('/usercontent/images/' + user.avatar_file) })) +router.get('/avatar/gravatar', (req, res, next) => { + if (!req.session.user) return next() + let email = req.session.user.email + + res.set('Content-Type', 'text/plain') + res.end(Image.gravatarURL(email)) +}) + +router.post('/avatar/gravatar', wrap(async (req, res, next) => { + if (!req.session.user) return next() + let user = req.session.user + + try { + let gravURL = await Image.downloadImage(Image.gravatarURL(user.email), 'GRAV-' + user.username) + let file = await API.User.changeAvatar(user, gravURL) + + req.session.user.avatar_file = file + + req.flash('message', {error: false, text: 'Success!'}) + } catch (e) { + req.flash('message', {error: true, text: 'Failed to use gravatar avatar.'}) + } + + res.jsonp({}) +})) + // Redirect to no avatar on 404 router.use('/avatar', (req, res) => { res.redirect('/static/image/avatar.png') diff --git a/views/includes/avatar.pug b/views/includes/avatar.pug index ed48022..66191a6 100644 --- a/views/includes/avatar.pug +++ b/views/includes/avatar.pug @@ -1,6 +1,6 @@ .avatar if user.avatar_file - img(src="/usercontent/images/" + user.avatar_file) + img#userAvatarFile(src="/usercontent/images/" + user.avatar_file) else .noavatar i.fa.fa-fw.fa-user diff --git a/views/user/partials/avatar.pug b/views/user/partials/avatar.pug index 5993fa4..bb32432 100644 --- a/views/user/partials/avatar.pug +++ b/views/user/partials/avatar.pug @@ -6,10 +6,23 @@ include ../../includes/avatar.pug .col .alert.alert-danger#avatarAlert(style="display: none") - .form-group - label(for="#fileinput") Choose File - input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText") - small#maxFileText Max file size: 5 MB, only .png and .jpg allowed + form + .form-check + input.form-check-input#uploadType(type="radio", name="avi", checked) + label(for="#uploadType") Upload Image + .form-group.ml-5 + label(for="#fileinput") Choose File + input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText") + small#maxFileText Max file size: 5 MB, only .png and .jpg allowed + .form-check + .row + .col + input.form-check-input#gravType(type="radio", name="avi") + label(for="#gravType") Use + a(href="https://en.gravatar.com/", target="_blank") Gravatar + .col + img#gravatarPic + .content#crop(style="display: none;") h3 Crop the Image .alert.alert-info#cropAlert(style="display: none;") Uploading.. @@ -112,6 +125,34 @@ script. }) } + function gravatarDance() { + $.ajax({ + type: 'GET', + url: '/api/avatar/gravatar', + success: function (ln) { + if ($('#userAvatarFile').length) { + var ufile = $('#userAvatarFile').attr('src') + if (ufile.indexOf('/GRAV-') !== -1) { + $('#gravType').prop('checked', true) + } else { + $('#uploadType').prop('checked', true) + } + } + $('#gravatarPic').attr('src', ln) + } + }) + + $('#gravType').click(function (e) { + $.ajax({ + type: 'POST', + url: '/api/avatar/gravatar', + success: function () { + window.location.reload() + } + }) + }) + } + function cancel() { $('#fileChoose').show() $('#cropAlert').hide() @@ -153,6 +194,10 @@ script. cancel() }) + $('#avatarModal').on('show.bs.modal', function (e) { + gravatarDance() + }) + $('#fileinput').on('change', function (e) { e.preventDefault() handleFileSelect()