Merge branch 'release/1.13.3'

Release 1.13.2

.codeclimate.yml

@@ -12,7 +12,8 @@ engines:
     enabled: true
     config:
       languages:
-      - javascript
+        javascript:
+          mass_threshold: 80
   eslint:
     enabled: true
     config:

README.md

@@ -1,12 +1,13 @@
 
 <p align="center">
-  <img title="portainer" src='http://portainer.io/images/logo_alt.png' />
+  <img title="portainer" src='https://portainer.io/images/logo_alt.png' />
 </p>
 
 [![Docker Pulls](https://img.shields.io/docker/pulls/portainer/portainer.svg)](https://hub.docker.com/r/portainer/portainer/)
 [![Microbadger](https://images.microbadger.com/badges/image/portainer/portainer.svg)](http://microbadger.com/images/portainer/portainer "Image size")
-[![Documentation Status](https://readthedocs.org/projects/portainer/badge/?version=stable)](http://portainer.readthedocs.io/en/latest/?badge=stable)
+[![Documentation Status](https://readthedocs.org/projects/portainer/badge/?version=stable)](http://portainer.readthedocs.io/en/stable/?badge=stable)
 [![Codefresh build status]( https://g.codefresh.io/api/badges/build?repoOwner=portainer&repoName=portainer&branch=develop&pipelineName=portainer-ci&accountName=deviantony&type=cf-1)]( https://g.codefresh.io/repositories/portainer/portainer/builds?filter=trigger:build;branch:develop;service:5922a08a3a1aab000116fcc6~portainer-ci)
+[![Slack](https://portainer.io/slack/badge.svg)](https://portainer.io/slack/)
 [![Gitter](https://badges.gitter.im/portainer/Lobby.svg)](https://gitter.im/portainer/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YHXZJQNJQ36H6)
 
@@ -18,7 +19,7 @@
 
 ## Demo
 
-<img src="http://portainer.io/images/screenshots/portainer.gif" width="77%"/>
+<img src="https://portainer.io/images/screenshots/portainer.gif" width="77%"/>
 
 You can try out the public demo instance: http://demo.portainer.io/ (login with the username **admin** and the password **tryportainer**).
 
@@ -34,7 +35,7 @@ Please note that the public demo cluster is **reset every 15min**.
 * Issues: https://github.com/portainer/portainer/issues
 * FAQ: https://portainer.readthedocs.io/en/latest/faq.html
 * Gitter (chat): https://gitter.im/portainer/Lobby
-* Slack: http://portainer.io/slack/
+* Slack: https://portainer.io/slack/
 
 ## Reporting bugs and contributing
 

api/bolt/datastore.go

@@ -22,6 +22,9 @@ type Store struct {
 	EndpointService        *EndpointService
 	ResourceControlService *ResourceControlService
 	VersionService         *VersionService
+	SettingsService        *SettingsService
+	RegistryService        *RegistryService
+	DockerHubService       *DockerHubService
 
 	db                    *bolt.DB
 	checkForDataMigration bool
@@ -35,6 +38,9 @@ const (
 	teamMembershipBucketName  = "team_membership"
 	endpointBucketName        = "endpoints"
 	resourceControlBucketName = "resource_control"
+	settingsBucketName        = "settings"
+	registryBucketName        = "registries"
+	dockerhubBucketName       = "dockerhub"
 )
 
 // NewStore initializes a new Store and the associated services
@@ -47,6 +53,9 @@ func NewStore(storePath string) (*Store, error) {
 		EndpointService:        &EndpointService{},
 		ResourceControlService: &ResourceControlService{},
 		VersionService:         &VersionService{},
+		SettingsService:        &SettingsService{},
+		RegistryService:        &RegistryService{},
+		DockerHubService:       &DockerHubService{},
 	}
 	store.UserService.store = store
 	store.TeamService.store = store
@@ -54,6 +63,9 @@ func NewStore(storePath string) (*Store, error) {
 	store.EndpointService.store = store
 	store.ResourceControlService.store = store
 	store.VersionService.store = store
+	store.SettingsService.store = store
+	store.RegistryService.store = store
+	store.DockerHubService.store = store
 
 	_, err := os.Stat(storePath + "/" + databaseFileName)
 	if err != nil && os.IsNotExist(err) {
@@ -70,36 +82,26 @@ func NewStore(storePath string) (*Store, error) {
 // Open opens and initializes the BoltDB database.
 func (store *Store) Open() error {
 	path := store.Path + "/" + databaseFileName
+
 	db, err := bolt.Open(path, 0600, &bolt.Options{Timeout: 1 * time.Second})
 	if err != nil {
 		return err
 	}
 	store.db = db
+
+	bucketsToCreate := []string{versionBucketName, userBucketName, teamBucketName, endpointBucketName,
+		resourceControlBucketName, teamMembershipBucketName, settingsBucketName,
+		registryBucketName, dockerhubBucketName}
+
 	return db.Update(func(tx *bolt.Tx) error {
-		_, err := tx.CreateBucketIfNotExists([]byte(versionBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(userBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(teamBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(endpointBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(resourceControlBucketName))
-		if err != nil {
-			return err
-		}
-		_, err = tx.CreateBucketIfNotExists([]byte(teamMembershipBucketName))
-		if err != nil {
-			return err
+
+		for _, bucket := range bucketsToCreate {
+			_, err := tx.CreateBucketIfNotExists([]byte(bucket))
+			if err != nil {
+				return err
+			}
 		}
+
 		return nil
 	})
 }

api/bolt/dockerhub_service.go

@@ -0,0 +1,61 @@
+package bolt
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/bolt/internal"
+
+	"github.com/boltdb/bolt"
+)
+
+// DockerHubService represents a service for managing registries.
+type DockerHubService struct {
+	store *Store
+}
+
+const (
+	dbDockerHubKey = "DOCKERHUB"
+)
+
+// DockerHub returns the DockerHub object.
+func (service *DockerHubService) DockerHub() (*portainer.DockerHub, error) {
+	var data []byte
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(dockerhubBucketName))
+		value := bucket.Get([]byte(dbDockerHubKey))
+		if value == nil {
+			return portainer.ErrDockerHubNotFound
+		}
+
+		data = make([]byte, len(value))
+		copy(data, value)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var dockerhub portainer.DockerHub
+	err = internal.UnmarshalDockerHub(data, &dockerhub)
+	if err != nil {
+		return nil, err
+	}
+	return &dockerhub, nil
+}
+
+// StoreDockerHub persists a DockerHub object.
+func (service *DockerHubService) StoreDockerHub(dockerhub *portainer.DockerHub) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(dockerhubBucketName))
+
+		data, err := internal.MarshalDockerHub(dockerhub)
+		if err != nil {
+			return err
+		}
+
+		err = bucket.Put([]byte(dbDockerHubKey), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}

api/bolt/endpoint_service.go

@@ -7,7 +7,7 @@ import (
 	"github.com/boltdb/bolt"
 )
 
-// EndpointService represents a service for managing users.
+// EndpointService represents a service for managing endpoints.
 type EndpointService struct {
 	store *Store
 }

api/bolt/internal/internal.go

@@ -47,6 +47,16 @@ func UnmarshalEndpoint(data []byte, endpoint *portainer.Endpoint) error {
 	return json.Unmarshal(data, endpoint)
 }
 
+// MarshalRegistry encodes a registry to binary format.
+func MarshalRegistry(registry *portainer.Registry) ([]byte, error) {
+	return json.Marshal(registry)
+}
+
+// UnmarshalRegistry decodes a registry from a binary data.
+func UnmarshalRegistry(data []byte, registry *portainer.Registry) error {
+	return json.Unmarshal(data, registry)
+}
+
 // MarshalResourceControl encodes a resource control object to binary format.
 func MarshalResourceControl(rc *portainer.ResourceControl) ([]byte, error) {
 	return json.Marshal(rc)
@@ -57,6 +67,26 @@ func UnmarshalResourceControl(data []byte, rc *portainer.ResourceControl) error
 	return json.Unmarshal(data, rc)
 }
 
+// MarshalSettings encodes a settings object to binary format.
+func MarshalSettings(settings *portainer.Settings) ([]byte, error) {
+	return json.Marshal(settings)
+}
+
+// UnmarshalSettings decodes a settings object from a binary data.
+func UnmarshalSettings(data []byte, settings *portainer.Settings) error {
+	return json.Unmarshal(data, settings)
+}
+
+// MarshalDockerHub encodes a Dockerhub object to binary format.
+func MarshalDockerHub(settings *portainer.DockerHub) ([]byte, error) {
+	return json.Marshal(settings)
+}
+
+// UnmarshalDockerHub decodes a Dockerhub object from a binary data.
+func UnmarshalDockerHub(data []byte, settings *portainer.DockerHub) error {
+	return json.Unmarshal(data, settings)
+}
+
 // Itob returns an 8-byte big endian representation of v.
 // This function is typically used for encoding integer IDs to byte slices
 // so that they can be used as BoltDB keys.

api/bolt/registry_service.go

@@ -0,0 +1,114 @@
+package bolt
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/bolt/internal"
+
+	"github.com/boltdb/bolt"
+)
+
+// RegistryService represents a service for managing registries.
+type RegistryService struct {
+	store *Store
+}
+
+// Registry returns an registry by ID.
+func (service *RegistryService) Registry(ID portainer.RegistryID) (*portainer.Registry, error) {
+	var data []byte
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		value := bucket.Get(internal.Itob(int(ID)))
+		if value == nil {
+			return portainer.ErrRegistryNotFound
+		}
+
+		data = make([]byte, len(value))
+		copy(data, value)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var registry portainer.Registry
+	err = internal.UnmarshalRegistry(data, &registry)
+	if err != nil {
+		return nil, err
+	}
+	return &registry, nil
+}
+
+// Registries returns an array containing all the registries.
+func (service *RegistryService) Registries() ([]portainer.Registry, error) {
+	var registries = make([]portainer.Registry, 0)
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+
+		cursor := bucket.Cursor()
+		for k, v := cursor.First(); k != nil; k, v = cursor.Next() {
+			var registry portainer.Registry
+			err := internal.UnmarshalRegistry(v, &registry)
+			if err != nil {
+				return err
+			}
+			registries = append(registries, registry)
+		}
+
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	return registries, nil
+}
+
+// CreateRegistry creates a new registry.
+func (service *RegistryService) CreateRegistry(registry *portainer.Registry) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+
+		id, _ := bucket.NextSequence()
+		registry.ID = portainer.RegistryID(id)
+
+		data, err := internal.MarshalRegistry(registry)
+		if err != nil {
+			return err
+		}
+
+		err = bucket.Put(internal.Itob(int(registry.ID)), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+// UpdateRegistry updates an registry.
+func (service *RegistryService) UpdateRegistry(ID portainer.RegistryID, registry *portainer.Registry) error {
+	data, err := internal.MarshalRegistry(registry)
+	if err != nil {
+		return err
+	}
+
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		err = bucket.Put(internal.Itob(int(ID)), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}
+
+// DeleteRegistry deletes an registry.
+func (service *RegistryService) DeleteRegistry(ID portainer.RegistryID) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(registryBucketName))
+		err := bucket.Delete(internal.Itob(int(ID)))
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}

api/bolt/settings_service.go

@@ -0,0 +1,61 @@
+package bolt
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/bolt/internal"
+
+	"github.com/boltdb/bolt"
+)
+
+// SettingsService represents a service to manage application settings.
+type SettingsService struct {
+	store *Store
+}
+
+const (
+	dbSettingsKey = "SETTINGS"
+)
+
+// Settings retrieve the settings object.
+func (service *SettingsService) Settings() (*portainer.Settings, error) {
+	var data []byte
+	err := service.store.db.View(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(settingsBucketName))
+		value := bucket.Get([]byte(dbSettingsKey))
+		if value == nil {
+			return portainer.ErrSettingsNotFound
+		}
+
+		data = make([]byte, len(value))
+		copy(data, value)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var settings portainer.Settings
+	err = internal.UnmarshalSettings(data, &settings)
+	if err != nil {
+		return nil, err
+	}
+	return &settings, nil
+}
+
+// StoreSettings persists a Settings object.
+func (service *SettingsService) StoreSettings(settings *portainer.Settings) error {
+	return service.store.db.Update(func(tx *bolt.Tx) error {
+		bucket := tx.Bucket([]byte(settingsBucketName))
+
+		data, err := internal.MarshalSettings(settings)
+		if err != nil {
+			return err
+		}
+
+		err = bucket.Put([]byte(dbSettingsKey), data)
+		if err != nil {
+			return err
+		}
+		return nil
+	})
+}

api/cli/cli.go

@@ -1,6 +1,7 @@
 package cli
 
 import (
+	"log"
 	"time"
 
 	"github.com/portainer/portainer"
@@ -29,14 +30,11 @@ func (*Service) ParseFlags(version string) (*portainer.CLIFlags, error) {
 
 	flags := &portainer.CLIFlags{
 		Endpoint:          kingpin.Flag("host", "Dockerd endpoint").Short('H').String(),
-		Logo:              kingpin.Flag("logo", "URL for the logo displayed in the UI").String(),
-		Labels:            pairs(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l')),
 		ExternalEndpoints: kingpin.Flag("external-endpoints", "Path to a file defining available endpoints").String(),
 		SyncInterval:      kingpin.Flag("sync-interval", "Duration between each synchronization via the external endpoints source").Default(defaultSyncInterval).String(),
 		Addr:              kingpin.Flag("bind", "Address and port to serve Portainer").Default(defaultBindAddress).Short('p').String(),
 		Assets:            kingpin.Flag("assets", "Path to the assets").Default(defaultAssetsDirectory).Short('a').String(),
 		Data:              kingpin.Flag("data", "Path to the folder where the data is stored").Default(defaultDataDirectory).Short('d').String(),
-		Templates:         kingpin.Flag("templates", "URL to the templates (apps) definitions").Default(defaultTemplatesURL).Short('t').String(),
 		NoAuth:            kingpin.Flag("no-auth", "Disable authentication").Default(defaultNoAuth).Bool(),
 		NoAnalytics:       kingpin.Flag("no-analytics", "Disable Analytics in app").Default(defaultNoAuth).Bool(),
 		TLSVerify:         kingpin.Flag("tlsverify", "TLS support").Default(defaultTLSVerify).Bool(),
@@ -47,6 +45,10 @@ func (*Service) ParseFlags(version string) (*portainer.CLIFlags, error) {
 		SSLCert:           kingpin.Flag("sslcert", "Path to the SSL certificate used to secure the Portainer instance").Default(defaultSSLCertPath).String(),
 		SSLKey:            kingpin.Flag("sslkey", "Path to the SSL key used to secure the Portainer instance").Default(defaultSSLKeyPath).String(),
 		AdminPassword:     kingpin.Flag("admin-password", "Hashed admin password").String(),
+		// Deprecated flags
+		Labels:    pairs(kingpin.Flag("hide-label", "Hide containers with a specific label in the UI").Short('l')),
+		Logo:      kingpin.Flag("logo", "URL for the logo displayed in the UI").String(),
+		Templates: kingpin.Flag("templates", "URL to the templates (apps) definitions").Short('t').String(),
 	}
 
 	kingpin.Parse()
@@ -79,6 +81,8 @@ func (*Service) ValidateFlags(flags *portainer.CLIFlags) error {
 		return errNoAuthExcludeAdminPassword
 	}
 
+	displayDeprecationWarnings(*flags.Templates, *flags.Logo, *flags.Labels)
+
 	return nil
 }
 
@@ -122,3 +126,15 @@ func validateSyncInterval(syncInterval string) error {
 	}
 	return nil
 }
+
+func displayDeprecationWarnings(templates, logo string, labels []portainer.Pair) {
+	if templates != "" {
+		log.Println("Warning: the --templates / -t flag is deprecated and will be removed in future versions.")
+	}
+	if logo != "" {
+		log.Println("Warning: the --logo flag is deprecated and will be removed in future versions.")
+	}
+	if labels != nil {
+		log.Println("Warning: the --hide-label / -l flag is deprecated and will be removed in future versions.")
+	}
+}

api/cli/defaults.go

@@ -6,7 +6,6 @@ const (
 	defaultBindAddress     = ":9000"
 	defaultDataDirectory   = "/data"
 	defaultAssetsDirectory = "."
-	defaultTemplatesURL    = "https://raw.githubusercontent.com/portainer/templates/master/templates.json"
 	defaultNoAuth          = "false"
 	defaultNoAnalytics     = "false"
 	defaultTLSVerify       = "false"

api/cli/defaults_windows.go

@@ -4,7 +4,6 @@ const (
 	defaultBindAddress     = ":9000"
 	defaultDataDirectory   = "C:\\data"
 	defaultAssetsDirectory = "."
-	defaultTemplatesURL    = "https://raw.githubusercontent.com/portainer/templates/master/templates.json"
 	defaultNoAuth          = "false"
 	defaultNoAnalytics     = "false"
 	defaultTLSVerify       = "false"

api/cmd/portainer/main.go

@@ -82,16 +82,59 @@ func initEndpointWatcher(endpointService portainer.EndpointService, externalEnpo
 	return authorizeEndpointMgmt
 }
 
-func initSettings(authorizeEndpointMgmt bool, flags *portainer.CLIFlags) *portainer.Settings {
-	return &portainer.Settings{
-		HiddenLabels:       *flags.Labels,
-		Logo:               *flags.Logo,
+func initStatus(authorizeEndpointMgmt bool, flags *portainer.CLIFlags) *portainer.Status {
+	return &portainer.Status{
 		Analytics:          !*flags.NoAnalytics,
 		Authentication:     !*flags.NoAuth,
 		EndpointManagement: authorizeEndpointMgmt,
+		Version:            portainer.APIVersion,
 	}
 }
 
+func initDockerHub(dockerHubService portainer.DockerHubService) error {
+	_, err := dockerHubService.DockerHub()
+	if err == portainer.ErrDockerHubNotFound {
+		dockerhub := &portainer.DockerHub{
+			Authentication: false,
+			Username:       "",
+			Password:       "",
+		}
+		return dockerHubService.StoreDockerHub(dockerhub)
+	} else if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func initSettings(settingsService portainer.SettingsService, flags *portainer.CLIFlags) error {
+	_, err := settingsService.Settings()
+	if err == portainer.ErrSettingsNotFound {
+		settings := &portainer.Settings{
+			LogoURL:                     *flags.Logo,
+			DisplayExternalContributors: true,
+		}
+
+		if *flags.Templates != "" {
+			settings.TemplatesURL = *flags.Templates
+		} else {
+			settings.TemplatesURL = portainer.DefaultTemplatesURL
+		}
+
+		if *flags.Labels != nil {
+			settings.BlackListedLabels = *flags.Labels
+		} else {
+			settings.BlackListedLabels = make([]portainer.Pair, 0)
+		}
+
+		return settingsService.StoreSettings(settings)
+	} else if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func retrieveFirstEndpointFromDatabase(endpointService portainer.EndpointService) *portainer.Endpoint {
 	endpoints, err := endpointService.Endpoints()
 	if err != nil {
@@ -114,7 +157,17 @@ func main() {
 
 	authorizeEndpointMgmt := initEndpointWatcher(store.EndpointService, *flags.ExternalEndpoints, *flags.SyncInterval)
 
-	settings := initSettings(authorizeEndpointMgmt, flags)
+	err := initSettings(store.SettingsService, flags)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	err = initDockerHub(store.DockerHubService)
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	applicationStatus := initStatus(authorizeEndpointMgmt, flags)
 
 	if *flags.Endpoint != "" {
 		var endpoints []portainer.Endpoint
@@ -156,10 +209,9 @@ func main() {
 	}
 
 	var server portainer.Server = &http.Server{
+		Status:                 applicationStatus,
 		BindAddress:            *flags.Addr,
 		AssetsPath:             *flags.Assets,
-		Settings:               settings,
-		TemplatesURL:           *flags.Templates,
 		AuthDisabled:           *flags.NoAuth,
 		EndpointManagement:     authorizeEndpointMgmt,
 		UserService:            store.UserService,
@@ -167,6 +219,9 @@ func main() {
 		TeamMembershipService:  store.TeamMembershipService,
 		EndpointService:        store.EndpointService,
 		ResourceControlService: store.ResourceControlService,
+		SettingsService:        store.SettingsService,
+		RegistryService:        store.RegistryService,
+		DockerHubService:       store.DockerHubService,
 		CryptoService:          cryptoService,
 		JWTService:             jwtService,
 		FileService:            fileService,
@@ -176,7 +231,7 @@ func main() {
 	}
 
 	log.Printf("Starting Portainer on %s", *flags.Addr)
-	err := server.Start()
+	err = server.Start()
 	if err != nil {
 		log.Fatal(err)
 	}

api/errors.go

@@ -4,6 +4,7 @@ package portainer
 const (
 	ErrUnauthorized           = Error("Unauthorized")
 	ErrResourceAccessDenied   = Error("Access denied to resource")
+	ErrResourceNotFound       = Error("Unable to find resource")
 	ErrUnsupportedDockerAPI   = Error("Unsupported Docker API response")
 	ErrMissingSecurityContext = Error("Unable to find security details in request context")
 )
@@ -41,11 +42,27 @@ const (
 	ErrEndpointAccessDenied = Error("Access denied to endpoint")
 )
 
+// Registry errors.
+const (
+	ErrRegistryNotFound      = Error("Registry not found")
+	ErrRegistryAlreadyExists = Error("A registry is already defined for this URL")
+)
+
 // Version errors.
 const (
 	ErrDBVersionNotFound = Error("DB version not found")
 )
 
+// Settings errors.
+const (
+	ErrSettingsNotFound = Error("Settings not found")
+)
+
+// DockerHub errors.
+const (
+	ErrDockerHubNotFound = Error("Dockerhub not found")
+)
+
 // Crypto errors.
 const (
 	ErrCryptoHashFailure = Error("Unable to hash data")

api/http/handler/dockerhub.go

@@ -0,0 +1,87 @@
+package handler
+
+import (
+	"encoding/json"
+
+	"github.com/asaskevich/govalidator"
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+	"github.com/portainer/portainer/http/security"
+
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/gorilla/mux"
+)
+
+// DockerHubHandler represents an HTTP API handler for managing DockerHub.
+type DockerHubHandler struct {
+	*mux.Router
+	Logger           *log.Logger
+	DockerHubService portainer.DockerHubService
+}
+
+// NewDockerHubHandler returns a new instance of OldDockerHubHandler.
+func NewDockerHubHandler(bouncer *security.RequestBouncer) *DockerHubHandler {
+	h := &DockerHubHandler{
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
+	}
+	h.Handle("/dockerhub",
+		bouncer.PublicAccess(http.HandlerFunc(h.handleGetDockerHub))).Methods(http.MethodGet)
+	h.Handle("/dockerhub",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutDockerHub))).Methods(http.MethodPut)
+
+	return h
+}
+
+// handleGetDockerHub handles GET requests on /dockerhub
+func (handler *DockerHubHandler) handleGetDockerHub(w http.ResponseWriter, r *http.Request) {
+	dockerhub, err := handler.DockerHubService.DockerHub()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, dockerhub, handler.Logger)
+	return
+}
+
+// handlePutDockerHub handles PUT requests on /dockerhub
+func (handler *DockerHubHandler) handlePutDockerHub(w http.ResponseWriter, r *http.Request) {
+	var req putDockerHubRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err := govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	dockerhub := &portainer.DockerHub{
+		Authentication: false,
+		Username:       "",
+		Password:       "",
+	}
+
+	if req.Authentication {
+		dockerhub.Authentication = true
+		dockerhub.Username = req.Username
+		dockerhub.Password = req.Password
+	}
+
+	err = handler.DockerHubService.StoreDockerHub(dockerhub)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+	}
+}
+
+type putDockerHubRequest struct {
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}

api/http/handler/file.go

@@ -1,19 +1,36 @@
 package handler
 
 import (
+	"os"
+
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+
+	"log"
 	"net/http"
+	"path"
 	"strings"
 )
 
 // FileHandler represents an HTTP API handler for managing static files.
 type FileHandler struct {
 	http.Handler
+	Logger             *log.Logger
+	allowedDirectories map[string]bool
 }
 
 // NewFileHandler returns a new instance of FileHandler.
 func NewFileHandler(assetPath string) *FileHandler {
 	h := &FileHandler{
 		Handler: http.FileServer(http.Dir(assetPath)),
+		Logger:  log.New(os.Stderr, "", log.LstdFlags),
+		allowedDirectories: map[string]bool{
+			"/":       true,
+			"/css":    true,
+			"/js":     true,
+			"/images": true,
+			"/fonts":  true,
+		},
 	}
 	return h
 }
@@ -27,11 +44,18 @@ func isHTML(acceptContent []string) bool {
 	return false
 }
 
-func (fileHandler *FileHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+func (handler *FileHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	requestDirectory := path.Dir(r.URL.Path)
+	if !handler.allowedDirectories[requestDirectory] {
+		httperror.WriteErrorResponse(w, portainer.ErrResourceNotFound, http.StatusNotFound, handler.Logger)
+		return
+	}
+
 	if !isHTML(r.Header["Accept"]) {
 		w.Header().Set("Cache-Control", "max-age=31536000")
 	} else {
 		w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
 	}
-	fileHandler.Handler.ServeHTTP(w, r)
+
+	handler.Handler.ServeHTTP(w, r)
 }

api/http/handler/handler.go

@@ -17,7 +17,10 @@ type Handler struct {
 	TeamHandler           *TeamHandler
 	TeamMembershipHandler *TeamMembershipHandler
 	EndpointHandler       *EndpointHandler
+	RegistryHandler       *RegistryHandler
+	DockerHubHandler      *DockerHubHandler
 	ResourceHandler       *ResourceHandler
+	StatusHandler         *StatusHandler
 	SettingsHandler       *SettingsHandler
 	TemplatesHandler      *TemplatesHandler
 	DockerHandler         *DockerHandler
@@ -49,10 +52,16 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		http.StripPrefix("/api", h.TeamMembershipHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/endpoints") {
 		http.StripPrefix("/api", h.EndpointHandler).ServeHTTP(w, r)
+	} else if strings.HasPrefix(r.URL.Path, "/api/registries") {
+		http.StripPrefix("/api", h.RegistryHandler).ServeHTTP(w, r)
+	} else if strings.HasPrefix(r.URL.Path, "/api/dockerhub") {
+		http.StripPrefix("/api", h.DockerHubHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/resource_controls") {
 		http.StripPrefix("/api", h.ResourceHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/settings") {
 		http.StripPrefix("/api", h.SettingsHandler).ServeHTTP(w, r)
+	} else if strings.HasPrefix(r.URL.Path, "/api/status") {
+		http.StripPrefix("/api", h.StatusHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/templates") {
 		http.StripPrefix("/api", h.TemplatesHandler).ServeHTTP(w, r)
 	} else if strings.HasPrefix(r.URL.Path, "/api/upload") {

api/http/handler/registry.go

@@ -0,0 +1,312 @@
+package handler
+
+import (
+	"github.com/portainer/portainer"
+	httperror "github.com/portainer/portainer/http/error"
+	"github.com/portainer/portainer/http/security"
+
+	"encoding/json"
+	"log"
+	"net/http"
+	"os"
+	"strconv"
+
+	"github.com/asaskevich/govalidator"
+	"github.com/gorilla/mux"
+)
+
+// RegistryHandler represents an HTTP API handler for managing Docker registries.
+type RegistryHandler struct {
+	*mux.Router
+	Logger          *log.Logger
+	RegistryService portainer.RegistryService
+}
+
+// NewRegistryHandler returns a new instance of RegistryHandler.
+func NewRegistryHandler(bouncer *security.RequestBouncer) *RegistryHandler {
+	h := &RegistryHandler{
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
+	}
+	h.Handle("/registries",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePostRegistries))).Methods(http.MethodPost)
+	h.Handle("/registries",
+		bouncer.RestrictedAccess(http.HandlerFunc(h.handleGetRegistries))).Methods(http.MethodGet)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handleGetRegistry))).Methods(http.MethodGet)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutRegistry))).Methods(http.MethodPut)
+	h.Handle("/registries/{id}/access",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutRegistryAccess))).Methods(http.MethodPut)
+	h.Handle("/registries/{id}",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handleDeleteRegistry))).Methods(http.MethodDelete)
+
+	return h
+}
+
+// handleGetRegistries handles GET requests on /registries
+func (handler *RegistryHandler) handleGetRegistries(w http.ResponseWriter, r *http.Request) {
+	securityContext, err := security.RetrieveRestrictedRequestContext(r)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	filteredRegistries, err := security.FilterRegistries(registries, securityContext)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, filteredRegistries, handler.Logger)
+}
+
+// handlePostRegistries handles POST requests on /registries
+func (handler *RegistryHandler) handlePostRegistries(w http.ResponseWriter, r *http.Request) {
+	var req postRegistriesRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err := govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+	for _, r := range registries {
+		if r.URL == req.URL {
+			httperror.WriteErrorResponse(w, portainer.ErrRegistryAlreadyExists, http.StatusConflict, handler.Logger)
+			return
+		}
+	}
+
+	registry := &portainer.Registry{
+		Name:            req.Name,
+		URL:             req.URL,
+		Authentication:  req.Authentication,
+		Username:        req.Username,
+		Password:        req.Password,
+		AuthorizedUsers: []portainer.UserID{},
+		AuthorizedTeams: []portainer.TeamID{},
+	}
+
+	err = handler.RegistryService.CreateRegistry(registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, &postRegistriesResponse{ID: int(registry.ID)}, handler.Logger)
+}
+
+type postRegistriesRequest struct {
+	Name           string `valid:"required"`
+	URL            string `valid:"required"`
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}
+
+type postRegistriesResponse struct {
+	ID int `json:"Id"`
+}
+
+// handleGetRegistry handles GET requests on /registries/:id
+func (handler *RegistryHandler) handleGetRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	encodeJSON(w, registry, handler.Logger)
+}
+
+// handlePutRegistryAccess handles PUT requests on /registries/:id/access
+func (handler *RegistryHandler) handlePutRegistryAccess(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	var req putRegistryAccessRequest
+	if err = json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	if req.AuthorizedUsers != nil {
+		authorizedUserIDs := []portainer.UserID{}
+		for _, value := range req.AuthorizedUsers {
+			authorizedUserIDs = append(authorizedUserIDs, portainer.UserID(value))
+		}
+		registry.AuthorizedUsers = authorizedUserIDs
+	}
+
+	if req.AuthorizedTeams != nil {
+		authorizedTeamIDs := []portainer.TeamID{}
+		for _, value := range req.AuthorizedTeams {
+			authorizedTeamIDs = append(authorizedTeamIDs, portainer.TeamID(value))
+		}
+		registry.AuthorizedTeams = authorizedTeamIDs
+	}
+
+	err = handler.RegistryService.UpdateRegistry(registry.ID, registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}
+
+type putRegistryAccessRequest struct {
+	AuthorizedUsers []int `valid:"-"`
+	AuthorizedTeams []int `valid:"-"`
+}
+
+// handlePutRegistry handles PUT requests on /registries/:id
+func (handler *RegistryHandler) handlePutRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	var req putRegistriesRequest
+	if err = json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	registry, err := handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	registries, err := handler.RegistryService.Registries()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+	for _, r := range registries {
+		if r.URL == req.URL && r.ID != registry.ID {
+			httperror.WriteErrorResponse(w, portainer.ErrRegistryAlreadyExists, http.StatusConflict, handler.Logger)
+			return
+		}
+	}
+
+	if req.Name != "" {
+		registry.Name = req.Name
+	}
+
+	if req.URL != "" {
+		registry.URL = req.URL
+	}
+
+	if req.Authentication {
+		registry.Authentication = true
+		registry.Username = req.Username
+		registry.Password = req.Password
+	} else {
+		registry.Authentication = false
+		registry.Username = ""
+		registry.Password = ""
+	}
+
+	err = handler.RegistryService.UpdateRegistry(registry.ID, registry)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}
+
+type putRegistriesRequest struct {
+	Name           string `valid:"required"`
+	URL            string `valid:"required"`
+	Authentication bool   `valid:""`
+	Username       string `valid:""`
+	Password       string `valid:""`
+}
+
+// handleDeleteRegistry handles DELETE requests on /registries/:id
+func (handler *RegistryHandler) handleDeleteRegistry(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	registryID, err := strconv.Atoi(id)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err = handler.RegistryService.Registry(portainer.RegistryID(registryID))
+	if err == portainer.ErrRegistryNotFound {
+		httperror.WriteErrorResponse(w, err, http.StatusNotFound, handler.Logger)
+		return
+	} else if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+
+	err = handler.RegistryService.DeleteRegistry(portainer.RegistryID(registryID))
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+		return
+	}
+}

api/http/handler/settings.go

@@ -1,6 +1,9 @@
 package handler
 
 import (
+	"encoding/json"
+
+	"github.com/asaskevich/govalidator"
 	"github.com/portainer/portainer"
 	httperror "github.com/portainer/portainer/http/error"
 	"github.com/portainer/portainer/http/security"
@@ -12,32 +15,69 @@ import (
 	"github.com/gorilla/mux"
 )
 
-// SettingsHandler represents an HTTP API handler for managing settings.
+// SettingsHandler represents an HTTP API handler for managing Settings.
 type SettingsHandler struct {
 	*mux.Router
-	Logger   *log.Logger
-	settings *portainer.Settings
+	Logger          *log.Logger
+	SettingsService portainer.SettingsService
 }
 
-// NewSettingsHandler returns a new instance of SettingsHandler.
-func NewSettingsHandler(bouncer *security.RequestBouncer, settings *portainer.Settings) *SettingsHandler {
+// NewSettingsHandler returns a new instance of OldSettingsHandler.
+func NewSettingsHandler(bouncer *security.RequestBouncer) *SettingsHandler {
 	h := &SettingsHandler{
-		Router:   mux.NewRouter(),
-		Logger:   log.New(os.Stderr, "", log.LstdFlags),
-		settings: settings,
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
 	}
 	h.Handle("/settings",
-		bouncer.PublicAccess(http.HandlerFunc(h.handleGetSettings)))
+		bouncer.PublicAccess(http.HandlerFunc(h.handleGetSettings))).Methods(http.MethodGet)
+	h.Handle("/settings",
+		bouncer.AdministratorAccess(http.HandlerFunc(h.handlePutSettings))).Methods(http.MethodPut)
 
 	return h
 }
 
 // handleGetSettings handles GET requests on /settings
 func (handler *SettingsHandler) handleGetSettings(w http.ResponseWriter, r *http.Request) {
-	if r.Method != http.MethodGet {
-		httperror.WriteMethodNotAllowedResponse(w, []string{http.MethodGet})
+	settings, err := handler.SettingsService.Settings()
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
 		return
 	}
 
-	encodeJSON(w, handler.settings, handler.Logger)
+	encodeJSON(w, settings, handler.Logger)
+	return
+}
+
+// handlePutSettings handles PUT requests on /settings
+func (handler *SettingsHandler) handlePutSettings(w http.ResponseWriter, r *http.Request) {
+	var req putSettingsRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidJSON, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	_, err := govalidator.ValidateStruct(req)
+	if err != nil {
+		httperror.WriteErrorResponse(w, ErrInvalidRequestFormat, http.StatusBadRequest, handler.Logger)
+		return
+	}
+
+	settings := &portainer.Settings{
+		TemplatesURL:                req.TemplatesURL,
+		LogoURL:                     req.LogoURL,
+		BlackListedLabels:           req.BlackListedLabels,
+		DisplayExternalContributors: req.DisplayExternalContributors,
+	}
+
+	err = handler.SettingsService.StoreSettings(settings)
+	if err != nil {
+		httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+	}
+}
+
+type putSettingsRequest struct {
+	TemplatesURL                string           `valid:"required"`
+	LogoURL                     string           `valid:""`
+	BlackListedLabels           []portainer.Pair `valid:""`
+	DisplayExternalContributors bool             `valid:""`
 }

api/http/handler/status.go

@@ -0,0 +1,38 @@
+package handler
+
+import (
+	"github.com/portainer/portainer"
+	"github.com/portainer/portainer/http/security"
+
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/gorilla/mux"
+)
+
+// StatusHandler represents an HTTP API handler for managing Status.
+type StatusHandler struct {
+	*mux.Router
+	Logger *log.Logger
+	Status *portainer.Status
+}
+
+// NewStatusHandler returns a new instance of StatusHandler.
+func NewStatusHandler(bouncer *security.RequestBouncer, status *portainer.Status) *StatusHandler {
+	h := &StatusHandler{
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
+		Status: status,
+	}
+	h.Handle("/status",
+		bouncer.PublicAccess(http.HandlerFunc(h.handleGetStatus))).Methods(http.MethodGet)
+
+	return h
+}
+
+// handleGetStatus handles GET requests on /status
+func (handler *StatusHandler) handleGetStatus(w http.ResponseWriter, r *http.Request) {
+	encodeJSON(w, handler.Status, handler.Logger)
+	return
+}

api/http/handler/templates.go

@@ -7,6 +7,7 @@ import (
 	"os"
 
 	"github.com/gorilla/mux"
+	"github.com/portainer/portainer"
 	httperror "github.com/portainer/portainer/http/error"
 	"github.com/portainer/portainer/http/security"
 )
@@ -14,8 +15,8 @@ import (
 // TemplatesHandler represents an HTTP API handler for managing templates.
 type TemplatesHandler struct {
 	*mux.Router
-	Logger                *log.Logger
-	containerTemplatesURL string
+	Logger          *log.Logger
+	SettingsService portainer.SettingsService
 }
 
 const (
@@ -23,11 +24,10 @@ const (
 )
 
 // NewTemplatesHandler returns a new instance of TemplatesHandler.
-func NewTemplatesHandler(bouncer *security.RequestBouncer, containerTemplatesURL string) *TemplatesHandler {
+func NewTemplatesHandler(bouncer *security.RequestBouncer) *TemplatesHandler {
 	h := &TemplatesHandler{
-		Router:                mux.NewRouter(),
-		Logger:                log.New(os.Stderr, "", log.LstdFlags),
-		containerTemplatesURL: containerTemplatesURL,
+		Router: mux.NewRouter(),
+		Logger: log.New(os.Stderr, "", log.LstdFlags),
 	}
 	h.Handle("/templates",
 		bouncer.AuthenticatedAccess(http.HandlerFunc(h.handleGetTemplates)))
@@ -49,7 +49,12 @@ func (handler *TemplatesHandler) handleGetTemplates(w http.ResponseWriter, r *ht
 
 	var templatesURL string
 	if key == "containers" {
-		templatesURL = handler.containerTemplatesURL
+		settings, err := handler.SettingsService.Settings()
+		if err != nil {
+			httperror.WriteErrorResponse(w, err, http.StatusInternalServerError, handler.Logger)
+			return
+		}
+		templatesURL = settings.TemplatesURL
 	} else if key == "linuxserver.io" {
 		templatesURL = containerTemplatesURLLinuxServerIo
 	} else {

api/http/proxy/containers.go

@@ -15,7 +15,7 @@ const (
 
 // containerListOperation extracts the response as a JSON object, loop through the containers array
 // decorate and/or filter the containers based on resource controls before rewriting the response
-func containerListOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func containerListOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	var err error
 	// ContainerList response is a JSON array
 	// https://docs.docker.com/engine/api/v1.28/#operation/ContainerList
@@ -24,22 +24,30 @@ func containerListOperation(request *http.Request, response *http.Response, oper
 		return err
 	}
 
-	if operationContext.isAdmin {
-		responseArray, err = decorateContainerList(responseArray, operationContext.resourceControls)
+	if executor.operationContext.isAdmin {
+		responseArray, err = decorateContainerList(responseArray, executor.operationContext.resourceControls)
 	} else {
-		responseArray, err = filterContainerList(responseArray, operationContext.resourceControls, operationContext.userID, operationContext.userTeamIDs)
+		responseArray, err = filterContainerList(responseArray, executor.operationContext.resourceControls,
+			executor.operationContext.userID, executor.operationContext.userTeamIDs)
 	}
 	if err != nil {
 		return err
 	}
 
+	if executor.labelBlackList != nil {
+		responseArray, err = filterContainersWithBlackListedLabels(responseArray, executor.labelBlackList)
+		if err != nil {
+			return err
+		}
+	}
+
 	return rewriteResponse(response, responseArray, http.StatusOK)
 }
 
 // containerInspectOperation extracts the response as a JSON object, verify that the user
 // has access to the container based on resource control (check are done based on the containerID and optional Swarm service ID)
 // and either rewrite an access denied response or a decorated container.
-func containerInspectOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func containerInspectOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	// ContainerInspect response is a JSON object
 	// https://docs.docker.com/engine/api/v1.28/#operation/ContainerInspect
 	responseObject, err := getResponseAsJSONOBject(response)
@@ -52,9 +60,10 @@ func containerInspectOperation(request *http.Request, response *http.Response, o
 	}
 	containerID := responseObject[containerIdentifier].(string)
 
-	resourceControl := getResourceControlByResourceID(containerID, operationContext.resourceControls)
+	resourceControl := getResourceControlByResourceID(containerID, executor.operationContext.resourceControls)
 	if resourceControl != nil {
-		if operationContext.isAdmin || canUserAccessResource(operationContext.userID, operationContext.userTeamIDs, resourceControl) {
+		if executor.operationContext.isAdmin || canUserAccessResource(executor.operationContext.userID,
+			executor.operationContext.userTeamIDs, resourceControl) {
 			responseObject = decorateObject(responseObject, resourceControl)
 		} else {
 			return rewriteAccessDeniedResponse(response)
@@ -64,9 +73,10 @@ func containerInspectOperation(request *http.Request, response *http.Response, o
 	containerLabels := extractContainerLabelsFromContainerInspectObject(responseObject)
 	if containerLabels != nil && containerLabels[containerLabelForServiceIdentifier] != nil {
 		serviceID := containerLabels[containerLabelForServiceIdentifier].(string)
-		resourceControl := getResourceControlByResourceID(serviceID, operationContext.resourceControls)
+		resourceControl := getResourceControlByResourceID(serviceID, executor.operationContext.resourceControls)
 		if resourceControl != nil {
-			if operationContext.isAdmin || canUserAccessResource(operationContext.userID, operationContext.userTeamIDs, resourceControl) {
+			if executor.operationContext.isAdmin || canUserAccessResource(executor.operationContext.userID,
+				executor.operationContext.userTeamIDs, resourceControl) {
 				responseObject = decorateObject(responseObject, resourceControl)
 			} else {
 				return rewriteAccessDeniedResponse(response)

api/http/proxy/factory.go

@@ -13,6 +13,7 @@ import (
 type proxyFactory struct {
 	ResourceControlService portainer.ResourceControlService
 	TeamMembershipService  portainer.TeamMembershipService
+	SettingsService        portainer.SettingsService
 }
 
 func (factory *proxyFactory) newHTTPProxy(u *url.URL) http.Handler {
@@ -37,6 +38,7 @@ func (factory *proxyFactory) newSocketProxy(path string) http.Handler {
 	transport := &proxyTransport{
 		ResourceControlService: factory.ResourceControlService,
 		TeamMembershipService:  factory.TeamMembershipService,
+		SettingsService:        factory.SettingsService,
 		dockerTransport:        newSocketTransport(path),
 	}
 	proxy.Transport = transport
@@ -48,6 +50,7 @@ func (factory *proxyFactory) createReverseProxy(u *url.URL) *httputil.ReversePro
 	transport := &proxyTransport{
 		ResourceControlService: factory.ResourceControlService,
 		TeamMembershipService:  factory.TeamMembershipService,
+		SettingsService:        factory.SettingsService,
 		dockerTransport:        newHTTPTransport(),
 	}
 	proxy.Transport = transport

api/http/proxy/filter.go

@@ -65,6 +65,27 @@ func filterContainerList(containerData []interface{}, resourceControls []portain
 	return filteredContainerData, nil
 }
 
+// filterContainersWithLabels loops through a list of containers, and filters containers that do not contains
+// any labels in the labels black list.
+func filterContainersWithBlackListedLabels(containerData []interface{}, labelBlackList []portainer.Pair) ([]interface{}, error) {
+	filteredContainerData := make([]interface{}, 0)
+
+	for _, container := range containerData {
+		containerObject := container.(map[string]interface{})
+
+		containerLabels := extractContainerLabelsFromContainerListObject(containerObject)
+		if containerLabels != nil {
+			if !containerHasBlackListedLabel(containerLabels, labelBlackList) {
+				filteredContainerData = append(filteredContainerData, containerObject)
+			}
+		} else {
+			filteredContainerData = append(filteredContainerData, containerObject)
+		}
+	}
+
+	return filteredContainerData, nil
+}
+
 // filterServiceList loops through all services, filters services without any resource control (public resources) or with
 // any resource control giving access to the user (these services will be decorated).
 // Service object schema reference: https://docs.docker.com/engine/api/v1.28/#operation/ServiceList

api/http/proxy/manager.go

@@ -15,12 +15,13 @@ type Manager struct {
 }
 
 // NewManager initializes a new proxy Service
-func NewManager(resourceControlService portainer.ResourceControlService, teamMembershipService portainer.TeamMembershipService) *Manager {
+func NewManager(resourceControlService portainer.ResourceControlService, teamMembershipService portainer.TeamMembershipService, settingsService portainer.SettingsService) *Manager {
 	return &Manager{
 		proxies: cmap.New(),
 		proxyFactory: &proxyFactory{
 			ResourceControlService: resourceControlService,
 			TeamMembershipService:  teamMembershipService,
+			SettingsService:        settingsService,
 		},
 	}
 }

api/http/proxy/service.go

@@ -14,7 +14,7 @@ const (
 
 // serviceListOperation extracts the response as a JSON array, loop through the service array
 // decorate and/or filter the services based on resource controls before rewriting the response
-func serviceListOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func serviceListOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	var err error
 	// ServiceList response is a JSON array
 	// https://docs.docker.com/engine/api/v1.28/#operation/ServiceList
@@ -23,10 +23,10 @@ func serviceListOperation(request *http.Request, response *http.Response, operat
 		return err
 	}
 
-	if operationContext.isAdmin {
-		responseArray, err = decorateServiceList(responseArray, operationContext.resourceControls)
+	if executor.operationContext.isAdmin {
+		responseArray, err = decorateServiceList(responseArray, executor.operationContext.resourceControls)
 	} else {
-		responseArray, err = filterServiceList(responseArray, operationContext.resourceControls, operationContext.userID, operationContext.userTeamIDs)
+		responseArray, err = filterServiceList(responseArray, executor.operationContext.resourceControls, executor.operationContext.userID, executor.operationContext.userTeamIDs)
 	}
 	if err != nil {
 		return err
@@ -38,7 +38,7 @@ func serviceListOperation(request *http.Request, response *http.Response, operat
 // serviceInspectOperation extracts the response as a JSON object, verify that the user
 // has access to the service based on resource control and either rewrite an access denied response
 // or a decorated service.
-func serviceInspectOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func serviceInspectOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	// ServiceInspect response is a JSON object
 	// https://docs.docker.com/engine/api/v1.28/#operation/ServiceInspect
 	responseObject, err := getResponseAsJSONOBject(response)
@@ -51,9 +51,9 @@ func serviceInspectOperation(request *http.Request, response *http.Response, ope
 	}
 	serviceID := responseObject[serviceIdentifier].(string)
 
-	resourceControl := getResourceControlByResourceID(serviceID, operationContext.resourceControls)
+	resourceControl := getResourceControlByResourceID(serviceID, executor.operationContext.resourceControls)
 	if resourceControl != nil {
-		if operationContext.isAdmin || canUserAccessResource(operationContext.userID, operationContext.userTeamIDs, resourceControl) {
+		if executor.operationContext.isAdmin || canUserAccessResource(executor.operationContext.userID, executor.operationContext.userTeamIDs, resourceControl) {
 			responseObject = decorateObject(responseObject, resourceControl)
 		} else {
 			return rewriteAccessDeniedResponse(response)

api/http/proxy/transport.go

@@ -15,6 +15,7 @@ type (
 		dockerTransport        *http.Transport
 		ResourceControlService portainer.ResourceControlService
 		TeamMembershipService  portainer.TeamMembershipService
+		SettingsService        portainer.SettingsService
 	}
 	restrictedOperationContext struct {
 		isAdmin          bool
@@ -22,7 +23,11 @@ type (
 		userTeamIDs      []portainer.TeamID
 		resourceControls []portainer.ResourceControl
 	}
-	restrictedOperationRequest func(*http.Request, *http.Response, *restrictedOperationContext) error
+	operationExecutor struct {
+		operationContext *restrictedOperationContext
+		labelBlackList   []portainer.Pair
+	}
+	restrictedOperationRequest func(*http.Request, *http.Response, *operationExecutor) error
 )
 
 func newSocketTransport(socketPath string) *http.Transport {
@@ -60,7 +65,6 @@ func (p *proxyTransport) proxyDockerRequest(request *http.Request) (*http.Respon
 }
 
 func (p *proxyTransport) proxyContainerRequest(request *http.Request) (*http.Response, error) {
-	// return p.executeDockerRequest(request)
 	switch requestPath := request.URL.Path; requestPath {
 	case "/containers/create":
 		return p.executeDockerRequest(request)
@@ -69,7 +73,7 @@ func (p *proxyTransport) proxyContainerRequest(request *http.Request) (*http.Res
 		return p.administratorOperation(request)
 
 	case "/containers/json":
-		return p.rewriteOperation(request, containerListOperation)
+		return p.rewriteOperationWithLabelFiltering(request, containerListOperation)
 
 	default:
 		// This section assumes /containers/**
@@ -96,9 +100,6 @@ func (p *proxyTransport) proxyServiceRequest(request *http.Request) (*http.Respo
 	case "/services/create":
 		return p.executeDockerRequest(request)
 
-	case "/volumes/prune":
-		return p.administratorOperation(request)
-
 	case "/services":
 		return p.rewriteOperation(request, serviceListOperation)
 
@@ -177,9 +178,69 @@ func (p *proxyTransport) restrictedOperation(request *http.Request, resourceID s
 	return p.executeDockerRequest(request)
 }
 
+// rewriteOperation will create a new operation context with data that will be used
+// to decorate the original request's response as well as retrieve all the black listed labels
+// to filter the resources.
+func (p *proxyTransport) rewriteOperationWithLabelFiltering(request *http.Request, operation restrictedOperationRequest) (*http.Response, error) {
+	operationContext, err := p.createOperationContext(request)
+	if err != nil {
+		return nil, err
+	}
+
+	settings, err := p.SettingsService.Settings()
+	if err != nil {
+		return nil, err
+	}
+
+	executor := &operationExecutor{
+		operationContext: operationContext,
+		labelBlackList:   settings.BlackListedLabels,
+	}
+
+	return p.executeRequestAndRewriteResponse(request, operation, executor)
+}
+
 // rewriteOperation will create a new operation context with data that will be used
 // to decorate the original request's response.
 func (p *proxyTransport) rewriteOperation(request *http.Request, operation restrictedOperationRequest) (*http.Response, error) {
+	operationContext, err := p.createOperationContext(request)
+	if err != nil {
+		return nil, err
+	}
+
+	executor := &operationExecutor{
+		operationContext: operationContext,
+	}
+
+	return p.executeRequestAndRewriteResponse(request, operation, executor)
+}
+
+func (p *proxyTransport) executeRequestAndRewriteResponse(request *http.Request, operation restrictedOperationRequest, executor *operationExecutor) (*http.Response, error) {
+	response, err := p.executeDockerRequest(request)
+	if err != nil {
+		return response, err
+	}
+
+	err = operation(request, response, executor)
+	return response, err
+}
+
+// administratorOperation ensures that the user has administrator privileges
+// before executing the original request.
+func (p *proxyTransport) administratorOperation(request *http.Request) (*http.Response, error) {
+	tokenData, err := security.RetrieveTokenData(request)
+	if err != nil {
+		return nil, err
+	}
+
+	if tokenData.Role != portainer.AdministratorRole {
+		return writeAccessDeniedResponse()
+	}
+
+	return p.executeDockerRequest(request)
+}
+
+func (p *proxyTransport) createOperationContext(request *http.Request) (*restrictedOperationContext, error) {
 	var err error
 	tokenData, err := security.RetrieveTokenData(request)
 	if err != nil {
@@ -212,26 +273,5 @@ func (p *proxyTransport) rewriteOperation(request *http.Request, operation restr
 		operationContext.userTeamIDs = userTeamIDs
 	}
 
-	response, err := p.executeDockerRequest(request)
-	if err != nil {
-		return response, err
-	}
-
-	err = operation(request, response, operationContext)
-	return response, err
-}
-
-// administratorOperation ensures that the user has administrator privileges
-// before executing the original request.
-func (p *proxyTransport) administratorOperation(request *http.Request) (*http.Response, error) {
-	tokenData, err := security.RetrieveTokenData(request)
-	if err != nil {
-		return nil, err
-	}
-
-	if tokenData.Role != portainer.AdministratorRole {
-		return writeAccessDeniedResponse()
-	}
-
-	return p.executeDockerRequest(request)
+	return operationContext, nil
 }

api/http/proxy/utils.go

@@ -15,3 +15,18 @@ func getResourceControlByResourceID(resourceID string, resourceControls []portai
 	}
 	return nil
 }
+
+func containerHasBlackListedLabel(containerLabels map[string]interface{}, labelBlackList []portainer.Pair) bool {
+	for key, value := range containerLabels {
+		labelName := key
+		labelValue := value.(string)
+
+		for _, blackListedLabel := range labelBlackList {
+			if blackListedLabel.Name == labelName && blackListedLabel.Value == labelValue {
+				return true
+			}
+		}
+	}
+
+	return false
+}

api/http/proxy/volumes.go

@@ -14,7 +14,7 @@ const (
 
 // volumeListOperation extracts the response as a JSON object, loop through the volume array
 // decorate and/or filter the volumes based on resource controls before rewriting the response
-func volumeListOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func volumeListOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	var err error
 	// VolumeList response is a JSON object
 	// https://docs.docker.com/engine/api/v1.28/#operation/VolumeList
@@ -28,10 +28,10 @@ func volumeListOperation(request *http.Request, response *http.Response, operati
 	if responseObject["Volumes"] != nil {
 		volumeData := responseObject["Volumes"].([]interface{})
 
-		if operationContext.isAdmin {
-			volumeData, err = decorateVolumeList(volumeData, operationContext.resourceControls)
+		if executor.operationContext.isAdmin {
+			volumeData, err = decorateVolumeList(volumeData, executor.operationContext.resourceControls)
 		} else {
-			volumeData, err = filterVolumeList(volumeData, operationContext.resourceControls, operationContext.userID, operationContext.userTeamIDs)
+			volumeData, err = filterVolumeList(volumeData, executor.operationContext.resourceControls, executor.operationContext.userID, executor.operationContext.userTeamIDs)
 		}
 		if err != nil {
 			return err
@@ -47,7 +47,7 @@ func volumeListOperation(request *http.Request, response *http.Response, operati
 // volumeInspectOperation extracts the response as a JSON object, verify that the user
 // has access to the volume based on resource control and either rewrite an access denied response
 // or a decorated volume.
-func volumeInspectOperation(request *http.Request, response *http.Response, operationContext *restrictedOperationContext) error {
+func volumeInspectOperation(request *http.Request, response *http.Response, executor *operationExecutor) error {
 	// VolumeInspect response is a JSON object
 	// https://docs.docker.com/engine/api/v1.28/#operation/VolumeInspect
 	responseObject, err := getResponseAsJSONOBject(response)
@@ -60,9 +60,9 @@ func volumeInspectOperation(request *http.Request, response *http.Response, oper
 	}
 	volumeID := responseObject[volumeIdentifier].(string)
 
-	resourceControl := getResourceControlByResourceID(volumeID, operationContext.resourceControls)
+	resourceControl := getResourceControlByResourceID(volumeID, executor.operationContext.resourceControls)
 	if resourceControl != nil {
-		if operationContext.isAdmin || canUserAccessResource(operationContext.userID, operationContext.userTeamIDs, resourceControl) {
+		if executor.operationContext.isAdmin || canUserAccessResource(executor.operationContext.userID, executor.operationContext.userTeamIDs, resourceControl) {
 			responseObject = decorateObject(responseObject, resourceControl)
 		} else {
 			return rewriteAccessDeniedResponse(response)

api/http/security/filter.go

@@ -60,6 +60,24 @@ func FilterUsers(users []portainer.User, context *RestrictedRequestContext) []po
 	return filteredUsers
 }
 
+// FilterRegistries filters registries based on user role and team memberships.
+// Non administrator users only have access to authorized endpoints.
+func FilterRegistries(registries []portainer.Registry, context *RestrictedRequestContext) ([]portainer.Registry, error) {
+
+	filteredRegistries := registries
+	if !context.IsAdmin {
+		filteredRegistries = make([]portainer.Registry, 0)
+
+		for _, registry := range registries {
+			if isRegistryAccessAuthorized(&registry, context.UserID, context.UserMemberships) {
+				filteredRegistries = append(filteredRegistries, registry)
+			}
+		}
+	}
+
+	return filteredRegistries, nil
+}
+
 // FilterEndpoints filters endpoints based on user role and team memberships.
 // Non administrator users only have access to authorized endpoints.
 func FilterEndpoints(endpoints []portainer.Endpoint, context *RestrictedRequestContext) ([]portainer.Endpoint, error) {
@@ -78,6 +96,22 @@ func FilterEndpoints(endpoints []portainer.Endpoint, context *RestrictedRequestC
 	return filteredEndpoints, nil
 }
 
+func isRegistryAccessAuthorized(registry *portainer.Registry, userID portainer.UserID, memberships []portainer.TeamMembership) bool {
+	for _, authorizedUserID := range registry.AuthorizedUsers {
+		if authorizedUserID == userID {
+			return true
+		}
+	}
+	for _, membership := range memberships {
+		for _, authorizedTeamID := range registry.AuthorizedTeams {
+			if membership.TeamID == authorizedTeamID {
+				return true
+			}
+		}
+	}
+	return false
+}
+
 func isEndpointAccessAuthorized(endpoint *portainer.Endpoint, userID portainer.UserID, memberships []portainer.TeamMembership) bool {
 	for _, authorizedUserID := range endpoint.AuthorizedUsers {
 		if authorizedUserID == userID {

api/http/server.go

@@ -15,16 +15,18 @@ type Server struct {
 	AssetsPath             string
 	AuthDisabled           bool
 	EndpointManagement     bool
+	Status                 *portainer.Status
 	UserService            portainer.UserService
 	TeamService            portainer.TeamService
 	TeamMembershipService  portainer.TeamMembershipService
 	EndpointService        portainer.EndpointService
 	ResourceControlService portainer.ResourceControlService
+	SettingsService        portainer.SettingsService
 	CryptoService          portainer.CryptoService
 	JWTService             portainer.JWTService
 	FileService            portainer.FileService
-	Settings               *portainer.Settings
-	TemplatesURL           string
+	RegistryService        portainer.RegistryService
+	DockerHubService       portainer.DockerHubService
 	Handler                *handler.Handler
 	SSL                    bool
 	SSLCert                string
@@ -34,7 +36,7 @@ type Server struct {
 // Start starts the HTTP server
 func (server *Server) Start() error {
 	requestBouncer := security.NewRequestBouncer(server.JWTService, server.TeamMembershipService, server.AuthDisabled)
-	proxyManager := proxy.NewManager(server.ResourceControlService, server.TeamMembershipService)
+	proxyManager := proxy.NewManager(server.ResourceControlService, server.TeamMembershipService, server.SettingsService)
 
 	var authHandler = handler.NewAuthHandler(requestBouncer, server.AuthDisabled)
 	authHandler.UserService = server.UserService
@@ -51,8 +53,11 @@ func (server *Server) Start() error {
 	teamHandler.TeamMembershipService = server.TeamMembershipService
 	var teamMembershipHandler = handler.NewTeamMembershipHandler(requestBouncer)
 	teamMembershipHandler.TeamMembershipService = server.TeamMembershipService
-	var settingsHandler = handler.NewSettingsHandler(requestBouncer, server.Settings)
-	var templatesHandler = handler.NewTemplatesHandler(requestBouncer, server.TemplatesURL)
+	var statusHandler = handler.NewStatusHandler(requestBouncer, server.Status)
+	var settingsHandler = handler.NewSettingsHandler(requestBouncer)
+	settingsHandler.SettingsService = server.SettingsService
+	var templatesHandler = handler.NewTemplatesHandler(requestBouncer)
+	templatesHandler.SettingsService = server.SettingsService
 	var dockerHandler = handler.NewDockerHandler(requestBouncer)
 	dockerHandler.EndpointService = server.EndpointService
 	dockerHandler.TeamMembershipService = server.TeamMembershipService
@@ -63,6 +68,10 @@ func (server *Server) Start() error {
 	endpointHandler.EndpointService = server.EndpointService
 	endpointHandler.FileService = server.FileService
 	endpointHandler.ProxyManager = proxyManager
+	var registryHandler = handler.NewRegistryHandler(requestBouncer)
+	registryHandler.RegistryService = server.RegistryService
+	var dockerHubHandler = handler.NewDockerHubHandler(requestBouncer)
+	dockerHubHandler.DockerHubService = server.DockerHubService
 	var resourceHandler = handler.NewResourceHandler(requestBouncer)
 	resourceHandler.ResourceControlService = server.ResourceControlService
 	var uploadHandler = handler.NewUploadHandler(requestBouncer)
@@ -75,8 +84,11 @@ func (server *Server) Start() error {
 		TeamHandler:           teamHandler,
 		TeamMembershipHandler: teamMembershipHandler,
 		EndpointHandler:       endpointHandler,
+		RegistryHandler:       registryHandler,
+		DockerHubHandler:      dockerHubHandler,
 		ResourceHandler:       resourceHandler,
 		SettingsHandler:       settingsHandler,
+		StatusHandler:         statusHandler,
 		TemplatesHandler:      templatesHandler,
 		DockerHandler:         dockerHandler,
 		WebSocketHandler:      websocketHandler,

api/portainer.go

@@ -17,9 +17,6 @@ type (
 		ExternalEndpoints *string
 		SyncInterval      *string
 		Endpoint          *string
-		Labels            *[]Pair
-		Logo              *string
-		Templates         *string
 		NoAuth            *bool
 		NoAnalytics       *bool
 		TLSVerify         *bool
@@ -30,15 +27,26 @@ type (
 		SSLCert           *string
 		SSLKey            *string
 		AdminPassword     *string
+		// Deprecated fields
+		Logo      *string
+		Templates *string
+		Labels    *[]Pair
 	}
 
-	// Settings represents Portainer settings.
+	// Status represents the application status.
+	Status struct {
+		Authentication     bool   `json:"Authentication"`
+		EndpointManagement bool   `json:"EndpointManagement"`
+		Analytics          bool   `json:"Analytics"`
+		Version            string `json:"Version"`
+	}
+
+	// Settings represents the application settings.
 	Settings struct {
-		HiddenLabels       []Pair `json:"hiddenLabels"`
-		Logo               string `json:"logo"`
-		Authentication     bool   `json:"authentication"`
-		Analytics          bool   `json:"analytics"`
-		EndpointManagement bool   `json:"endpointManagement"`
+		TemplatesURL                string `json:"TemplatesURL"`
+		LogoURL                     string `json:"LogoURL"`
+		BlackListedLabels           []Pair `json:"BlackListedLabels"`
+		DisplayExternalContributors bool   `json:"DisplayExternalContributors"`
 	}
 
 	// User represents a user account.
@@ -86,6 +94,30 @@ type (
 		Role     UserRole
 	}
 
+	// RegistryID represents a registry identifier.
+	RegistryID int
+
+	// Registry represents a Docker registry with all the info required
+	// to connect to it.
+	Registry struct {
+		ID              RegistryID `json:"Id"`
+		Name            string     `json:"Name"`
+		URL             string     `json:"URL"`
+		Authentication  bool       `json:"Authentication"`
+		Username        string     `json:"Username"`
+		Password        string     `json:"Password"`
+		AuthorizedUsers []UserID   `json:"AuthorizedUsers"`
+		AuthorizedTeams []TeamID   `json:"AuthorizedTeams"`
+	}
+
+	// DockerHub represents all the required information to connect and use the
+	// Docker Hub.
+	DockerHub struct {
+		Authentication bool   `json:"Authentication"`
+		Username       string `json:"Username"`
+		Password       string `json:"Password"`
+	}
+
 	// EndpointID represents an endpoint identifier.
 	EndpointID int
 
@@ -209,6 +241,27 @@ type (
 		Synchronize(toCreate, toUpdate, toDelete []*Endpoint) error
 	}
 
+	// RegistryService represents a service for managing registry data.
+	RegistryService interface {
+		Registry(ID RegistryID) (*Registry, error)
+		Registries() ([]Registry, error)
+		CreateRegistry(registry *Registry) error
+		UpdateRegistry(ID RegistryID, registry *Registry) error
+		DeleteRegistry(ID RegistryID) error
+	}
+
+	// DockerHubService represents a service for managing the DockerHub object.
+	DockerHubService interface {
+		DockerHub() (*DockerHub, error)
+		StoreDockerHub(registry *DockerHub) error
+	}
+
+	// SettingsService represents a service for managing application settings.
+	SettingsService interface {
+		Settings() (*Settings, error)
+		StoreSettings(settings *Settings) error
+	}
+
 	// VersionService represents a service for managing version data.
 	VersionService interface {
 		DBVersion() (int, error)
@@ -252,9 +305,11 @@ type (
 
 const (
 	// APIVersion is the version number of the Portainer API.
-	APIVersion = "1.13.1"
+	APIVersion = "1.13.3"
 	// DBVersion is the version number of the Portainer database.
 	DBVersion = 2
+	// DefaultTemplatesURL represents the default URL for the templates definitions.
+	DefaultTemplatesURL = "https://raw.githubusercontent.com/portainer/templates/master/templates.json"
 )
 
 const (

app/app.js

@@ -28,6 +28,8 @@ angular.module('portainer', [
   'containers',
   'createContainer',
   'createNetwork',
+  'createRegistry',
+  'createSecret',
   'createService',
   'createVolume',
   'docker',
@@ -42,6 +44,11 @@ angular.module('portainer', [
   'network',
   'networks',
   'node',
+  'registries',
+  'registry',
+  'registryAccess',
+  'secrets',
+  'secret',
   'service',
   'services',
   'settings',
@@ -54,6 +61,7 @@ angular.module('portainer', [
   'templates',
   'user',
   'users',
+  'userSettings',
   'volume',
   'volumes'])
   .config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 'localStorageServiceProvider', 'jwtOptionsProvider', 'AnalyticsProvider', '$uibTooltipProvider', '$compileProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, localStorageServiceProvider, jwtOptionsProvider, AnalyticsProvider, $uibTooltipProvider, $compileProvider) {
@@ -65,7 +73,6 @@ angular.module('portainer', [
     }
 
     localStorageServiceProvider
-    .setStorageType('sessionStorage')
     .setPrefix('portainer');
 
     jwtOptionsProvider.config({
@@ -249,6 +256,32 @@ angular.module('portainer', [
         }
       }
     })
+    .state('actions.create.registry', {
+      url: '/registry',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/createRegistry/createregistry.html',
+          controller: 'CreateRegistryController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('actions.create.secret', {
+      url: '/secret',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/createSecret/createsecret.html',
+          controller: 'CreateSecretController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('actions.create.service', {
       url: '/service',
       views: {
@@ -414,6 +447,71 @@ angular.module('portainer', [
         }
       }
     })
+    .state('registries', {
+      url: '/registries/',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registries/registries.html',
+          controller: 'RegistriesController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('registry', {
+      url: '^/registries/:id',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registry/registry.html',
+          controller: 'RegistryController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('registry.access', {
+      url: '^/registries/:id/access',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/registryAccess/registryAccess.html',
+          controller: 'RegistryAccessController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('secrets', {
+      url: '^/secrets/',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/secrets/secrets.html',
+          controller: 'SecretsController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
+    .state('secret', {
+      url: '^/secret/:id/',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/secret/secret.html',
+          controller: 'SecretController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('services', {
       url: '/services/',
       views: {
@@ -552,6 +650,19 @@ angular.module('portainer', [
         }
       }
     })
+    .state('userSettings', {
+      url: '/userSettings/',
+      views: {
+        'content@': {
+          templateUrl: 'app/components/userSettings/userSettings.html',
+          controller: 'UserSettingsController'
+        },
+        'sidebar@': {
+          templateUrl: 'app/components/sidebar/sidebar.html',
+          controller: 'SidebarController'
+        }
+      }
+    })
     .state('teams', {
       url: '/teams/',
       views: {
@@ -620,15 +731,19 @@ angular.module('portainer', [
   }])
   // This is your docker url that the api will use to make requests
   // You need to set this to the api endpoint without the port i.e. http://192.168.1.9
-  .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is required.  If you have a port, prefix it with a ':' i.e. :4243
+  // .constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is required.  If you have a port, prefix it with a ':' i.e. :4243
   .constant('DOCKER_ENDPOINT', 'api/docker')
-  .constant('CONFIG_ENDPOINT', 'api/settings')
+  .constant('CONFIG_ENDPOINT', 'api/old_settings')
+  .constant('SETTINGS_ENDPOINT', 'api/settings')
+  .constant('STATUS_ENDPOINT', 'api/status')
   .constant('AUTH_ENDPOINT', 'api/auth')
   .constant('USERS_ENDPOINT', 'api/users')
   .constant('TEAMS_ENDPOINT', 'api/teams')
   .constant('TEAM_MEMBERSHIPS_ENDPOINT', 'api/team_memberships')
   .constant('RESOURCE_CONTROL_ENDPOINT', 'api/resource_controls')
   .constant('ENDPOINTS_ENDPOINT', 'api/endpoints')
+  .constant('DOCKERHUB_ENDPOINT', 'api/dockerhub')
+  .constant('REGISTRIES_ENDPOINT', 'api/registries')
   .constant('TEMPLATES_ENDPOINT', 'api/templates')
-  .constant('PAGINATION_MAX_ITEMS', 10)
-  .constant('UI_VERSION', 'v1.13.1');
+  .constant('DEFAULT_TEMPLATES_URL', 'https://raw.githubusercontent.com/portainer/templates/master/templates.json')
+  .constant('PAGINATION_MAX_ITEMS', 10);

app/components/auth/authController.js

@@ -1,6 +1,6 @@
 angular.module('auth', [])
-.controller('AuthenticationController', ['$scope', '$state', '$stateParams', '$window', '$timeout', '$sanitize', 'Config', 'Authentication', 'Users', 'EndpointService', 'StateManager', 'EndpointProvider', 'Notifications',
-function ($scope, $state, $stateParams, $window, $timeout, $sanitize, Config, Authentication, Users, EndpointService, StateManager, EndpointProvider, Notifications) {
+.controller('AuthenticationController', ['$scope', '$state', '$stateParams', '$window', '$timeout', '$sanitize', 'Authentication', 'Users', 'EndpointService', 'StateManager', 'EndpointProvider', 'Notifications',
+function ($scope, $state, $stateParams, $window, $timeout, $sanitize, Authentication, Users, EndpointService, StateManager, EndpointProvider, Notifications) {
 
   $scope.authData = {
     username: 'admin',
@@ -13,6 +13,8 @@ function ($scope, $state, $stateParams, $window, $timeout, $sanitize, Config, Au
     error: false
   };
 
+  $scope.logo = StateManager.getState().application.logo;
+
   if (!$scope.applicationState.application.authentication) {
     EndpointService.endpoints()
     .then(function success(data) {
@@ -59,10 +61,6 @@ function ($scope, $state, $stateParams, $window, $timeout, $sanitize, Config, Au
     $state.go('dashboard');
   }
 
-  Config.$promise.then(function (c) {
-    $scope.logo = c.logo;
-  });
-
   $scope.createAdminUser = function() {
     var password = $sanitize($scope.initPasswordData.password);
     Users.initAdminUser({password: password}, function (d) {

app/components/common/accessControlForm/accessControlForm.html

@@ -17,11 +17,11 @@
   <!-- !access-control-switch -->
   <!-- restricted-access -->
   <div class="form-group" ng-if="formValues.enableAccessControl" style="margin-bottom: 0">
-    <div class="ownership_wrapper">
+    <div class="boxselector_wrapper">
       <div ng-if="isAdmin">
         <input type="radio" id="access_administrators" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="administrators">
         <label for="access_administrators">
-          <div class="ownership_header">
+          <div class="boxselector_header">
             <i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
             Administrators
           </div>
@@ -31,7 +31,7 @@
       <div ng-if="isAdmin">
         <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
         <label for="access_restricted">
-          <div class="ownership_header">
+          <div class="boxselector_header">
             <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
             Restricted
           </div>
@@ -43,7 +43,7 @@
       <div ng-if="!isAdmin">
         <input type="radio" id="access_private" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="private">
         <label for="access_private">
-          <div class="ownership_header">
+          <div class="boxselector_header">
             <i ng-class="'private' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
             Private
           </div>
@@ -55,7 +55,7 @@
       <div ng-if="!isAdmin && availableTeams.length > 0">
         <input type="radio" id="access_restricted" ng-model="formValues.Ownership" ng-click="synchronizeFormData()" value="restricted">
         <label for="access_restricted">
-          <div class="ownership_header">
+          <div class="boxselector_header">
             <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
             Restricted
           </div>

app/components/common/accessControlPanel/accessControlPanel.html

@@ -63,11 +63,11 @@
             <!-- edit-ownership-choices -->
             <tr ng-if="state.editOwnership">
               <td colspan="2">
-                <div class="ownership_wrapper">
+                <div class="boxselector_wrapper">
                   <div ng-if="isAdmin">
                     <input type="radio" id="access_administrators" ng-model="formValues.Ownership" value="administrators">
                     <label for="access_administrators">
-                      <div class="ownership_header">
+                      <div class="boxselector_header">
                         <i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                         Administrators
                       </div>
@@ -77,7 +77,7 @@
                   <div ng-if="isAdmin">
                     <input type="radio" id="access_restricted" ng-model="formValues.Ownership" value="restricted">
                     <label for="access_restricted">
-                      <div class="ownership_header">
+                      <div class="boxselector_header">
                         <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                         Restricted
                       </div>
@@ -89,7 +89,7 @@
                   <div ng-if="!isAdmin && state.canChangeOwnershipToTeam && availableTeams.length > 0">
                     <input type="radio" id="access_restricted" ng-model="formValues.Ownership" value="restricted">
                     <label for="access_restricted">
-                      <div class="ownership_header">
+                      <div class="boxselector_header">
                         <i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                         Restricted
                       </div>
@@ -104,7 +104,7 @@
                   <div>
                     <input type="radio" id="access_public" ng-model="formValues.Ownership" value="public">
                     <label for="access_public">
-                      <div class="ownership_header">
+                      <div class="boxselector_header">
                         <i ng-class="'public' | ownershipicon" aria-hidden="true" style="margin-right: 2px;"></i>
                         Public
                       </div>

app/components/container/container.html

@@ -134,21 +134,11 @@
             </div>
           </div>
           <!-- !tag-description -->
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="optional">
-            </div>
+            <por-image-registry image="config.Image" registry="config.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">

app/components/container/containerController.js

@@ -165,13 +165,14 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Con
   };
 
   $scope.renameContainer = function () {
-    Container.rename({id: $stateParams.id, 'name': $scope.container.newContainerName}, function (d) {
-      if (container.message) {
-        $scope.container.newContainerName = $scope.container.Name;
-        Notifications.error('Unable to rename container', {}, container.message);
+    var container = $scope.container;
+    Container.rename({id: $stateParams.id, 'name': container.newContainerName}, function (d) {
+      if (d.message) {
+        container.newContainerName = container.Name;
+        Notifications.error('Unable to rename container', {}, d.message);
       } else {
-        $scope.container.Name = $scope.container.newContainerName;
-        Notifications.success('Container successfully renamed', container.name);
+        container.Name = container.newContainerName;
+        Notifications.success('Container successfully renamed', container.Name);
       }
     }, function (e) {
       Notifications.error('Failure', e, 'Unable to rename container');

app/components/containerConsole/containerConsoleController.js

@@ -1,6 +1,6 @@
 angular.module('containerConsole', [])
-.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Image', 'Exec', '$timeout', 'EndpointProvider', 'Notifications',
-function ($scope, $stateParams, Settings, Container, Image, Exec, $timeout, EndpointProvider, Notifications) {
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Container', 'Image', 'Exec', '$timeout', 'EndpointProvider', 'Notifications',
+function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvider, Notifications) {
   $scope.state = {};
   $scope.state.loaded = false;
   $scope.state.connected = false;

app/components/containers/containersController.js

@@ -1,9 +1,9 @@
 angular.module('containers', [])
-  .controller('ContainersController', ['$q', '$scope', '$filter', 'Container', 'ContainerService', 'ContainerHelper', 'Info', 'Settings', 'Notifications', 'Config', 'Pagination', 'EntityListService', 'ModalService', 'ResourceControlService', 'EndpointProvider',
-  function ($q, $scope, $filter, Container, ContainerService, ContainerHelper, Info, Settings, Notifications, Config, Pagination, EntityListService, ModalService, ResourceControlService, EndpointProvider) {
+  .controller('ContainersController', ['$q', '$scope', '$filter', 'Container', 'ContainerService', 'ContainerHelper', 'SystemService', 'Notifications', 'Pagination', 'EntityListService', 'ModalService', 'ResourceControlService', 'EndpointProvider',
+  function ($q, $scope, $filter, Container, ContainerService, ContainerHelper, SystemService, Notifications, Pagination, EntityListService, ModalService, ResourceControlService, EndpointProvider) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('containers');
-  $scope.state.displayAll = Settings.displayAll;
+  $scope.state.displayAll = true;
   $scope.state.displayIP = false;
   $scope.sortType = 'State';
   $scope.sortReverse = false;
@@ -25,9 +25,6 @@ angular.module('containers', [])
     $scope.state.selectedItemCount = 0;
     Container.query(data, function (d) {
       var containers = d;
-      if ($scope.containersToHideLabels) {
-        containers = ContainerHelper.hideContainers(d, $scope.containersToHideLabels);
-      }
       $scope.containers = containers.map(function (container) {
         var model = new ContainerViewModel(container);
         model.Status = $filter('containerstatus')(model.Status);
@@ -59,7 +56,7 @@ angular.module('containers', [])
       counter = counter - 1;
       if (counter === 0) {
         $('#loadContainersSpinner').hide();
-        update({all: Settings.displayAll ? 1 : 0});
+        update({all: $scope.state.displayAll ? 1 : 0});
       }
     };
     angular.forEach(items, function (c) {
@@ -134,8 +131,7 @@ angular.module('containers', [])
   };
 
   $scope.toggleGetAll = function () {
-    Settings.displayAll = $scope.state.displayAll;
-    update({all: Settings.displayAll ? 1 : 0});
+    update({all: $scope.state.displayAll ? 1 : 0});
   };
 
   $scope.startAction = function () {
@@ -206,15 +202,19 @@ angular.module('containers', [])
     return swarm_hosts;
   }
 
-  Config.$promise.then(function (c) {
-    $scope.containersToHideLabels = c.hiddenLabels;
-    if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM') {
-      Info.get({}, function (d) {
+  function initView() {
+    var provider = $scope.applicationState.endpoint.mode.provider;
+    $q.when(provider !== 'DOCKER_SWARM' || SystemService.info())
+    .then(function success(data) {
+      if (provider === 'DOCKER_SWARM') {
         $scope.swarm_hosts = retrieveSwarmHostsInfo(d);
-        update({all: Settings.displayAll ? 1 : 0});
-      });
-    } else {
-      update({all: Settings.displayAll ? 1 : 0});
-    }
-  });
+      }
+      update({all: $scope.state.displayAll ? 1 : 0});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve cluster information');
+    });
+  }
+
+  initView();
 }]);

app/components/createContainer/createContainerController.js

@@ -1,8 +1,8 @@
 // @@OLD_SERVICE_CONTROLLER: this service should be rewritten to use services.
 // See app/components/templates/templatesController.js as a reference.
 angular.module('createContainer', [])
-.controller('CreateContainerController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'ImageHelper', 'Volume', 'Network', 'ResourceControlService', 'Authentication', 'Notifications', 'ContainerService', 'ImageService', 'ControllerDataPipeline', 'FormValidator',
-function ($q, $scope, $state, $stateParams, $filter, Config, Info, Container, ContainerHelper, Image, ImageHelper, Volume, Network, ResourceControlService, Authentication, Notifications, ContainerService, ImageService, ControllerDataPipeline, FormValidator) {
+.controller('CreateContainerController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'Container', 'ContainerHelper', 'Image', 'ImageHelper', 'Volume', 'Network', 'ResourceControlService', 'Authentication', 'Notifications', 'ContainerService', 'ImageService', 'ControllerDataPipeline', 'FormValidator',
+function ($q, $scope, $state, $stateParams, $filter, Container, ContainerHelper, Image, ImageHelper, Volume, Network, ResourceControlService, Authentication, Notifications, ContainerService, ImageService, ControllerDataPipeline, FormValidator) {
 
   $scope.formValues = {
     alwaysPull: true,
@@ -94,7 +94,7 @@ function ($q, $scope, $state, $stateParams, $filter, Config, Info, Container, Co
   function prepareImageConfig(config) {
     var image = config.Image;
     var registry = $scope.formValues.Registry;
-    var imageConfig = ImageHelper.createImageConfigForContainer(image, registry);
+    var imageConfig = ImageHelper.createImageConfigForContainer(image, registry.URL);
     config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
     $scope.imageConfig = imageConfig;
   }
@@ -233,47 +233,41 @@ function ($q, $scope, $state, $stateParams, $filter, Config, Info, Container, Co
   }
 
   function initView() {
-    Config.$promise.then(function (c) {
-      var containersToHideLabels = c.hiddenLabels;
-
-      Volume.query({}, function (d) {
-        $scope.availableVolumes = d.Volumes;
-      }, function (e) {
-        Notifications.error('Failure', e, 'Unable to retrieve volumes');
-      });
-
-      Network.query({}, function (d) {
-        var networks = d;
-        if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
-          networks = d.filter(function (network) {
-            if (network.Scope === 'global') {
-              return network;
-            }
-          });
-          $scope.globalNetworkCount = networks.length;
-          networks.push({Name: 'bridge'});
-          networks.push({Name: 'host'});
-          networks.push({Name: 'none'});
-        }
-        networks.push({Name: 'container'});
-        $scope.availableNetworks = networks;
-        if (!_.find(networks, {'Name': 'bridge'})) {
-          $scope.config.HostConfig.NetworkMode = 'nat';
-        }
-      }, function (e) {
-        Notifications.error('Failure', e, 'Unable to retrieve networks');
-      });
-
-      Container.query({}, function (d) {
-        var containers = d;
-        if (containersToHideLabels) {
-          containers = ContainerHelper.hideContainers(d, containersToHideLabels);
-        }
-        $scope.runningContainers = containers;
-      }, function(e) {
-        Notifications.error('Failure', e, 'Unable to retrieve running containers');
-      });
+    Volume.query({}, function (d) {
+      $scope.availableVolumes = d.Volumes;
+    }, function (e) {
+      Notifications.error('Failure', e, 'Unable to retrieve volumes');
     });
+
+    Network.query({}, function (d) {
+      var networks = d;
+      if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
+        networks = d.filter(function (network) {
+          if (network.Scope === 'global') {
+            return network;
+          }
+        });
+        $scope.globalNetworkCount = networks.length;
+        networks.push({Name: 'bridge'});
+        networks.push({Name: 'host'});
+        networks.push({Name: 'none'});
+      }
+      networks.push({Name: 'container'});
+      $scope.availableNetworks = networks;
+      if (!_.find(networks, {'Name': 'bridge'})) {
+        $scope.config.HostConfig.NetworkMode = 'nat';
+      }
+    }, function (e) {
+      Notifications.error('Failure', e, 'Unable to retrieve networks');
+    });
+
+    Container.query({}, function (d) {
+      var containers = d;
+      $scope.runningContainers = containers;
+    }, function(e) {
+      Notifications.error('Failure', e, 'Unable to retrieve running containers');
+    });
+
   }
 
   function validateForm(accessControlData, isAdmin) {
@@ -305,27 +299,26 @@ function ($q, $scope, $state, $stateParams, $filter, Config, Info, Container, Co
   };
 
   function createContainer(config, accessControlData) {
-    $q.when($scope.formValues.alwaysPull ? ImageService.pullImage($scope.config.Image, $scope.formValues.Registry) : null)
-    .then(function success() {
-      return ContainerService.createAndStartContainer(config);
-    })
-    .then(function success(data) {
-      var containerIdentifier = data.Id;
-      var userId = Authentication.getUserDetails().ID;
-      return ResourceControlService.applyResourceControl('container', containerIdentifier, userId, accessControlData, []);
-    })
-    .then(function success() {
-      Notifications.success('Container successfully created');
-      $state.go('containers', {}, {reload: true});
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to create container');
-    })
+    $q.when(!$scope.formValues.alwaysPull || ImageService.pullImage($scope.config.Image, $scope.formValues.Registry))
     .finally(function final() {
-      $('#createContainerSpinner').hide();
+      ContainerService.createAndStartContainer(config)
+      .then(function success(data) {
+        var containerIdentifier = data.Id;
+        var userId = Authentication.getUserDetails().ID;
+        return ResourceControlService.applyResourceControl('container', containerIdentifier, userId, accessControlData, []);
+      })
+      .then(function success() {
+        Notifications.success('Container successfully created');
+        $state.go('containers', {}, {reload: true});
+      })
+      .catch(function error(err) {
+        Notifications.error('Failure', err, 'Unable to create container');
+      })
+      .finally(function final() {
+        $('#createContainerSpinner').hide();
+      });
     });
   }
 
   initView();
-
 }]);

app/components/createContainer/createcontainer.html

@@ -21,21 +21,11 @@
           <div class="col-sm-12 form-section-title">
             Image configuration
           </div>
-          <!-- image-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="container_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="config.Image" id="container_image" placeholder="e.g. ubuntu:trusty">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="config.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !image-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- always-pull -->
           <div class="form-group">
             <div class="col-sm-12">

app/components/createRegistry/createRegistryController.js

@@ -0,0 +1,49 @@
+angular.module('createRegistry', [])
+.controller('CreateRegistryController', ['$scope', '$state', 'RegistryService', 'Notifications',
+function ($scope, $state, RegistryService, Notifications) {
+
+  $scope.state = {
+    RegistryType: 'quay'
+  };
+
+  $scope.formValues = {
+    Name: 'Quay',
+    URL: 'quay.io',
+    Authentication: true,
+    Username: '',
+    Password: ''
+  };
+
+  $scope.selectQuayRegistry = function() {
+    $scope.formValues.Name = 'Quay';
+    $scope.formValues.URL = 'quay.io';
+    $scope.formValues.Authentication = true;
+  };
+
+  $scope.selectCustomRegistry = function() {
+    $scope.formValues.Name = '';
+    $scope.formValues.URL = '';
+    $scope.formValues.Authentication = false;
+  };
+
+  $scope.addRegistry = function() {
+    $('#createRegistrySpinner').show();
+    var registryName = $scope.formValues.Name;
+    var registryURL = $scope.formValues.URL.replace(/^https?\:\/\//i, '');
+    var authentication = $scope.formValues.Authentication;
+    var username = $scope.formValues.Username;
+    var password = $scope.formValues.Password;
+
+    RegistryService.createRegistry(registryName, registryURL, authentication, username, password)
+    .then(function success(data) {
+      Notifications.success('Registry successfully created');
+      $state.go('registries');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to create registry');
+    })
+    .finally(function final() {
+      $('#createRegistrySpinner').hide();
+    });
+  };
+}]);

app/components/createRegistry/createregistry.html

@@ -0,0 +1,117 @@
+<rd-header>
+  <rd-header-title title="Create registry">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="display:none"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> > Add registry
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <div class="col-sm-12 form-section-title">
+            Registry provider
+          </div>
+          <div class="form-group"></div>
+          <div class="form-group" style="margin-bottom: 0">
+            <div class="boxselector_wrapper">
+              <div ng-click="selectQuayRegistry()">
+                <input type="radio" id="registry_quay" ng-model="state.RegistryType" value="quay">
+                <label for="registry_quay">
+                  <div class="boxselector_header">
+                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Quay.io
+                  </div>
+                  <p>Quay container registry</p>
+                </label>
+              </div>
+              <div ng-click="selectCustomRegistry()">
+                <input type="radio" id="registry_custom" ng-model="state.RegistryType" value="custom">
+                <label for="registry_custom">
+                  <div class="boxselector_header">
+                    <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px;"></i>
+                    Custom registry
+                  </div>
+                  <p>Define your own registry</p>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-12 form-section-title" ng-if="state.RegistryType === 'custom'">
+            Important notice
+          </div>
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <span class="col-sm-12 text-muted small">
+              Docker requires you to connect to a <a href="https://docs.docker.com/registry/deploying/#running-a-domain-registry" target="_blank">secure registry</a>.
+              You can find more information about how to connect to an insecure registry <a href="https://docs.docker.com/registry/insecure/" target="_blank">in the Docker documentation</a>.
+            </span>
+          </div>
+          <div class="col-sm-12 form-section-title">
+            Registry details
+          </div>
+          <!-- name-input -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <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" ng-model="formValues.Name" placeholder="e.g. my-registry">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- registry-url-input -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+              Registry URL
+              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry. Any protocol will be stripped."></portainer-tooltip>
+            </label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_url" ng-model="formValues.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld">
+            </div>
+          </div>
+          <!-- !registry-url-input -->
+          <!-- authentication-checkbox -->
+          <div class="form-group" ng-if="state.RegistryType === 'custom'">
+            <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 this registry."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="formValues.Authentication"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !authentication-checkbox -->
+          <!-- authentication-credentials -->
+          <div ng-if="formValues.Authentication || state.RegistryType === 'quay'">
+            <!-- credentials-user -->
+            <div class="form-group">
+              <label for="credentials_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="credentials_username" ng-model="formValues.Username">
+              </div>
+            </div>
+            <!-- !credentials-user -->
+            <!-- credentials-password -->
+            <div class="form-group">
+              <label for="credentials_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="credentials_password" ng-model="formValues.Password">
+              </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="!formValues.Name || !formValues.URL || (formValues.Authentication && (!formValues.Username || !formValues.Password))" ng-click="addRegistry()">Add registry</button>
+              <i id="createRegistrySpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/createSecret/createSecretController.js

@@ -0,0 +1,64 @@
+angular.module('createSecret', [])
+.controller('CreateSecretController', ['$scope', '$state', 'Notifications', 'SecretService',
+function ($scope, $state, Notifications, SecretService) {
+  $scope.formValues = {
+    Name: '',
+    Data: '',
+    Labels: [],
+    encodeSecret: true
+  };
+
+  $scope.addLabel = function() {
+    $scope.formValues.Labels.push({ name: '', value: ''});
+  };
+
+  $scope.removeLabel = function(index) {
+    $scope.formValues.Labels.splice(index, 1);
+  };
+
+  function prepareLabelsConfig(config) {
+    var labels = {};
+    $scope.formValues.Labels.forEach(function (label) {
+      if (label.name && label.value) {
+          labels[label.name] = label.value;
+      }
+    });
+    config.Labels = labels;
+  }
+
+  function prepareSecretData(config) {
+    if ($scope.formValues.encodeSecret) {
+      config.Data = btoa(unescape(encodeURIComponent($scope.formValues.Data)));
+    } else {
+      config.Data = $scope.formValues.Data;
+    }
+  }
+
+  function prepareConfiguration() {
+    var config = {};
+    config.Name = $scope.formValues.Name;
+    prepareSecretData(config);
+    prepareLabelsConfig(config);
+    return config;
+  }
+
+  function createSecret(config) {
+    $('#createSecretSpinner').show();
+    SecretService.create(config)
+    .then(function success(data) {
+      Notifications.success('Secret successfully created');
+      $state.go('secrets', {}, {reload: true});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to create secret');
+    })
+    .finally(function final() {
+      $('#createSecretSpinner').hide();
+    });
+  }
+
+  $scope.create = function () {
+    var config = prepareConfiguration();
+    createSecret(config);
+  };
+}]);

app/components/createSecret/createsecret.html

@@ -0,0 +1,85 @@
+<rd-header>
+  <rd-header-title title="Create secret"></rd-header-title>
+  <rd-header-content>
+    <a ui-sref="secrets">Secrets</a> > Add secret
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- name-input -->
+          <div class="form-group">
+            <label for="secret_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11">
+              <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- secret-data -->
+          <div class="form-group">
+            <label for="secret_data" class="col-sm-1 control-label text-left">Secret</label>
+            <div class="col-sm-11">
+              <textarea class="form-control" rows="5" ng-model="formValues.Data"></textarea>
+            </div>
+          </div>
+          <!-- !secret-data -->
+          <!-- encode-secret -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label for="encode_secret" class="control-label text-left">
+                Encode secret
+                <portainer-tooltip position="bottom" message="Secrets need to be base64 encoded. Disable this if your secret is already base64 encoded."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" name="encode_secret" ng-model="formValues.encodeSecret"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !encode-secret -->
+          <!-- labels -->
+          <div class="form-group">
+            <div class="col-sm-12" style="margin-top: 5px;">
+              <label class="control-label text-left">Labels</label>
+              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addLabel()">
+                <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
+              </span>
+            </div>
+            <!-- labels-input-list -->
+            <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+              <div ng-repeat="label in formValues.Labels" style="margin-top: 2px;">
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">name</span>
+                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
+                </div>
+                <div class="input-group col-sm-5 input-group-sm">
+                  <span class="input-group-addon">value</span>
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
+                </div>
+                <button class="btn btn-sm btn-danger" type="button" ng-click="removeLabel($index)">
+                  <i class="fa fa-trash" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+            <!-- !labels-input-list -->
+          </div>
+          <!-- !labels-->
+          <!-- actions -->
+          <div class="col-sm-12 form-section-title">
+            Actions
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name || !formValues.Data" ng-click="create()">Create secret</button>
+              <a type="button" class="btn btn-default btn-sm" ui-sref="secrets">Cancel</a>
+              <i id="createSecretSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/createService/createServiceController.js

@@ -1,13 +1,13 @@
 // @@OLD_SERVICE_CONTROLLER: this service should be rewritten to use services.
 // See app/components/templates/templatesController.js as a reference.
 angular.module('createService', [])
-.controller('CreateServiceController', ['$scope', '$state', 'Service', 'ServiceHelper', 'Volume', 'Network', 'ImageHelper', 'Authentication', 'ResourceControlService', 'Notifications', 'ControllerDataPipeline', 'FormValidator',
-function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper, Authentication, ResourceControlService, Notifications, ControllerDataPipeline, FormValidator) {
+.controller('CreateServiceController', ['$q', '$scope', '$state', 'Service', 'ServiceHelper', 'SecretHelper', 'SecretService', 'VolumeService', 'NetworkService', 'ImageHelper', 'Authentication', 'ResourceControlService', 'Notifications', 'ControllerDataPipeline', 'FormValidator', 'RegistryService', 'HttpRequestHelper',
+function ($q, $scope, $state, Service, ServiceHelper, SecretHelper, SecretService, VolumeService, NetworkService, ImageHelper, Authentication, ResourceControlService, Notifications, ControllerDataPipeline, FormValidator, RegistryService, HttpRequestHelper) {
 
   $scope.formValues = {
     Name: '',
     Image: '',
-    Registry: '',
+    Registry: {},
     Mode: 'replicated',
     Replicas: 1,
     Command: '',
@@ -24,7 +24,8 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
     Parallelism: 1,
     PlacementConstraints: [],
     UpdateDelay: 0,
-    FailureAction: 'pause'
+    FailureAction: 'pause',
+    Secrets: []
   };
 
   $scope.state = {
@@ -55,6 +56,14 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
     $scope.formValues.Volumes.splice(index, 1);
   };
 
+  $scope.addSecret = function() {
+    $scope.formValues.Secrets.push({});
+  };
+
+  $scope.removeSecret = function(index) {
+    $scope.formValues.Secrets.splice(index, 1);
+  };
+
   $scope.addEnvironmentVariable = function() {
     $scope.formValues.Env.push({ name: '', value: ''});
   };
@@ -62,18 +71,23 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
   $scope.removeEnvironmentVariable = function(index) {
     $scope.formValues.Env.splice(index, 1);
   };
+
   $scope.addPlacementConstraint = function() {
     $scope.formValues.PlacementConstraints.push({ key: '', operator: '==', value: '' });
   };
+
   $scope.removePlacementConstraint = function(index) {
     $scope.formValues.PlacementConstraints.splice(index, 1);
   };
+
   $scope.addPlacementPreference = function() {
     $scope.formValues.PlacementPreferences.push({ key: '', operator: '==', value: '' });
   };
+
   $scope.removePlacementPreference = function(index) {
     $scope.formValues.PlacementPreferences.splice(index, 1);
   };
+
   $scope.addLabel = function() {
     $scope.formValues.Labels.push({ name: '', value: ''});
   };
@@ -91,7 +105,7 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
   };
 
   function prepareImageConfig(config, input) {
-    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry);
+    var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry.URL);
     config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage + ':' + imageConfig.tag;
   }
 
@@ -203,6 +217,18 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
     config.TaskTemplate.Placement.Constraints = ServiceHelper.translateKeyValueToPlacementConstraints(input.PlacementConstraints);
   }
 
+  function prepareSecretConfig(config, input) {
+    if (input.Secrets) {
+      var secrets = [];
+      angular.forEach(input.Secrets, function(secret) {
+        if (secret.model) {
+          secrets.push(SecretHelper.secretConfig(secret.model));
+        }
+      });
+      config.TaskTemplate.ContainerSpec.Secrets = secrets;
+    }
+  }
+
   function prepareConfiguration() {
     var input = $scope.formValues;
     var config = {
@@ -225,11 +251,16 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
     prepareVolumes(config, input);
     prepareNetworks(config, input);
     prepareUpdateConfig(config, input);
+    prepareSecretConfig(config, input);
     preparePlacementConfig(config, input);
     return config;
   }
 
   function createNewService(config, accessControlData) {
+
+    var registry = $scope.formValues.Registry;
+    var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
+    HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);
     Service.create(config).$promise
     .then(function success(data) {
       var serviceIdentifier = data.ID;
@@ -277,20 +308,22 @@ function ($scope, $state, Service, ServiceHelper, Volume, Network, ImageHelper,
   };
 
   function initView() {
-    Volume.query({}, function (d) {
-      $scope.availableVolumes = d.Volumes;
-    }, function (e) {
-      Notifications.error('Failure', e, 'Unable to retrieve volumes');
-    });
-
-    Network.query({}, function (d) {
-      $scope.availableNetworks = d.filter(function (network) {
-        if (network.Scope === 'swarm') {
-          return network;
-        }
-      });
-    }, function (e) {
-      Notifications.error('Failure', e, 'Unable to retrieve networks');
+    $('#loadingViewSpinner').show();
+    $q.all({
+      volumes: VolumeService.volumes(),
+      networks: NetworkService.retrieveSwarmNetworks(),
+      secrets: SecretService.secrets()
+    })
+    .then(function success(data) {
+      $scope.availableVolumes = data.volumes;
+      $scope.availableNetworks = data.networks;
+      $scope.availableSecrets = data.secrets;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to initialize view');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
     });
   }
 

app/components/createService/createservice.html

@@ -1,5 +1,7 @@
 <rd-header>
-  <rd-header-title title="Create service"></rd-header-title>
+  <rd-header-title title="Create service">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
+  </rd-header-title>
   <rd-header-content>
     <a ui-sref="services">Services</a> > Add service
   </rd-header-content>
@@ -21,21 +23,11 @@
           <div class="col-sm-12 form-section-title">
             Image configuration
           </div>
-          <!-- image-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="service_image" class="col-sm-1 control-label text-left">Image</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="formValues.Image" id="service_image" placeholder="e.g. nginx:latest">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="formValues.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !image-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <div class="col-sm-12 form-section-title">
             Scheduling
           </div>
@@ -140,6 +132,7 @@
           <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
           <li class="interactive"><a data-target="#labels" data-toggle="tab">Labels</a></li>
           <li class="interactive"><a data-target="#update-config" data-toggle="tab">Update config</a></li>
+          <li class="interactive"><a data-target="#secrets" data-toggle="tab" ng-if="applicationState.endpoint.apiVersion >= 1.25">Secrets</a></li>
           <li class="interactive"><a data-target="#placement" data-toggle="tab">Placement</a></li>
         </ul>
         <!-- tab-content -->
@@ -422,7 +415,9 @@
             </form>
           </div>
           <!-- !tab-update-config -->
-
+          <!-- tab-secrets -->
+          <div class="tab-pane" id="secrets" ng-if="applicationState.endpoint.apiVersion >= 1.25" ng-include="'app/components/createService/includes/secret.html'"></div>
+          <!-- !tab-secrets -->
           <!-- tab-placement -->
           <div class="tab-pane" id="placement" ng-include="'app/components/createService/includes/placement.html'"></div>
           <!-- !tab-placement -->

app/components/createService/includes/placement.html

@@ -2,7 +2,7 @@
   <div class="form-group">
     <div class="col-sm-12" style="margin-top: 5px;">
       <label class="control-label text-left">Placement constraints</label>
-      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPlacementConstraint(service)">
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addPlacementConstraint()">
         <i class="fa fa-plus-circle" aria-hidden="true"></i> placement constraint
       </span>
     </div>

app/components/createService/includes/secret.html

@@ -0,0 +1,28 @@
+<form class="form-horizontal" style="margin-top: 15px;">
+  <div class="form-group">
+    <div class="col-sm-12 small text-muted">
+      Secrets will be available under <code>/run/secrets/$SECRET_NAME</code> in containers.
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-12" style="margin-top: 5px;">
+      <label class="control-label text-left">Secrets</label>
+      <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addSecret()">
+        <i class="fa fa-plus-circle" aria-hidden="true"></i> add a secret
+      </span>
+    </div>
+    <div class="col-sm-12 form-inline" style="margin-top: 10px;">
+      <div ng-repeat="secret in formValues.Secrets" style="margin-top: 2px;">
+        <div class="input-group col-sm-4 input-group-sm">
+          <span class="input-group-addon">secret</span>
+          <select class="form-control" ng-model="secret.model" ng-options="secret.Name for secret in availableSecrets">
+            <option value="" selected="selected">Select a secret</option>
+          </select>
+        </div>
+        <button class="btn btn-sm btn-danger" type="button" ng-click="removeSecret($index)">
+          <i class="fa fa-trash" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</form>

app/components/createVolume/createVolumeController.js

@@ -1,6 +1,6 @@
 angular.module('createVolume', [])
-.controller('CreateVolumeController', ['$scope', '$state', 'VolumeService', 'InfoService', 'ResourceControlService', 'Authentication', 'Notifications', 'ControllerDataPipeline', 'FormValidator',
-function ($scope, $state, VolumeService, InfoService, ResourceControlService, Authentication, Notifications, ControllerDataPipeline, FormValidator) {
+.controller('CreateVolumeController', ['$scope', '$state', 'VolumeService', 'SystemService', 'ResourceControlService', 'Authentication', 'Notifications', 'ControllerDataPipeline', 'FormValidator',
+function ($scope, $state, VolumeService, SystemService, ResourceControlService, Authentication, Notifications, ControllerDataPipeline, FormValidator) {
 
   $scope.formValues = {
     Driver: 'local',
@@ -69,7 +69,7 @@ function ($scope, $state, VolumeService, InfoService, ResourceControlService, Au
 
   function initView() {
     $('#loadingViewSpinner').show();
-    InfoService.getVolumePlugins()
+    SystemService.getVolumePlugins()
     .then(function success(data) {
       $scope.availableVolumeDrivers = data;
     })

app/components/dashboard/dashboardController.js

@@ -1,6 +1,6 @@
 angular.module('dashboard', [])
-.controller('DashboardController', ['$scope', '$q', 'Config', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'Info', 'Notifications',
-function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume, Info, Notifications) {
+.controller('DashboardController', ['$scope', '$q', 'Container', 'ContainerHelper', 'Image', 'Network', 'Volume', 'SystemService', 'Notifications',
+function ($scope, $q, Container, ContainerHelper, Image, Network, Volume, SystemService, Notifications) {
 
   $scope.containerData = {
     total: 0
@@ -15,14 +15,10 @@ function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume
     total: 0
   };
 
-  function prepareContainerData(d, containersToHideLabels) {
+  function prepareContainerData(d) {
     var running = 0;
     var stopped = 0;
-
     var containers = d;
-    if (containersToHideLabels) {
-      containers = ContainerHelper.hideContainers(d, containersToHideLabels);
-    }
 
     for (var i = 0; i < containers.length; i++) {
       var item = containers[i];
@@ -65,16 +61,16 @@ function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume
     $scope.infoData = info;
   }
 
-  function fetchDashboardData(containersToHideLabels) {
+  function initView() {
     $('#loadingViewSpinner').show();
     $q.all([
       Container.query({all: 1}).$promise,
       Image.query({}).$promise,
       Volume.query({}).$promise,
       Network.query({}).$promise,
-      Info.get({}).$promise
+      SystemService.info()
     ]).then(function (d) {
-      prepareContainerData(d[0], containersToHideLabels);
+      prepareContainerData(d[0]);
       prepareImageData(d[1]);
       prepareVolumeData(d[2]);
       prepareNetworkData(d[3]);
@@ -86,7 +82,5 @@ function ($scope, $q, Config, Container, ContainerHelper, Image, Network, Volume
     });
   }
 
-  Config.$promise.then(function (c) {
-    fetchDashboardData(c.hiddenLabels);
-  });
+  initView();
 }]);

app/components/docker/docker.html

@@ -8,7 +8,7 @@
   <rd-header-content>Docker</rd-header-content>
 </rd-header>
 
-<div class="row" ng-if="state.loaded">
+<div class="row" ng-if="info && version">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-code" title="Engine version"></rd-widget-header>
@@ -50,7 +50,7 @@
   </div>
 </div>
 
-<div class="row" ng-if="state.loaded">
+<div class="row" ng-if="info && version">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-th" title="Engine status"></rd-widget-header>
@@ -92,7 +92,7 @@
   </div>
 </div>
 
-<div class="row" ng-if="state.loaded && info.Plugins">
+<div class="row" ng-if="info && info.Plugins">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-plug" title="Engine plugins"></rd-widget-header>

app/components/docker/dockerController.js

@@ -1,24 +1,26 @@
 angular.module('docker', [])
-.controller('DockerController', ['$scope', 'Info', 'Version', 'Notifications',
-function ($scope, Info, Version, Notifications) {
-  $scope.state = {
-    loaded: false
-  };
+.controller('DockerController', ['$q', '$scope', 'SystemService', 'Notifications',
+function ($q, $scope, SystemService, Notifications) {
   $scope.info = {};
   $scope.version = {};
 
-  Info.get({}, function (infoData) {
-    $scope.info = infoData;
-    Version.get({}, function (versionData) {
-      $scope.version = versionData;
-      $scope.state.loaded = true;
-      $('#loadingViewSpinner').hide();
-    }, function (e) {
-      Notifications.error('Failure', e, 'Unable to retrieve engine details');
+  function initView() {
+    $('#loadingViewSpinner').show();
+    $q.all({
+      version: SystemService.version(),
+      info: SystemService.info()
+    })
+    .then(function success(data) {
+      $scope.version = data.version;
+      $scope.info = data.info;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve engine details');
+    })
+    .finally(function final() {
       $('#loadingViewSpinner').hide();
     });
-  }, function (e) {
-    Notifications.error('Failure', e, 'Unable to retrieve engine information');
-    $('#loadingViewSpinner').hide();
-  });
+  }
+
+  initView();
 }]);

app/components/endpoint/endpoint.html

@@ -38,7 +38,7 @@
               <portainer-tooltip position="bottom" message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the endpoint URL."></portainer-tooltip>
             </label>
             <div class="col-sm-9 col-lg-10">
-              <input ng-disabled="endpointType === 'local'" type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
+              <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com">
             </div>
           </div>
           <!-- !endpoint-public-url-input -->

app/components/endpointAccess/endpointAccess.html

@@ -41,137 +41,5 @@
   </div>
 </div>
 
-<div class="row" ng-if="endpoint">
-  <div class="col-sm-6">
-    <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Users and groups">
-        <div class="pull-md-right pull-lg-right">
-          Items per page:
-          <select ng-model="state.pagination_count_accesses" ng-change="changePaginationCountAccesses()">
-            <option value="0">All</option>
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-sm-12 nopadding">
-        <div class="col-sm-12 col-md-6 nopadding">
-          <button class="btn btn-primary btn-sm" ng-click="authorizeAllAccesses()" ng-disabled="accesses.length ===  0 || filteredUsers.length === 0"><i class="fa fa-user-plus space-right" aria-hidden="true"></i>Authorize all</button>
-        </div>
-        <div class="col-sm-12 col-md-6 nopadding">
-          <input type="text" id="filter" ng-model="state.filterUsers" placeholder="Filter..." class="form-control input-sm" />
-        </div>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="table-responsive">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAccesses('Name')">
-                    Name
-                    <span ng-show="sortTypeAccesses == 'Name' && !sortReverseAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAccesses == 'Name' && sortReverseAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAccesses('Type')">
-                    Type
-                    <span ng-show="sortTypeAccesses == 'Type' && !sortReverseAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAccesses == 'Type' && sortReverseAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-click="authorizeAccess(user)" class="interactive" dir-paginate="user in accesses | filter:state.filterUsers | orderBy:sortTypeAccesses:sortReverseAccesses | itemsPerPage: state.pagination_count_accesses">
-                <td>{{ user.Name }}</td>
-                <td>
-                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
-                  {{ user.Type }}
-                </td>
-              </tr>
-              <tr ng-if="!accesses">
-                <td colspan="2" class="text-center text-muted">Loading...</td>
-              </tr>
-              <tr ng-if="accesses.length === 0 || (accesses | filter:state.filterUsers | orderBy:sortTypeAccesses:sortReverseAccesses | itemsPerPage: state.pagination_count_accesses).length === 0">
-                <td colspan="2" class="text-center text-muted">No user or team available.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div ng-if="accesses" class="pull-left pagination-controls">
-            <dir-pagination-controls></dir-pagination-controls>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-sm-6">
-    <rd-widget>
-      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Authorized users and groups">
-        <div class="pull-md-right pull-lg-right">
-          Items per page:
-          <select ng-model="state.pagination_count_authorizedAccesses" ng-change="changePaginationCountAuthorizedAccesses()">
-            <option value="0">All</option>
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
-        </div>
-      </rd-widget-header>
-      <rd-widget-taskbar classes="col-sm-12 nopadding">
-        <div class="col-sm-12 col-md-6 nopadding">
-          <button class="btn btn-primary btn-sm" ng-click="unauthorizeAllAccesses()" ng-disabled="authorizedAccesses.length ===  0 || filteredAuthorizedUsers.length === 0"><i class="fa fa-user-times space-right" aria-hidden="true"></i>Deny all</button>
-        </div>
-        <div class="col-sm-12 col-md-6 nopadding">
-          <input type="text" id="filter" ng-model="state.filterAuthorizedUsers" placeholder="Filter..." class="form-control input-sm" />
-        </div>
-      </rd-widget-taskbar>
-      <rd-widget-body classes="no-padding">
-        <div class="table-responsive">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAuthorizedAccesses('Name')">
-                    Name
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Name' && !sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Name' && sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-                <th>
-                  <a ui-sref="endpoint.access({id: endpoint.Id})" ng-click="orderAuthorizedAccesses('Type')">
-                    Type
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Type' && !sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-down"></span>
-                    <span ng-show="sortTypeAuthorizedAccesses == 'Type' && sortReverseAuthorizedAccesses" class="glyphicon glyphicon-chevron-up"></span>
-                  </a>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-click="unauthorizeAccess(user)" class="interactive" pagination-id="table_authaccess" dir-paginate="user in authorizedAccesses | filter:state.filterAuthorizedUsers | orderBy:sortTypeAuthorizedAccesses:sortReverseAuthorizedAccesses | itemsPerPage: state.pagination_count_authorizedAccesses">
-                <td>{{ user.Name }}</td>
-                <td>
-                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
-                  {{ user.Type }}
-                </td>
-              </tr>
-              <tr ng-if="!authorizedAccesses">
-                <td colspan="2" class="text-center text-muted">Loading...</td>
-              </tr>
-              <tr ng-if="authorizedAccesses.length === 0 || (authorizedAccesses | filter:state.filterAuthorizedUsers | orderBy:sortTypeAuthorizedAccesses:sortReverseAuthorizedAccesses | itemsPerPage: state.pagination_count_authorizedAccesses).length === 0">
-                <td colspan="2" class="text-center text-muted">No authorized user or team.</td>
-              </tr>
-            </tbody>
-          </table>
-          <div ng-if="authorizedAccesses" class="pull-left pagination-controls">
-            <dir-pagination-controls pagination-id="table_authaccess"></dir-pagination-controls>
-          </div>
-        </div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
+<por-access-management ng-if="endpoint" access-controlled-entity="endpoint" update-access="updateAccess(userAccesses, teamAccesses)">
+</por-access-management>

app/components/endpointAccess/endpointAccessController.js

@@ -1,177 +1,18 @@
 angular.module('endpointAccess', [])
-.controller('EndpointAccessController', ['$q', '$scope', '$state', '$stateParams', '$filter', 'EndpointService', 'UserService', 'TeamService', 'Pagination', 'Notifications',
-function ($q, $scope, $state, $stateParams, $filter, EndpointService, UserService, TeamService, Pagination, Notifications) {
+.controller('EndpointAccessController', ['$scope', '$stateParams', 'EndpointService', 'Notifications',
+function ($scope, $stateParams, EndpointService, Notifications) {
 
-  $scope.state = {
-    pagination_count_accesses: Pagination.getPaginationCount('endpoint_access_accesses'),
-    pagination_count_authorizedAccesses: Pagination.getPaginationCount('endpoint_access_authorizedAccesses')
-  };
-
-  $scope.sortTypeAccesses = 'Type';
-  $scope.sortReverseAccesses = false;
-
-  $scope.orderAccesses = function(sortType) {
-    $scope.sortReverseAccesses = ($scope.sortTypeAccesses === sortType) ? !$scope.sortReverseAccesses : false;
-    $scope.sortTypeAccesses = sortType;
-  };
-
-  $scope.changePaginationCountAccesses = function() {
-    Pagination.setPaginationCount('endpoint_access_accesses', $scope.state.pagination_count_accesses);
-  };
-
-  $scope.sortTypeAuthorizedAccesses = 'Type';
-  $scope.sortReverseAuthorizedAccesses = false;
-
-  $scope.orderAuthorizedAccesses = function(sortType) {
-    $scope.sortReverseAuthorizedAccesses = ($scope.sortTypeAuthorizedAccesses === sortType) ? !$scope.sortReverseAuthorizedAccesses : false;
-    $scope.sortTypeAuthorizedAccesses = sortType;
-  };
-
-  $scope.changePaginationCountAuthorizedAccesses = function() {
-    Pagination.setPaginationCount('endpoint_access_authorizedAccesses', $scope.state.pagination_count_authorizedAccesses);
-  };
-
-  $scope.authorizeAllAccesses = function() {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-    angular.forEach($scope.accesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      $scope.authorizedAccesses = $scope.authorizedAccesses.concat($scope.accesses);
-      $scope.accesses = [];
-      Notifications.success('Endpoint accesses successfully updated');
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.unauthorizeAllAccesses = function() {
-    EndpointService.updateAccess($stateParams.id, [], [])
-    .then(function success(data) {
-      $scope.accesses = $scope.accesses.concat($scope.authorizedAccesses);
-      $scope.authorizedAccesses = [];
-      Notifications.success('Endpoint accesses successfully updated');
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.authorizeAccess = function(access) {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    if (access.Type === 'user') {
-      authorizedUsers.push(access.Id);
-    } else if (access.Type === 'team') {
-      authorizedTeams.push(access.Id);
-    }
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      removeAccessFromArray(access, $scope.accesses);
-      $scope.authorizedAccesses.push(access);
-      Notifications.success('Endpoint accesses successfully updated', access.Name);
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
-  };
-
-  $scope.unauthorizeAccess = function(access) {
-    var authorizedUsers = [];
-    var authorizedTeams = [];
-    angular.forEach($scope.authorizedAccesses, function (a) {
-      if (a.Type === 'user') {
-        authorizedUsers.push(a.Id);
-      } else if (a.Type === 'team') {
-        authorizedTeams.push(a.Id);
-      }
-    });
-
-    if (access.Type === 'user') {
-      _.remove(authorizedUsers, function(n) {
-        return n === access.Id;
-      });
-    } else if (access.Type === 'team') {
-      _.remove(authorizedTeams, function(n) {
-        return n === access.Id;
-      });
-    }
-
-    EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams)
-    .then(function success(data) {
-      removeAccessFromArray(access, $scope.authorizedAccesses);
-      $scope.accesses.push(access);
-      Notifications.success('Endpoint accesses successfully updated', access.Name);
-    })
-    .catch(function error(err) {
-      Notifications.error('Failure', err, 'Unable to update endpoint accesses');
-    });
+  $scope.updateAccess = function(authorizedUsers, authorizedTeams) {
+    return EndpointService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams);
   };
 
   function initView() {
     $('#loadingViewSpinner').show();
-    $q.all({
-      endpoint: EndpointService.endpoint($stateParams.id),
-      users: UserService.users(false),
-      teams: TeamService.teams()
-    })
+    EndpointService.endpoint($stateParams.id)
     .then(function success(data) {
-      $scope.endpoint = data.endpoint;
-      $scope.accesses = [];
-      var users = data.users.map(function (user) {
-        return new EndpointAccessUserViewModel(user);
-      });
-      var teams = data.teams.map(function (team) {
-        return new EndpointAccessTeamViewModel(team);
-      });
-      $scope.accesses = $scope.accesses.concat(users, teams);
-      $scope.authorizedAccesses = [];
-      angular.forEach($scope.endpoint.AuthorizedUsers, function(userID) {
-        for (var i = 0, l = $scope.accesses.length; i < l; i++) {
-          if ($scope.accesses[i].Type === 'user' && $scope.accesses[i].Id === userID) {
-            $scope.authorizedAccesses.push($scope.accesses[i]);
-            $scope.accesses.splice(i, 1);
-            return;
-          }
-        }
-      });
-      angular.forEach($scope.endpoint.AuthorizedTeams, function(teamID) {
-        for (var i = 0, l = $scope.accesses.length; i < l; i++) {
-          if ($scope.accesses[i].Type === 'team' && $scope.accesses[i].Id === teamID) {
-            $scope.authorizedAccesses.push($scope.accesses[i]);
-            $scope.accesses.splice(i, 1);
-            return;
-          }
-        }
-      });
+      $scope.endpoint = data;
     })
     .catch(function error(err) {
-      $scope.accesses = [];
-      $scope.authorizedAccesses = [];
       Notifications.error('Failure', err, 'Unable to retrieve endpoint details');
     })
     .finally(function final(){
@@ -179,14 +20,5 @@ function ($q, $scope, $state, $stateParams, $filter, EndpointService, UserServic
     });
   }
 
-  function removeAccessFromArray(access, accesses) {
-    for (var i = 0, l = accesses.length; i < l; i++) {
-      if (access.Type === accesses[i].Type && access.Id === accesses[i].Id) {
-        accesses.splice(i, 1);
-        return;
-      }
-    }
-  }
-
   initView();
 }]);

app/components/endpoints/endpoints.html

@@ -183,12 +183,7 @@
                 <td>{{ endpoint.URL | stripprotocol }}</td>
                 <td>
                   <span ng-if="applicationState.application.endpointManagement">
-                    <span ng-if="endpoint.Id !== activeEndpointID">
-                      <a ui-sref="endpoint({id: endpoint.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
-                    </span>
-                    <span class="small text-muted" ng-if="endpoint.Id === activeEndpointID">
-                      <i class="fa fa-lock" aria-hidden="true"></i> You cannot edit the active endpoint
-                    </span>
+                    <a ui-sref="endpoint({id: endpoint.Id})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</a>
                   </span>
                   <span ng-if="applicationState.application.authentication">
                     <a ui-sref="endpoint.access({id: endpoint.Id})"><i class="fa fa-users" aria-hidden="true" style="margin-left: 7px;"></i> Manage access</a>

app/components/endpoints/endpointsController.js

@@ -101,7 +101,6 @@ function ($scope, $state, EndpointService, EndpointProvider, Notifications, Pagi
     EndpointService.endpoints()
     .then(function success(data) {
       $scope.endpoints = data;
-      $scope.activeEndpointID = EndpointProvider.endpointID();
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to retrieve endpoints');

app/components/events/eventsController.js

@@ -1,6 +1,6 @@
 angular.module('events', [])
-.controller('EventsController', ['$scope', 'Notifications', 'Events', 'Pagination',
-function ($scope, Notifications, Events, Pagination) {
+.controller('EventsController', ['$scope', 'Notifications', 'SystemService', 'Pagination',
+function ($scope, Notifications, SystemService, Pagination) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('events');
   $scope.sortType = 'Time';
@@ -15,18 +15,22 @@ function ($scope, Notifications, Events, Pagination) {
     Pagination.setPaginationCount('events', $scope.state.pagination_count);
   };
 
-  var from = moment().subtract(24, 'hour').unix();
-  var to = moment().unix();
+  function initView() {
+    var from = moment().subtract(24, 'hour').unix();
+    var to = moment().unix();
 
-  Events.query({since: from, until: to},
-  function(d) {
-    $scope.events = d.map(function (item) {
-      return new EventViewModel(item);
+    $('#loadEventsSpinner').show();
+    SystemService.events(from, to)
+    .then(function success(data) {
+      $scope.events = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to load events');
+    })
+    .finally(function final() {
+      $('#loadEventsSpinner').hide();
     });
-    $('#loadEventsSpinner').hide();
-  },
-  function (e) {
-    $('#loadEventsSpinner').hide();
-    Notifications.error('Failure', e, 'Unable to load events');
-  });
+  }
+
+  initView();
 }]);

app/components/image/image.html

@@ -54,21 +54,11 @@
       <rd-widget-header icon="fa-tag" title="Tag the image"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. myImage:myTag">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -78,7 +68,7 @@
           <!-- !tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="tagImage()">Tag</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Image" ng-click="tagImage()">Tag</button>
               <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>

app/components/image/imageController.js

@@ -1,17 +1,17 @@
 angular.module('image', [])
-.controller('ImageController', ['$scope', '$stateParams', '$state', 'ImageService', 'Notifications',
-function ($scope, $stateParams, $state, ImageService, Notifications) {
-	$scope.config = {
+.controller('ImageController', ['$scope', '$stateParams', '$state', '$timeout', 'ImageService', 'RegistryService', 'Notifications',
+function ($scope, $stateParams, $state, $timeout, ImageService, RegistryService, Notifications) {
+	$scope.formValues = {
 		Image: '',
 		Registry: ''
 	};
 
 	$scope.tagImage = function() {
 		$('#loadingViewSpinner').show();
-		var image = $scope.config.Image;
-		var registry = $scope.config.Registry;
+		var image = $scope.formValues.Image;
+		var registry = $scope.formValues.Registry;
 
-		ImageService.tagImage($stateParams.id, image, registry)
+		ImageService.tagImage($stateParams.id, image, registry.URL)
 		.then(function success(data) {
 			Notifications.success('Image successfully tagged');
 			$state.go('image', {id: $stateParams.id}, {reload: true});
@@ -24,28 +24,35 @@ function ($scope, $stateParams, $state, ImageService, Notifications) {
 		});
 	};
 
-	$scope.pushTag = function(tag) {
+	$scope.pushTag = function(repository) {
 		$('#loadingViewSpinner').show();
-		ImageService.pushImage(tag)
-		.then(function success() {
-			Notifications.success('Image successfully pushed');
+		RegistryService.retrieveRegistryFromRepository(repository)
+		.then(function success(data) {
+			var registry = data;
+			return ImageService.pushImage(repository, registry);
+		})
+		.then(function success(data) {
+			Notifications.success('Image successfully pushed', repository);
 		})
 		.catch(function error(err) {
-			Notifications.error('Failure', err, 'Unable to push image tag');
+			Notifications.error('Failure', err, 'Unable to push image to repository');
 		})
 		.finally(function final() {
 			$('#loadingViewSpinner').hide();
 		});
 	};
 
-	$scope.pullTag = function(tag) {
+	$scope.pullTag = function(repository) {
 		$('#loadingViewSpinner').show();
-
-		ImageService.pullTag(tag)
+		RegistryService.retrieveRegistryFromRepository(repository)
 		.then(function success(data) {
-			Notifications.success('Image successfully pulled', tag);
+			var registry = data;
+			return ImageService.pullImage(repository, registry);
 		})
-		.catch(function error(err){
+		.then(function success(data) {
+			Notifications.success('Image successfully pulled', repository);
+		})
+		.catch(function error(err) {
 			Notifications.error('Failure', err, 'Unable to pull image');
 		})
 		.finally(function final() {
@@ -53,15 +60,15 @@ function ($scope, $stateParams, $state, ImageService, Notifications) {
 		});
 	};
 
-	$scope.removeTag = function(id) {
+	$scope.removeTag = function(repository) {
 		$('#loadingViewSpinner').show();
-		ImageService.deleteImage(id, false)
+		ImageService.deleteImage(repository, false)
 		.then(function success() {
 			if ($scope.image.RepoTags.length === 1) {
-				Notifications.success('Image successfully deleted', id);
+				Notifications.success('Image successfully deleted', repository);
 				$state.go('images', {}, {reload: true});
 			} else {
-				Notifications.success('Tag successfully deleted', id);
+				Notifications.success('Tag successfully deleted', repository);
 				$state.go('image', {id: $stateParams.id}, {reload: true});
 			}
 		})

app/components/images/images.html

@@ -15,21 +15,11 @@
       </rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal">
-          <!-- name-and-registry-inputs -->
+          <!-- image-and-registry -->
           <div class="form-group">
-            <label for="image_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-6">
-              <input type="text" class="form-control" ng-model="config.Image" id="image_name" placeholder="e.g. ubuntu:trusty">
-            </div>
-            <label for="image_registry" class="col-sm-2 margin-sm-top control-label text-left">
-              Registry
-              <portainer-tooltip position="bottom" message="A registry to pull the image from. Leave empty to use the official Docker registry."></portainer-tooltip>
-            </label>
-            <div class="col-sm-10 col-md-3 margin-sm-top">
-              <input type="text" class="form-control" ng-model="config.Registry" id="image_registry" placeholder="e.g. myregistry.mydomain">
-            </div>
+            <por-image-registry image="formValues.Image" registry="formValues.Registry"></por-image-registry>
           </div>
-          <!-- !name-and-registry-inputs -->
+          <!-- !image-and-registry -->
           <!-- tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
@@ -39,7 +29,7 @@
           <!-- !tag-note -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="pullImage()">Pull</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Image" ng-click="pullImage()">Pull</button>
               <i id="pullImageSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
             </div>
           </div>

app/components/images/imagesController.js

@@ -1,13 +1,13 @@
 angular.module('images', [])
-.controller('ImagesController', ['$scope', '$state', 'Config', 'ImageService', 'Notifications', 'Pagination', 'ModalService',
-function ($scope, $state, Config, ImageService, Notifications, Pagination, ModalService) {
+.controller('ImagesController', ['$scope', '$state', 'ImageService', 'Notifications', 'Pagination', 'ModalService',
+function ($scope, $state, ImageService, Notifications, Pagination, ModalService) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('images');
   $scope.sortType = 'RepoTags';
   $scope.sortReverse = true;
   $scope.state.selectedItemCount = 0;
 
-  $scope.config = {
+  $scope.formValues = {
     Image: '',
     Registry: ''
   };
@@ -40,10 +40,11 @@ function ($scope, $state, Config, ImageService, Notifications, Pagination, Modal
 
   $scope.pullImage = function() {
     $('#pullImageSpinner').show();
-    var image = $scope.config.Image;
-    var registry = $scope.config.Registry;
+    var image = $scope.formValues.Image;
+    var registry = $scope.formValues.Registry;
     ImageService.pullImage(image, registry)
     .then(function success(data) {
+      Notifications.success('Image successfully pulled', image);
       $state.reload();
     })
     .catch(function error(err) {

app/components/network/networkController.js

@@ -1,6 +1,6 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', '$state', '$stateParams', '$filter', 'Config', 'Network', 'Container', 'ContainerHelper', 'Notifications',
-function ($scope, $state, $stateParams, $filter, Config, Network, Container, ContainerHelper, Notifications) {
+.controller('NetworkController', ['$scope', '$state', '$stateParams', '$filter', 'Network', 'Container', 'ContainerHelper', 'Notifications',
+function ($scope, $state, $stateParams, $filter, Network, Container, ContainerHelper, Notifications) {
 
   $scope.removeNetwork = function removeNetwork(networkId) {
     $('#loadingViewSpinner').show();
@@ -36,21 +36,7 @@ function ($scope, $state, $stateParams, $filter, Config, Network, Container, Con
     });
   };
 
-  function getNetwork() {
-    $('#loadingViewSpinner').show();
-    Network.get({id: $stateParams.id}, function success(data) {
-      $scope.network = data;
-      getContainersInNetwork(data);
-    }, function error(err) {
-      $('#loadingViewSpinner').hide();
-      Notifications.error('Failure', err, 'Unable to retrieve network info');
-    });
-  }
-
   function filterContainersInNetwork(network, containers) {
-    if ($scope.containersToHideLabels) {
-      containers = ContainerHelper.hideContainers(containers, $scope.containersToHideLabels);
-    }
     var containersInNetwork = [];
     containers.forEach(function(container) {
       var containerInNetwork = network.Containers[container.Id];
@@ -93,8 +79,16 @@ function ($scope, $state, $stateParams, $filter, Config, Network, Container, Con
     }
   }
 
-  Config.$promise.then(function (c) {
-    $scope.containersToHideLabels = c.hiddenLabels;
-    getNetwork();
-  });
+  function initView() {
+    $('#loadingViewSpinner').show();
+    Network.get({id: $stateParams.id}, function success(data) {
+      $scope.network = data;
+      getContainersInNetwork(data);
+    }, function error(err) {
+      $('#loadingViewSpinner').hide();
+      Notifications.error('Failure', err, 'Unable to retrieve network info');
+    });
+  }
+
+  initView();
 }]);

app/components/networks/networksController.js

@@ -1,6 +1,6 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', '$state', 'Network', 'Config', 'Notifications', 'Pagination',
-function ($scope, $state, Network, Config, Notifications, Pagination) {
+.controller('NetworksController', ['$scope', '$state', 'Network', 'Notifications', 'Pagination',
+function ($scope, $state, Network, Notifications, Pagination) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('networks');
   $scope.state.selectedItemCount = 0;
@@ -97,7 +97,7 @@ function ($scope, $state, Network, Config, Notifications, Pagination) {
     });
   };
 
-  function fetchNetworks() {
+  function initView() {
     $('#loadNetworksSpinner').show();
     Network.query({}, function (d) {
       $scope.networks = d;
@@ -109,7 +109,5 @@ function ($scope, $state, Network, Config, Notifications, Pagination) {
     });
   }
 
-  Config.$promise.then(function (c) {
-    fetchNetworks();
-  });
+  initView();
 }]);

app/components/registries/registries.html

@@ -0,0 +1,150 @@
+<rd-header>
+  <rd-header-title title="Registries">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="registries" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
+  </rd-header-title>
+  <rd-header-content>Registry management</rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="dockerhub">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-database" title="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="dockerhub.Password">
+              </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="dockerhub.Authentication && (!dockerhub.Username || !dockerhub.Password)" ng-click="updateDockerHub()">Update</button>
+              <i id="updateDockerhubSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-database" title="Available registries">
+        <div class="pull-right">
+          Items per page:
+          <select ng-model="state.pagination_count" ng-change="changePaginationCount()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-primary" type="button" ui-sref="actions.create.registry"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add registry</a>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>
+                  <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
+                </th>
+                <th>
+                  <a ui-sref="registries" ng-click="order('Name')">
+                    Name
+                    <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ui-sref="registries" ng-click="order('URL')">
+                    URL
+                    <span ng-show="sortType == 'URL' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'URL' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr dir-paginate="registry in (state.filteredRegistries = (registries | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
+                <td><input type="checkbox" ng-model="registry.Checked" ng-change="selectItem(registry)" /></td>
+                <td>
+                  <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a>
+                  <span ng-if="registry.Authentication" style="margin-left: 5px;">
+                    <i class="fa fa-shield" aria-hidden="true" tooltip-placement="bottom" tooltip-class="portainer-tooltip" uib-tooltip="Authentication is enabled for this registry."></i>
+                  </span>
+                </td>
+                <td>{{ registry.URL }}</td>
+                <td>
+                  <span ng-if="applicationState.application.authentication">
+                    <a ui-sref="registry.access({id: registry.Id})"><i class="fa fa-users" aria-hidden="true" style="margin-left: 7px;"></i> Manage access</a>
+                  </span>
+                </td>
+              </tr>
+              <tr ng-if="!registries">
+                <td colspan="3" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="registries.length == 0">
+                <td colspan="3" class="text-center text-muted">No registries available.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="registries" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/registries/registriesController.js

@@ -0,0 +1,113 @@
+angular.module('registries', [])
+.controller('RegistriesController', ['$q', '$scope', '$state', 'RegistryService', 'DockerHubService', 'ModalService', 'Notifications', 'Pagination',
+function ($q, $scope, $state, RegistryService, DockerHubService, ModalService, Notifications, Pagination) {
+
+  $scope.state = {
+    selectedItemCount: 0,
+    pagination_count: Pagination.getPaginationCount('registries')
+  };
+  $scope.sortType = 'Name';
+  $scope.sortReverse = true;
+
+  $scope.updateDockerHub = function() {
+    $('#updateDockerhubSpinner').show();
+    var dockerhub = $scope.dockerhub;
+    DockerHubService.update(dockerhub)
+    .then(function success(data) {
+      Notifications.success('DockerHub registry updated');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to update DockerHub details');
+    })
+    .finally(function final() {
+      $('#updateDockerhubSpinner').hide();
+    });
+  };
+
+  $scope.order = function(sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.changePaginationCount = function() {
+    Pagination.setPaginationCount('endpoints', $scope.state.pagination_count);
+  };
+
+  $scope.selectItems = function (allSelected) {
+    angular.forEach($scope.state.filteredRegistries, function (registry) {
+      if (registry.Checked !== allSelected) {
+        registry.Checked = allSelected;
+        $scope.selectItem(registry);
+      }
+    });
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function() {
+    ModalService.confirmDeletion(
+      'Do you want to remove the selected registries?',
+      function onConfirm(confirmed) {
+        if(!confirmed) { return; }
+        removeRegistries();
+      }
+    );
+  };
+
+  function removeRegistries() {
+    $('#loadingViewSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadingViewSpinner').hide();
+      }
+    };
+
+    var registries = $scope.registries;
+    angular.forEach(registries, function (registry) {
+      if (registry.Checked) {
+        counter = counter + 1;
+        RegistryService.deleteRegistry(registry.Id)
+        .then(function success(data) {
+          var index = registries.indexOf(registry);
+          registries.splice(index, 1);
+          Notifications.success('Registry deleted', registry.Name);
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove registry');
+        })
+        .finally(function final() {
+          complete();
+        });
+      }
+    });
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    $q.all({
+      registries: RegistryService.registries(),
+      dockerhub: DockerHubService.dockerhub()
+    })
+    .then(function success(data) {
+      $scope.registries = data.registries;
+      $scope.dockerhub = data.dockerhub;
+    })
+    .catch(function error(err) {
+      $scope.registries = [];
+      Notifications.error('Failure', err, 'Unable to retrieve registries');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/registry/registry.html

@@ -0,0 +1,78 @@
+<rd-header>
+  <rd-header-title title="Registry details">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> > <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- 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" ng-model="registry.Name" placeholder="e.g. my-registry">
+            </div>
+          </div>
+          <!-- !name-input -->
+          <!-- registry-url-input -->
+          <div class="form-group">
+            <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+              Registry URL
+              <portainer-tooltip position="bottom" message="URL or IP address of a Docker registry."></portainer-tooltip>
+            </label>
+            <div class="col-sm-9 col-lg-10">
+              <input type="text" class="form-control" id="registry_url" ng-model="registry.URL" placeholder="e.g. 10.0.0.10:5000 or myregistry.domain.tld">
+            </div>
+          </div>
+          <!-- !registry-url-input -->
+          <!-- 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 this registry."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="registry.Authentication"><i></i>
+              </label>
+            </div>
+          </div>
+          <!-- !authentication-checkbox -->
+          <!-- authentication-credentials -->
+          <div ng-if="registry.Authentication">
+            <!-- credentials-user -->
+            <div class="form-group">
+              <label for="credentials_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="credentials_username" ng-model="registry.Username">
+              </div>
+            </div>
+            <!-- !credentials-user -->
+            <!-- credentials-password -->
+            <div class="form-group">
+              <label for="credentials_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="credentials_password" ng-model="registry.Password">
+              </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="!registry.Name || !registry.URL || (registry.Authentication && (!registry.Username || !registry.Password))" ng-click="updateRegistry()">Update registry</button>
+              <a type="button" class="btn btn-default btn-sm" ui-sref="registries">Cancel</a>
+              <i id="updateRegistrySpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/registry/registryController.js

@@ -0,0 +1,37 @@
+angular.module('registry', [])
+.controller('RegistryController', ['$scope', '$state', '$stateParams', '$filter', 'RegistryService', 'Notifications',
+function ($scope, $state, $stateParams, $filter, RegistryService, Notifications) {
+
+  $scope.updateRegistry = function() {
+    $('#updateRegistrySpinner').show();
+    var registry = $scope.registry;
+    RegistryService.updateRegistry(registry)
+    .then(function success(data) {
+      Notifications.success('Registry successfully updated');
+      $state.go('registries');
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to update registry');
+    })
+    .finally(function final() {
+      $('#updateRegistrySpinner').hide();
+    });
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var registryID = $stateParams.id;
+    RegistryService.registry(registryID)
+    .then(function success(data) {
+      $scope.registry = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve registry details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/registryAccess/registryAccess.html

@@ -0,0 +1,45 @@
+<rd-header>
+  <rd-header-title title="Registry access">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="registries">Registries</a> > <a ui-sref="registry({id: registry.Id})">{{ registry.Name }}</a> > Access management
+  </rd-header-content>
+</rd-header>
+
+<div class="row" ng-if="registry">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-plug" title="Registry"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>
+                {{ registry.Name }}
+              </td>
+            </tr>
+            <tr>
+              <td>URL</td>
+              <td>
+                {{ registry.URL }}
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <span class="small text-muted">
+                  You can select which user or team can access this registry by moving them to the authorized accesses table. Simply click
+                  on a user or team entry to move it from one table to the other.
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<por-access-management ng-if="registry" access-controlled-entity="registry" update-access="updateAccess(userAccesses, teamAccesses)">
+</por-access-management>

app/components/registryAccess/registryAccessController.js

@@ -0,0 +1,24 @@
+angular.module('registryAccess', [])
+.controller('RegistryAccessController', ['$scope', '$stateParams', 'RegistryService', 'Notifications',
+function ($scope, $stateParams, RegistryService, Notifications) {
+
+  $scope.updateAccess = function(authorizedUsers, authorizedTeams) {
+    return RegistryService.updateAccess($stateParams.id, authorizedUsers, authorizedTeams);
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    RegistryService.registry($stateParams.id)
+    .then(function success(data) {
+      $scope.registry = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve registry details');
+    })
+    .finally(function final(){
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/secret/secret.html

@@ -0,0 +1,55 @@
+<rd-header>
+  <rd-header-title title="Secret details">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="secret({id: secret.Id})" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
+  </rd-header-title>
+  <rd-header-content>
+    <a ui-sref="secrets">Secrets</a> > <a ui-sref="secret({id: secret.Id})">{{ secret.Name }}</a>
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-user-secret" title="Secret details"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <tbody>
+            <tr>
+              <td>Name</td>
+              <td>{{ secret.Name }}</td>
+            </tr>
+            <tr>
+              <td>ID</td>
+              <td>
+                {{ secret.Id }}
+                <button class="btn btn-xs btn-danger" ng-click="removeSecret(secret.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this secret</button>
+              </td>
+            </tr>
+            <tr>
+              <td>Created</td>
+              <td>{{ secret.CreatedAt | getisodate }}</td>
+            </tr>
+            <tr>
+              <td>Last updated</td>
+              <td>{{ secret.UpdatedAt | getisodate }}</td>
+            </tr>
+            <tr ng-if="!(secret.Labels | emptyobject)">
+              <td>Labels</td>
+              <td>
+                <table class="table table-bordered table-condensed">
+                  <tr ng-repeat="(k, v) in secret.Labels">
+                    <td>{{ k }}</td>
+                    <td>{{ v }}</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/secret/secretController.js

@@ -0,0 +1,35 @@
+angular.module('secret', [])
+.controller('SecretController', ['$scope', '$stateParams', '$state', 'SecretService', 'Notifications',
+function ($scope, $stateParams, $state, SecretService, Notifications) {
+
+  $scope.removeSecret = function removeSecret(secretId) {
+    $('#loadingViewSpinner').show();
+    SecretService.remove(secretId)
+    .then(function success(data) {
+      Notifications.success('Secret successfully removed');
+      $state.go('secrets', {});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to remove secret');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    SecretService.secret($stateParams.id)
+    .then(function success(data) {
+      $scope.secret = data;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve secret details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/secrets/secrets.html

@@ -0,0 +1,68 @@
+<rd-header>
+  <rd-header-title title="Secrets list">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="secrets" ui-sref-opts="{reload: true}">
+      <i class="fa fa-refresh" aria-hidden="true"></i>
+    </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
+  </rd-header-title>
+  <rd-header-content>Secrets</rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-user-secret" title="Secrets">
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
+        <div class="pull-left">
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-primary" type="button" ui-sref="actions.create.secret">Add secret</a>
+        </div>
+        <div class="pull-right">
+          <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <th>
+                <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
+              </th>
+              <th>
+                <a ui-sref="secrets" ng-click="order('Name')">
+                  Name
+                  <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th>
+                <a ui-sref="secrets" ng-click="order('CreatedAt')">
+                  Created at
+                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+            </thead>
+            <tbody>
+              <tr dir-paginate="secret in (state.filteredSecrets = ( secrets | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: pagination_count))">
+                <td><input type="checkbox" ng-model="secret.Checked" ng-change="selectItem(secret)"/></td>
+                <td><a ui-sref="secret({id: secret.Id})">{{ secret.Name }}</a></td>
+                <td>{{ secret.CreatedAt | getisodate }}</td>
+              </tr>
+              <tr ng-if="!secrets">
+                <td colspan="3" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="secrets.length == 0">
+                <td colspan="3" class="text-center text-muted">No secrets available.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="secrets" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    <rd-widget>
+  </div>
+</div>

app/components/secrets/secretsController.js

@@ -0,0 +1,76 @@
+angular.module('secrets', [])
+.controller('SecretsController', ['$scope', '$stateParams', '$state', 'SecretService', 'Notifications', 'Pagination',
+function ($scope, $stateParams, $state, SecretService, Notifications, Pagination) {
+  $scope.state = {};
+  $scope.state.selectedItemCount = 0;
+  $scope.state.pagination_count = Pagination.getPaginationCount('secrets');
+  $scope.sortType = 'Name';
+  $scope.sortReverse = false;
+
+  $scope.order = function (sortType) {
+    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+    $scope.sortType = sortType;
+  };
+
+  $scope.selectItems = function (allSelected) {
+    angular.forEach($scope.state.filteredSecrets, function (secret) {
+      if (secret.Checked !== allSelected) {
+        secret.Checked = allSelected;
+        $scope.selectItem(secret);
+      }
+    });
+  };
+
+  $scope.selectItem = function (item) {
+    if (item.Checked) {
+      $scope.state.selectedItemCount++;
+    } else {
+      $scope.state.selectedItemCount--;
+    }
+  };
+
+  $scope.removeAction = function () {
+    $('#loadingViewSpinner').show();
+    var counter = 0;
+    var complete = function () {
+      counter = counter - 1;
+      if (counter === 0) {
+        $('#loadingViewSpinner').hide();
+      }
+    };
+    angular.forEach($scope.secrets, function (secret) {
+      if (secret.Checked) {
+        counter = counter + 1;
+        SecretService.remove(secret.Id)
+        .then(function success() {
+          Notifications.success('Secret deleted', secret.Id);
+          var index = $scope.secrets.indexOf(secret);
+          $scope.secrets.splice(index, 1);
+        })
+        .catch(function error(err) {
+          Notifications.error('Failure', err, 'Unable to remove secret');
+        })
+        .finally(function final() {
+          complete();
+        });
+      }
+    });
+  };
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    SecretService.secrets()
+    .then(function success(data) {
+      $scope.secrets = data;
+    })
+    .catch(function error(err) {
+      $scope.secrets = [];
+      Notifications.error('Failure', err, 'Unable to retrieve secrets');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
+}]);

app/components/service/includes/constraints.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceConstraints">
+<div ng-if="service.ServiceConstraints" id="service-placement-constraints">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Placement constraints">
       <div class="nopadding">

app/components/service/includes/containerlabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-container-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Container labels">
       <div class="nopadding">

app/components/service/includes/environmentvariables.html

@@ -1,4 +1,4 @@
-<div ng-if="service.EnvironmentVariables">
+<div ng-if="service.EnvironmentVariables" id="service-env-variables">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Environment variables">
       <div class="nopadding">

app/components/service/includes/mounts.html

@@ -1,4 +1,4 @@
-<div ng-if="service.ServiceMounts">
+<div ng-if="service.ServiceMounts" id="service-mounts">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Mounts">
       <div class="nopadding">

app/components/service/includes/networks.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-network-specs">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Networks"></rd-widget-header>
     <rd-widget-body ng-if="!service.VirtualIPs || service.VirtualIPs.length === 0">

app/components/service/includes/resources.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-resources">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Resource limits and reservations">
     </rd-widget-header>

app/components/service/includes/restart.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-restart-policy">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Restart policy">
     </rd-widget-header>

app/components/service/includes/secrets.html

@@ -0,0 +1,60 @@
+<div ng-if="applicationState.endpoint.apiVersion >= 1.25" id="service-secrets">
+  <rd-widget>
+    <rd-widget-header icon="fa-tasks" title="Secrets">
+    </rd-widget-header>
+    <rd-widget-body classes="no-padding">
+      <div class="form-inline" style="padding: 10px;">
+        Add a secret:
+        <select class="form-control" ng-options="secret.Name for secret in secrets" ng-model="newSecret">
+          <option selected disabled hidden value="">Select a secret</option>
+        </select>
+        <a class="btn btn-default btn-sm" ng-click="addSecret(service, newSecret)">
+          <i class="fa fa-plus-circle" aria-hidden="true"></i> add secret
+        </a>
+      </div>
+      <table class="table" style="margin-top: 5px;">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>File name</th>
+            <th>UID</th>
+            <th>GID</th>
+            <th>Mode</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="secret in service.ServiceSecrets">
+            <td><a ui-sref="secret({id: secret.Id})">{{ secret.Name }}</a></td>
+            <td>{{ secret.FileName }}</td>
+            <td>{{ secret.Uid }}</td>
+            <td>{{ secret.Gid }}</td>
+            <td>{{ secret.Mode }}</td>
+            <td>
+              <button class="btn btn-xs btn-danger pull-right" type="button" ng-click="removeSecret(service, $index)" ng-disabled="isUpdating">
+                <i class="fa fa-trash" aria-hidden="true"></i> Remove secret
+              </button>
+            </td>
+          </tr>
+          <tr ng-if="service.ServiceSecrets.length === 0">
+            <td colspan="6" class="text-center text-muted">No secrets associated to this service.</td>
+          </tr>
+        </tbody>
+      </table>
+    </rd-widget-body>
+    <rd-widget-footer>
+      <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServiceSecrets'])" ng-click="updateService(service)">Apply changes</button>
+          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a ng-click="cancelChanges(service, ['ServiceSecrets'])">Reset changes</a></li>
+            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
+          </ul>
+        </div>
+      </div>
+    </rd-widget-footer>
+  </rd-widget>
+</div>

app/components/service/includes/servicelabels.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-labels">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Service labels">
       <div class="nopadding">

app/components/service/includes/tasks.html

@@ -1,4 +1,4 @@
-<div ng-if="tasks.length > 0 && nodes">
+<div ng-if="tasks.length > 0 && nodes" id="service-tasks">
   <rd-widget>
     <rd-widget-header icon="fa-tasks" title="Associated tasks">
       <div class="pull-right">
@@ -18,28 +18,28 @@
         <tr>
         <th>Id</th>
         <th>
-          <a ui-sref="service" ng-click="order('Status')">
+          <a ng-click="order('Status.State')">
           Status
-          <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-          <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+          <span ng-show="sortType == 'Status.State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+          <span ng-show="sortType == 'Status.State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th ng-if="service.Mode !== 'global'">
-          <a ui-sref="service" ng-click="order('Slot')">
+          <a ng-click="order('Slot')">
           Slot
           <span ng-show="sortType == 'Slot' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
           <span ng-show="sortType == 'Slot' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th>
-          <a ui-sref="service" ng-click="order('Node')">
+          <a ng-click="order('NodeId')">
           Node
-          <span ng-show="sortType == 'Node' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-          <span ng-show="sortType == 'Node' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+          <span ng-show="sortType == 'NodeId' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+          <span ng-show="sortType == 'NodeId' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
           </a>
         </th>
         <th>
-          <a ui-sref="service" ng-click="order('Updated')">
+          <a ng-click="order('Updated')">
           Last update
           <span ng-show="sortType == 'Updated' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
           <span ng-show="sortType == 'Updated' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
@@ -57,9 +57,10 @@
         </tr>
       </tbody>
       </table>
-      <div ng-if="tasks" class="pagination-controls">
+      <div ng-if="tasks" class="pagination-controls" >
       <dir-pagination-controls></dir-pagination-controls>
       </div>
     </rd-widget-body>
   </rd-widget>
 </div>
+

app/components/service/includes/updateconfig.html

@@ -1,4 +1,4 @@
-<div>
+<div id="service-update-config">
   <rd-widget>
     <rd-widget-header icon="fa-list-alt" title="Update configuration">
     </rd-widget-header>

app/components/service/service.html

@@ -109,8 +109,9 @@
           <li><a href ng-click="goToItem('service-restart-policy')">Restart policy</a></li>
           <li><a href ng-click="goToItem('service-update-config')">Update configuration</a></li>
           <li><a href ng-click="goToItem('service-labels')">Service labels</a></li>
+          <li><a href ng-click="goToItem('service-secrets')">Secrets</a></li>
           <li><a href ng-click="goToItem('service-tasks')">Tasks</a></li>
-        <ul>
+        </ul>
       </rd-widget-body>
     </rd-widget>
   </div>
@@ -147,6 +148,7 @@
     <div id="service-restart-policy" class="padding-top" ng-include="'app/components/service/includes/restart.html'"></div>
     <div id="service-update-config" class="padding-top" ng-include="'app/components/service/includes/updateconfig.html'"></div>
     <div id="service-labels" class="padding-top" ng-include="'app/components/service/includes/servicelabels.html'"></div>
+    <div id="service-secrets" class="padding-top" ng-include="'app/components/service/includes/secrets.html'"></div>
     <div id="service-tasks" class="padding-top" ng-include="'app/components/service/includes/tasks.html'"></div>
   </div>
 </div>

app/components/service/serviceController.js

@@ -1,12 +1,12 @@
 angular.module('service', [])
-.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$anchorScroll', 'ServiceService', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
-function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceService, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
+.controller('ServiceController', ['$q', '$scope', '$stateParams', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'Secret', 'SecretHelper', 'Service', 'ServiceHelper', 'TaskService', 'NodeService', 'Notifications', 'Pagination', 'ModalService', 'ControllerDataPipeline',
+function ($q, $scope, $stateParams, $state, $location, $timeout, $anchorScroll, ServiceService, Secret, SecretHelper, Service, ServiceHelper, TaskService, NodeService, Notifications, Pagination, ModalService, ControllerDataPipeline) {
 
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('service_tasks');
   $scope.tasks = [];
-  $scope.sortType = 'Status';
-  $scope.sortReverse = false;
+  $scope.sortType = 'Updated';
+  $scope.sortReverse = true;
 
   $scope.lastVersion = 0;
 
@@ -37,7 +37,11 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
   };
 
   $scope.goToItem = function(hash) {
-    $anchorScroll(hash);
+      if ($location.hash() !== hash) {
+        $location.hash(hash);
+      } else {
+        $anchorScroll();
+      }
   };
 
   $scope.addEnvironmentVariable = function addEnvironmentVariable(service) {
@@ -55,6 +59,18 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
       updateServiceArray(service, 'EnvironmentVariables', service.EnvironmentVariables);
     }
   };
+  $scope.addSecret = function addSecret(service, secret) {
+    if (secret && service.ServiceSecrets.filter(function(serviceSecret) { return serviceSecret.Id === secret.Id;}).length === 0) {
+      service.ServiceSecrets.push({ Id: secret.Id, Name: secret.Name, FileName: secret.Name, Uid: '0', Gid: '0', Mode: 444 });
+      updateServiceArray(service, 'ServiceSecrets', service.ServiceSecrets);
+    }
+  };
+  $scope.removeSecret = function removeSecret(service, index) {
+    var removedElement = service.ServiceSecrets.splice(index, 1);
+    if (removedElement !== null) {
+      updateServiceArray(service, 'ServiceSecrets', service.ServiceSecrets);
+    }
+  };
   $scope.addLabel = function addLabel(service) {
     service.ServiceLabels.push({ key: '', value: '', originalValue: '' });
     updateServiceArray(service, 'ServiceLabels', service.ServiceLabels);
@@ -162,7 +178,7 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
     config.TaskTemplate.ContainerSpec.Env = translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
     config.TaskTemplate.ContainerSpec.Labels = translateServiceLabelsToLabels(service.ServiceContainerLabels);
     config.TaskTemplate.ContainerSpec.Image = service.Image;
-    config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets;
+    config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
 
     if (service.Mode === 'replicated') {
       config.Mode.Replicated.Replicas = service.Replicas;
@@ -246,7 +262,7 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
   }
 
   function translateServiceArrays(service) {
-    service.ServiceSecrets = service.Secrets;
+    service.ServiceSecrets = service.Secrets ? service.Secrets.map(SecretHelper.flattenSecret) : [];
     service.EnvironmentVariables = translateEnvironmentVariables(service.Env);
     service.ServiceLabels = translateLabelsToServiceLabels(service.Labels);
     service.ServiceContainerLabels = translateLabelsToServiceLabels(service.ContainerLabels);
@@ -272,21 +288,47 @@ function ($q, $scope, $stateParams, $state, $location, $anchorScroll, ServiceSer
 
       return $q.all({
         tasks: TaskService.serviceTasks(service.Name),
-        nodes: NodeService.nodes()
+        nodes: NodeService.nodes(),
+        secrets: Secret.query({}).$promise
       });
     })
     .then(function success(data) {
       $scope.tasks = data.tasks;
       $scope.nodes = data.nodes;
+
+      $scope.secrets = data.secrets.map(function (secret) {
+        return new SecretViewModel(secret);
+      });
+
+      $timeout(function() {
+        $anchorScroll();
+      });
+
     })
     .catch(function error(err) {
+      $scope.secrets = [];
       Notifications.error('Failure', err, 'Unable to retrieve service details');
     })
     .finally(function final() {
+
       $('#loadingViewSpinner').hide();
     });
   }
 
+  function fetchSecrets() {
+    $('#loadSecretsSpinner').show();
+    Secret.query({}, function (d) {
+      $scope.secrets = d.map(function (secret) {
+        return new SecretViewModel(secret);
+      });
+      $('#loadSecretsSpinner').hide();
+    }, function(e) {
+      $('#loadSecretsSpinner').hide();
+      Notifications.error('Failure', e, 'Unable to retrieve secrets');
+      $scope.secrets = [];
+    });
+  }
+
   $scope.updateServiceAttribute = function updateServiceAttribute(service, name) {
     if (service[name] !== originalService[name] || !(name in originalService)) {
       service.hasChanges = true;

app/components/settings/settings.html

@@ -1,66 +1,153 @@
 <rd-header>
   <rd-header-title title="Settings">
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
   </rd-header-title>
   <rd-header-content>Settings</rd-header-content>
 </rd-header>
 
 <div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
+  <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-lock" title="Change user password"></rd-widget-header>
+      <rd-widget-header icon="fa-cogs" title="Application settings"></rd-widget-header>
       <rd-widget-body>
-        <form class="form-horizontal" style="margin-top: 15px;">
-          <!-- current-password-input -->
+        <form class="form-horizontal">
+          <!-- logo -->
+          <div class="col-sm-12 form-section-title">
+            Logo
+          </div>
           <div class="form-group">
-            <label for="current_password" class="col-sm-2 control-label text-left">Current password</label>
-            <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password">
+            <div class="col-sm-12">
+              <label for="toggle_logo" class="control-label text-left">
+                Use custom logo
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" name="toggle_logo" ng-model="formValues.customLogo"><i></i>
+              </label>
+            </div>
+          </div>
+          <div ng-if="formValues.customLogo">
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px.
+              </span>
+            </div>
+            <div class="form-group">
+              <label for="logo_url" class="col-sm-1 control-label text-left">
+                URL
+              </label>
+              <div class="col-sm-11">
+                <input type="text" class="form-control" ng-model="settings.LogoURL" id="logo_url" placeholder="https://mycompany.com/logo.png">
               </div>
             </div>
           </div>
-          <!-- !current-password-input -->
-          <div class="form-group" ng-if="invalidPassword">
+          <!-- !logo -->
+          <!-- app-templates -->
+          <div class="col-sm-12 form-section-title">
+            App Templates
+          </div>
+          <div class="form-group">
             <div class="col-sm-12">
-              <i class="fa fa-times red-icon" aria-hidden="true"></i>
-              <span class="small text-muted">Current password is not valid</span>
+              <label for="toggle_templates" class="control-label text-left">
+                Use custom templates
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" name="toggle_templates" ng-model="formValues.customTemplates"><i></i>
+              </label>
             </div>
           </div>
-          <!-- new-password-input -->
-          <div class="form-group">
-            <label for="new_password" class="col-sm-2 control-label text-left">New password</label>
-            <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.newPassword" id="new_password">
+          <div ng-if="formValues.customTemplates">
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can specify the URL to your own template definitions file here. See <a href="https://portainer.readthedocs.io/en/stable/templates.html" target="_blank">Portainer documentation</a> for more details.
+              </span>
+            </div>
+            <div class="form-group" >
+              <label for="templates_url" class="col-sm-1 control-label text-left">
+                URL
+              </label>
+              <div class="col-sm-11">
+                <input type="text" class="form-control" ng-model="settings.TemplatesURL" id="templates_url" placeholder="https://myserver.mydomain/templates.json">
               </div>
             </div>
           </div>
-          <!-- !new-password-input -->
           <div class="form-group">
             <div class="col-sm-12">
-              <i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.newPassword.length >= 8]" aria-hidden="true"></i>
-              <span class="small text-muted">Your new password must be at least 8 characters long</span>
+              <label for="toggle_external_contrib" class="control-label text-left">
+                Hide external contributions
+                <portainer-tooltip position="bottom" message="When enabled, external contributions such as LinuxServer.io will not be displayed in the sidebar."></portainer-tooltip>
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" name="toggle_external_contrib" ng-model="formValues.externalContributions"><i></i>
+              </label>
             </div>
           </div>
-          <!-- confirm-password-input -->
-          <div class="form-group">
-            <label for="confirm_password" class="col-sm-2 control-label text-left">Confirm password</label>
-            <div class="col-sm-8">
-              <div class="input-group">
-                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password">
-                <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.newPassword !== '' && formValues.newPassword === formValues.confirmPassword]" aria-hidden="true"></i></span>
-              </div>
-            </div>
-          </div>
-          <!-- !confirm-password-input -->
+          <!-- !app-templates -->
+          <!-- actions -->
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.currentPassword || formValues.newPassword.length < 8 || formValues.newPassword !== formValues.confirmPassword" ng-click="updatePassword()">Update password</button>
+              <button type="button" class="btn btn-primary btn-sm" ng-click="saveApplicationSettings()">Save</button>
+              <i id="updateSettingsSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+              <!-- <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span> -->
             </div>
           </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-tags" title="Hidden containers"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small">
+              You can hide containers with specific labels from Portainer UI. You need to specify the label name and value.
+            </span>
+          </div>
+          <div class="form-group">
+            <label for="header_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11 col-md-4">
+              <input type="text" class="form-control" id="header_name" ng-model="formValues.labelName" placeholder="e.g. com.example.foo">
+            </div>
+            <label for="header_value" class="col-sm-1 margin-sm-top control-label text-left">Value</label>
+            <div class="col-sm-11 col-md-4 margin-sm-top">
+              <input type="text" class="form-control" id="header_value" ng-model="formValues.labelValue" placeholder="e.g. bar">
+            </div>
+            <div class="col-sm-12 col-md-2 margin-sm-top">
+              <button type="button" class="btn btn-primary btn-sm" ng-click="addFilteredContainerLabel()" ng-disabled="!formValues.labelValue || !formValues.labelName"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add filter</button>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12 table-responsive">
+              <table class="table table-hover">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Value</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr ng-repeat="label in settings.BlackListedLabels">
+                    <td>{{ label.name }}</td>
+                    <td>{{ label.value }}</td>
+                    <td><button type="button" class="btn btn-danger btn-xs" ng-click="removeFilteredContainerLabel($index)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button></td>
+                  </tr>
+                  <tr ng-if="settings.BlackListedLabels.length === 0">
+                    <td colspan="3" class="text-center text-muted">No filter available.</td>
+                  </tr>
+                  <tr ng-if="!settings.BlackListedLabels">
+                    <td colspan="3" class="text-center text-muted">Loading...</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <!-- !filtered-labels -->
         </form>
       </rd-widget-body>
     </rd-widget>

app/components/settings/settingsController.js

@@ -1,29 +1,94 @@
 angular.module('settings', [])
-.controller('SettingsController', ['$scope', '$state', '$sanitize', 'Authentication', 'UserService', 'Notifications',
-function ($scope, $state, $sanitize, Authentication, UserService, Notifications) {
+.controller('SettingsController', ['$scope', '$state', 'Notifications', 'SettingsService', 'StateManager', 'DEFAULT_TEMPLATES_URL',
+function ($scope, $state, Notifications, SettingsService, StateManager, DEFAULT_TEMPLATES_URL) {
+
   $scope.formValues = {
-    currentPassword: '',
-    newPassword: '',
-    confirmPassword: ''
+    customLogo: false,
+    customTemplates: false,
+    externalContributions: false,
+    labelName: '',
+    labelValue: ''
   };
 
-  $scope.updatePassword = function() {
-    $scope.invalidPassword = false;
-    var userID = Authentication.getUserDetails().ID;
-    var currentPassword = $sanitize($scope.formValues.currentPassword);
-    var newPassword = $sanitize($scope.formValues.newPassword);
+  $scope.removeFilteredContainerLabel = function(index) {
+    var settings = $scope.settings;
+    settings.BlackListedLabels.splice(index, 1);
 
-    UserService.updateUserPassword(userID, currentPassword, newPassword)
-    .then(function success() {
-      Notifications.success('Success', 'Password successfully updated');
-      $state.reload();
+    updateSettings(settings, false);
+  };
+
+  $scope.addFilteredContainerLabel = function() {
+    var settings = $scope.settings;
+    var label = {
+      name: $scope.formValues.labelName,
+      value: $scope.formValues.labelValue
+    };
+    settings.BlackListedLabels.push(label);
+
+    updateSettings(settings, true);
+  };
+
+  $scope.saveApplicationSettings = function() {
+    var settings = $scope.settings;
+
+    if (!$scope.formValues.customLogo) {
+      settings.LogoURL = '';
+    }
+
+    if (!$scope.formValues.customTemplates) {
+      settings.TemplatesURL = DEFAULT_TEMPLATES_URL;
+    }
+    settings.DisplayExternalContributors = !$scope.formValues.externalContributions;
+
+    updateSettings(settings, false);
+  };
+
+  function resetFormValues() {
+    $scope.formValues.labelName = '';
+    $scope.formValues.labelValue = '';
+  }
+
+  function updateSettings(settings, resetForm) {
+    $('#loadingViewSpinner').show();
+
+    SettingsService.update(settings)
+    .then(function success(data) {
+      Notifications.success('Settings updated');
+      StateManager.updateLogo(settings.LogoURL);
+      StateManager.updateExternalContributions(settings.DisplayExternalContributors);
+      if (resetForm) {
+        resetFormValues();
+      }
     })
     .catch(function error(err) {
-      if (err.invalidPassword) {
-        $scope.invalidPassword = true;
-      } else {
-        Notifications.error('Failure', err, err.msg);
-      }
+      Notifications.error('Failure', err, 'Unable to update settings');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
     });
-  };
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    SettingsService.settings()
+    .then(function success(data) {
+      var settings = data;
+      $scope.settings = settings;
+      if (settings.LogoURL !== '') {
+        $scope.formValues.customLogo = true;
+      }
+      if (settings.TemplatesURL !== DEFAULT_TEMPLATES_URL) {
+        $scope.formValues.customTemplates = true;
+      }
+      $scope.formValues.externalContributions = !settings.DisplayExternalContributors;
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve application settings');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
 }]);

app/components/sidebar/sidebar.html

@@ -21,7 +21,7 @@
     </li>
     <li class="sidebar-list">
       <a ui-sref="templates" ui-sref-active="active">App Templates <span class="menu-icon fa fa-rocket"></span></a>
-      <div class="sidebar-sublist" ng-if="toggle && ($state.current.name === 'templates' || $state.current.name === 'templates_linuxserver')">
+      <div class="sidebar-sublist" ng-if="toggle && displayExternalContributors && ($state.current.name === 'templates' || $state.current.name === 'templates_linuxserver')">
         <a ui-sref="templates_linuxserver" ui-sref-active="active">LinuxServer.io</a>
       </div>
     </li>
@@ -40,6 +40,9 @@
     <li class="sidebar-list">
       <a ui-sref="volumes" ui-sref-active="active">Volumes <span class="menu-icon fa fa-cubes"></span></a>
     </li>
+    <li class="sidebar-list" ng-if="applicationState.endpoint.apiVersion >= 1.25 && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
+      <a ui-sref="secrets" ui-sref-active="active">Secrets <span class="menu-icon fa fa-user-secret"></span></a>
+    </li>
     <li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'">
       <a ui-sref="events" ui-sref-active="active">Events <span class="menu-icon fa fa-history"></span></a>
     </li>
@@ -49,7 +52,7 @@
     <li class="sidebar-list" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'">
       <a ui-sref="docker" ui-sref-active="active">Docker <span class="menu-icon fa fa-th"></span></a>
     </li>
-    <li class="sidebar-title" ng-if="isAdmin || isTeamLeader">
+    <li class="sidebar-title" ng-if="!applicationState.application.authentication || isAdmin || isTeamLeader">
       <span>Portainer settings</span>
     </li>
     <li class="sidebar-list" ng-if="applicationState.application.authentication && (isAdmin || isTeamLeader)">
@@ -61,6 +64,12 @@
     <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
       <a ui-sref="endpoints" ui-sref-active="active">Endpoints <span class="menu-icon fa fa-plug"></span></a>
     </li>
+    <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
+      <a ui-sref="registries" ui-sref-active="active">Registries <span class="menu-icon fa fa-database"></span></a>
+    </li>
+    <li class="sidebar-list" ng-if="!applicationState.application.authentication || isAdmin">
+      <a ui-sref="settings" ui-sref-active="active">Settings <span class="menu-icon fa fa-cogs"></span></a>
+    </li>
   </ul>
   <div class="sidebar-footer">
     <div class="col-xs-12">

app/components/sidebar/sidebarController.js

@@ -1,12 +1,10 @@
 angular.module('sidebar', [])
-.controller('SidebarController', ['$q', '$scope', '$state', 'Settings', 'Config', 'EndpointService', 'StateManager', 'EndpointProvider', 'Notifications', 'Authentication', 'UserService',
-function ($q, $scope, $state, Settings, Config, EndpointService, StateManager, EndpointProvider, Notifications, Authentication, UserService) {
+.controller('SidebarController', ['$q', '$scope', '$state', 'Settings', 'EndpointService', 'StateManager', 'EndpointProvider', 'Notifications', 'Authentication', 'UserService',
+function ($q, $scope, $state, Settings, EndpointService, StateManager, EndpointProvider, Notifications, Authentication, UserService) {
 
-  Config.$promise.then(function (c) {
-    $scope.logo = c.logo;
-  });
-
-  $scope.uiVersion = Settings.uiVersion;
+  $scope.uiVersion = StateManager.getState().application.version;
+  $scope.displayExternalContributors = StateManager.getState().application.displayExternalContributors;
+  $scope.logo = StateManager.getState().application.logo;
   $scope.endpoints = [];
 
   $scope.switchEndpoint = function(endpoint) {

app/components/swarm/swarm.html

@@ -3,6 +3,7 @@
     <a data-toggle="tooltip" title="Refresh" ui-sref="swarm" ui-sref-opts="{reload: true}">
       <i class="fa fa-refresh" aria-hidden="true"></i>
     </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
   </rd-header-title>
   <rd-header-content>Swarm</rd-header-content>
 </rd-header>

app/components/swarm/swarmController.js

@@ -1,6 +1,6 @@
 angular.module('swarm', [])
-.controller('SwarmController', ['$scope', 'Info', 'Version', 'Node', 'Pagination',
-function ($scope, Info, Version, Node, Pagination) {
+.controller('SwarmController', ['$q', '$scope', 'SystemService', 'NodeService', 'Pagination', 'Notifications',
+function ($q, $scope, SystemService, NodeService, Pagination, Notifications) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('swarm_nodes');
   $scope.sortType = 'Spec.Role';
@@ -20,30 +20,6 @@ function ($scope, Info, Version, Node, Pagination) {
     Pagination.setPaginationCount('swarm_nodes', $scope.state.pagination_count);
   };
 
-  Version.get({}, function (d) {
-    $scope.docker = d;
-  });
-
-  Info.get({}, function (d) {
-    $scope.info = d;
-    if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
-      Node.query({}, function(d) {
-        $scope.nodes = d.map(function (node) {
-          return new NodeViewModel(node);
-        });
-        var CPU = 0, memory = 0;
-        angular.forEach(d, function(node) {
-          CPU += node.Description.Resources.NanoCPUs;
-          memory += node.Description.Resources.MemoryBytes;
-        });
-        $scope.totalCPU = CPU / 1000000000;
-        $scope.totalMemory = memory;
-      });
-    } else {
-      extractSwarmInfo(d);
-    }
-  });
-
   function extractSwarmInfo(info) {
     // Swarm info is available in SystemStatus object
     var systemStatus = info.SystemStatus;
@@ -84,4 +60,43 @@ function ($scope, Info, Version, Node, Pagination) {
     node.version = info[offset + 8][1];
     $scope.swarm.Status.push(node);
   }
+
+  function processTotalCPUAndMemory(nodes) {
+    var CPU = 0, memory = 0;
+    angular.forEach(nodes, function(node) {
+      CPU += node.CPUs;
+      memory += node.Memory;
+    });
+    $scope.totalCPU = CPU / 1000000000;
+    $scope.totalMemory = memory;
+  }
+
+  function initView() {
+    $('#loadingViewSpinner').show();
+    var provider = $scope.applicationState.endpoint.mode.provider;
+    $q.all({
+      version: SystemService.version(),
+      info: SystemService.info(),
+      nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes()
+    })
+    .then(function success(data) {
+      $scope.docker = data.version;
+      $scope.info = data.info;
+      if (provider === 'DOCKER_SWARM_MODE') {
+        var nodes = data.nodes;
+        processTotalCPUAndMemory(nodes);
+        $scope.nodes = nodes;
+      } else {
+        extractSwarmInfo(data.info);
+      }
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to retrieve cluster details');
+    })
+    .finally(function final() {
+      $('#loadingViewSpinner').hide();
+    });
+  }
+
+  initView();
 }]);

app/components/templates/templatesController.js

@@ -1,6 +1,6 @@
 angular.module('templates', [])
-.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$anchorScroll', '$filter', 'Config', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Notifications', 'Pagination', 'ResourceControlService', 'Authentication', 'ControllerDataPipeline', 'FormValidator',
-function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, Config, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Notifications, Pagination, ResourceControlService, Authentication, ControllerDataPipeline, FormValidator) {
+.controller('TemplatesController', ['$scope', '$q', '$state', '$stateParams', '$anchorScroll', '$filter', 'ContainerService', 'ContainerHelper', 'ImageService', 'NetworkService', 'TemplateService', 'TemplateHelper', 'VolumeService', 'Notifications', 'Pagination', 'ResourceControlService', 'Authentication', 'ControllerDataPipeline', 'FormValidator',
+function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, ContainerService, ContainerHelper, ImageService, NetworkService, TemplateService, TemplateHelper, VolumeService, Notifications, Pagination, ResourceControlService, Authentication, ControllerDataPipeline, FormValidator) {
   $scope.state = {
     selectedTemplate: null,
     showAdvancedOptions: false,
@@ -159,31 +159,29 @@ function ($scope, $q, $state, $stateParams, $anchorScroll, $filter, Config, Cont
 
   function initTemplates() {
     var templatesKey = $stateParams.key;
-    Config.$promise.then(function (c) {
-      $q.all({
-        templates: TemplateService.getTemplates(templatesKey),
-        containers: ContainerService.getContainers(0, c.hiddenLabels),
-        networks: NetworkService.getNetworks(),
-        volumes: VolumeService.getVolumes()
-      })
-      .then(function success(data) {
-        $scope.templates = data.templates;
-        var availableCategories = [];
-        angular.forEach($scope.templates, function(template) {
-          availableCategories = availableCategories.concat(template.Categories);
-        });
-        $scope.availableCategories = _.sortBy(_.uniq(availableCategories));
-        $scope.runningContainers = data.containers;
-        $scope.availableNetworks = filterNetworksBasedOnProvider(data.networks);
-        $scope.availableVolumes = data.volumes.Volumes;
-      })
-      .catch(function error(err) {
-        $scope.templates = [];
-        Notifications.error('Failure', err, 'An error occured during apps initialization.');
-      })
-      .finally(function final(){
-        $('#loadTemplatesSpinner').hide();
+    $q.all({
+      templates: TemplateService.getTemplates(templatesKey),
+      containers: ContainerService.getContainers(0),
+      networks: NetworkService.networks(),
+      volumes: VolumeService.getVolumes()
+    })
+    .then(function success(data) {
+      $scope.templates = data.templates;
+      var availableCategories = [];
+      angular.forEach($scope.templates, function(template) {
+        availableCategories = availableCategories.concat(template.Categories);
       });
+      $scope.availableCategories = _.sortBy(_.uniq(availableCategories));
+      $scope.runningContainers = data.containers;
+      $scope.availableNetworks = filterNetworksBasedOnProvider(data.networks);
+      $scope.availableVolumes = data.volumes.Volumes;
+    })
+    .catch(function error(err) {
+      $scope.templates = [];
+      Notifications.error('Failure', err, 'An error occured during apps initialization.');
+    })
+    .finally(function final(){
+      $('#loadTemplatesSpinner').hide();
     });
   }
 

app/components/userSettings/userSettings.html

@@ -0,0 +1,68 @@
+<rd-header>
+  <rd-header-title title="User settings">
+  </rd-header-title>
+  <rd-header-content>User settings</rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-lock" title="Change user password"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal" style="margin-top: 15px;">
+          <!-- current-password-input -->
+          <div class="form-group">
+            <label for="current_password" class="col-sm-2 control-label text-left">Current password</label>
+            <div class="col-sm-8">
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
+                <input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password">
+              </div>
+            </div>
+          </div>
+          <!-- !current-password-input -->
+          <div class="form-group" ng-if="invalidPassword">
+            <div class="col-sm-12">
+              <i class="fa fa-times red-icon" aria-hidden="true"></i>
+              <span class="small text-muted">Current password is not valid</span>
+            </div>
+          </div>
+          <!-- new-password-input -->
+          <div class="form-group">
+            <label for="new_password" class="col-sm-2 control-label text-left">New password</label>
+            <div class="col-sm-8">
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
+                <input type="password" class="form-control" ng-model="formValues.newPassword" id="new_password">
+              </div>
+            </div>
+          </div>
+          <!-- !new-password-input -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.newPassword.length >= 8]" aria-hidden="true"></i>
+              <span class="small text-muted">Your new password must be at least 8 characters long</span>
+            </div>
+          </div>
+          <!-- confirm-password-input -->
+          <div class="form-group">
+            <label for="confirm_password" class="col-sm-2 control-label text-left">Confirm password</label>
+            <div class="col-sm-8">
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-lock" aria-hidden="true"></i></span>
+                <input type="password" class="form-control" ng-model="formValues.confirmPassword" id="confirm_password">
+                <span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[formValues.newPassword !== '' && formValues.newPassword === formValues.confirmPassword]" aria-hidden="true"></i></span>
+              </div>
+            </div>
+          </div>
+          <!-- !confirm-password-input -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.currentPassword || formValues.newPassword.length < 8 || formValues.newPassword !== formValues.confirmPassword" ng-click="updatePassword()">Update password</button>
+            </div>
+          </div>
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/userSettings/userSettingsController.js

@@ -0,0 +1,29 @@
+angular.module('userSettings', [])
+.controller('UserSettingsController', ['$scope', '$state', '$sanitize', 'Authentication', 'UserService', 'Notifications',
+function ($scope, $state, $sanitize, Authentication, UserService, Notifications) {
+  $scope.formValues = {
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  };
+
+  $scope.updatePassword = function() {
+    $scope.invalidPassword = false;
+    var userID = Authentication.getUserDetails().ID;
+    var currentPassword = $sanitize($scope.formValues.currentPassword);
+    var newPassword = $sanitize($scope.formValues.newPassword);
+
+    UserService.updateUserPassword(userID, currentPassword, newPassword)
+    .then(function success() {
+      Notifications.success('Success', 'Password successfully updated');
+      $state.reload();
+    })
+    .catch(function error(err) {
+      if (err.invalidPassword) {
+        $scope.invalidPassword = true;
+      } else {
+        Notifications.error('Failure', err, err.msg);
+      }
+    });
+  };
+}]);

app/components/users/usersController.js

@@ -1,6 +1,6 @@
 angular.module('users', [])
-.controller('UsersController', ['$q', '$scope', '$state', 'UserService', 'TeamService', 'TeamMembershipService', 'ModalService', 'Notifications', 'Pagination', 'Authentication',
-function ($q, $scope, $state, UserService, TeamService, TeamMembershipService, ModalService, Notifications, Pagination, Authentication) {
+.controller('UsersController', ['$q', '$scope', '$state', '$sanitize', 'UserService', 'TeamService', 'TeamMembershipService', 'ModalService', 'Notifications', 'Pagination', 'Authentication',
+function ($q, $scope, $state, $sanitize, UserService, TeamService, TeamMembershipService, ModalService, Notifications, Pagination, Authentication) {
   $scope.state = {
     userCreationError: '',
     selectedItemCount: 0,
@@ -59,8 +59,8 @@ function ($q, $scope, $state, UserService, TeamService, TeamMembershipService, M
   $scope.addUser = function() {
     $('#createUserSpinner').show();
     $scope.state.userCreationError = '';
-    var username = $scope.formValues.Username;
-    var password = $scope.formValues.Password;
+    var username = $sanitize($scope.formValues.Username);
+    var password = $sanitize($scope.formValues.Password);
     var role = $scope.formValues.Administrator ? 1 : 2;
     var teamIds = [];
     angular.forEach($scope.formValues.Teams, function(team) {

app/directives/accessManagement/por-access-management.js

@@ -0,0 +1,8 @@
+angular.module('portainer').component('porAccessManagement', {
+  templateUrl: 'app/directives/accessManagement/porAccessManagement.html',
+  controller: 'porAccessManagementController',
+  bindings: {
+    accessControlledEntity: '<',
+    updateAccess: '&'
+  }
+});

app/directives/accessManagement/porAccessManagement.html

@@ -0,0 +1,134 @@
+<div class="row">
+  <div class="col-sm-6">
+    <rd-widget>
+      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Users and teams">
+        <div class="pull-md-right pull-lg-right">
+          Items per page:
+          <select ng-model="$ctrl.state.pagination_count_accesses" ng-change="$ctrl.changePaginationCountAccesses()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-sm-12 nopadding">
+        <div class="col-sm-12 col-md-6 nopadding">
+          <button class="btn btn-primary btn-sm" ng-click="$ctrl.authorizeAllAccesses()" ng-disabled="$ctrl.accesses.length ===  0 || $ctrl.filteredUsers.length === 0"><i class="fa fa-user-plus space-right" aria-hidden="true"></i>Authorize all</button>
+        </div>
+        <div class="col-sm-12 col-md-6 nopadding">
+          <input type="text" id="filter" ng-model="$ctrl.state.filterUsers" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>
+                  <a ng-click="$ctrl.orderAccesses('Name')">
+                    Name
+                    <span ng-show="$ctrl.state.sortAccessesBy == 'Name' && !$ctrl.state.sortAccessesReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="$ctrl.state.sortAccessesBy == 'Name' && $ctrl.state.sortAccessesReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ng-click="$ctrl.orderAccesses('Type')">
+                    Type
+                    <span ng-show="$ctrl.state.sortAccessesBy == 'Type' && !$ctrl.state.sortAccessesReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="$ctrl.state.sortAccessesBy == 'Type' && $ctrl.state.sortAccessesReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-click="$ctrl.authorizeAccess(user)" class="interactive" dir-paginate="user in $ctrl.accesses | filter:$ctrl.state.filterUsers | orderBy:$ctrl.state.sortAccessesBy:$ctrl.state.sortAccessesReverse | itemsPerPage: $ctrl.state.pagination_count_accesses">
+                <td>{{ user.Name }}</td>
+                <td>
+                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
+                  {{ user.Type }}
+                </td>
+              </tr>
+              <tr ng-if="!$ctrl.accesses">
+                <td colspan="2" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="$ctrl.accesses.length === 0 || ($ctrl.accesses | filter:$ctrl.state.filterUsers | orderBy:$ctrl.state.sortAccessesBy:$ctrl.state.sortAccessesReverse | itemsPerPage: $ctrl.state.pagination_count_accesses).length === 0">
+                <td colspan="2" class="text-center text-muted">No user or team available.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="$ctrl.accesses" class="pull-left pagination-controls">
+            <dir-pagination-controls></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+  <div class="col-sm-6">
+    <rd-widget>
+      <rd-widget-header classes="col-sm-12 col-md-6 nopadding" icon="fa-users" title="Authorized users and teams">
+        <div class="pull-md-right pull-lg-right">
+          Items per page:
+          <select ng-model="$ctrl.state.pagination_count_authorizedAccesses" ng-change="$ctrl.changePaginationCountAuthorizedAccesses()">
+            <option value="0">All</option>
+            <option value="10">10</option>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </div>
+      </rd-widget-header>
+      <rd-widget-taskbar classes="col-sm-12 nopadding">
+        <div class="col-sm-12 col-md-6 nopadding">
+          <button class="btn btn-primary btn-sm" ng-click="$ctrl.unauthorizeAllAccesses()" ng-disabled="$ctrl.authorizedAccesses.length ===  0 || $ctrl.filteredAuthorizedUsers.length === 0"><i class="fa fa-user-times space-right" aria-hidden="true"></i>Deny all</button>
+        </div>
+        <div class="col-sm-12 col-md-6 nopadding">
+          <input type="text" id="filter" ng-model="$ctrl.state.filterAuthorizedUsers" placeholder="Filter..." class="form-control input-sm" />
+        </div>
+      </rd-widget-taskbar>
+      <rd-widget-body classes="no-padding">
+        <div class="table-responsive">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th>
+                  <a ng-click="$ctrl.orderAuthorizedAccesses('Name')">
+                    Name
+                    <span ng-show="$ctrl.state.sortAuthorizedAccessesBy == 'Name' && !$ctrl.state.sortAuthorizedAccessesReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="$ctrl.state.sortAuthorizedAccessesBy == 'Name' && $ctrl.state.sortAuthorizedAccessesReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+                <th>
+                  <a ng-click="$ctrl.orderAuthorizedAccesses('Type')">
+                    Type
+                    <span ng-show="$ctrl.state.sortAuthorizedAccessesBy == 'Type' && !$ctrl.state.sortAuthorizedAccessesReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="$ctrl.state.sortAuthorizedAccessesBy == 'Type' && $ctrl.state.sortAuthorizedAccessesReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-click="$ctrl.unauthorizeAccess(user)" class="interactive" pagination-id="table_authaccess" dir-paginate="user in $ctrl.authorizedAccesses | filter:$ctrl.state.filterAuthorizedUsers | orderBy:$ctrl.state.sortAuthorizedAccessesBy:$ctrl.state.sortAuthorizedAccessesReverse | itemsPerPage: $ctrl.state.pagination_count_authorizedAccesses">
+                <td>{{ user.Name }}</td>
+                <td>
+                  <i class="fa" ng-class="user.Type === 'user' ? 'fa-user' : 'fa-users'" aria-hidden="true" style="margin-right: 2px;"></i>
+                  {{ user.Type }}
+                </td>
+              </tr>
+              <tr ng-if="!$ctrl.authorizedAccesses">
+                <td colspan="2" class="text-center text-muted">Loading...</td>
+              </tr>
+              <tr ng-if="$ctrl.authorizedAccesses.length === 0 || (authorizedAccesses | filter:state.filterAuthorizedUsers | orderBy:sortTypeAuthorizedAccesses:sortReverseAuthorizedAccesses | itemsPerPage: state.pagination_count_authorizedAccesses).length === 0">
+                <td colspan="2" class="text-center text-muted">No authorized user or team.</td>
+              </tr>
+            </tbody>
+          </table>
+          <div ng-if="$ctrl.authorizedAccesses" class="pull-left pagination-controls">
+            <dir-pagination-controls pagination-id="table_authaccess"></dir-pagination-controls>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>