Tour fixes/improvements:

- Use a placeholder for the container id and repo name
- Add a skip button for docker login
- Add better messaging around permissions

static/css/quay.css

@@ -2876,6 +2876,11 @@ p.editable:hover i {
   border: 1px solid #ddd;
 }
 
+.angular-tour-ui-element .skip-message {
+  display: inline-block;
+  margin-left: 20px;
+}
+
 pre.command {
     padding: 20px;
     background: #fff;

static/directives/angular-tour-ui.html

@@ -22,6 +22,7 @@
 
     <div class="wait-message" ng-show="step.waitMessage">
       <div class="quay-spinner"></div> {{ step.waitMessage }}
+      <span class="skip-message" ng-show="step.skipTitle"><button class="btn btn-default" ng-click="next()">{{ step.skipTitle }}</button></span>
     </div>
   </div>
 </div>

static/js/controllers.js

@@ -52,8 +52,6 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) {
   $scope.tour = {
     'title': 'Quay.io Tutorial',
     'initialScope': {
-      'repoName': 'myfirstrepo',
-      'containerId': 'containerId'
     },
     'steps': [
       {
@@ -76,7 +74,8 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) {
                                                  function(message) {
                                                    return message['data']['action'] == 'login';
                                                  }),
-        'waitMessage': "Waiting for docker login"
+        'waitMessage': "Waiting for docker login",
+        'skipTitle': "I'm already logged in"
       },
       {
         'title': 'Step 2: Create a new container',
@@ -162,13 +161,13 @@ function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService) {
       },
       {
         'title': 'Permissions',
-        'content': "The permissions tab displays all the users, robot accounts and tokens that have access to the repository",
+        'templateUrl': '/static/tutorial/permissions.html',
         'overlayable': true,
         'element': '#permissions'
       },
       {
         'title': 'Adding a permission',
-        'content': 'To add a permission, enter a username or robot account name into the autocomplete ' +
+        'content': 'To add an <b>additional</b> permission, enter a username or robot account name into the autocomplete ' +
           'or hit the dropdown arrow to manage robot accounts',
         'overlayable': true,
         'element': '#add-entity-permission'

static/tutorial/create-container.html

@@ -16,9 +16,9 @@ CONTAINER ID        IMAGE               COMMAND             CREATED
 
 <div class="alert alert-info">
   <div class="control-group">
-    <label class="control-label" for="containerId">Enter the command ID:</label>
+    <label class="control-label" for="containerId">Enter the container ID returned:</label>
     <div class="form-inline">
-      <input type="text" id="containerId" class="form-control" ng-model="tour.tourScope.containerId">
+      <input type="text" id="containerId" class="form-control" placeholder="containerId" ng-model="tour.tourScope.containerId">
     </div>
   </div>
 </div>

static/tutorial/create-image.html

@@ -18,5 +18,5 @@
 <p>To do so, we run the <code>docker commit</code> with the container ID from the previous step and tag it to be a repository under <code>quay.io</code>.
 
 <pre class="command">
-docker commit <var class="var1">{{ tour.tourScope.containerId }}</var> quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName }}</var>
+docker commit <var class="var1">{{ tour.tourScope.containerId || 'containerId' }}</var> quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
 </pre>

static/tutorial/permissions.html

@@ -0,0 +1,2 @@
+<p>The permissions tab displays all the users, robot accounts and tokens that have access to the repository.</p>
+<p>By default, any repository you create will have your user ({{ tour.tourScope.username }}) as the single administrator.</p>

static/tutorial/push-image.html

@@ -1,8 +1,8 @@
 <p>Now that we've tagged our image with a repository name, we can <code>push</code> the repository to Quay.io:</p>
 
 <pre class="command">
-docker push quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName }}</var>
-The push refers to a repository [quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName }}</var>] (len: 1)
+docker push quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>
+The push refers to a repository [quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var>] (len: 1)
 Sending image list
-Pushing repository quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName }}</var> (1 tags)
+Pushing repository quay.io/{{ tour.tourScope.username }}/<var class="var2">{{ tour.tourScope.repoName || 'myfirstrepo' }}</var> (1 tags)
 </pre>