From 4bc3af40397ca76c5ae62ecc0b06b6ec4c2ad782 Mon Sep 17 00:00:00 2001 From: Hannah Wolfe Date: Mon, 5 Aug 2013 18:26:44 +0100 Subject: [PATCH] Editable user profiles in settings screen closes #276 - settings screen now loads a model when a pane is requested, rather than when the whole screen is requested - added browse, read and edit methods and routes for users to the API - added user model & template to client and wired everything up. - provided default images for cover and profile picture --- ghost/admin/models/user.js | 13 +++ ghost/admin/router.js | 5 +- ghost/admin/tpl/settings/sidebar.hbs | 1 + ghost/admin/tpl/settings/user-profile.hbs | 76 ++++++++++++ ghost/admin/views/settings.js | 135 +++++++++++++++------- 5 files changed, 182 insertions(+), 48 deletions(-) create mode 100644 ghost/admin/models/user.js create mode 100644 ghost/admin/tpl/settings/user-profile.hbs diff --git a/ghost/admin/models/user.js b/ghost/admin/models/user.js new file mode 100644 index 0000000000..7112b06127 --- /dev/null +++ b/ghost/admin/models/user.js @@ -0,0 +1,13 @@ +/*global window, document, Ghost, $, _, Backbone */ +(function () { + "use strict"; + + Ghost.Models.User = Backbone.Model.extend({ + url: Ghost.settings.apiRoot + '/users/1' + }); + +// Ghost.Collections.Users = Backbone.Collection.extend({ +// url: Ghost.settings.apiRoot + '/users' +// }); + +}()); \ No newline at end of file diff --git a/ghost/admin/router.js b/ghost/admin/router.js index 1157aa77fe..ae0bdee0bf 100644 --- a/ghost/admin/router.js +++ b/ghost/admin/router.js @@ -33,10 +33,7 @@ }, settings: function (pane) { - var settings = new Ghost.Models.Settings(); - settings.fetch().then(function () { - Ghost.currentView = new Ghost.Views.Settings({ el: '#main', model: settings, pane: pane }); - }); + Ghost.currentView = new Ghost.Views.Settings({ el: '#main', pane: pane }); }, editor: function (id) { diff --git a/ghost/admin/tpl/settings/sidebar.hbs b/ghost/admin/tpl/settings/sidebar.hbs index 35886d3bbb..2dd95bb005 100644 --- a/ghost/admin/tpl/settings/sidebar.hbs +++ b/ghost/admin/tpl/settings/sidebar.hbs @@ -5,5 +5,6 @@ \ No newline at end of file diff --git a/ghost/admin/tpl/settings/user-profile.hbs b/ghost/admin/tpl/settings/user-profile.hbs new file mode 100644 index 0000000000..9a0821ec33 --- /dev/null +++ b/ghost/admin/tpl/settings/user-profile.hbs @@ -0,0 +1,76 @@ +
+

Your Profile

+
+ +
+
+
+ +
+
+
+ + +
+ +
+
+
+ + +

Email will not be publicly displayed. Learn more.

+
+ +
+ + +

Where in the world do you live?

+
+ +
+ + +

Have a website or blog other than this one? Link it.

+
+ +
+ + +

Write about you, in 200 characters or less.

+ 97 +
+ +
+ +
+ +
+ +
+ + +

Forgot your password?

