feat(docker/registries): introduce dockerhub authenticated

api/http/handler/registries/registry_create.go

@@ -38,8 +38,8 @@ func (payload *registryCreatePayload) Validate(r *http.Request) error {
 	if payload.Authentication && (govalidator.IsNull(payload.Username) || govalidator.IsNull(payload.Password)) {
 		return errors.New("Invalid credentials. Username and password must be specified when authentication is enabled")
 	}
-	if payload.Type != portainer.QuayRegistry && payload.Type != portainer.AzureRegistry && payload.Type != portainer.CustomRegistry && payload.Type != portainer.GitlabRegistry {
-		return errors.New("Invalid registry type. Valid values are: 1 (Quay.io), 2 (Azure container registry), 3 (custom registry) or 4 (Gitlab registry)")
+	if payload.Type != portainer.QuayRegistry && payload.Type != portainer.AzureRegistry && payload.Type != portainer.CustomRegistry && payload.Type != portainer.GitlabRegistry && payload.Type != portainer.DockerHubRegistry {
+		return errors.New("Invalid registry type. Valid values are: 1 (Quay.io), 2 (Azure container registry), 3 (custom registry), 4 (Gitlab registry) or 5 (DockerHub registry)")
 	}
 	return nil
 }

api/portainer.go

@@ -1461,6 +1461,8 @@ const (
 	CustomRegistry
 	// GitlabRegistry represents a gitlab registry
 	GitlabRegistry
+	// DockerHubRegistry represents a dockerhub registry
+	DockerHubRegistry
 )
 
 const (

app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html

@@ -0,0 +1,64 @@
+<form class="form-horizontal" name="registryFormDockerhub" ng-submit="$ctrl.formAction()">
+  <div class="col-sm-12 form-section-title">
+    DockerHub account details
+  </div>
+  <!-- name-input -->
+  <div class="form-group">
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
+    </div>
+  </div>
+  <div class="form-group" ng-show="registryFormDockerhub.registry_name.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="registryFormDockerhub.registry_name.$error">
+        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+      </div>
+    </div>
+  </div>
+  <!-- !name-input -->
+  <!-- credentials-user -->
+  <div class="form-group">
+    <label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">DockerHub username</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
+    </div>
+  </div>
+  <div class="form-group" ng-show="registryFormDockerhub.registry_username.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="registryFormDockerhub.registry_username.$error">
+        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+      </div>
+    </div>
+  </div>
+  <!-- !credentials-user -->
+  <!-- credentials-password -->
+  <div class="form-group">
+    <label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">DockerHub password</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
+    </div>
+  </div>
+  <div class="form-group" ng-show="registryFormDockerhub.registry_password.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="registryFormDockerhub.registry_password.$error">
+        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+      </div>
+    </div>
+  </div>
+  <!-- !credentials-password -->
+
+  <!-- actions -->
+  <div class="col-sm-12 form-section-title">
+    Actions
+  </div>
+  <div class="form-group">
+    <div class="col-sm-12">
+      <button type="submit" class="btn btn-primary btn-sm" ng-disabled="$ctrl.actionInProgress || !registryFormDockerhub.$valid" button-spinner="$ctrl.actionInProgress">
+        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
+        <span ng-show="$ctrl.actionInProgress">In progress...</span>
+      </button>
+    </div>
+  </div>
+  <!-- !actions -->
+</form>

app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.js

@@ -0,0 +1,9 @@
+angular.module('portainer.app').component('registryFormDockerhub', {
+  templateUrl: './registry-form-dockerhub.html',
+  bindings: {
+    model: '=',
+    formAction: '<',
+    formActionLabel: '@',
+    actionInProgress: '<',
+  },
+});

app/portainer/models/registryTypes.js

@@ -3,4 +3,5 @@ export const RegistryTypes = Object.freeze({
   AZURE: 2,
   CUSTOM: 3,
   GITLAB: 4,
+  DOCKERHUB: 5,
 });

app/portainer/views/registries/create/createRegistryController.js

@@ -12,6 +12,7 @@ angular.module('portainer.app').controller('CreateRegistryController', [
     $scope.selectAzureRegistry = selectAzureRegistry;
     $scope.selectCustomRegistry = selectCustomRegistry;
     $scope.selectGitlabRegistry = selectGitlabRegistry;
+    $scope.selectDockerHub = selectDockerHub;
     $scope.create = createRegistry;
     $scope.useDefaultGitlabConfiguration = useDefaultGitlabConfiguration;
     $scope.retrieveGitlabRegistries = retrieveGitlabRegistries;
@@ -58,6 +59,12 @@ angular.module('portainer.app').controller('CreateRegistryController', [
       $scope.model.Authentication = false;
     }
 
+    function selectDockerHub() {
+      $scope.model.Name = '';
+      $scope.model.URL = 'docker.io';
+      $scope.model.Authentication = true;
+    }
+
     function retrieveGitlabRegistries() {
       $scope.state.actionInProgress = true;
       RegistryGitlabService.projects($scope.model.Gitlab.InstanceURL, $scope.model.Token)

app/portainer/views/registries/create/createregistry.html

@@ -16,6 +16,16 @@
 
           <div class="form-group" style="margin-bottom: 0;">
             <div class="boxselector_wrapper">
+              <div>
+                <input type="radio" id="registry_dockerhub" ng-model="model.Type" ng-value="RegistryTypes.DOCKERHUB" />
+                <label for="registry_dockerhub" ng-click="selectDockerHub()">
+                  <div class="boxselector_header">
+                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
+                    DockerHub
+                  </div>
+                  <p>DockerHub authenticated account</p>
+                </label>
+              </div>
               <div>
                 <input type="radio" id="registry_quay" ng-model="model.Type" ng-value="RegistryTypes.QUAY" />
                 <label for="registry_quay" ng-click="selectQuayRegistry()">
@@ -93,6 +103,14 @@
             action-in-progress="state.actionInProgress"
             reset-defaults="useDefaultGitlabConfiguration"
           ></registry-form-gitlab>
+
+          <registry-form-dockerhub
+            ng-if="model.Type === RegistryTypes.DOCKERHUB"
+            model="model"
+            form-action="create"
+            form-action-label="Add registry"
+            action-in-progress="state.actionInProgress"
+          ></registry-form-dockerhub>
         </form>
       </rd-widget-body>
     </rd-widget>

app/portainer/views/registries/registries.html

@@ -16,70 +16,6 @@
   </span>
 </information-panel>
 
-<div class="row" ng-if="dockerhub && isAdmin">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-database" title-text="DockerHub"> </rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- note -->
-          <div class="form-group">
-            <span class="col-sm-12 text-muted small">
-              The DockerHub registry can be used by any user. You can specify the credentials that will be used to push &amp; pull images here.
-            </span>
-          </div>
-          <!-- !note -->
-          <!-- authentication-checkbox -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <label for="registry_auth" class="control-label text-left">
-                Authentication
-                <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to push/pull private images."></portainer-tooltip>
-              </label>
-              <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="dockerhub.Authentication" /><i></i> </label>
-            </div>
-          </div>
-          <!-- !authentication-checkbox -->
-          <!-- authentication-credentials -->
-          <div ng-if="dockerhub.Authentication">
-            <!-- credentials-user -->
-            <div class="form-group">
-              <label for="hub_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="text" class="form-control" id="hub_username" ng-model="dockerhub.Username" />
-              </div>
-            </div>
-            <!-- !credentials-user -->
-            <!-- credentials-password -->
-            <div class="form-group">
-              <label for="hub_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
-              <div class="col-sm-9 col-lg-10">
-                <input type="password" class="form-control" id="hub_password" ng-model="formValues.dockerHubPassword" placeholder="*******" />
-              </div>
-            </div>
-            <!-- !credentials-password -->
-          </div>
-          <!-- !authentication-credentials -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                ng-disabled="state.actionInProgress || dockerhub.Authentication && (!dockerhub.Username || !formValues.dockerHubPassword)"
-                ng-click="updateDockerHub()"
-                button-spinner="state.actionInProgress"
-              >
-                <span ng-hide="state.actionInProgress">Update</span>
-                <span ng-show="state.actionInProgress">Updating DockerHub settings...</span>
-              </button>
-            </div>
-          </div>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="row">
   <div class="col-sm-12">
     <registries-datatable

app/portainer/views/registries/registriesController.js

@@ -24,22 +24,6 @@ angular.module('portainer.app').controller('RegistriesController', [
       return !_.includes(nonBrowsableUrls, item.URL);
     };
 
-    $scope.updateDockerHub = function () {
-      var dockerhub = $scope.dockerhub;
-      dockerhub.Password = $scope.formValues.dockerHubPassword;
-      $scope.state.actionInProgress = true;
-      DockerHubService.update(dockerhub)
-        .then(function success() {
-          Notifications.success('DockerHub registry updated');
-        })
-        .catch(function error(err) {
-          Notifications.error('Failure', err, 'Unable to update DockerHub details');
-        })
-        .finally(function final() {
-          $scope.state.actionInProgress = false;
-        });
-    };
-
     $scope.removeAction = function (selectedItems) {
       ModalService.confirmDeletion('Do you want to remove the selected registries?', function onConfirm(confirmed) {
         if (!confirmed) {