add gravater option

lib/form/index.js

@@ -7,6 +7,7 @@ module.exports = {
   me: {
     user: require('./me/user'),
     password: require('./me/password'),
+    imagetype: require('./me/imagetype'),
     apiToken: require('./me/apiToken'),
   },
   admin: {

lib/form/me/imagetype.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var form = require('express-form')
+  , field = form.field;
+
+module.exports = form(
+  field('imagetypeForm.isGravaterEnabled').required()
+);

lib/models/user.js

@@ -11,7 +11,7 @@ module.exports = function(crowi) {
     , STATUS_SUSPENDED  = 3
     , STATUS_DELETED    = 4
     , STATUS_INVITED    = 5
-    , USER_PUBLIC_FIELDS = '_id image googleId name username email introduction status lang createdAt admin' // TODO: どこか別の場所へ...
+    , USER_PUBLIC_FIELDS = '_id image isGravaterEnabled googleId name username email introduction status lang createdAt admin' // TODO: どこか別の場所へ...
 
     , LANG_EN    = 'en'
     , LANG_EN_US = 'en-US'
@@ -138,6 +138,13 @@ module.exports = function(crowi) {
     });
   };
 
+  userSchema.methods.updateIsGravaterEnabled = function(isGravaterEnabled, callback) {
+    this.isGravaterEnabled = isGravaterEnabled;
+    this.save(function(err, userData) {
+      return callback(err, userData);
+    });
+  };
+
   userSchema.methods.updatePassword = function(password, callback) {
     this.setPassword(password);
     this.save(function(err, userData) {

lib/routes/index.js

@@ -83,6 +83,7 @@ module.exports = function(crowi, app) {
   app.get('/me/apiToken'              , loginRequired(crowi, app) , me.apiToken);
   app.post('/me'                      , form.me.user              , loginRequired(crowi, app) , me.index);
   app.post('/me/password'             , form.me.password          , loginRequired(crowi, app) , me.password);
+  app.post('/me/imagetype'            , form.me.imagetype         , loginRequired(crowi, app) , me.imagetype);
   app.post('/me/apiToken'             , form.me.apiToken          , loginRequired(crowi, app) , me.apiToken);
   app.post('/me/picture/delete'       , loginRequired(crowi, app) , me.deletePicture);
   app.post('/me/auth/google'          , loginRequired(crowi, app) , me.authGoogle);

lib/routes/me.js

@@ -114,6 +114,36 @@ module.exports = function(crowi, app) {
     }
   };
 
+  actions.imagetype = function(req,res) {
+    if (req.method !== 'POST') {
+      // do nothing
+      return;
+    }
+    else if (!req.form.isValid) {
+      req.flash('errorMessage', req.form.errors.join('\n'));
+      return;
+    }
+
+    var imagetypeForm = req.body.imagetypeForm;
+    var userData = req.user;
+
+    var isGravaterEnabled = imagetypeForm.isGravaterEnabled;
+
+    userData.updateIsGravaterEnabled(isGravaterEnabled, function(err, userData) {
+      if (err) {
+        for (var e in err.errors) {
+          if (err.errors.hasOwnProperty(e)) {
+            req.form.errors.push(err.errors[e].message);
+          }
+        }
+        return res.render('me/index', {});
+      }
+
+      req.flash('successMessage', req.t('Updated'));
+      return res.redirect('/me');
+    });
+  }
+
   actions.password = function(req, res) {
     var passwordForm = req.body.mePassword;
     var userData = req.user;

lib/views/me/index.html

@@ -100,7 +100,7 @@
         <div class="form-group col-sm-offset-1 col-sm-4">
           <div class="radio">
             <h4>
-              <input type="radio" name="userForm[isGravaterEnabled]" value="true" {% if user.isGravaterEnabled %}checked="checked"{% endif %}>
+              <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>
@@ -108,7 +108,7 @@
         <div class="form-group col-sm-4">
           <div class="radio">
             <h4>
-              <input type="radio" name="userForm[isGravaterEnabled]" value="false" {% if !user.isGravaterEnabled  %}checked="checked"{% endif %}>{{ t('Upload Image') }}
+              <input type="radio" name="imagetypeForm[isGravaterEnabled]" value="false" {% if !user.isGravaterEnabled  %}checked="checked"{% endif %}>{{ t('Upload Image') }}
             </h4>
           </div>
 

resource/js/components/User/UserPicture.js

@@ -1,18 +1,29 @@
 import React from 'react';
+import md5 from 'md5';
 
 // TODO UserComponent?
 export default class UserPicture extends React.Component {
 
   getUserPicture(user) {
-    // from swig.setFilter('picture', function(user)
-
-    if (user.image && user.image != '/images/userpicture.png') {
+    // gravater
+    if (user.isGravaterEnabled === true) {
+      console.log(user.username + ": isGravaterEnabled true");
+      return this.createGravatarSrc(user);
+    }
+    // uploaded image
+    else if (user.image && user.image != '/images/userpicture.png') {
       return user.image;
-    } else {
+    }
+    else {
       return '/images/userpicture.png';
     }
   }
 
+  createGravatarSrc(user) {
+    const hash = md5(user.email.trim().toLowerCase());
+    return `http://www.gravatar.com/avatar/${hash}`;
+  }
+
   getClassName() {
     let className = ['picture', 'picture-rounded'];
     if (this.props.size) {