* moved modals to components from outlets

* added avatar_hash handling to {{user-avatar}} component

misago/emberapp/app/components/forms/register-form.js

@@ -207,7 +207,7 @@ export default Ember.Component.extend({
     model.set('isActive', model.get('activation') === 'active');
     model.set('needsAdminActivation', model.get('activation') === 'activation_by_admin');
 
-    this.modal.render('register.done', model);
+    this.modal.show('register-done-modal', model);
   },
 
   error: function(jqXHR) {

misago/emberapp/app/components/forms/set-new-password-form.js

@@ -47,7 +47,7 @@ export default Ember.Component.extend({
   success: function() {
     this.set('password', '');
 
-    this.modal.show('login');
+    this.modal.show('login-modal');
     this.toast.success(gettext("Your password has been changed."));
   },
 

misago/emberapp/app/components/modals/change-avatar-modal.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+import ModalComponent from 'misago/mixins/modal-component';
+
+export default Ember.Component.extend(ModalComponent, {
+  className: 'modal-change-avatar',
+
+  hello: function() {
+    console.log('hello!');
+  }.on('didInsertElement'),
+
+  bye: function() {
+    console.log('bubai!');
+  }.on('willDestroyElement')
+});

misago/emberapp/app/components/modals/forum-modal.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  _service: Ember.inject.service('modal'),
+
+  classNames: ['modal', 'fade'],
+
+  attributeBindings: ['tabindex', 'role', 'aria-labelledby', 'aria-hidden'],
+  tabindex: '-1',
+  role: 'dialog',
+  'aria-labelledby': 'appModalLabel',
+  'aria-hidden': 'true',
+
+  modalComponent: Ember.computed.alias('_service.activeComponent'),
+  modalModel: Ember.computed.alias('_service.activeModel')
+});

misago/emberapp/app/components/modals/login-modal.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import ModalComponent from 'misago/mixins/modal-component';
+
+export default Ember.Component.extend(ModalComponent, {
+  className: 'modal-sign-in',
+
+  isSmall: true
+});

misago/emberapp/app/components/modals/register-closed-modal.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import ModalComponent from 'misago/mixins/modal-component';
+
+export default Ember.Component.extend(ModalComponent, {
+  className: 'modal-register-closed'
+});

misago/emberapp/app/components/modals/register-done-modal.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import ModalComponent from 'misago/mixins/modal-component';
+
+export default Ember.Component.extend(ModalComponent, {
+  className: 'modal-register-done'
+});

misago/emberapp/app/components/modals/register-form-modal.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+import ModalComponent from 'misago/mixins/modal-component';
+
+export default Ember.Component.extend(ModalComponent, {
+  className: 'modal-register-form'
+});

misago/emberapp/app/components/user-avatar.js

@@ -6,24 +6,23 @@ export default Ember.Component.extend({
   attributeBindings: ['src', 'alt', 'size:width', 'size:height'],
 
   size: 100,
+  alt: '',
 
   src: function() {
     var src = Ember.$('base').attr('href') + 'user-avatar/';
 
-    if (this.get('user')) {
+    if (this.get('user.id')) {
       if (this.get('prefix') && this.get('token')) {
         // special avatar source
         src += this.get('prefix') + ':' + this.get('token') + '/';
       } else {
-        // just avatar size
-        src += this.get('size') + '/';
+        // just avatar hash and size
+        src += this.get('user.avatar_hash') + '/' + this.get('size') + '/';
       }
-      return src + this.get('user') + '.png';
+      return src + this.get('user.id') + '.png';
     } else {
       // just append avatar size to file to produce no-avatar placeholder
       return src + this.get('size') + '.png';
     }
-  }.property('user', 'size'),
-
-  alt: ''
+  }.property('user.id', 'user.avatar_hash', 'size')
 });

misago/emberapp/app/initializers/change-avatar-modal.js

@@ -0,0 +1,13 @@
+import ChangeAvatarModal from 'misago/services/change-avatar-modal';
+
+export function initialize(container, application) {
+  application.register('service:change-avatar-modal', ChangeAvatarModal, { singleton: true });
+
+  application.inject('service:change-avatar-modal', 'auth', 'service:auth');
+}
+
+export default {
+  name: 'change-avatar-modal',
+  after: 'auth-service',
+  initialize: initialize
+};

misago/emberapp/app/mixins/modal-component.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Mixin.create({
+  classNames: 'modal-dialog',
+  classNameBindings: ['isSmall:modal-sm', 'isLarge:modal-lg', 'className'],
+
+  isSmall: false,
+  isLarge: false,
+
+  className: 'misago-modal'
+});

misago/emberapp/app/resolver.js

@@ -29,10 +29,30 @@ export default Resolver.extend({
     }
   },
 
+  misagoModalModuleName: function(parsedName) {
+    if (this._endsWith(parsedName.name, '-modal')) {
+      var isComponent = parsedName.type === 'component';
+      var isComponentTemplate = this._startsWith(parsedName.name, 'components/');
+
+      if (isComponent || isComponentTemplate) {
+        var path = parsedName.prefix + '/' +  this.pluralize(parsedName.type) + '/';
+
+        if (isComponentTemplate) {
+          path += 'components/modals/' + parsedName.fullNameWithoutType.substr(11);
+        } else {
+          path += 'modals/' + parsedName.fullNameWithoutType;
+        }
+
+        return path;
+      }
+    }
+  },
+
   // register custom lookup
   moduleNameLookupPatterns: Ember.computed(function(){
     return Ember.A([
       this.misagoFormModuleName,
+      this.misagoModalModuleName,
       this.podBasedModuleName,
       this.podBasedComponentsInSubdir,
       this.mainModuleName,

misago/emberapp/app/routes/activation/activate.js

@@ -6,7 +6,7 @@ export default MisagoRoute.extend({
   },
 
   afterModel: function(model) {
-    this.modal.show('login');
+    this.modal.show('login-modal');
     this.toast.success(model.detail);
     return this.transitionTo('index');
   },

misago/emberapp/app/services/change-avatar-modal.js

@@ -0,0 +1,4 @@
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+});

misago/emberapp/app/services/modal.js

@@ -2,21 +2,8 @@ import Ember from 'ember';
 
 export default Ember.Service.extend({
   _modal: null,
-
-  render: function(template, model) {
-    this.container.lookup('route:application').render('modals.' + template, {
-      into: 'application',
-      outlet: 'modal',
-      model: model || null
-    });
-  },
-
-  disconnect: function() {
-    this.container.lookup('route:application').disconnectOutlet({
-      outlet: 'modal',
-      parentView: 'application'
-    });
-  },
+  activeComponent: 'empty-modal',
+  activeModel: null,
 
   _setupModal: function() {
     var modal = null;
@@ -29,18 +16,24 @@ export default Ember.Service.extend({
 
     var self = this;
     modal.on('hidden.bs.modal', function() {
-      self.disconnect();
+      self.setProperties({
+        activeComponent: 'empty-modal',
+        activeModel: null
+      });
     });
 
     this.set('_modal', modal);
   },
 
-  show: function(template, model) {
+  show: function(component, model) {
     if (!this.get('_modal')) {
       this._setupModal();
     }
 
-    this.render(template, model);
+    this.setProperties({
+      activeComponent: component,
+      activeModel: model
+    });
 
     Ember.$('#appModal').modal('show');
   },

misago/emberapp/app/services/registration-modal.js

@@ -14,6 +14,6 @@ export default Ember.Service.extend({
   }.on('init'),
 
   template: function() {
-    return 'register.' + this.get('stage');
+    return 'register-' + this.get('stage') + '-modal';
   }.property('stage')
 });

misago/emberapp/app/templates/application.hbs

@@ -8,7 +8,4 @@
 </div>
 
 {{forum-footer}}
-
-<div class="modal fade" id="appModal" tabindex="-1" role="dialog" aria-labelledby="appModalLabel" aria-hidden="true">
-  {{outlet "modal"}}
-</div>
+{{forum-modal id="appModal"}}

misago/emberapp/app/templates/components/forum-navbar.hbs

@@ -69,7 +69,7 @@
     </ul>
     {{else}}
     <div class="navbar-guest-nav hidden-xs hidden-sm">
-      {{#show-modal-button modal="login" class="btn btn-outlined btn-default navbar-btn"}}
+      {{#show-modal-button modal="login-modal" class="btn btn-outlined btn-default navbar-btn"}}
         {{gettext "Sign in"}}
       {{/show-modal-button}}
 
@@ -130,7 +130,7 @@
 
               <div class="row">
                 <div class="col-xs-6">
-                  {{#show-modal-button modal="login" class="btn btn-outlined btn-default btn-block btn-sm"}}
+                  {{#show-modal-button modal="login-modal" class="btn btn-outlined btn-default btn-block btn-sm"}}
                     {{gettext "Sign in"}}
                   {{/show-modal-button}}
                 </div>

misago/emberapp/app/templates/components/modals/change-avatar-modal.hbs

@@ -0,0 +1,10 @@
+<div class="modal-content">
+  {{#modal-header}}
+    <h4 class="modal-title" id="appModalLabel">{{gettext "Change your avatar"}}</h4>
+  {{/modal-header}}
+
+  <div class="modal-body">
+    <p class="lead">Wop, this is first modal done as 100% components!</p>
+  </div>
+
+</div>

misago/emberapp/app/templates/components/modals/forum-modal.hbs

@@ -0,0 +1 @@
+{{component modalComponent model=modalModel}}

misago/emberapp/app/templates/components/modals/login-modal.hbs

@@ -0,0 +1,8 @@
+<div class="modal-content">
+  {{#modal-header}}
+    <h4 class="modal-title" id="appModalLabel">{{gettext "Sign in"}}</h4>
+  {{/modal-header}}
+
+  {{login-form}}
+
+</div>

misago/emberapp/app/templates/components/modals/register-closed-modal.hbs

@@ -0,0 +1,12 @@
+<div class="modal-content">
+  {{#modal-header}}
+    <h4 class="modal-title" id="appModalLabel">{{gettext "Register account"}}</h4>
+  {{/modal-header}}
+
+  <div class="modal-body modal-message text-center">
+    <p class="lead">
+      <span class="fa fa-info-circle fa-lg"></span>
+      {{gettext "New registrations are currently not being accepted."}}
+    </p>
+  </div>
+</div>

misago/emberapp/app/templates/components/modals/register-done-modal.hbs

@@ -0,0 +1,46 @@
+<div class="modal-content">
+  {{#modal-header}}
+    <h4 class="modal-title" id="appModalLabel">{{gettext "Registation complete"}}</h4>
+  {{/modal-header}}
+
+  <div class="modal-body modal-message">
+    {{#if model.isActive}}
+    <p class="lead">
+      {{gettext "%(username)s, your account has been registered successfully." username=model.username}}
+    </p>
+    <p>
+      {{gettext "You have been signed in. Refresh page before continuing."}}
+    </p>
+    {{else if model.needsAdminActivation}}
+    <p class="lead">
+      {{gettext "%(username)s, your account has been registered successfully, but site administrator has to activate it before you will be able to sing in." username=model.username}}
+    </p>
+    <p>
+      {{gettext "Notification will be sent to %(email)s once it happens." email=model.email}}
+    </p>
+    {{else}}
+    <p class="lead">
+      {{gettext "%(username)s, your account has been registered successfully, but you have to activate it before you will be able to sign in." username=model.username}}
+    </p>
+    <p>
+      {{gettext "E-mail with activation link was sent to %(email)s." email=model.email}}
+    </p>
+    {{/if}}
+  </div>
+
+  <div class="modal-footer">
+    <div class="text-center">
+      {{#if model.isActive}}
+        {{#refresh-button class="btn btn-default"}}
+          <span class="fa fa-refresh"></span>
+          {{gettext "Refresh page"}}
+        {{/refresh-button}}
+      {{else}}
+        <button type="button" class="btn btn-default" data-dismiss="modal">
+          <span class="fa fa-ok"></span>
+          {{gettext "Continue"}}
+        </button>
+      {{/if}}
+    </div>
+  </div>
+</div>

misago/emberapp/app/templates/components/modals/register-form-modal.hbs

@@ -0,0 +1,7 @@
+<div class="modal-content">
+  {{#modal-header}}
+    <h4 class="modal-title" id="appModalLabel">{{gettext "Register account"}}</h4>
+  {{/modal-header}}
+
+  {{register-form}}
+</div>

misago/emberapp/app/templates/components/user-nav.hbs

@@ -1,5 +1,5 @@
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-  {{user-avatar user=auth.user.id size=28}}
+  {{user-avatar user=auth.user size=28}}
   <span class="fa fa-bars hidden-xs hidden-sm"></span>
 </a>
 <ul class="dropdown-menu user-dropdown dropdown-menu-right" role="menu">
@@ -8,12 +8,12 @@
     <div class="media">
       <div class="media-left">
 
-        <button type="button" class="btn editable-avatar">
-          {{user-avatar user=auth.user.id size=100}}
+        {{#show-modal-button modal="change-avatar-modal" class="btn editable-avatar"}}
+          {{user-avatar user=auth.user size=100}}
           <div class="help">
             {{gettext "Change avatar"}}
           </div>
-        </button>
+        {{/show-modal-button}}
 
       </div>
       <div class="media-body">

misago/emberapp/app/templates/modals/login.hbs

@@ -1,10 +0,0 @@
-<div class="modal-dialog modal-sm modal-sign-in">
-  <div class="modal-content">
-    {{#modal-header}}
-      <h4 class="modal-title" id="loginModalLabel">{{gettext "Sign in"}}</h4>
-    {{/modal-header}}
-
-    {{login-form}}
-
-  </div>
-</div>

misago/emberapp/app/templates/modals/register/closed.hbs

@@ -1,16 +0,0 @@
-<div class="modal-dialog modal-register-closed">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="{{unbound gettext "Close"}}"><span aria-hidden="true">&times;</span></button>
-      <h4 class="modal-title" id="loginModalLabel">{{gettext "Register account"}}</h4>
-    </div>
-
-    <div class="modal-body modal-message text-center">
-      <p class="lead">
-        <span class="fa fa-info-circle fa-lg"></span>
-        {{gettext "New registrations are currently not being accepted."}}
-      </p>
-    </div>
-
-  </div>
-</div>

misago/emberapp/app/templates/modals/register/done.hbs

@@ -1,50 +0,0 @@
-<div class="modal-dialog modal-register-done">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="{{unbound gettext "Close"}}"><span aria-hidden="true">&times;</span></button>
-      <h4 class="modal-title" id="loginModalLabel">{{gettext "Registation complete"}}</h4>
-    </div>
-
-    <div class="modal-body modal-message">
-      {{#if model.isActive}}
-      <p class="lead">
-        {{gettext "%(username)s, your account has been registered successfully." username=model.username}}
-      </p>
-      <p>
-        {{gettext "You have been signed in. Refresh page before continuing."}}
-      </p>
-      {{else if model.needsAdminActivation}}
-      <p class="lead">
-        {{gettext "%(username)s, your account has been registered successfully, but site administrator has to activate it before you will be able to sing in." username=model.username}}
-      </p>
-      <p>
-        {{gettext "Notification will be sent to %(email)s once it happens." email=model.email}}
-      </p>
-      {{else}}
-      <p class="lead">
-        {{gettext "%(username)s, your account has been registered successfully, but you have to activate it before you will be able to sign in." username=model.username}}
-      </p>
-      <p>
-        {{gettext "E-mail with activation link was sent to %(email)s." email=model.email}}
-      </p>
-      {{/if}}
-    </div>
-
-    <div class="modal-footer">
-      <div class="text-center">
-        {{#if model.isActive}}
-          {{#refresh-button class="btn btn-default"}}
-            <span class="fa fa-refresh"></span>
-            {{gettext "Refresh page"}}
-          {{/refresh-button}}
-        {{else}}
-          <button type="button" class="btn btn-default" data-dismiss="modal">
-            <span class="fa fa-ok"></span>
-            {{gettext "Continue"}}
-          </button>
-        {{/if}}
-      </div>
-    </div>
-
-  </div>
-</div>

misago/emberapp/app/templates/modals/register/form.hbs

@@ -1,11 +0,0 @@
-<div class="modal-dialog modal-register-form">
-  <div class="modal-content">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-label="{{unbound gettext "Close"}}"><span aria-hidden="true">&times;</span></button>
-      <h4 class="modal-title" id="loginModalLabel">{{gettext "Register account"}}</h4>
-    </div>
-
-    {{register-form}}
-
-  </div>
-</div>

misago/users/serializers/user.py

@@ -26,6 +26,7 @@ class AuthenticatedUserSerializer(serializers.ModelSerializer):
             'full_title',
             'short_title',
             'rank',
+            'avatar_hash',
             'new_notifications',
             'limits_private_thread_invites_to',
             'unread_private_threads',