Add settings profile, admin and ssh key pages

The ajax is not yet wired up for editing name, password,
email or adding ssh keys.

refs aptible#51 aptible#66

app/models/ssh-key.js

@@ -0,0 +1,6 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  publicKeyFingerprint: DS.attr('string')
+});

app/models/user.js

@@ -10,7 +10,8 @@ export default DS.Model.extend({
   // relationships
   token: DS.belongsTo('token', {async: true}),
   roles: DS.hasMany('role', {async:true}),
-  organizations: DS.hasMany('organizations', {async:true}),
+  organizations: DS.hasMany('organization', {async:true}),
+  sshKeys: DS.hasMany('ssh-key', {async:true}),
 
   // check ability, returns a promise
   // e.g.: user.can('manage', stack).then(function(boolean){ ... });

app/router.js

@@ -58,6 +58,12 @@ Router.map(function() {
   this.route("logout");
   this.route("signup");
 
+  this.route('settings', {}, function(){
+    this.route('admin');
+    this.route('profile');
+    this.route('ssh');
+  });
+
   this.route("verify", {
     path: "verify/:verification_code"
   });

app/settings/admin/template.hbs

@@ -0,0 +1,38 @@
+<div class="panel-group">
+  <div class="panel panel-default">
+    <div class="panel-heading"><h3>Change Your Password</h3></div>
+    <div class="panel-body">
+      <form action="">
+        <div class="form-group">
+          <label for="password">New password</label>
+          {{input type="password" value=password name="password"}}
+        </div>
+        <div class="form-group">
+          <label for="confirm-password">Confirm new password</label>
+          {{input type="password" value=passwordConfirmation name="confirm-password"}}
+        </div>
+        <div class="form-group">
+          <button class="btn btn-primary" type="submit">
+            Change password
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading"><h3>Change Your Email</h3></div>
+    <div class="panel-body">
+      <form action="">
+        <div class="form-group">
+          <label for="email">Email</label>
+          {{input type="email" value=session.currentUser.email name="email"}}
+        </div>
+        <div class="form-group">
+          <button class="btn btn-primary" type="submit">
+            Change email
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

app/settings/index/route.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  redirect: function(){
+    this.replaceWith('settings.profile');
+  }
+});

app/settings/profile/route.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  setupController: function(controller){
+    var user = this.session.get('currentUser');
+
+    controller.set('userName', user.get('name'));
+  },
+
+  actions: {
+    submit: function(newName){
+      var user = this.session.get('currentUser');
+      user.set('name', newName);
+      user.save();
+    }
+  }
+});

app/settings/profile/template.hbs

@@ -0,0 +1,39 @@
+<div class="panel-group">
+  <div class="panel panel-default">
+    <div class="panel-heading"><h3>Your Profile</h3></div>
+    <div class="panel-body">
+      <form action="">
+        <div class="form-group clearfix update-gravatar">
+          <label class="block">Profile Picture</label>
+          <div class="gravatar lg">
+            {{gravatar-image email=session.currentUser.email}}
+          </div>
+
+          <div class="input-group update-gravatar-info">
+            <h5>
+              Use <a href="https://en.gravatar.com/">Gravatar</a> to update your profile picture.
+            </h5>
+            <h6>
+              Your gravatar email is <strong class='email'>{{session.currentUser.email}}</strong>
+            </h6>
+            <div>
+              <a class="btn btn-xs btn-default" href="https://en.gravatar.com/" target="_blank">Change</a>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="name">Name</label>
+
+          {{input value=userName name="name" class="form-control"}}
+        </div>
+
+        <div class="form-group">
+          <button class="btn btn-primary" type="submit" {{action "submit" userName}}>
+            Update profile
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

app/settings/ssh/route.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model: function(){
+    var user = this.session.get('currentUser');
+
+    return user.get('sshKeys');
+  }
+});

app/settings/ssh/template.hbs

