added accounts page

assets/oauth3.org

@@ -1 +1 @@
-Subproject commit 5f68ea19e22d05bebc6a289da0a89a714442e6d2
+Subproject commit 9a7aa3261f2ad97ebd436c8b1e86d168cf93023d

css/styles.css

@@ -68,3 +68,84 @@
 .button-container a:hover {
   text-decoration: none;
 }
+
+.current-user-container {
+  width: 100%;
+  display: inline-block;
+  font-size: 14px;
+  text-align: left;
+  background-color: #fff;
+  height: 40px;
+  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+  margin-bottom: 10px;
+}
+
+.current-user-container:hover{
+  cursor: pointer;
+  -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.4);
+  box-shadow: 0 1px 1px 0 rgba(0,0,0,.3);
+}
+
+.current-user-container > .current-user-split{
+  background: #337ab7;
+  width: 33px;
+  float: left;
+  color: #fff!important;
+  height: 100%;
+  text-align: center;
+}
+
+.current-user-container > .current-user-split > .glyphicon{
+  position:relative;
+  top: calc(50% - 9px)!important; /* 50% - 3/4 of icon height */
+}
+.current-user-container > .current-user-split.update-success{
+  background: #5cb85c!important;
+}
+.current-user-container .current-user-text {
+  color: black;
+}
+.current-user-container > .current-user-split.update-danger{
+  background: #d9534f!important;
+}
+
+.current-user-container > .current-user-split.update-info{
+  background: #5bc0de!important;
+}
+.current-user-container > .current-user-text{
+  line-height: 19px;
+  padding-top: 11px;
+  padding-left: 45px;
+  padding-right: 20px;
+}
+.current-user-container i.fa.fa-user {
+  padding: 10px;
+  font-size: 20px;
+}
+.profiles {
+  border: 1px solid #dddddd;
+  margin-bottom: 20px;
+}
+.profile-content {
+  width: 320px;
+  padding: 15px;
+  padding-bottom:0px;
+}
+.profile-content:before, .profile-content:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.profile-footer{
+  background-color:#DDD;
+}
+.profile-footer-content {
+  padding:15px 15px 15px 15px;
+}
+.profile-container .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}

js/app.js

@@ -108,6 +108,16 @@ app.config(['$stateProvider', '$urlRouterProvider', 'localStorageServiceProvider
         controllerAs: 'vm'
       }
     }
+  })
+  .state('app.account-settings', {
+    url: 'account-settings',
+    views: {
+      'content@': {
+        templateUrl: 'templates/account-settings.html',
+        controller: 'loginCtrl',
+        controllerAs: 'vm'
+      }
+    }
   });
 }]);
 

js/controllers/login-controller.js

