From c2feae406d61018bb77c9fb80f0be6685ce4afb2 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Fri, 30 Jan 2015 12:21:18 +1030 Subject: [PATCH] Add ember-simple-auth, setup login - Allow dropdown-buttons to render a partial --- ember/app/authenticators/flarum.js | 37 +++++++++ ember/app/authorizers/flarum.js | 11 +++ ember/app/controllers/login.js | 33 ++++++-- ember/app/initializers/authentication.js | 9 +++ ember/app/routes/application.js | 45 +++++------ ember/app/styles/app.less | 5 +- ember/app/styles/flarum/login.less | 32 ++++++++ ember/app/styles/flarum/modals.less | 79 ++++++++++++++++++ .../ui/controls/dropdown-button.hbs | 8 +- ember/app/templates/login.hbs | 42 +++++----- ember/app/templates/partials/user-button.hbs | 2 + ember/app/views/application.js | 81 +++++++++++++++---- ember/app/views/login.js | 9 +++ ember/bower.json | 3 +- ember/config/environment.js | 4 + ember/package.json | 1 + src/views/index.blade.php | 2 +- 17 files changed, 334 insertions(+), 69 deletions(-) create mode 100644 ember/app/authenticators/flarum.js create mode 100644 ember/app/authorizers/flarum.js create mode 100644 ember/app/initializers/authentication.js create mode 100644 ember/app/styles/flarum/login.less create mode 100644 ember/app/styles/flarum/modals.less create mode 100644 ember/app/templates/partials/user-button.hbs diff --git a/ember/app/authenticators/flarum.js b/ember/app/authenticators/flarum.js new file mode 100644 index 000000000..e24f5f56c --- /dev/null +++ b/ember/app/authenticators/flarum.js @@ -0,0 +1,37 @@ +import Base from 'simple-auth/authenticators/base'; +import config from '../config/environment'; + +export default Base.extend({ + + restore: function(data) { + var container = this.container; + return new Ember.RSVP.Promise(function(resolve, reject) { + Ember.run.next(function() { + container.lookup('store:main').find('user', data.userId).then(function(user) { + resolve( { token: data.token, userId: data.userId, user: user } ); + }); + }); + }); + }, + + authenticate: function(credentials) { + var container = this.container; + return new Ember.RSVP.Promise(function(resolve, reject) { + Ember.$.ajax({ + url: config.apiURL+'/auth/login', + type: 'POST', + data: { identification: credentials.identification, password: credentials.password } + }).then(function(response) { + container.lookup('store:main').find('user', response.userId).then(function(user) { + resolve({ token: response.token, userId: response.userId, user: user }); + }); + }, function(xhr, status, error) { + reject(xhr.responseJSON.errors); + }); + }); + }, + + // invalidate: function(data) { + // return new Ember.RSVP.Promise(); + // } +}); \ No newline at end of file diff --git a/ember/app/authorizers/flarum.js b/ember/app/authorizers/flarum.js new file mode 100644 index 000000000..49346cad5 --- /dev/null +++ b/ember/app/authorizers/flarum.js @@ -0,0 +1,11 @@ +import Base from 'simple-auth/authorizers/base'; + +export default Base.extend({ + + authorize: function(jqXHR, requestOptions) { + var token = this.get('session.token'); + if (this.get('session.isAuthenticated') && !Ember.isEmpty(token)) { + jqXHR.setRequestHeader('Authorization', 'Token ' + token); + } + } +}); \ No newline at end of file diff --git a/ember/app/controllers/login.js b/ember/app/controllers/login.js index ee3e9310c..dff3d2af0 100644 --- a/ember/app/controllers/login.js +++ b/ember/app/controllers/login.js @@ -1,11 +1,32 @@ import Ember from 'ember'; -// import NotificationMessage from '../models/notification-message'; +import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin'; -// export default Ember.Controller.extend(Ember.SimpleAuth.LoginControllerMixin, Ember.Evented, { +export default Ember.Controller.extend(AuthenticationControllerMixin, { -// authenticatorFactory: 'authenticator:flarum' + authenticator: 'authenticator:flarum', + + actions: { + authenticate: function() { + var data = this.getProperties('identification', 'password'); + var controller = this; + this.set('error', null); + this.set('loading', true); + return this._super(data).then(function() { + controller.send("sessionChanged"); + }).catch(function(errors) { + switch(errors[0].code) { + case 'invalidLogin': + controller.set('error', 'Your login details are incorrect.'); + break; + + default: + controller.set('error', 'Something went wrong. (Error code: '+errors[0].code+')'); + } + }).finally(function() { + controller.set('loading', false); + }); + } + } -// }); - -export default Ember.Controller.extend(); \ No newline at end of file +}); \ No newline at end of file diff --git a/ember/app/initializers/authentication.js b/ember/app/initializers/authentication.js new file mode 100644 index 000000000..8ad528df0 --- /dev/null +++ b/ember/app/initializers/authentication.js @@ -0,0 +1,9 @@ +import FlarumAuthorizer from '../authorizers/flarum'; + +export default { + name: 'authentication', + before: 'simple-auth', + initialize: function(container) { + container.register('authorizer:flarum', FlarumAuthorizer); + } +}; \ No newline at end of file diff --git a/ember/app/routes/application.js b/ember/app/routes/application.js index a68d741c1..287e3c19f 100644 --- a/ember/app/routes/application.js +++ b/ember/app/routes/application.js @@ -1,30 +1,27 @@ import Ember from 'ember'; -// import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin'; +import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin'; -// export default Ember.Route.extend(ApplicationRouteMixin, { +export default Ember.Route.extend(ApplicationRouteMixin, { -// actions: { + actions: { + login: function() { + this.controllerFor('login').set('error', null); + this.render('login', { + into: 'application', + outlet: 'modal' + }); + }, -// login: function() { -// return this.render('login', { -// into: 'application', -// outlet: 'modal' -// }); -// }, + closeModal: function() { + this.disconnectOutlet({ + outlet: 'modal', + parentView: 'application' + }); + }, -// doLogin: function() { -// this.get('session').authenticate('authenticator:custom', {}); -// }, + sessionChanged: function() { + this.refresh(); + } + } -// closeModal: function() { -// return this.disconnectOutlet({ -// outlet: 'modal', -// parentView: 'application' -// }); -// } - -// } - -// }); - -export default Ember.Route.extend(); \ No newline at end of file +}); \ No newline at end of file diff --git a/ember/app/styles/app.less b/ember/app/styles/app.less index 6ba7349be..1f472f609 100644 --- a/ember/app/styles/app.less +++ b/ember/app/styles/app.less @@ -18,7 +18,10 @@ // Finally, with our vendor CSS loaded, we can import Flarum-specific stuff. @import "@{flarum-base}components.less"; +@import "@{flarum-base}modals.less"; @import "@{flarum-base}layout.less"; +@import "@{flarum-base}composer.less"; @import "@{flarum-base}index.less"; -@import "@{flarum-base}discussion.less"; \ No newline at end of file +@import "@{flarum-base}discussion.less"; +@import "@{flarum-base}login.less"; \ No newline at end of file diff --git a/ember/app/styles/flarum/login.less b/ember/app/styles/flarum/login.less new file mode 100644 index 000000000..1be6cf121 --- /dev/null +++ b/ember/app/styles/flarum/login.less @@ -0,0 +1,32 @@ +.modal-login { + & .form-group { + margin-bottom: 12px; + } +} +.form-group { + position: relative; +} +.form-alert { + position: absolute; + bottom: 100%; + left: 0; + right: 0; + margin-bottom: 12px; + & .alert { + display: inline-block; + } +} +.alert-warning { + background: #D83E3E; + .box-shadow(0 2px 6px rgba(0, 0, 0, 0.3)); + color: #fff; + padding: 12px 16px; + border-radius: @border-radius-base; +} + +.btn-user { + & .avatar { + margin: -2px 5px -2px -5px; + .avatar-size(24px); + } +} \ No newline at end of file diff --git a/ember/app/styles/flarum/modals.less b/ember/app/styles/flarum/modals.less new file mode 100644 index 000000000..96d33ab3e --- /dev/null +++ b/ember/app/styles/flarum/modals.less @@ -0,0 +1,79 @@ +// ------------------------------------ +// Modals + +.modal-backdrop { + background-color: @fl-primary-color; + &.in { + opacity: 0.9; + } +} +.modal-dialog { + margin: 120px auto; + + & .close { + position: absolute; + right: 5px; + top: 5px; + } +} +.modal-content { + border: 0; + border-radius: @border-radius-base; + .box-shadow(0 7px 15px rgba(0, 0, 0, 0.3)); +} +.modal-sm { + width: 375px; +} + +.modal-header { + text-align: center; + border: 0; + padding: 25px; + + & h3 { + font-size: 22px; + margin: 0; + } +} +.modal-body { + background-color: @fl-secondary-color; + padding: 25px; + + & .form-control { + background-color: #fff; + } +} +.modal-footer { + border: 0; + padding: 20px; + text-align: center; + color: @fl-body-muted-color; +} + +.modal-loading { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.9); + opacity: 0; + pointer-events: none; + border-radius: @border-radius-base; + .transition(opacity 0.2s); + + &.active { + opacity: 1; + pointer-events: auto; + } +} + +.form-centered { + text-align: center; + + & .form-control, & .btn { + width: 220px; + margin: 0 auto; + text-align: center; + } +} \ No newline at end of file diff --git a/ember/app/templates/components/ui/controls/dropdown-button.hbs b/ember/app/templates/components/ui/controls/dropdown-button.hbs index 2f37bfee9..13cf73a2e 100644 --- a/ember/app/templates/components/ui/controls/dropdown-button.hbs +++ b/ember/app/templates/components/ui/controls/dropdown-button.hbs @@ -1,10 +1,10 @@ - {{#if iconHtml}} - {{{iconHtml}}} + {{#if buttonPartial}} + {{partial buttonPartial}} {{else}} {{fa-icon icon class="icon-glyph"}} + {{label}} + {{fa-icon "caret-down" class="icon-caret"}} {{/if}} - {{label}} - {{fa-icon "caret-down" class="icon-caret"}} {{ui/controls/item-list items=items class=dropdownMenuClass}} diff --git a/ember/app/templates/login.hbs b/ember/app/templates/login.hbs index f81da3270..6d444d85b 100644 --- a/ember/app/templates/login.hbs +++ b/ember/app/templates/login.hbs @@ -1,27 +1,33 @@ -
+