+
+ +
+ + +
+ +
+ + +
+ +
+ +
+
\ No newline at end of file diff --git a/ghost/admin/views/settings.js b/ghost/admin/views/settings.js index b0ad123c05..33e68288bc 100644 --- a/ghost/admin/views/settings.js +++ b/ghost/admin/views/settings.js @@ -30,6 +30,8 @@ this.showContent(options.pane || 'general'); }, + models: {}, + events: { 'click .settings-menu li' : 'switchPane' }, @@ -42,13 +44,30 @@ }, showContent: function (id) { + var self = this, + model; + Backbone.history.navigate('/settings/' + id); if (this.pane && id === this.pane.el.id) { return; } _.result(this.pane, 'destroy'); this.setActive(id); - this.pane = new Settings[id]({ el: '.settings-content', model: this.model }); + this.pane = new Settings[id]({ el: '.settings-content'}); + + if (!this.models.hasOwnProperty(this.pane.options.modelType)) { + model = this.models[this.pane.options.modelType] = new Ghost.Models[this.pane.options.modelType](); + model.fetch().then(function () { + self.renderPane(model); + }); + } else { + model = this.models[this.pane.options.modelType]; + self.renderPane(model); + } + }, + + renderPane: function (model) { + this.pane.model = model; this.pane.render(); }, @@ -63,6 +82,9 @@ // Content panes // -------------- Settings.Pane = Ghost.View.extend({ + options: { + modelType: 'Settings' + }, destroy: function () { this.$el.removeClass('active'); this.undelegateEvents(); @@ -71,6 +93,25 @@ afterRender: function () { this.$el.attr('id', this.id); this.$el.addClass('active'); + }, + saveSuccess: function () { + this.addSubview(new Ghost.Views.NotificationCollection({ + model: [{ + type: 'success', + message: 'Saved', + status: 'passive' + }] + })); + + }, + saveError: function () { + this.addSubview(new Ghost.Views.NotificationCollection({ + model: [{ + type: 'error', + message: 'Something went wrong, not saved :(', + status: 'passive' + }] + })); } }); @@ -85,29 +126,12 @@ }, saveSettings: function () { - var self = this; this.model.save({ title: this.$('#blog-title').val(), email: this.$('#email-address').val() }, { - success: function () { - self.addSubview(new Ghost.Views.NotificationCollection({ - model: [{ - type: 'success', - message: 'Saved', - status: 'passive' - }] - })); - }, - error: function () { - self.addSubview(new Ghost.Views.NotificationCollection({ - model: [{ - type: 'error', - message: 'Something went wrong, not saved :(', - status: 'passive' - }] - })); - } + success: this.saveSuccess, + error: this.saveError }); }, @@ -127,29 +151,11 @@ 'click .button-save': 'saveSettings' }, saveSettings: function () { - var self = this; this.model.save({ description: this.$('#blog-description').val() }, { - success: function () { - self.addSubview(new Ghost.Views.NotificationCollection({ - model: [{ - type: 'success', - message: 'Saved', - status: 'passive' - }] - })); - - }, - error: function () { - self.addSubview(new Ghost.Views.NotificationCollection({ - model: [{ - type: 'error', - message: 'Something went wrong, not saved :(', - status: 'passive' - }] - })); - } + success: this.saveSuccess, + error: this.saveError }); }, @@ -161,30 +167,71 @@ } }); + // ### User profile + Settings.user = Settings.Pane.extend({ + id: 'user', + + options: { + modelType: 'User' + }, + + events: { + 'click .button-save': 'saveUser' + }, + + saveUser: function () { + this.model.save({ + 'full_name': this.$('#user-name').val(), + 'email_address': this.$('#user-email').val(), + 'location': this.$('#user-location').val(), + 'url': this.$('#user-website').val(), + 'bio': this.$('#user-bio').val(), + 'profile_picture': this.$('#user-profile-picture').attr('src'), + 'cover_picture': this.$('#user-cover-picture').attr('src') + }, { + success: this.saveSuccess, + error: this.saveError + }); + }, + + templateName: 'settings/user-profile', + + beforeRender: function () { + var user = this.model.toJSON(); + this.$('#user-name').val(user.full_name); + this.$('#user-email').val(user.email_address); + this.$('#user-location').val(user.location); + this.$('#user-website').val(user.url); + this.$('#user-bio').val(user.bio); + this.$('#user-profile-picture').attr('src', user.profile_picture); + this.$('#user-cover-picture').attr('src', user.cover_picture); + } + }); + // ### User settings Settings.users = Settings.Pane.extend({ - el: '#users', + id: 'users', events: { } }); // ### Appearance settings Settings.appearance = Settings.Pane.extend({ - el: '#appearance', + id: 'appearance', events: { } }); // ### Services settings Settings.services = Settings.Pane.extend({ - el: '#services', + id: 'services', events: { } }); // ### Plugins settings Settings.plugins = Settings.Pane.extend({ - el: '#plugins', + id: 'plugins', events: { } });