feat(container-console): add ability to specify the user (#976)

app/components/containerConsole/containerConsole.html

@@ -16,10 +16,12 @@
         </div>
       </rd-widget-header>
       <rd-widget-body>
-        <form>
+        <form class="form-horizontal">
-          <div class="row">
+          <div ng-if="!state.connected">
             <!-- command-list -->
-            <div class="col-sm-4">
+              <div class="form-group">
+                <label for="command" class="col-lg-1 text-left col-sm-2 control-label">Command</label>
+                <div class="col-lg-11 col-sm-10">
                   <div class="input-group">
                     <span class="input-group-addon">
                       <i class="fa fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
@@ -33,11 +35,26 @@
                     </select>
                   </div>
                 </div>
+              </div>
             <!-- !command-list -->
-            <div class="col-sm-8">
+            <div class="form-group">
-              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="state.connected">Connect</button>
+              <label for="username" class="col-lg-1 text-left col-sm-2 control-label">
-              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!state.connected">Disconnect</button>
+                User
+                <portainer-tooltip position="bottom" message="Format is one of: user, user:group, uid or uid:gid"></portainer-tooltip>
+              </label>
+              <div class="col-lg-11 col-sm-10">
+                <input class="form-control" type="text" name="username" ng-model="state.user" placeholder="root">
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-lg-offset-1 col-sm-offset-2 col-lg-11 col-sm-10">
+                <button type="button" class="btn btn-primary" ng-click="connect()">Connect</button>
+              </div>
+            </div>
           </div>
+          <div ng-if="state.connected">
+            <label>Connected as {{::state.user || 'root'}}</label>
+            <button type="button" class="btn btn-default" ng-click="disconnect()">Disconnect</button>
           </div>
         </form>
       </rd-widget-body>

app/components/containerConsole/containerConsoleController.js

@@ -45,6 +45,7 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
       AttachStdout: true,
       AttachStderr: true,
       Tty: true,
+      User: $scope.state.user,
       Cmd: $scope.state.command.replace(' ', ',').split(',')
     };
 

app/directives/tooltip.js

@@ -6,7 +6,7 @@ angular
       message: '@',
       position: '@'
     },
-    template: '<span class="interactive" tooltip-placement="{{position}}" tooltip-class="portainer-tooltip" uib-tooltip="{{message}}"><i class="fa fa-question-circle tooltip-icon" aria-hidden="true"></i></span>',
+    template: '<span class="interactive" tooltip-append-to-body="true" tooltip-placement="{{position}}" tooltip-class="portainer-tooltip" uib-tooltip="{{message}}"><i class="fa fa-question-circle tooltip-icon" aria-hidden="true"></i></span>',
     restrict: 'E'
   };
   return directive;