Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-08 15:25:22 +02:00
Code Issues Releases Activity

feat(ui): replace boxselector with react component EE-3593 (#7215)

Browse source 
* replace boxselector and upload vendor icon
This commit is contained in:
Richard Wei 2022-07-08 12:57:36 +12:00 • committed by GitHub
parent 14a8b1d897
commit 9a2cdc4a93
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 993 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/portainer/components/accessControlForm/porAccessControlForm.html
View file

@ -20,20 +20,20 @@
<input type="radio" id="access_administrators" ng-model="$ctrl.formData.Ownership" value="administrators" />
<label for="access_administrators" data-cy="portainer-selectAdminAccess">
<div class="boxselector_header">
<i ng-class="'administrators' | ownershipicon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'eye-off'" feather="true"></pr-icon>
Administrators
</div>
<p>I want to restrict the management of this resource to administrators only</p>
<p class="boxselector_content">I want to restrict the management of this resource to administrators only</p>
</label>
</div>
<div ng-if="$ctrl.isAdmin">
<input type="radio" id="access_restricted" ng-model="$ctrl.formData.Ownership" value="restricted" />
<label for="access_restricted" data-cy="portainer-selectRestrictedAccess">
<div class="boxselector_header">
<i ng-class="'restricted' | ownershipicon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'users'" feather="true"></pr-icon>
Restricted
</div>
<p> I want to restrict the management of this resource to a set of users and/or teams </p>
<p class="boxselector_content"> I want to restrict the management of this resource to a set of users and/or teams </p>
</label>
</div>
<div ng-if="!$ctrl.isAdmin">

8
app/portainer/components/endpointSecurity/porEndpointSecurity.html
View file

@ -28,7 +28,7 @@
<input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca" />
<label for="tls_client_ca">
<div class="boxselector_header">
<i class="fa fa-shield-alt" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with server and client verification
</div>
<p>Use client certificates and server verification</p>
@ -38,7 +38,7 @@
<input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca" />
<label for="tls_client_noca">
<div class="boxselector_header">
<i class="fa fa-shield-alt" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with client verification only
</div>
<p>Use client certificates without server verification</p>
@ -48,7 +48,7 @@
<input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca" />
<label for="tls_ca">
<div class="boxselector_header">
<i class="fa fa-shield-alt" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS with server verification only
</div>
<p>Only verify the server certificate</p>
@ -58,7 +58,7 @@
<input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only" />
<label for="tls_only">
<div class="boxselector_header">
<i class="fa fa-shield-alt" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'shield'" feather="true"></pr-icon>
TLS only
</div>
<p>No server/client verification</p>

35
app/portainer/components/theme/options.tsx Normal file
View file

@ -0,0 +1,35 @@
import Lightmode from '@/assets/ico/theme/lightmode.svg?c';
import Darkmode from '@/assets/ico/theme/darkmode.svg?c';
import Highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
import Automode from '@/assets/ico/theme/auto.svg?c';
export const options = [
{
id: 'light',
icon: Lightmode,
label: 'Light Theme',
description: 'Default color mode',
value: 'light',
},
{
id: 'dark',
icon: Darkmode,
label: 'Dark Theme',
description: 'Dark color mode',
value: 'dark',
},
{
id: 'highcontrast',
icon: Highcontrastmode,
label: 'High Contrast',
description: 'High contrast color mode',
value: 'highcontrast',
},
{
id: 'auto',
icon: Automode,
label: 'Auto',
description: 'Sync with system theme',
value: 'auto',
},
];

9
app/portainer/components/theme/theme-settings.controller.js
View file

@ -1,4 +1,4 @@
import { buildOption } from '@/portainer/components/BoxSelector';
import { options } from './options';
export default class ThemeSettingsController {
/* @ngInject */
@ -43,12 +43,7 @@ export default class ThemeSettingsController {
isDemo: state.application.demoEnvironment.enabled,
};
this.state.availableThemes = [
buildOption('light', 'fas fa-sun', 'Light Theme', 'Default color mode', 'light'),
buildOption('dark', 'fas fa-moon', 'Dark Theme', 'Dark color mode', 'dark'),
buildOption('highcontrast', 'fas fa-adjust', 'High Contrast', 'High contrast color mode', 'highcontrast'),
buildOption('auto', 'fas fa-sync-alt', 'Auto', 'Sync with system theme', 'auto'),
];
this.state.availableThemes = options;
try {
this.state.userId = await this.Authentication.getUserDetails().ID;

40
app/portainer/oauth/components/oauth-providers-selector/oauth-options.tsx Normal file
View file

@ -0,0 +1,40 @@
import { FeatureId } from '@/portainer/feature-flags/enums';
import Microsoft from '@/assets/ico/microsoft.svg?c';
import Google from '@/assets/ico/vendor/google.svg?c';
import Github from '@/assets/ico/vendor/github.svg?c';
import Custom from '@/assets/ico/custom.svg?c';
export const options = [
{
id: 'microsoft',
icon: Microsoft,
featherIcon: true,
label: 'Microsoft',
description: 'Microsoft OAuth provider',
value: 'microsoft',
feature: FeatureId.HIDE_INTERNAL_AUTH,
},
{
id: 'google',
icon: Google,
label: 'Google',
description: 'Google OAuth provider',
value: 'google',
feature: FeatureId.HIDE_INTERNAL_AUTH,
},
{
id: 'github',
icon: Github,
label: 'Github',
description: 'Github OAuth provider',
value: 'github',
feature: FeatureId.HIDE_INTERNAL_AUTH,
},
{
id: 'custom',
icon: Custom,
label: 'Custom',
description: 'Custom OAuth provider',
value: 'custom',
},
];

10
app/portainer/oauth/components/oauth-providers-selector/oauth-provider-selector.controller.js
View file

@ -1,13 +1,7 @@
import { buildOption } from '@/portainer/components/BoxSelector';
import { FeatureId } from '@/portainer/feature-flags/enums';
import { options } from './oauth-options';
export default class OAuthProviderSelectorController {
constructor() {
this.options = [
buildOption('microsoft', 'fab fa-microsoft', 'Microsoft', 'Microsoft OAuth provider', 'microsoft', FeatureId.HIDE_INTERNAL_AUTH),
buildOption('google', 'fab fa-google', 'Google', 'Google OAuth provider', 'google', FeatureId.HIDE_INTERNAL_AUTH),
buildOption('github', 'fab fa-github', 'Github', 'Github OAuth provider', 'github', FeatureId.HIDE_INTERNAL_AUTH),
buildOption('custom', 'fa fa-user-check', 'Custom', 'Custom OAuth provider', 'custom'),
];
this.options = options;
}
}

25
app/portainer/settings/authentication/ldap/ldap-settings/ldap-options.tsx Normal file
View file

@ -0,0 +1,25 @@
import { FeatureId } from '@/portainer/feature-flags/enums';
import Openldap from '@/assets/ico/vendor/openldap.svg?c';
import Custom from '@/assets/ico/custom.svg?c';
const SERVER_TYPES = {
CUSTOM: 0,
OPEN_LDAP: 1,
AD: 2,
};
export const options = [
{
id: 'ldap_custom',
icon: Custom,
label: 'Custom',
value: SERVER_TYPES.CUSTOM,
},
{
id: 'ldap_openldap',
icon: Openldap,
label: 'OpenLDAP',
value: SERVER_TYPES.OPEN_LDAP,
feature: FeatureId.EXTERNAL_AUTH_LDAP,
},
];

11
app/portainer/settings/authentication/ldap/ldap-settings/ldap-settings.controller.js
View file

@ -1,12 +1,12 @@
import { buildLdapSettingsModel, buildOpenLDAPSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
import { options } from './ldap-options';
const SERVER_TYPES = {
CUSTOM: 0,
OPEN_LDAP: 1,
AD: 2,
};
import { FeatureId } from '@/portainer/feature-flags/enums';
import { buildLdapSettingsModel, buildOpenLDAPSettingsModel } from '@/portainer/settings/authentication/ldap/ldap-settings.model';
const DEFAULT_GROUP_FILTER = '(objectClass=groupOfNames)';
const DEFAULT_USER_FILTER = '(objectClass=inetOrgPerson)';
@ -18,10 +18,7 @@ export default class LdapSettingsController {
this.tlscaCert = null;
this.settingsDrafts = {};
this.boxSelectorOptions = [
{ id: 'ldap_custom', value: SERVER_TYPES.CUSTOM, label: 'Custom', icon: 'fa fa-server' },
{ id: 'ldap_openldap', value: SERVER_TYPES.OPEN_LDAP, label: 'OpenLDAP', icon: 'fa fa-server', feature: FeatureId.EXTERNAL_AUTH_LDAP },
];
this.boxSelectorOptions = options;
this.onTlscaCertChange = this.onTlscaCertChange.bind(this);
this.searchUsers = this.searchUsers.bind(this);

6
app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
View file

@ -22,7 +22,7 @@
<input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
<label for="method_editor">
<div class="boxselector_header">
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'edit'" feather="true"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>
@ -32,7 +32,7 @@
<input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
<label for="method_upload">
<div class="boxselector_header">
<i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'upload'" feather="true"></pr-icon>
Upload
</div>
<p>Upload from your computer</p>
@ -42,7 +42,7 @@
<input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
<label for="method_repository">
<div class="boxselector_header">
<i class="fab fa-git" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
Repository
</div>
<p>Use a git repository</p>

2
app/portainer/views/devices/profiles/add/addProfile.html
View file

@ -23,7 +23,7 @@
<input type="radio" id="method_editor" ng-model="state.method" value="editor" />
<label for="method_editor">
<div class="boxselector_header">
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'edit'" feather="true"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>

2
app/portainer/views/devices/profiles/edit/editProfile.html
View file

@ -23,7 +23,7 @@
<input type="radio" id="method_editor" ng-model="state.method" value="editor" />
<label for="method_editor">
<div class="boxselector_header">
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'edit'" feather="true"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>

8
app/portainer/views/stacks/create/createstack.html
View file

@ -56,7 +56,7 @@
<input type="radio" id="method_editor" ng-model="state.Method" value="editor" />
<label for="method_editor">
<div class="boxselector_header">
<i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'edit'" feather="true"></pr-icon>
Web editor
</div>
<p>Use our Web editor</p>
@ -66,7 +66,7 @@
<input type="radio" id="method_upload" ng-model="state.Method" value="upload" />
<label for="method_upload">
<div class="boxselector_header">
<i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'upload'" feather="true"></pr-icon>
Upload
</div>
<p>Upload from your computer</p>
@ -76,7 +76,7 @@
<input type="radio" id="method_repository" ng-model="state.Method" value="repository" />
<label for="method_repository">
<div class="boxselector_header">
<i class="fab fa-git" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
Repository
</div>
<p>Use a git repository</p>
@ -86,7 +86,7 @@
<input type="radio" id="method_template" ng-model="state.Method" value="template" />
<label for="method_template">
<div class="boxselector_header">
<i class="fa fa-rocket" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'edit'" feather="true"></pr-icon>
Custom template
</div>
<p>Use a custom template</p>