reactify profile image uploader

src/client/js/app.jsx

@@ -40,6 +40,7 @@ import CustomHeaderEditor from './components/Admin/CustomHeaderEditor';
 import AdminRebuildSearch from './components/Admin/AdminRebuildSearch';
 import ExportPage from './components/Admin/Export/ExportPage';
 import GroupDeleteModal from './components/GroupDeleteModal/GroupDeleteModal';
+import ProfileImageForm from './components/ProfileImageForm';
 
 import AppContainer from './services/AppContainer';
 import PageContainer from './services/PageContainer';
@@ -96,6 +97,8 @@ let componentMappings = {
   'page-status-alert': <PageStatusAlert />,
   'save-page-controls': <SavePageControls />,
 
+  'profile-image-form': <ProfileImageForm />,
+
   'user-created-list': <RecentCreated />,
   'user-draft-list': <MyDraftList />,
 

src/client/js/components/ProfileImageForm.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import AppContainer from '../services/AppContainer';
+import { createSubscribedElement } from './UnstatedUtils';
+
+class ProfileImageForm extends React.Component {
+
+  render() {
+    return (
+      <div></div>
+    );
+  }
+
+}
+/**
+ * Wrapper component for using unstated
+ */
+const ProfileImageFormWrapper = (props) => {
+  return createSubscribedElement(ProfileImageForm, props, [AppContainer]);
+};
+
+ProfileImageForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(ProfileImageFormWrapper);

src/server/views/me/index.html

@@ -121,7 +121,8 @@
 
       <legend>{{ t('Set Profile Image') }}</legend>
 
-      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
+      <div id="profile-image-form"></div>
+<!--      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
         <h4>
           <div class="radio radio-primary">
             <input type="radio" id="radioGravatar" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
@@ -135,7 +136,7 @@
         </h4>
 
         <img src="{{ user|gravatar }}" width="64">
-      </div><!-- /.col-sm* -->
+      </div>
 
       <div class="form-group col-md-4 col-sm-7">
         <h4>
@@ -163,7 +164,7 @@
             </form>
             </p>
           </div>
-        </div><!-- /.form-group -->
+        </div>
 
         <div class="form-group">
           <label for="" class="col-sm-4 control-label">
@@ -182,15 +183,15 @@
             * {{ t('page_me.form_help.profile_image2') }}<br>
             {% endif %}
           </div>
-        </div><!-- /.form-group -->
+        </div>
 
-      </div><!-- /.col-sm- -->
+      </div>
 
       <div class="form-group">
         <div class="col-sm-offset-4 col-sm-6">
           <button type="submit" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
         </div>
-      </div>
+      </div> -->
 
     </fieldset>
   </div><!-- /.form-box -->