@@ -122,10 +122,19 @@ app.controller('loginCtrl', [
   vm.newIssuer = vm.defaultIssuer;
   vm.setIssuer(vm.defaultIssuer);
 
+  vm.initListLoggedInProfiles = function () {
+    vm.activeProfiles = Auth.getActiveSessions();
+  };
+
   vm.signIn = function () {
     vm.auth();
   };
 
+  vm.masterLogOut = function () {
+    localStorage.clear();
+    $location.path('/splash-page');
+  };
+
   vm.signOut = function () {
     // TODO the sign-out url for each account should be fixed.
     return Auth.signOut().then(function () {

js/services/auth-service.js

@@ -6,9 +6,6 @@ app.factory('Auth', [
   var dapSessions = 'dap-sessions';
 
   var Auth = {
-    setUser: function (currentUser) {
-      localStorageService.set('userAuth', JSON.stringify(currentUser));
-    },
     isLoggedIn: function () {
       Auth.restore();
 
@@ -18,6 +15,11 @@ app.factory('Auth', [
       Auth.restore();
 
       return Auth.session || false;
+    },
+    getActiveSessions: function () {
+      Auth.restore();
+
+      return Auth.sessions || false;
     }
   , add: function (session) {
       var obj = JSON.parse(localStorage.getItem(dapSessions) || 'null') || {};

templates/account-settings.html

@@ -0,0 +1,99 @@
+
+<h1 class="text-center">Account Settings</h1>
+<h1>{{ vm.xauth }}</h1>
+<div class="row">
+  <!-- left column -->
+  <div class="col-md-4 col-sm-6 col-xs-12">
+    <div class="text-center">
+      <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="avatar img-circle img-thumbnail" alt="avatar">
+      <h6>Upload a different photo...</h6>
+      <input type="file" class="text-center center-block well well-sm">
+    </div>
+  </div>
+  <!-- edit form column -->
+  <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
+    <h3>Personal Info</h3>
+    <h1>{{ vm.currentProfile.email }}</h1>
+    <form class="form-horizontal" role="form">
+      <div class="form-group">
+        <label class="col-lg-3 control-label">First name:</label>
+        <div class="col-lg-8">
+          <input class="form-control" type="text">
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-lg-3 control-label">Last name:</label>
+        <div class="col-lg-8">
+          <input class="form-control" type="text">
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-lg-3 control-label">Email:</label>
+        <div class="col-lg-8">
+          <input class="form-control" type="text" value="{{ vm.currentProfile.email }}" disabled>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+
+<hr>
+<h4>Active Sessions</h4>
+<div class="profile-container" >
+  <div class="profiles" ng-repeat="session in vm.sessions track by $index">
+    <div class="profile-content">
+      <div class="row">
+        <div class="col-md-5">
+          <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" alt="Alternate Text" class="img-responsive" />
+          <p class="text-center small"><a href="">Change Photo</a></p>
+        </div>
+        <div class="col-md-7">
+          <span ng-bind="session.subject"></span>
+          <p class="text-muted small" ng-bind="session.issuer"></p>
+          <div class="divider"></div>
+          <button type="button" class="btn btn-default" disabled ng-if="vm.session.subject == session.subject">Current Profile</button>
+        </div>
+      </div>
+    </div>
+    <div class="profile-footer">
+      <div class="profile-footer-content">
+        <div class="row">
+          <div class="col-md-6">
+            <a class="btn btn-default btn-sm" ng-click="vm.selectSession(session);">Use Account</a>
+          </div>
+          <div class="col-md-6">
+            <a class="btn btn-default btn-sm pull-right" ng-click="vm.signOut()">Sign Out</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<hr>
+<div class="">
+  <h4>Add Account</h4>
+  <div class="panel panel-default">
+    <div class="panel-body">
+        <form class="form form-signup" role="form">
+          <div class="form-group">
+            <div class="input-group">
+              <span class="input-group-addon">@</span>
+              <input type="text" class="form-control" placeholder="Email Address" ng-model="vm.newSubject" ng-change="vm.setSubject()" />
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="input-group">
+              <span class="input-group-addon"><i class="fa fa-briefcase"></i></span>
+              <input type="text" class="form-control" placeholder="Provider" ng-if="vm.showAdvanced" ng-model="vm.newIssuer" ng-change="vm.setIssuer()" />
+            </div>
+          </div>
+          <button class="btn btn-sm btn-primary btn-block" type="button" ng-click="vm.auth()">Add</a>
+        </form>
+    </div>
+  </div>
+</div>
+
+<hr>
+<h4>Log off all accounts</h4>
+<button type="button" class="btn btn-danger" ng-click="vm.masterLogOut()">Log Out</button>

templates/partials/header.html

@@ -24,7 +24,7 @@
             <br><small ng-bind="vm.session.issuer">example.com</small></a>
           <ul class="dropdown-menu">
             <li><a href="feed.html" target="_blank">Preview My Public Site</a></li>
-            <li><a>Account Settings</a></li>
+            <li><a href="#!/account-settings">Account Settings</a></li>
 
             <li role="separator" class="divider"></li>
 
@@ -39,7 +39,7 @@
               <br><input class="input" type="text" ng-if="vm.showAdvanced" ng-model="vm.newIssuer" ng-change="vm.setIssuer()" />
               <br><button class="btn btn-default" type="button" ng-click="vm.auth()" >Add</button>
             </li>
-
+            <li class="divider" role="separator"></li>
             <li ng-click="vm.signOut()"><a>Logout <i class="fa fa-sign-out" aria-hidden="true"></i></a></li>
           </ul>
         </li>

templates/splash-page.html

@@ -1,6 +1,10 @@
-<section class="col-md-offset-4 col-md-4 login-container">
+<section class="col-md-offset-4 col-md-4 login-container" ng-init="vm.initListLoggedInProfiles()">
   <form>
     <h4 class="text-center">Sign in</h4>
+    <a href="#!/home" class="current-user-container" ng-repeat="profile in vm.activeProfiles">
+      <div class="current-user-split"><i class="fa fa-user"></i></div>
+      <div class="current-user-text">Resume with {{ profile.email }}</div>
+    </a>
     <div class="form-group">
       <label for="dap-address">Address</label>
       <button class="btn btn-link" ng-click="vm.toggleAdvanced()" ng-if="vm.independentIssuer">hide advanced</button>