Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): EE-3540 portainer-account (#7177)

pull/7325/head
congs 2022-07-26 17:17:54 +12:00 committed by GitHub
parent 9205f67791
commit 3acefba069
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 411 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.html
View File

@ -1,5 +1,5 @@
<a class="ml-5" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
<a class="ml-5 vertical-center" href="{{ $ctrl.url }}" target="_blank" rel="noopener" ng-if="$ctrl.limitedToBE">
<ng-transclude></ng-transclude>
<i class="be-indicator-icon fas fa-briefcase space-right"></i>
<pr-icon icon="'briefcase'" feather="true" class="icon-primary"></pr-icon>
<span class="be-indicator-label">Business Edition Feature</span>
</a>

115
app/portainer/components/datatables/access-tokens-datatable/access-tokens-datatable.html
View File

@ -1,67 +1,84 @@
<div class="datatable" style="margin-top: 25px">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
</div>
<div class="actionBar">
<button
ng-if="!$ctrl.endpointType"
type="button"
class="btn btn-sm btn-danger"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.onClickAdd()"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add access token </button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
ng-model-options="{ debounce: 300 }"
/>
<div class="toolBar vertical-center">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-primary icon-nested-blue'"></pr-icon>
<span>{{ $ctrl.titleText }}</span>
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="actionBar">
<button
ng-if="!$ctrl.endpointType"
type="button"
class="btn btn-sm btn-dangerlight vertical-center"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-white'"></pr-icon>
<span>Remove</span>
</button>
<button type="button" class="btn btn-sm btn-primary vertical-center" ng-click="$ctrl.onClickAdd()">
<pr-icon icon="'plus'" feather="true" class-name="'icon-white'"></pr-icon>
<span>Add access token</span>
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
<tr>
<th>
<span class="md-checkbox">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('description')">
Description
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'description' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'description' && $ctrl.state.reverseOrder"></i>
</a>
<div class="vertical-center">
<span class="md-checkbox">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<table-column-header
col-title="'Description'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'description'"
is-sorted-desc="$ctrl.state.orderBy === 'description' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('description')"
></table-column-header>
</div>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('prefix')">
Prefix
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'prefix' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'prefix' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Prefix'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'prefix'"
is-sorted-desc="$ctrl.state.orderBy === 'prefix' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('prefix')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('dateCreated')">
Created
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'dateCreated' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'dateCreated' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Created'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'dateCreated'"
is-sorted-desc="$ctrl.state.orderBy === 'dateCreated' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('dateCreated')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('lastUsed')">
Last Used
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'lastUsed' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'lastUsed' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Last Used'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'lastUsed'"
is-sorted-desc="$ctrl.state.orderBy === 'lastUsed' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('lastUsed')"
></table-column-header>
</th>
</tr>
</thead>

38
app/portainer/components/datatables/registries-datatable/registriesDatatable.html
View File

@ -40,24 +40,32 @@
<thead>
<tr>
<th>
<span class="md-checkbox" ng-if="$ctrl.isAdmin && !$ctrl.endpointType">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('Name')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
</a>
<div class="vertical-center">
<span class="md-checkbox vertical-center" ng-if="$ctrl.isAdmin && !$ctrl.endpointType">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</div>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('URL')">
URL
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'URL'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'URL'"
is-sorted-desc="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('URL')"
></table-column-header>
</th>
<th>
<table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>

57
app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html
View File

@ -11,7 +11,7 @@
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
</div>
@ -19,8 +19,14 @@
<div class="form-group" ng-show="$ctrl.registryFormEcr.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormEcr.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
@ -29,7 +35,7 @@
<!-- url-input -->
<div class="form-group">
<label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
Registry URL
<span class="required">Registry URL</span>
<portainer-tooltip message="'URL of an Amazon Elastic Container Registry, which contains an account id and region.'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
@ -47,7 +53,10 @@
<div class="form-group" ng-show="$ctrl.registryFormEcr.registry_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormEcr.registry_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -56,11 +65,13 @@
<!-- authentication-checkbox -->
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left">
Authentication
<portainer-tooltip message="'Enable this option if you need to specify credentials to connect to a private registry.'"></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
<por-switch-field
label="'Authentication'"
tooltip="'Enable this option if you need to specify credentials to connect to a private registry.'"
name="'administrator'"
checked="$ctrl.model.Authentication"
on-change="($ctrl.toggleAuthentication)"
></por-switch-field>
</div>
</div>
<!-- !authentication-checkbox -->
@ -68,7 +79,7 @@
<div ng-if="$ctrl.model.Authentication">
<!-- aws-access-key -->
<div class="form-group">
<label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Access Key</label>
<label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Access Key</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
</div>
@ -76,7 +87,10 @@
<div class="form-group" ng-show="$ctrl.registryFormEcr.registry_access_key.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormEcr.registry_access_key.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -84,7 +98,7 @@
<!-- aws-secret-access-key -->
<div class="form-group">
<label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Secret Access Key</label>
<label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left required">AWS Secret Access Key</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_secret_access_key" name="registry_secret_access_key" ng-model="$ctrl.model.Password" required />
</div>
@ -92,7 +106,10 @@
<div class="form-group" ng-show="$ctrl.registryFormEcr.registry_secret_access_key.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormEcr.registry_secret_access_key.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -101,7 +118,7 @@
<!-- region -->
<div class="form-group">
<label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
<label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left required">Region</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
</div>
@ -109,8 +126,14 @@
<div class="form-group" ng-show="$ctrl.registryFormEcr.registry_region.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormEcr.registry_region.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>

11
app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js
View File

@ -1,7 +1,18 @@
class controller {
constructor($scope) {
this.$scope = $scope;
this.toggleAuthentication = this.toggleAuthentication.bind(this);
}
$postLink() {
this.registryFormEcr.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
}
toggleAuthentication(newValue) {
this.$scope.$evalAsync(() => {
this.model.Authentication = newValue;
});
}
}
angular.module('portainer.app').component('registryFormEcr', {

33
app/portainer/components/forms/registry-form-azure/registry-form-azure.html
View File

@ -2,7 +2,7 @@
<div class="col-sm-12 form-section-title"> Azure registry details </div>
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-azure-registry" required auto-focus />
</div>
@ -10,8 +10,14 @@
<div class="form-group" ng-show="$ctrl.registryFormAzure.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormAzure.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
@ -19,7 +25,7 @@
<!-- url-input -->
<div class="form-group">
<label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
Registry URL
<span class="required">Registry URL</span>
<portainer-tooltip message="'URL of an Azure Container Registry. Any protocol will be stripped.'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
@ -29,14 +35,17 @@
<div class="form-group" ng-show="$ctrl.registryFormAzure.registry_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormAzure.registry_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- url-input -->
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
</div>
@ -44,14 +53,17 @@
<div class="form-group" ng-show="$ctrl.registryFormAzure.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormAzure.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-password -->
<div class="form-group">
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
</div>
@ -59,7 +71,10 @@
<div class="form-group" ng-show="$ctrl.registryFormAzure.registry_password.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormAzure.registry_password.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>

45
app/portainer/components/forms/registry-form-custom/registry-form-custom.html
View File

@ -9,7 +9,7 @@
<div class="col-sm-12 form-section-title"> Custom registry details </div>
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-custom-registry" required auto-focus />
</div>
@ -17,15 +17,21 @@
<div class="form-group" ng-show="$ctrl.registryFormCustom.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormCustom.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
<!-- !name-input -->
<!-- url-input -->
<div class="form-group">
<label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
<label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left required">
Registry URL
<portainer-tooltip message="'URL or IP address of a Docker registry. Any protocol and trailing slash will be stripped if present.'"></portainer-tooltip>
</label>
@ -36,7 +42,10 @@
<div class="form-group" ng-show="$ctrl.registryFormCustom.registry_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormCustom.registry_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -44,18 +53,20 @@
<!-- authentication-checkbox -->
<div class="form-group">
<div class="col-sm-12">
<label for="registry_auth" class="control-label text-left">
Authentication
<portainer-tooltip 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="$ctrl.model.Authentication" /><i></i> </label>
<por-switch-field
label="'Authentication'"
tooltip="'Enable this option if you need to specify credentials to connect to this registry.'"
name="'administrator'"
checked="$ctrl.model.Authentication"
on-change="($ctrl.toggleAuthentication)"
></por-switch-field>
</div>
</div>
<!-- !authentication-checkbox -->
<div ng-if="$ctrl.model.Authentication">
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
</div>
@ -63,14 +74,17 @@
<div class="form-group" ng-show="$ctrl.registryFormCustom.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormCustom.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-password -->
<div class="form-group">
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
</div>
@ -78,7 +92,10 @@
<div class="form-group" ng-show="$ctrl.registryFormCustom.registry_password.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormCustom.registry_password.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>

11
app/portainer/components/forms/registry-form-custom/registry-form-custom.js
View File

@ -1,7 +1,18 @@
class controller {
constructor($scope) {
this.$scope = $scope;
this.toggleAuthentication = this.toggleAuthentication.bind(this);
}
$postLink() {
this.registryFormCustom.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
}
toggleAuthentication(newValue) {
this.$scope.$evalAsync(() => {
this.model.Authentication = newValue;
});
}
}
angular.module('portainer.app').component('registryFormCustom', {

26
app/portainer/components/forms/registry-form-dockerhub/registry-form-dockerhub.html
View File

@ -11,7 +11,7 @@
<div class="col-sm-12 form-section-title"> DockerHub account details </div>
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="dockerhub-prod-us" required />
</div>
@ -19,15 +19,21 @@
<div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormDockerhub.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
<!-- !name-input -->
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">DockerHub username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
</div>
@ -35,14 +41,17 @@
<div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormDockerhub.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-password -->
<div class="form-group">
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">DockerHub access token</label>
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">DockerHub access token</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
</div>
@ -50,7 +59,10 @@
<div class="form-group" ng-show="$ctrl.registryFormDockerhub.registry_password.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormDockerhub.registry_password.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>

65
app/portainer/components/forms/registry-form-gitlab/gitlab-projects-datatable/gitlabProjectsDatatable.html
View File

@ -1,43 +1,56 @@
<div class="datatable">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus />
<div class="toolBar vertical-center">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-blue'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus />
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
<tr>
<th>
<span class="md-checkbox">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('Namespace')">
Namespace
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Namespace' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Namespace' && $ctrl.state.reverseOrder"></i>
</a>
<div class="vertical-center">
<span class="md-checkbox vertical-center">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<table-column-header
col-title="'Namespace'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Namespace'"
is-sorted-desc="$ctrl.state.orderBy === 'Namespace' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Namespace')"
></table-column-header>
</div>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Name')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('PathWithNamespace')">
Path with namespace
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PathWithNamespace' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PathWithNamespace' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'PathWithNamespace'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'PathWithNamespace'"
is-sorted-desc="$ctrl.state.orderBy === 'PathWithNamespace' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('PathWithNamespace')"
></table-column-header>
</th>
<th>
<table-column-header col-title="'Description'" can-sort="false"></table-column-header>
</th>
<th>Description</th>
</tr>
</thead>
<tbody>

40
app/portainer/components/forms/registry-form-gitlab/registry-form-gitlab.html
View File

@ -11,7 +11,7 @@
<div class="col-sm-12 form-section-title"> Gitlab registry connection details </div>
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
</div>
@ -19,14 +19,17 @@
<div class="form-group" ng-show="registryFormGitlab.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="registryFormGitlab.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-pat -->
<div class="form-group">
<label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left">Personal Access Token </label>
<label for="registry_perso_acc_token" class="col-sm-3 col-lg-2 control-label text-left required">Personal Access Token </label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_perso_acc_token" name="registry_perso_acc_token" ng-model="$ctrl.model.Token" required />
</div>
@ -34,7 +37,10 @@
<div class="form-group" ng-show="registryFormGitlab.registry_perso_acc_token.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="registryFormGitlab.registry_perso_acc_token.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -42,11 +48,13 @@
<div class="form-group">
<div class="col-sm-12">
<a class="small interactive" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
<i class="fa fa-wrench space-right" aria-hidden="true"></i> Override default configuration
<a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
<pr-icon icon="'tool'" feather="true"></pr-icon>
Override default configuration
</a>
<a class="small interactive" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()">
<i class="fa fa-cogs space-right" aria-hidden="true"></i> Use default configuration
<a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = false; $ctrl.resetDefaults()">
<pr-icon icon="'settings'" feather="true"></pr-icon>
Use default configuration
</a>
</div>
</div>
@ -64,7 +72,10 @@
<div class="form-group" ng-show="registryFormGitlab.instance_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="registryFormGitlab.instance_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -82,7 +93,10 @@
<div class="form-group" ng-show="registryFormGitlab.registry_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="registryFormGitlab.registry_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -101,8 +115,8 @@
<div class="col-sm-12 form-section-title"> Gitlab projects </div>
<div class="form-group">
<span class="col-sm-12 text-muted small"> Select the project's registries you want to manage. Portainer will create one registry for each selected project. </span>
<span class="col-sm-12 text-muted small">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
<span class="col-sm-12 text-muted small vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-warning'"></pr-icon>
If you can't select a project, make sure that registry feature is activated on it.
</span>
</div>
@ -110,7 +124,7 @@
<div class="col-sm-12">
<gitlab-projects-datatable
title-text="Gitlab projects"
title-icon="fa-project-diagram"
title-icon="list"
dataset="$ctrl.projects"
table-key="gitlab_projects"
state="$ctrl.state.gitlab"

40
app/portainer/components/forms/registry-form-proget/registry-form-proget.html
View File

@ -9,7 +9,7 @@
<div class="col-sm-12 form-section-title"> ProGet registry details </div>
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="proget-registry" required auto-focus />
</div>
@ -17,8 +17,14 @@
<div class="form-group" ng-show="$ctrl.registryFormProGet.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormProGet.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
@ -26,7 +32,7 @@
<!-- url-input -->
<div class="form-group">
<label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
Registry URL
<span class="required">Registry URL</span>
<portainer-tooltip message="'The URL of the ProGet registry including the Feed name'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
@ -36,7 +42,10 @@
<div class="form-group" ng-show="$ctrl.registryFormProGet.registry_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormProGet.registry_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -44,7 +53,7 @@
<!-- base-url-input -->
<div class="form-group">
<label for="registry_base_url" class="col-sm-3 col-lg-2 control-label text-left">
Base URL
<span class="required">Base URL</span>
<portainer-tooltip message="'The base URL of the ProGet registry'"></portainer-tooltip>
</label>
<div class="col-sm-9 col-lg-10">
@ -54,7 +63,10 @@
<div class="form-group" ng-show="$ctrl.registryFormProGet.registry_base_url.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormProGet.registry_base_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -62,7 +74,7 @@
<div>
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required />
</div>
@ -70,14 +82,17 @@
<div class="form-group" ng-show="$ctrl.registryFormProGet.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormProGet.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-password -->
<div class="form-group">
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
</div>
@ -85,7 +100,10 @@
<div class="form-group" ng-show="$ctrl.registryFormProGet.registry_password.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormProGet.registry_password.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>

36
app/portainer/components/forms/registry-form-quay/registry-form-quay.html
View File

@ -2,7 +2,7 @@
<div class="col-sm-12 form-section-title"> Quay account details </div>
<!-- name-input -->
<div class="form-group">
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left required">Name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="Quay" required />
</div>
@ -10,15 +10,21 @@
<div class="form-group" ng-show="$ctrl.registryFormQuay.registry_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormQuay.registry_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="used"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A registry with the same name already exists.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
<p ng-message="used" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
A registry with the same name already exists.
</p>
</div>
</div>
</div>
<!-- !name-input -->
<!-- credentials-user -->
<div class="form-group">
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
<label for="registry_username" class="col-sm-3 col-lg-2 control-label text-left required">Username</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="registry_username" name="registry_username" ng-model="$ctrl.model.Username" required auto-focus />
</div>
@ -26,14 +32,17 @@
<div class="form-group" ng-show="$ctrl.registryFormQuay.registry_username.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormQuay.registry_username.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
<!-- !credentials-user -->
<!-- credentials-password -->
<div class="form-group">
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
<label for="registry_password" class="col-sm-3 col-lg-2 control-label text-left required">Password</label>
<div class="col-sm-9 col-lg-10">
<input type="password" class="form-control" id="registry_password" name="registry_password" ng-model="$ctrl.model.Password" required />
</div>
@ -41,7 +50,10 @@
<div class="form-group" ng-show="$ctrl.registryFormQuay.registry_password.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormQuay.registry_password.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>
@ -50,15 +62,14 @@
<!-- organisation-checkbox -->
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left"> Use organisation registry </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.model.Quay.useOrganisation" /><i></i> </label>
<por-switch-field label="'Use organisation registry'" checked="$ctrl.model.Quay.useOrganisation" on-change="($ctrl.toggleOrganisation)"></por-switch-field>
</div>
</div>
<!-- !organisation-checkbox -->
<div ng-if="$ctrl.model.Quay.useOrganisation">
<!-- organisation_name -->
<div class="form-group">
<label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left">Organisation name</label>
<label for="organisation_name" class="col-sm-3 col-lg-2 control-label text-left required">Organisation name</label>
<div class="col-sm-9 col-lg-10">
<input type="text" class="form-control" id="organisation_name" name="organisation_name" ng-model="$ctrl.model.Quay.organisationName" required />
</div>
@ -66,7 +77,10 @@
<div class="form-group" ng-show="$ctrl.registryFormQuay.organisation_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.registryFormQuay.organisation_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="required" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true"></pr-icon>
This field is required.
</p>
</div>
</div>
</div>

11
app/portainer/components/forms/registry-form-quay/registry-form-quay.js
View File

@ -1,7 +1,18 @@
class controller {
constructor($scope) {
this.$scope = $scope;
this.toggleOrganisation = this.toggleOrganisation.bind(this);
}
$postLink() {
this.registryFormQuay.registry_name.$validators.used = (modelValue) => !this.nameIsUsed(modelValue);
}
toggleOrganisation(newValue) {
this.$scope.$evalAsync(() => {
this.model.Quay.useOrganisation = newValue;
});
}
}
angular.module('portainer.app').component('registryFormQuay', {

34
app/portainer/components/theme/theme-settings.html
View File

@ -1,18 +1,16 @@
<information-panel class="theme-information" title-text="Information">
<span class="small text-muted">
<p>
<i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
Dark and High-contrast theme are experimental. Some UI components might not display properly.
</p>
</span>
</information-panel>
<rd-widget>
<rd-widget-header icon="fa-palette" title-text="Change user theme"></rd-widget-header>
<rd-widget-body>
<form class="theme-panel">
<!-- Theme Selector-->
<box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
<!-- !Theme -->
</form>
</rd-widget-body>
</rd-widget>
<div class="mt-6">
<rd-widget>
<rd-widget-header icon="sliders" feather-icon="true" title-text="User theme"></rd-widget-header>
<rd-widget-body>
<form class="theme-panel">
<!-- Theme Selector-->
<box-selector radio-name="'theme'" value="$ctrl.state.userTheme" options="$ctrl.state.availableThemes" on-change="($ctrl.setTheme)"></box-selector>
<!-- !Theme -->
</form>
<p class="mt-2 vertical-center">
<pr-icon icon="'alert-circle'" class-name="'icon-primary'" feather="true"></pr-icon>
Dark and High-contrast theme are experimental. Some UI components might not display properly.
</p>
</rd-widget-body>
</rd-widget>
</div>

2
app/portainer/components/widget/rd-widget-title.ts
View File

@ -13,7 +13,7 @@ export const rdWidgetTitle = {
<div class="widget-header">
<div class="row">
<span ng-class="$ctrl.classes" class="pull-left vertical-center">
<pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-primary icon-nested-blue'"></pr-icon>
<pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>
<span ng-transclude="title">{{ $ctrl.titleText }}</span>
</span>
<span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>

54
app/portainer/views/account/account.html
View File

@ -5,52 +5,40 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-lock" title-text="Change user password"></rd-widget-header>
<rd-widget-header icon="lock" feather-icon="true" title-text="Change user password"></rd-widget-header>
<rd-widget-body>
<form name="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>
<label for="current_password" class="col-sm-2 control-label text-left required">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>
<input type="password" class="form-control" ng-model="formValues.currentPassword" id="current_password" />
</div>
</div>
<!-- !current-password-input -->
<!-- new-password-input -->
<div class="form-group">
<label for="new_password" class="col-sm-2 control-label text-left">New password</label>
<label for="new_password" class="col-sm-2 control-label text-left required">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" ng-minlength="requiredPasswordLength" id="new_password" name="new_password" />
</div>
<input type="password" class="form-control" ng-model="formValues.newPassword" ng-minlength="requiredPasswordLength" id="new_password" name="new_password" />
</div>
</div>
<!-- !new-password-input -->
<!-- confirm-password-input -->
<div class="form-group">
<label for="confirm_password" class="col-sm-2 control-label text-left">Confirm password</label>
<label for="confirm_password" class="col-sm-2 control-label text-left required">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.confirmPassword]" aria-hidden="true"></i
></span>
<span class="input-group-addon">
<pr-icon icon="'check'" feather="true" class="icon-success" ng-if="formValues.newPassword === formValues.confirmPassword"></pr-icon>
<pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="!(formValues.newPassword === formValues.confirmPassword)"></pr-icon>
</span>
</div>
</div>
</div>
<password-check-hint password-valid="form.new_password.$valid && formValues.newPassword" force-change-password="forceChangePassword"></password-check-hint>
<div ng-if="userRole === 1">
<p class="text-muted">
<i class="fa fa-exclamation-circle blue-icon" aria-hidden="true"></i>
Minimum password length is set <a ui-sref="portainer.settings.authentication">here.</a>
</p>
</div>
<!-- !confirm-password-input -->
<div class="form-group">
<div class="col-sm-12">
@ -62,25 +50,31 @@
>
Update password
</button>
<button type="submit" class="btn btn-primary btn-sm" ng-click="skipPasswordChange()" ng-if="forceChangePassword && timesPasswordChangeSkipped < 2"
>Remind me later</button
>
<span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && !isInitialAdmin">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<button type="submit" class="btn btn-primary btn-sm" ng-click="skipPasswordChange()" ng-if="forceChangePassword && timesPasswordChangeSkipped < 2">
Remind me later
</button>
<span class="text-muted small vertical-center" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && !isInitialAdmin">
<pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
You cannot change your password when using LDAP authentication.
</span>
<span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && !isInitialAdmin">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="text-muted small vertical-center" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && !isInitialAdmin">
<pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
You cannot change your password when using OAuth authentication.
</span>
</div>
</div>
<div ng-if="userRole === 1">
<p class="text-muted vertical-center">
<pr-icon icon="'alert-circle'" class-name="'icon-primary'" feather="true"></pr-icon>
Minimum password length is set <a ui-sref="portainer.settings.authentication">here.</a>
</p>
</div>
</form>
</rd-widget-body>
</rd-widget>
<access-tokens-datatable
title-text="Access tokens"
title-icon="fa-key"
title-icon="key"
dataset="tokens"
table-key="tokens"
order-by="Description"

16
app/portainer/views/registries/create/createRegistry.html
View File

@ -14,8 +14,8 @@
<div>
<input type="radio" id="registry_dockerhub" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.DOCKERHUB" />
<label for="registry_dockerhub" ng-click="$ctrl.selectDockerHub()">
<div class="boxselector_header">
<i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
DockerHub
</div>
<p>DockerHub authenticated account</p>
@ -34,8 +34,8 @@
<div>
<input type="radio" id="registry_quay" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.QUAY" />
<label for="registry_quay" ng-click="$ctrl.selectQuayRegistry()">
<div class="boxselector_header">
<i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
Quay.io
</div>
<p>Quay container registry</p>
@ -44,8 +44,8 @@
<div>
<input type="radio" id="registry_proget" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.PROGET" />
<label for="registry_proget" ng-click="$ctrl.selectProGetRegistry()">
<div class="boxselector_header">
<i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
ProGet
</div>
<p>ProGet container registry</p>
@ -74,8 +74,8 @@
<div>
<input type="radio" id="registry_custom" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.CUSTOM" />
<label for="registry_custom" ng-click="$ctrl.selectCustomRegistry()">
<div class="boxselector_header">
<i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i>
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
Custom registry
</div>
<p>Define your own registry</p>

9
app/react/components/PasswordCheckHint.tsx
View File

@ -1,5 +1,7 @@
import { usePublicSettings } from '@/portainer/settings/queries';
import { Icon } from '@@/Icon';
interface Props {
passwordValid: boolean;
forceChangePassword?: boolean;
@ -14,11 +16,8 @@ export function PasswordCheckHint({
return (
<div>
<p className="text-muted">
<i
className="fa fa-exclamation-triangle orange-icon space-right"
aria-hidden="true"
/>
<p className="text-muted vertical-center">
<Icon icon="alert-triangle" className="icon-warning" feather />
{forceChangePassword &&
'An administrator has changed your password requirements, '}
The password must be at least {minPasswordLength} characters long.