Add Gravatar

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
 }

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) {

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')

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

views/user/partials/avatar.pug

@@ -6,10 +6,23 @@
 				include ../../includes/avatar.pug
 		.col
 			.alert.alert-danger#avatarAlert(style="display: none")
-			.form-group
+			form
-				label(for="#fileinput") Choose File
+				.form-check
-				input.form-control-file#fileinput(type="file", aria-labelledby="#maxFileText")
+					input.form-check-input#uploadType(type="radio", name="avi", checked)
-				small#maxFileText Max file size: 5 MB, only .png and .jpg allowed
+					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()