TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 20:57:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(console): common idp provider styles (#5450)

Browse Source 
common idp provider styles
This commit is contained in:
Max Peintner 2023-03-16 07:53:46 +01:00 committed by GitHub
parent 7c79120443
commit f0e0191c7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 70 additions and 778 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html
View File

@ -2,19 +2,19 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="azure-ad-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo" src="./assets/images/idp/ms.svg" alt="microsoft" />
<h1>{{ 'IDP.CREATE.AZUREAD.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">
<p class="identity-provider-desc cnsl-secondary-text">
{{ !provider ? ('IDP.CREATE.AZUREAD.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="azure-ad-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
@ -33,7 +33,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -97,7 +97,7 @@
</div>
</div>
<div class="azure-ad-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

87
console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.scss
View File

@ -1,87 +0,0 @@
.desc {
font-size: 14px;
}
.azure-ad-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.name-hint {
font-size: 12px;
}
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.azure-ad-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.azure-ad-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-azure-ad',
templateUrl: './provider-azure-ad.component.html',
styleUrls: ['./provider-azure-ad.component.scss'],
})
export class ProviderAzureADComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-github-es/provider-github-es.component.html
View File

@ -2,7 +2,7 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="github-es-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="github" />
<img class="idp-logo light" src="./assets/images/idp/github.svg" alt="github" />
@ -11,7 +11,7 @@
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.GITHUBES.DESCRIPTION' | translate }}</p>
<p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.GITHUBES.DESCRIPTION' | translate }}</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<cnsl-form-field class="formfield">
@ -34,7 +34,7 @@
<input cnslInput formControlName="userEndpoint" />
</cnsl-form-field>
<div class="github-es-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -48,7 +48,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -96,7 +96,7 @@
</div>
</div>
<div class="github-es-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

96
console/src/app/modules/providers/provider-github-es/provider-github-es.component.scss
View File

@ -1,96 +0,0 @@
.desc {
font-size: 14px;
}
@mixin provider-github-es-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
.github-es-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
&.dark {
display: if($is-dark-theme, block, none);
}
&.light {
display: if($is-dark-theme, none, block);
}
}
h1 {
margin: 0 1rem 0 0;
}
}
}
.formfield {
display: block;
max-width: 400px;
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.github-es-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.github-es-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
margin-right: 1rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-github-es',
templateUrl: './provider-github-es.component.html',
styleUrls: ['./provider-github-es.component.scss'],
})
export class ProviderGithubESComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-github/provider-github.component.html
View File

