inject gravater

lib/util/middlewares.js

@@ -1,4 +1,5 @@
 var debug = require('debug')('crowi:lib:middlewares');
+var md5 = require('md5');
 
 exports.loginChecker = function(crowi, app) {
   return function(req, res, next) {
@@ -57,6 +58,24 @@ exports.swigFunctions = function(crowi, app) {
 };
 
 exports.swigFilters = function(app, swig) {
+
+  // define a function for Gravater
+  const generateGravatarSrc = function(user) {
+    const hash = md5(user.email.trim().toLowerCase());
+    return `http://www.gravatar.com/avatar/${hash}`;
+  };
+
+  // define a function for uploaded picture
+  const getUploadedPictureSrc = function(user) {
+    if (user.image !== undefined) {
+      return user.image;
+    }
+    else {
+      return '/images/userpicture.png';
+    }
+  };
+
+
   return function(req, res, next) {
     swig.setFilter('path2name', function(string) {
       var name = string.replace(/(\/)$/, '');
@@ -131,15 +150,19 @@ exports.swigFilters = function(app, swig) {
         .replace(/\s(https?.+(jpe?g|png|gif))\s/, '\n\n\n![]($1)\n\n\n');
     });
 
+    swig.setFilter('gravater', generateGravatarSrc);
+    swig.setFilter('uploadedpicture', getUploadedPictureSrc);
+
     swig.setFilter('picture', function(user) {
       if (!user) {
         return '';
       }
 
-      if (user.image && user.image != '/images/userpicture.png') {
-        return user.image;
-      } else {
-        return '/images/userpicture.png';
+      if (user.isGravaterEnabled === true) {
+        return generateGravatarSrc(user);
+      }
+      else {
+        return getUploadedPictureSrc(user);
       }
     });
 

lib/views/me/index.html

@@ -96,30 +96,34 @@
   <div class="form-box">
     <form action="/me/imagetype" method="post" class="form" role="form">
       <fieldset>
+
         <legend>{{ t('Set Profile Image') }}</legend>
-        <div class="form-group col-sm-offset-1 col-sm-4">
+
+        <div class="form-group col-sm-offset-1 col-sm-3">
           <div class="radio">
             <h4>
               <input type="radio" name="imagetypeForm[isGravaterEnabled]" value="true" {% if user.isGravaterEnabled %}checked="checked"{% endif %}>
               <img src="https://www.gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravater
             </h4>
           </div>
+
+          <img src="{{ user|gravater }}" width="64">
         </div><!-- /.col-sm* -->
-        <div class="form-group col-sm-4">
+
+        <div class="form-group col-sm-8">
           <div class="radio">
             <h4>
               <input type="radio" name="imagetypeForm[isGravaterEnabled]" value="false" {% if !user.isGravaterEnabled  %}checked="checked"{% endif %}>{{ t('Upload Image') }}
             </h4>
           </div>
-
           <div class="form-group">
             <div id="pictureUploadFormMessage"></div>
-            <label for="" class="col-sm-6 control-label">
+            <label for="" class="col-sm-4 control-label">
               {{ t('Current Image') }}
             </label>
-            <div class="col-sm-6">
+            <div class="col-sm-8">
               <p>
-              <img src="{{ user|picture }}" width="64" id="settingUserPicture"><br>
+              <img src="{{ user|uploadedpicture }}" width="64" id="settingUserPicture"><br>
               </p>
               <p>
               {% if user.image %}
@@ -132,10 +136,10 @@
           </div><!-- /.form-group -->
 
           <div class="form-group">
-            <label for="" class="col-sm-6 control-label">
+            <label for="" class="col-sm-4 control-label">
               {{ t('Upload new image') }}
             </label>
-            <div class="col-sm-6">
+            <div class="col-sm-8">
               {% if isUploadable() %}
               <form action="/_api/me/picture/upload" id="pictureUploadForm" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
                 <input name="userPicture" type="file" accept="image/*">

resource/js/components/User/UserPicture.js

@@ -8,7 +8,7 @@ export default class UserPicture extends React.Component {
     // gravater
     if (user.isGravaterEnabled === true) {
       console.log(user.username + ": isGravaterEnabled true");
-      return this.createGravatarSrc(user);
+      return this.generateGravatarSrc(user);
     }
     // uploaded image
     else if (user.image && user.image != '/images/userpicture.png') {
@@ -19,7 +19,7 @@ export default class UserPicture extends React.Component {
     }
   }
 
-  createGravatarSrc(user) {
+  generateGravatarSrc(user) {
     const hash = md5(user.email.trim().toLowerCase());
     return `http://www.gravatar.com/avatar/${hash}`;
   }