Update signup form to have profile image upload component

closes #5544
- Added profile image into `signup.hbs`
- Added image handling in `signup.js` controller
- Uses session authenticated user to upload image
This commit is contained in:
John O'Mahoney 2015-08-12 01:10:27 +01:00
parent 8dd69ddaef
commit dbeea0f9bd
2 changed files with 46 additions and 8 deletions

View File

@ -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'));
});
}
}
});

View File

@ -11,17 +11,11 @@
<input style="display:none;" type="text" name="fakeusernameremembered"/>
<input style="display:none;" type="password" name="fakepasswordremembered"/>
<figure class="account-image">
<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-profile-image fileStorage=config.fileStorage email=validEmail setImage="setImage"}}
{{#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}}