@@ -0,0 +1,25 @@
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3>SSH Keys</h3>
+  </div>
+  <div class="ssh-keys">
+    {{#each model as |sshKey|}}
+    <div class="ssh-key-item">
+      <div class="ssh-key-info">
+        <label>{{sshKey.name}}</label>
+        <div class="ssh-key-fingerprint">{{sshKey.publicKeyFingerprint}}</div>
+      </div>
+      <div class="ssh-key-nav app-list-nav">
+        <ul class="nav nav-pills sub-nav-tabs">
+          <li>
+            <a href="#">
+              <i class="fa fa-times"></i>
+              <span class="button-label">Delete SSH Key</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+</div>

app/settings/template.hbs

@@ -0,0 +1,24 @@
+<div class="container">
+  <div class="row">
+    <div class="col-xs-4">
+      <ul class="nav sidebar-nav">
+        <li class='title'>Profile Settings</li>
+
+        {{#link-to 'settings.profile' tagName='li'}}
+          {{link-to 'Profile' 'settings.profile'}}
+        {{/link-to}}
+
+        {{#link-to 'settings.admin' tagName='li'}}
+          {{link-to 'Account Settings' 'settings.admin'}}
+        {{/link-to}}
+
+        {{#link-to 'settings.ssh' tagName='li'}}
+          {{link-to 'SSH Keys' 'settings.ssh'}}
+        {{/link-to}}
+      </ul>
+    </div>
+    <div class="col-xs-8">
+      {{outlet}}
+    </div>
+  </div>
+</div>

app/settings/view.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.View.extend({
+  layoutName: 'layouts/dashboard'
+});

tests/acceptance/settings/settings-account-test.js

@@ -0,0 +1,68 @@
+import Ember from 'ember';
+import startApp from '../../helpers/start-app';
+import { stubRequest } from '../../helpers/fake-server';
+
+var App;
+
+var settingsUrl = '/settings';
+var settingsAccountUrl = settingsUrl + '/admin';
+var userId = 'user1'; // from signInAndVisit helper
+var userEmail = '[email protected]'; // from signInAndVisit helper
+var userName = 'stubbed user'; // from signInAndVisit helper
+
+var userApiUrl = '/users/' + userId;
+
+module('Acceptance: User Settings: Account', {
+  setup: function() {
+    App = startApp();
+    stubStacks();
+  },
+  teardown: function() {
+    Ember.run(App, 'destroy');
+  }
+});
+
+test(settingsAccountUrl + ' requires authentication', function(){
+  expectRequiresAuthentication(settingsAccountUrl);
+});
+
+test('visit ' + settingsAccountUrl + ' shows change password form', function(){
+  signInAndVisit(settingsAccountUrl);
+
+  andThen(function(){
+    // change password
+
+    ok( find('h3:contains(Change Your Password)').length,
+        'has change password header' );
+
+    ok( find('input[name="password"]').length,
+        'has password input');
+
+    ok( find('input[name="confirm-password"]').length,
+        'has confirm password input');
+
+    ok( find('button:contains(Change password)'),
+        'has change password button');
+
+  });
+});
+
+test('visit ' + settingsAccountUrl + ' shows change email form', function(){
+  signInAndVisit(settingsAccountUrl);
+
+  andThen(function(){
+    // change email
+
+    ok( find('h3:contains(Change Your Email)').length,
+        'has change email header' );
+
+    ok( find('input[name="email"]').length,
+        'has email input');
+
+    equal( find('input[name="email"]').val(), userEmail,
+           'email input has user email value');
+
+    ok( find('button:contains(Change email)'),
+        'has change email button');
+  });
+});

tests/acceptance/settings/settings-profile-test.js

@@ -0,0 +1,104 @@
+import Ember from 'ember';
+import startApp from '../../helpers/start-app';
+import { stubRequest } from '../../helpers/fake-server';
+
+var App;
+
+var settingsUrl = '/settings';
+var settingsProfileUrl = settingsUrl + '/profile';
+var userId = 'user1'; // from signInAndVisit helper
+var userEmail = '[email protected]'; // from signInAndVisit helper
+var userName = 'stubbed user'; // from signInAndVisit helper
+
+var userApiUrl = '/users/' + userId;
+
+module('Acceptance: User Settings: Profile', {
+  setup: function() {
+    App = startApp();
+    stubStacks();
+  },
+  teardown: function() {
+    Ember.run(App, 'destroy');
+  }
+});
+
+test(settingsUrl + ' requires authentication', function(){
+  expectRequiresAuthentication(settingsUrl);
+});
+
+test(settingsProfileUrl + ' requires authentication', function(){
+  expectRequiresAuthentication(settingsProfileUrl);
+});
+
+test('visit ' + settingsUrl + ' redirects to profile', function(){
+  signInAndVisit(settingsUrl);
+  andThen(function(){
+    equal(currentPath(), 'settings.profile');
+  });
+});
+
+test('visit ' + settingsProfileUrl + ' shows profile info', function(){
+  signInAndVisit(settingsProfileUrl);
+
+  andThen(function(){
+    ok( find('h3:contains(Your Profile)').length,
+        'has header' );
+
+    ok( find('label:contains(Profile Picture)').length,
+        'has profile picture block' );
+
+    ok( find('.gravatar img').length,
+        'has gravatar img');
+
+    ok( find('.email:contains(' + userEmail + ')').length,
+        'has user email');
+
+    ok( find('input[name="name"]').length,
+        'input for name');
+
+    equal( find('input[name="name"]').val(), userName,
+        'input for name is prefilled with user name');
+
+    ok( find('button:contains(Update profile)').length,
+        'button to update profile' );
+  });
+});
+
+test('visit ' + settingsProfileUrl + ' allows updating name', function(){
+  var newName = 'Graham Shuttlesworth';
+
+  stubRequest('put', userApiUrl, function(request){
+    ok(true, 'calls PUT ' + userApiUrl);
+    var user = JSON.parse(request.requestBody);
+
+    equal(user.name, newName, 'updates with new name: ' + newName);
+
+    return this.success({
+      id: userId,
+      name: user.name,
+      email: user.email
+    });
+  });
+
+  signInAndVisit(settingsProfileUrl);
+
+  andThen(function(){
+    ok( find('.dropdown.current-user:contains(' + userName + ')').length,
+           'user dropdown shows current user name: ' + userName);
+    fillIn('input[name="name"]', newName);
+  });
+
+  andThen(function(){
+    ok( find('.dropdown.current-user:contains(' + userName + ')').length,
+           'user dropdown still shows current user name: ' + userName);
+    click('button:contains(Update profile)');
+  });
+
+  andThen(function(){
+    ok( !find('.dropdown.current-user:contains(' + userName + ')').length,
+           'user dropdown no longer shows old name: ' + userName);
+
+    ok( find('.dropdown.current-user:contains(' + newName + ')').length,
+           'user dropdown now shows new name: ' + newName);
+  });
+});