From faf6a5c497062099e70c31be3d39624c1f69eafa Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Thu, 17 Oct 2013 14:46:23 -0400 Subject: [PATCH] Add UI polishing to the token auth stuff --- static/css/quay.css | 63 +++++++++++++++++++++++++++++++-- static/js/controllers.js | 34 +++++++++++------- static/partials/guide.html | 54 +++++++++++++++++++++++----- static/partials/header.html | 4 +-- static/partials/repo-admin.html | 29 ++++++++++----- static/partials/view-repo.html | 2 +- 6 files changed, 152 insertions(+), 34 deletions(-) diff --git a/static/css/quay.css b/static/css/quay.css index bc9175811..be51c55e1 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -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; } diff --git a/static/js/controllers.js b/static/js/controllers.js index d6765a309..357dc6687 100644 --- a/static/js/controllers.js +++ b/static/js/controllers.js @@ -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; diff --git a/static/partials/guide.html b/static/partials/guide.html index 5ee657c1d..00d773304 100644 --- a/static/partials/guide.html +++ b/static/partials/guide.html @@ -1,10 +1,20 @@
Warning: Quay requires docker version 0.6.2 or higher to work
-

Getting started guide

-
+

User guide

+
-

Pushing a repository to Quay

+

Pulling a repository from Quay

+
+
Note: Private repositories require you to be logged in or the pull will fail. See below for how to sign into Quay if you have never done so before.
+ To pull a repository from Quay, run the following command: +

+
docker pull quay.io/username/repo_name
+
+
+ + +

Pushing a repository to Quay Requires Write Access

First, tag the image with your repository name:

docker tag 0u123imageid quay.io/username/repo_name
@@ -14,12 +24,40 @@

-

Pulling a repository from Quay

+

Granting and managing permissions to users Requires Admin Access

-
Note: Private repositories require you to be logged in or the pull will fail. See below for how to sign into Quay if you have never done so before.
- To pull a repository from Quay, run the following command: -

-
docker pull quay.io/username/repo_name
+
Quay allows a repository to be shared any number of users and to grant those users any level of permissions for a repository
+ +
    +
  • Permissions for a repository can be granted and managed in the repository's admin interface +
  • Adding a user: Type that user's username in the "Add New User..." field, and select the user +
  • Changing permissions: A user's permissions (read, read/write or admin) can be changed by clicking the field to the right of the user +
  • Removing a user: A user can be removed from the list by clicking the X and then clicking Delete +
+ +
+
+ +

Using access tokens in place of users Requires Admin Access

+
+
+ There are many circumstances where it makes sense to not user a user's username and password (deployment scripts, etc). + To support this case, Quay allows the user of access tokens which can be created on a repository and have read and/or write + permissions, without any passwords. +
+ +
    +
  • Tokens can be managed in the repository's admin interface +
  • Adding a token: Enter a user-readable description in the "New token description" field +
  • Changing permissions: A token's permissions (read or read/write) can be changed by clicking the field to the right of the token +
  • Deleting a token: A token can be deleted by clicking the X and then clicking Delete +
  • Using a token: To use the token, the following credentials can be used: +
    +
    Username
    $token
    +
    Password
    (token value can be found by clicking on the token)
    +
    +
+

diff --git a/static/partials/header.html b/static/partials/header.html index 5b04f0f85..321e08612 100644 --- a/static/partials/header.html +++ b/static/partials/header.html @@ -15,7 +15,7 @@ \ No newline at end of file +
diff --git a/static/partials/repo-admin.html b/static/partials/repo-admin.html index 967a36892..4f0423ca4 100644 --- a/static/partials/repo-admin.html +++ b/static/partials/repo-admin.html @@ -16,7 +16,10 @@
-
User Access Permissions
+
User Access Permissions + + +
@@ -59,20 +62,23 @@
-
Access Token Permissions
+
Access Token Permissions + + +
- + - @@ -93,7 +99,7 @@
TokenToken Description Permissions
+ {{ token.friendlyName }}
- + @@ -166,12 +172,19 @@ -