@ -2,7 +2,7 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="github-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="github" />
<img class="idp-logo light" src="./assets/images/idp/github.svg" alt="github" />
@ -10,12 +10,12 @@
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">
<p class="identity-provider-desc cnsl-secondary-text">
{{ !provider ? ('IDP.CREATE.GITHUB.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="github-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -29,7 +29,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -83,7 +83,7 @@
</div>
</div>
<div class="github-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

1
console/src/app/modules/providers/provider-github/provider-github.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-github',
templateUrl: './provider-github.component.html',
styleUrls: ['./provider-github.component.scss'],
})
export class ProviderGithubComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html
View File

@ -2,19 +2,19 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="gitlab-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
<h1>{{ 'IDP.CREATE.GITLABSELFHOSTED.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">
<p class="identity-provider-desc cnsl-secondary-text">
{{ !provider ? ('IDP.CREATE.GITLABSELFHOSTED.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="gitlab-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
@ -33,7 +33,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -87,7 +87,7 @@
</div>
</div>
<div class="gitlab-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

87
console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss
View File

@ -1,87 +0,0 @@
.desc {
font-size: 14px;
}
.gitlab-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.name-hint {
font-size: 12px;
}
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.gitlab-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.gitlab-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-gitlab-self-hosted',
templateUrl: './provider-gitlab-self-hosted.component.html',
styleUrls: ['./provider-gitlab-self-hosted.component.scss'],
})
export class ProviderGitlabSelfHostedComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html
View File

@ -2,19 +2,19 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="gitlab-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
<h1>{{ 'IDP.CREATE.GITLAB.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">
<p class="identity-provider-desc cnsl-secondary-text">
{{ !provider ? ('IDP.CREATE.GITLAB.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="gitlab-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -28,7 +28,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -82,7 +82,7 @@
</div>
</div>
<div class="gitlab-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

87
console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss
View File

@ -1,87 +0,0 @@
.desc {
font-size: 14px;
}
.gitlab-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.name-hint {
font-size: 12px;
}
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.gitlab-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.gitlab-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-gitlab',
templateUrl: './provider-gitlab.component.html',
styleUrls: ['./provider-gitlab.component.scss'],
})
export class ProviderGitlabComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-google/provider-google.component.html
View File

@ -2,19 +2,19 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="google-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo" src="./assets/images/idp/google.png" alt="google" />
<h1>{{ 'IDP.CREATE.GOOGLE.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">
<p class="identity-provider-desc cnsl-secondary-text">
{{ !provider ? ('IDP.CREATE.GOOGLE.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="google-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -28,7 +28,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -82,7 +82,7 @@
</div>
</div>
<div class="google-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

87
console/src/app/modules/providers/provider-google/provider-google.component.scss
View File

@ -1,87 +0,0 @@
.desc {
font-size: 14px;
}
.google-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.name-hint {
font-size: 12px;
}
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.google-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.google-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-google/provider-google.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-google',
templateUrl: './provider-google.component.html',
styleUrls: ['./provider-google.component.scss'],
})
export class ProviderGoogleComponent {
public showOptional: boolean = false;

8
console/src/app/modules/providers/provider-jwt/provider-jwt.component.html
View File

@ -2,17 +2,17 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="jwt-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<mat-icon class="idp-logo" svgIcon="mdi_jwt" alt="jwt" />
<h1>{{ 'IDP.CREATE.JWT.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.JWT.DESCRIPTION' | translate }}</p>
<p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.JWT.DESCRIPTION' | translate }}</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="jwt-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
@ -35,7 +35,7 @@
</cnsl-form-field>
</div>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon

85
console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss
View File

@ -1,85 +0,0 @@
.desc {
font-size: 14px;
}
.jwt-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.jwt-content {
.desc {
margin-bottom: 1rem;
}
.scope-card {
max-width: 400px;
display: block;
.idp-scopes {
.flex-line {
display: flex;
align-items: flex-start;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
}
.jwt-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts
View File

@ -26,7 +26,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-jwt',
templateUrl: './provider-jwt.component.html',
styleUrls: ['./provider-jwt.component.scss'],
})
export class ProviderJWTComponent {
public showOptional: boolean = false;

10
console/src/app/modules/providers/provider-oauth/provider-oauth.component.html
View File

@ -2,7 +2,7 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="oauth-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<img class="idp-logo" src="./assets/images/idp/oauth.svg" alt="oauth" />
@ -10,7 +10,7 @@
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.OAUTH.DESCRIPTION' | translate }}</p>
<p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.OAUTH.DESCRIPTION' | translate }}</p>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<cnsl-form-field class="formfield">
@ -38,7 +38,7 @@
<input cnslInput formControlName="idAttribute" />
</cnsl-form-field>
<div class="oauth-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -52,7 +52,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -100,7 +100,7 @@
</div>
</div>
<div class="oauth-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

84
console/src/app/modules/providers/provider-oauth/provider-oauth.component.scss
View File

@ -1,84 +0,0 @@
.desc {
font-size: 14px;
}
.oauth-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.oauth-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.oauth-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
margin-right: 1rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-oauth',
templateUrl: './provider-oauth.component.html',
styleUrls: ['./provider-oauth.component.scss'],
})
export class ProviderOAuthComponent {
public showOptional: boolean = false;

12
console/src/app/modules/providers/provider-oidc/provider-oidc.component.html
View File

@ -2,17 +2,17 @@
title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
(closed)="close()"
>
<div class="oidc-create-content">
<div class="identity-provider-create-content">
<div class="title-row">
<mat-icon class="idp-logo" svgIcon="mdi_openid" alt="openid" />
<h1>{{ 'IDP.CREATE.OIDC.TITLE' | translate }}</h1>
<mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
</div>
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.OIDC.DESCRIPTION' | translate }}</p>
<p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.OIDC.DESCRIPTION' | translate }}</p>
<form [formGroup]="oidcFormGroup" (ngSubmit)="submitForm()">
<div class="oidc-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
@ -23,7 +23,7 @@
</cnsl-form-field>
</div>
<div class="oidc-content">
<div class="identity-provider-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
@ -37,7 +37,7 @@
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="optional-h-wrapper">
<div class="identity-provider-optional-h-wrapper">
<h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
<button (click)="showOptional = !showOptional" type="button" mat-icon-button>
<mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon
@ -85,7 +85,7 @@
</div>
</div>
<div class="oidc-create-actions">
<div class="identity-provider-create-actions">
<button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid" type="submit">
<span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
<span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

84
console/src/app/modules/providers/provider-oidc/provider-oidc.component.scss
View File

@ -1,84 +0,0 @@
.desc {
font-size: 14px;
}
.oidc-create-content {
.title-row {
display: flex;
align-items: center;
.idp-logo {
height: 36px;
width: 36px;
margin-right: 1rem;
flex-shrink: 0;
}
h1 {
margin: 0 1rem 0 0;
}
}
.formfield {
display: block;
max-width: 400px;
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.oidc-content {
.desc {
margin-bottom: 1rem;
}
.idp-scopes {
padding-bottom: 0.5rem;
.flex-line {
display: flex;
align-items: flex-start;
max-width: 400px;
.formfield {
flex: 1;
}
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
.oidc-create-actions {
display: flex;
margin-top: 1rem;
button[mat-raised-button] {
border-radius: 0.5rem;
margin-right: 1rem;
padding: 0.5rem 4rem;
}
}
.optional-h-wrapper {
display: flex;
align-items: center;
h2 {
margin-right: 0.25rem;
}
}

1
console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts
View File

@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
@Component({
selector: 'cnsl-provider-oidc',
templateUrl: './provider-oidc.component.html',
styleUrls: ['./provider-oidc.component.scss'],
})
export class ProviderOIDCComponent {
public showOptional: boolean = false;

18
console/src/app/modules/providers/provider-github/provider-github.component.scss → console/src/app/modules/providers/providers.scss
View File

@ -1,11 +1,11 @@
.desc {
@mixin identity-provider-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
.identity-provider-desc {
font-size: 14px;
}
@mixin provider-github-theme($theme) {
$is-dark-theme: map-get($theme, is-dark);
.github-create-content {
.identity-provider-create-content {
.title-row {
display: flex;
align-items: center;
@ -53,7 +53,7 @@
}
}
.github-content {
.identity-provider-content {
.desc {
margin-bottom: 1rem;
}
@ -77,9 +77,8 @@
}
}
}
}
.github-create-actions {
.identity-provider-create-actions {
display: flex;
margin-top: 1rem;
@ -89,7 +88,7 @@
}
}
.optional-h-wrapper {
.identity-provider-optional-h-wrapper {
display: flex;
align-items: center;
@ -97,3 +96,4 @@
margin-right: 0.25rem;
}
}
}

6
console/src/component-themes.scss
View File

@ -14,7 +14,6 @@
@import 'src/app/modules/nav/nav.component';
@import 'src/app/modules/nav-toggle/nav-toggle.component';
@import './styles/toast.scss';
@import 'src/app/modules/providers/provider-github-es/provider-github-es.component';
@import 'src/app/modules/table-actions/table-actions.component';
@import 'src/app/modules/org-context/org-context.component.scss';
@import 'src/app/modules/action-keys/action-keys.component.scss';
@ -26,11 +25,11 @@
@import 'src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component';
@import 'src/app/pages/projects/apps/app-detail/app-detail.component';
@import 'src/app/pages/projects/apps/redirect-uris/redirect-uris.component';
@import 'src/app/modules/providers/provider-github/provider-github.component';
@import 'src/app/modules/filter-events/filter-events.component';
@import 'src/app/modules/top-view/top-view.component';
@import 'src/app/pages/projects/projects.component';
@import 'src/app/modules/edit-text/edit-text.component.scss';
@import 'src/app/modules/providers/providers.scss';
@import 'src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component';
@import 'src/app/pages/users/user-detail/user-detail/user-detail.component';
@import 'src/app/pages/users/user-list/user-table/user-table.component';
@ -90,9 +89,8 @@
@include footer-theme($theme);
@include table-theme($theme);
@include detail-layout-theme($theme);
@include provider-github-es-theme($theme);
@include app-card-theme($theme);
@include provider-github-theme($theme);
@include identity-provider-theme($theme);
@include login-policy-mfas-theme($theme);
@include changes-theme($theme);
@include home-theme($theme);