vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add UI polishing to the token auth stuff

Browse source
This commit is contained in:
Joseph Schorr 2013-10-17 14:46:23 -04:00
parent 283f9b81ae
commit faf6a5c497
6 changed files with 152 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
static/css/quay.css
View file

@ -2,11 +2,48 @@
font-family: 'Droid Sans', sans-serif;
}
.description-overview {
padding: 4px;
font-size: 16px;
}
.description-list {
margin: 10px;
padding: 0px;
}
.description-list li:before {
content: "\00BB";
margin-right: 6px;
font-size: 18px;
}
.description-list li {
list-style-type: none;
margin: 0px;
padding: 6px;
}
.info-icon {
display: inline-block;
float: right;
vertical-align: middle;
font-size: 20px;
}
.accordion-toggle {
cursor: pointer;
text-decoration: none !important;
}
.user-guide h3 {
margin-bottom: 20px;
}
.user-guide h3 .label {
float: right;
}
.plans .callout {
font-size: 2em;
text-align: center;
@ -441,7 +478,8 @@ p.editable:hover i {
}
.repo dl.dl-horizontal dt {
width: 60px;
width: 80px;
padding-right: 10px;
}
.repo dl.dl-horizontal dd {
@ -485,18 +523,21 @@ p.editable:hover i {
color: white;
}
.repo #clipboardCopied {
.repo #clipboardCopied.hovering {
position: absolute;
right: 0px;
top: 40px;
}
.repo #clipboardCopied {
font-size: 0.8em;
display: inline-block;
margin-right: 10px;
background: black;
color: white;
padding: 6px;
border-radius: 4px;
-webkit-animation: fadeOut 4s ease-in-out 0s 1 forwards;
-moz-animation: fadeOut 4s ease-in-out 0s 1 forwards;
@ -557,6 +598,18 @@ p.editable:hover i {
padding-left: 36px;
}
.repo-admin .token-dialog-body .well {
margin-bottom: 0px;
}
.repo-admin .token-view {
background: transparent;
display: block;
border: 0px transparent;
font-size: 12px;
width: 100%;
}
.repo-admin .panel {
display: inline-block;
width: 620px;
@ -571,6 +624,10 @@ p.editable:hover i {
min-width: 300px;
}
.repo-admin .token a {
cursor: pointer;
}
.repo .description p {
margin-bottom: 6px;
}

34
static/js/controllers.js
View file

@ -1,3 +1,17 @@
$.fn.clipboardCopy = function() {
var clip = new ZeroClipboard($(this), { 'moviePath': 'static/lib/ZeroClipboard.swf' });
clip.on('complete', function() {
// Resets the animation.
var elem = $('#clipboardCopied')[0];
elem.style.display = 'none';
// Show the notification.
setTimeout(function() {
elem.style.display = 'inline-block';
}, 1);
});
};
function getFirstTextLine(commentString) {
if (!commentString) { return; }
@ -354,18 +368,7 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
$scope.currentTag = repo.tags[tag] || repo.tags['latest'];
$scope.setImage($scope.currentTag.image);
var clip = new ZeroClipboard($('#copyClipboard'), { 'moviePath': 'static/lib/ZeroClipboard.swf' });
clip.on('complete', function() {
// Resets the animation.
var elem = $('#clipboardCopied')[0];
elem.style.display = 'none';
// Show the notification.
setTimeout(function() {
elem.style.display = 'block';
}, 1);
});
$('#copyClipboard').clipboardCopy();
$scope.loading = false;
}, function() {
$scope.repo = null;
@ -378,6 +381,13 @@ function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
}
function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
$('.info-icon').popover({
'trigger': 'hover',
'html': true
});
$('#copyClipboard').clipboardCopy();
var namespace = $routeParams.namespace;
var name = $routeParams.name;

54
static/partials/guide.html
View file

@ -1,10 +1,20 @@
<div class="container ready-indicator" data-status="{{ status }}">
<div class="alert alert-warning">Warning: Quay requires docker version 0.6.2 or higher to work</div>
<h2>Getting started guide</h2>
<div class="container">
<h2>User guide</h2>
<div class="user-guide container">
<h3>Pushing a repository to Quay</h3>
<h3>Pulling a repository from Quay</h3>
<div class="container">
<div class="alert alert-info">Note: <b>Private</b> repositories require you to be <b>logged in</b> or the pull will fail. See below for how to sign into Quay if you have never done so before. </div>
To pull a repository from Quay, run the following command:
<br><br>
<pre>docker pull quay.io/<i>username/repo_name</i></pre>
</div>
<br>
<h3>Pushing a repository to Quay <span class="label label-success">Requires Write Access</span></h3>
<div class="container">
First, tag the image with your repository name:<br><br>
<pre>docker tag <i>0u123imageid</i> quay.io/<i>username/repo_name</i></pre>
@ -14,12 +24,40 @@
</div>
<br>
<h3>Pulling a repository from Quay</h3>
<h3>Granting and managing permissions to users <span class="label label-info">Requires Admin Access</span></h3>
<div class="container">
<div class="alert alert-info">Note: <b>Private</b> repositories require you to be <b>logged in</b> or the pull will fail. See below for how to sign into Quay if you have never done so before. </div>
To pull a repository from Quay, run the following command:
<br><br>
<pre>docker pull quay.io/<i>username/repo_name</i></pre>
<div class="description-overview">Quay allows a repository to be shared any number of users and to grant those users any level of permissions for a repository</div>
<ul class="description-list">
<li>Permissions for a repository can be granted and managed in the repository's admin interface
<li><b>Adding a user:</b> Type that user's username in the "Add New User..." field, and select the user
<li><b>Changing permissions:</b> A user's permissions (read, read/write or admin) can be changed by clicking the field to the right of the user
<li><b>Removing a user:</b> A user can be removed from the list by clicking the <b>X</b> and then clicking <b>Delete</b>
</ul>
</div>
<br>
<h3>Using access tokens in place of users <span class="label label-info">Requires Admin Access</span></h3>
<div class="container">
<div class="description-overview">
There are many circumstances where it makes sense to <b>not</b> user a user's username and password (deployment scripts, etc).
To support this case, Quay allows the user of <b>access tokens</b> which can be created on a repository and have read and/or write
permissions, without any passwords.
</div>
<ul class="description-list">
<li>Tokens can be managed in the repository's admin interface
<li><b>Adding a token:</b> Enter a user-readable description in the "New token description" field
<li><b>Changing permissions:</b> A token's permissions (read or read/write) can be changed by clicking the field to the right of the token
<li><b>Deleting a token:</b> A token can be deleted by clicking the <b>X</b> and then clicking <b>Delete</b>
<li><b>Using a token:</b> To use the token, the following credentials can be used:
<dl class="dl-horizontal">
<dt>Username</dt><dd>$token</dd>
<dt>Password</dt><dd>(token value can be found by clicking on the token)</dd>
</dl>
</ul>
</div>
<br>

4
static/partials/header.html
View file

@ -15,7 +15,7 @@
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a ng-href="/repository/">Repositories</a></li>
<li><a ng-href="/guide/">Getting Started</a></li>
<li><a ng-href="/guide/">User Guide</a></li>
<li><a ng-href="/plans/">Plans &amp; Pricing</a></li>
</ul>
@ -50,4 +50,4 @@
<a href="/signin/">Sign in</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.navbar-collapse -->

29
static/partials/repo-admin.html
View file

@ -16,7 +16,10 @@
<!-- User Access Permissions -->
<div class="panel panel-default">
<div class="panel-heading">User Access Permissions</div>
<div class="panel-heading">User Access Permissions
<i class="info-icon icon-info-sign" data-content="Allow any number of users to read, write or admin this repository"></i>
</div>
<div class="panel-body">
<table class="permissions">
@ -59,20 +62,23 @@
<!-- Token Permissions -->
<div class="panel panel-default">
<div class="panel-heading">Access Token Permissions</div>
<div class="panel-heading">Access Token Permissions
<i class="info-icon icon-info-sign" data-content="Grant permissions to this repository by creating unique tokens that can be used without entering account passwords<br><br>To use in docker:<br><dl class='dl-horizontal'><dt>Username</dt><dd>$token</dd><dt>Password</dt><dd>(token value)</dd></dl>"></i>
</div>
<div class="panel-body">
<table class="permissions">
<thead>
<tr>
<td>Token</td>
<td>Token Description</td>
<td>Permissions</td>
<td></td>
</tr>
</thead>
<tr ng-repeat="(code, token) in tokens">
<td class="user">
<td class="user token">
<i class="icon-key"></i>
<a ng-click="showToken(token.code)">{{ token.friendlyName }}</a>
</td>
@ -93,7 +99,7 @@
<tr>
<form name="createTokenForm" ng-submit="createToken()">
<td>
<input class="form-control" placeholder="New token friendly name..." ng-model="newToken.friendlyName">
<input class="form-control" placeholder="New token description" ng-model="newToken.friendlyName">
</td>
<td>
<button type="submit" class="btn btn-sm btn-default">Create</button>
@ -166,12 +172,19 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Token code for {{ shownToken.friendlyName }}</h4>
<h4 class="modal-title"><i class="icon-key"></i> {{ shownToken.friendlyName }}</h4>
</div>
<div class="modal-body">
{{ shownToken.code }}
<div class="modal-body token-dialog-body">
<div class="alert alert-info">The docker <u>username</u> is <b>$token</b> and the <u>password</u> is the token</div>
<div class="well well-sm">
<input id="token-view" class="token-view" type="text" value="{{ shownToken.code }}" onClick="this.select();" readonly>
</div>
</div>
<div class="modal-footer">
<div id="clipboardCopied" style="display: none">
Copied to clipboard
</div>
<button id="copyClipboard" type="button" class="btn btn-primary" data-clipboard-target="token-view">Copy to clipboard</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->

2
static/partials/view-repo.html
View file

@ -37,7 +37,7 @@
</div>
</div>
<div id="clipboardCopied" style="display: none">
<div id="clipboardCopied" class="hovering" style="display: none">
Copied to clipboard
</div>
</div>