add radio button

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -7,13 +7,66 @@ import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PersonalContainer from '../../services/PersonalContainer';
 
-const ProfileImageSettings = () => {
-  return (
-    <React.Fragment>
-      <p>hoge</p>
-    </React.Fragment>
-  );
-};
+class ProfileImageSettings extends React.Component {
+
+  constructor(appContainer) {
+    super();
+
+  }
+
+
+  render() {
+    const { t, personalContainer } = this.props;
+
+    return (
+      <div className="row">
+        <div className="col-md-2 col-sm-offset-1 col-sm-4">
+          <h4>
+            <div className="radio radio-primary">
+              <input
+                type="radio"
+                id="radioGravatar"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                checked={personalContainer.state.isGravatarEnabled}
+                onChange={() => { personalContainer.changeIsGravatarEnabled(true) }}
+              />
+              <label htmlFor="radioGravatar">
+                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
+              </label>
+              <a href="https://gravatar.com/">
+                <small><i className="icon-arrow-right-circle" aria-hidden="true"></i></small>
+              </a>
+            </div>
+          </h4>
+
+          {/* TODO set gravator src */}
+          <img src="" width="64" />
+        </div>
+
+        <div className="col-md-4 col-sm-7">
+          <h4>
+            <div className="radio radio-primary">
+              <input
+                type="radio"
+                id="radioUploadPicture"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                checked={!personalContainer.state.isGravatarEnabled}
+                onChange={() => { personalContainer.changeIsGravatarEnabled(false) }}
+              />
+              <label htmlFor="radioUploadPicture">
+                { t('Upload Image') }
+              </label>
+            </div>
+          </h4>
+        </div>
+      </div>
+    );
+  }
+
+}
+
 
 const ProfileImageSettingsWrapper = (props) => {
   return createSubscribedElement(ProfileImageSettings, props, [AppContainer, PersonalContainer]);

src/client/js/services/PersonalContainer.js

@@ -23,6 +23,7 @@ export default class PersonalContainer extends Container {
       registrationWhiteList: this.appContainer.getConfig().registrationWhiteList,
       isEmailPublished: false,
       lang: 'en-US',
+      isGravatarEnabled: false,
       externalAccounts: [],
       isPasswordSet: false,
       apiToken: '',
@@ -50,6 +51,7 @@ export default class PersonalContainer extends Container {
         email: currentUser.email,
         isEmailPublished: currentUser.isEmailPublished,
         lang: currentUser.lang,
+        isGravatarEnabled: currentUser.isGravatarEnabled,
         isPasswordSet: (currentUser.password != null),
         apiToken: currentUser.apiToken,
       });
@@ -106,6 +108,13 @@ export default class PersonalContainer extends Container {
     this.setState({ lang });
   }
 
+  /**
+   * Change isGravatarEnabled
+   */
+  changeIsGravatarEnabled(boolean) {
+    this.setState({ isGravatarEnabled: boolean });
+  }
+
   /**
    * Update basic info
    * @memberOf PersonalContainer