Merge pull request #5672 from jomahoney/signup-image

Update signup form to have profile image upload component

core/client/app/controllers/signup.js

@@ -8,15 +8,43 @@ export default Ember.Controller.extend(ValidationEngine, {
 
     submitting: false,
     flowErrors: '',
+    image: null,
+    validEmail: '',
 
     ghostPaths: Ember.inject.service('ghost-paths'),
+    config: Ember.inject.service(),
     notifications: Ember.inject.service(),
 
+    sendImage: function () {
+        var self = this,
+            image = this.get('image');
+
+        this.get('session.user').then(function (user) {
+            return new Ember.RSVP.Promise(function (resolve, reject) {
+                image.formData = {};
+                image.submit()
+                    .success(function (response) {
+                        user.image = response;
+                        ajax({
+                            url: self.get('ghostPaths.url').api('users', user.id.toString()),
+                            type: 'PUT',
+                            data: {
+                                users: [user]
+                            }
+                        }).then(resolve).catch(reject);
+                    })
+                    .error(reject);
+            });
+        });
+    },
+
     actions: {
         signup: function () {
             var self = this,
                 model = this.get('model'),
                 data = model.getProperties('name', 'email', 'password', 'token'),
+                image = this.get('image'),
+
                 notifications = this.get('notifications');
 
             this.set('flowErrors', '');
@@ -40,6 +68,12 @@ export default Ember.Controller.extend(ValidationEngine, {
                     self.get('session').authenticate('simple-auth-authenticator:oauth2-password-grant', {
                         identification: self.get('model.email'),
                         password: self.get('model.password')
+                    }).then(function () {
+                        if (image) {
+                            self.sendImage();
+                        }
+                    }).catch(function (resp) {
+                        notifications.showAPIError(resp);
                     });
                 }).catch(function (resp) {
                     self.toggleProperty('submitting');
@@ -52,6 +86,16 @@ export default Ember.Controller.extend(ValidationEngine, {
             }).catch(function () {
                 self.set('flowErrors', 'Please fill out the form to complete your sign-up');
             });
+        },
+        setImage: function (image) {
+            this.set('image', image);
+        },
+        handleEmail: function () {
+            var self = this;
+
+            this.validate({property: 'email'}).then(function () {
+                self.set('validEmail', self.get('email'));
+            });
         }
     }
 });

core/client/app/templates/signup.hbs

@@ -11,17 +11,11 @@
                 <input style="display:none;" type="text" name="fakeusernameremembered"/>
                 <input style="display:none;" type="password" name="fakepasswordremembered"/>
 
-                <figure class="account-image">
+                {{gh-profile-image fileStorage=config.fileStorage email=validEmail setImage="setImage"}}
-                    <div  id="account-image" class="img"  style="background-image: url(http://www.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=404&s=250)">
-                        <!-- fallback to: Ghost/core/shared/img/ghosticon.jpg -->
-                        <span class="sr-only">User image</span>
-                    </div>
-                    <a class="edit-account-image" href="#"><i class="icon-photos "><span class="sr-only">Upload an image</span></i></a>
-                </figure>
                 {{#gh-form-group errors=model.errors property="email"}}
                     <label for="email-address">Email address</label>
                     <span class="input-icon icon-mail">
-                        {{gh-input type="email" name="email" placeholder="Eg. john@example.com" class="gh-input" enter=(action "signup") disabled=true autocorrect="off" value=model.email focusOut=(action "validate" "email")}}
+                        {{gh-input type="email" name="email" placeholder="Eg. john@example.com" class="gh-input" enter=(action "signup") disabled=true autocorrect="off" value=model.email focusOut=(action "handleEmail")}}
                     </span>
                     {{gh-error-message errors=model.errors property="email"}}
                 {{/gh-form-group}}