added accounts page
This commit is contained in:
Jon Lambson
parent
f920f0cccd
commit
13f981a7ae
|
|
@ -1 +1 @@
|
|||
Subproject commit 5f68ea19e22d05bebc6a289da0a89a714442e6d2
|
||||
Subproject commit 9a7aa3261f2ad97ebd436c8b1e86d168cf93023d
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
10
js/app.js
10
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'
|
||||
}
|
||||
}
|
||||
});
|
||||
}]);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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') || {};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue