fix(console): formfield changes and ux (#1020)

* cnsl-formfield, cnsl-label, cnsl-input, ch prefix * create user cnsl-fields, add cnsl-error * replace user forms with cnsl-fields * replace all other occurrences of mat-form-field with cnsl-fields * improve hover, active, focus behavior, headlin styling * user-grant refactor * style cleanup * stylelint * fix detail layout flexstart, user table header * input dir * error, input directives instead components, on blur handler * error directive, formfield content children * formfield control directive * use new field for new contact dialog * formfield hint, error directive, scss * hint or error binding, animation after view init * avatar changes, policy header * style lint * lint * input control within formfield, errorstatematcher * use matformcontrol to merge with selects * member table min width, lint * lint * implement from matformcontrol insteat custom, add selector * find error * add focus listener * labelfloat * fix input directive * renaming * rm logs * user search overflow, org create i18n, meta cleanup * sidenav shadow * redirect to org table * lint * lint test files * remove usage of formfieldmodule, use input module, layout optim * replace formfieldmodule usage with inputmodule * lint input dir, scss * user grant, user table optimisations * reorganize sidenav, project table empty, tooltips, avatar ch * user grant tooltips, form field error directive accessor * checkbox overflow fix, table dateblock, i18n tooltips * app placeholder, i18n, optimize mobile layout * change refresh table order, i18n, redirect chips * stylelint * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console (#1007) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump stylelint from 13.7.2 to 13.8.0 in /console Bumps [stylelint](https://github.com/stylelint/stylelint) from 13.7.2 to 13.8.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint/compare/13.7.2...13.8.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console (#1006) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/cli from 11.0.1 to 11.0.2 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.0.1 to 11.0.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.0.1...v11.0.2) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console (#1005) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump google-proto-files from 2.2.0 to 2.3.0 in /console Bumps [google-proto-files](https://github.com/googleapis/nodejs-proto-files) from 2.2.0 to 2.3.0. - [Release notes](https://github.com/googleapis/nodejs-proto-files/releases) - [Changelog](https://github.com/googleapis/nodejs-proto-files/blob/master/CHANGELOG.md) - [Commits](https://github.com/googleapis/nodejs-proto-files/compare/v2.2.0...v2.3.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console (#1004) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/node from 14.14.6 to 14.14.9 in /console Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 14.14.6 to 14.14.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service from 11.0.0 to 11.0.2 in /console (#999) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular/language-service in /console Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.0.0 to 11.0.2. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.0.2/packages/language-service) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular from 0.1100.1 to 0.1100.2 in /console (#1003) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @angular-devkit/build-angular in /console Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1100.1 to 0.1100.2. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console (#1002) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 in /console Bumps [prettier](https://github.com/prettier/prettier) from 2.1.2 to 2.2.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/2.1.2...2.2.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console (#1001) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps-dev): bump @types/jasmine from 3.6.1 to 3.6.2 in /console Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.1 to 3.6.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console (#1000) * fix: add project validation (#996) * fix: project add validation (#997) * fix: add project validation * fix: removed loop * chore(deps): bump file-saver from 2.0.2 to 2.0.5 in /console Bumps [file-saver](https://github.com/eligrey/FileSaver.js) from 2.0.2 to 2.0.5. - [Release notes](https://github.com/eligrey/FileSaver.js/releases) - [Changelog](https://github.com/eligrey/FileSaver.js/blob/master/CHANGELOG.md) - [Commits](https://github.com/eligrey/FileSaver.js/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Silvan <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump jasmine-spec-reporter in /console (#974) Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 5.0.2 to 6.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v5.0.2...v6.0.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * input field border improvements, primary color * redirect form, conventional ux * redirects inputs on app create * fix dynamic suffix padding, user grant layout, lint * input style accessor, contact view optim, ext idp, card fixes * hide error on untouched formfield, border red on error touched * fix change detector * change, user, form validation, delete refresh * safari font weight adjustment, change refresh emitter * key validation * remove tabls layout from projects * app changes, refactor project, app state, meta layout * add key dialog validation, startdate, rever change tabs * stylelint * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * finnaly fix fckntimestamp picker * optional key expiry * small state badge * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Silvan <[email protected]> Co-authored-by: Florian Forster <[email protected]>
2026-11-04 21:32:15 +00:00 · 2020-11-25 16:53:14 +01:00
parent 42f50de790
commit ae26999834
191 changed files with 3622 additions and 2109 deletions
@@ -21,18 +21,18 @@
                <ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>

                <p class="step-title">{{'APP.OIDC.TITLEFIRST' | translate}}</p>
-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.NAME' | translate }}</mat-label>
-                    <input matInput formControlName="name" />
-                    <mat-error *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</mat-error>
-                </mat-form-field>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
+                    <input cnslInput formControlName="name" />
+                    <span cnsl-error *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</span>
+                </cnsl-form-field>

                <p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
                <mat-radio-group color="primary" aria-labelledby="radio-group-label" class="radio-group"
                    formControlName="applicationType">
                    <mat-radio-button class="radio-button" *ngFor="let type of oidcAppTypes | keyvalue"
                        [value]="type.value">
-                        <div>{{'APP.OIDC.APPTYPE'+type.key | translate}}</div>
+                        <div>{{('APP.OIDC.APPTYPE'+type.key.toString()) | translate}}</div>
                    </mat-radio-button>
                </mat-radio-group>
                <div class="actions">
@@ -89,19 +89,24 @@
            <p class="step-description" *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

-            <mat-form-field appearance="outline" class="full-width">
-                <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
-                <mat-chip-list #chipRedirectList aria-label="uri selection">
-                    <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
-                        [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
-                        [color]="!uri.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
-                        {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
-                    </mat-chip>
-                    <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                        [matChipInputAddOnBlur]="true" [formControl]="redirectControl"
-                        (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
-                </mat-chip-list>
-            </mat-form-field>
+            <form class="chip-form" (ngSubmit)="addUri(redInput, 'REDIRECT')">
+                <cnsl-form-field appearance="outline" class="full-width">
+                    <cnsl-label>{{ 'APP.OIDC.REDIRECT' | translate }}</cnsl-label>
+                    <input #redInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
+                        [formControl]="redirectControl">
+                </cnsl-form-field>
+                <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
+                    <mat-icon>add</mat-icon>
+                </button>
+            </form>
+            <mat-chip-list #chipRedirectList aria-label="uri selection">
+                <mat-chip #redInput class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
+                    [matTooltip]="!uri?.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
+                    [color]="!uri?.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
+                    {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+            </mat-chip-list>
+
            <p *ngIf="redirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>

            <p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
@@ -112,20 +117,25 @@
                *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
                {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>

-            <mat-form-field appearance="outline" class="full-width">
-                <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
-                <mat-chip-list #chipPostRedirectList aria-label="uri selection">
-                    <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
-                        [matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
-                        removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
-                        [color]="!uri.startsWith('https://') ? 'warn': 'white'">
-                        {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
-                    </mat-chip>
-                    <input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
-                        [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
-                        (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
-                </mat-chip-list>
-            </mat-form-field>
+            <form class="chip-form" (ngSubmit)="addUri(postInput, 'POSTREDIRECT')">
+                <cnsl-form-field appearance="outline" class="full-width">
+                    <cnsl-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</cnsl-label>
+                    <input #postInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
+                        [formControl]="postRedirectControl">
+                </cnsl-form-field>
+                <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
+                    <mat-icon>add</mat-icon>
+                </button>
+            </form>
+            <mat-chip-list #chipPostRedirectList aria-label="uri selection">
+                <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
+                    [matTooltip]="!uri?.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
+                    removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
+                    [color]="!uri?.startsWith('https://') ? 'warn': 'white'">
+                    {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
+                </mat-chip>
+            </mat-chip-list>
+
            <p *ngIf="postRedirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>

            <div class="actions">
@@ -223,71 +233,72 @@
    <div *ngIf="devmode" class="dev">
        <form [formGroup]="form" (ngSubmit)="saveOIDCApp()">
            <div class="content">
-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.NAME' | translate }}</mat-label>
-                    <input matInput formControlName="name" />
-                </mat-form-field>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
+                    <input cnslInput formControlName="name" />
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.OIDC.APPTYPE' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.OIDC.APPTYPE' | translate }}</cnsl-label>
                    <mat-select formControlName="applicationType">
                        <mat-option *ngFor="let type of oidcAppTypes" [value]="type">
                            {{ 'APP.OIDC.APPTYPE'+type | translate }}
                        </mat-option>
                    </mat-select>
-                </mat-form-field>
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.OIDC.GRANT' | translate }}</cnsl-label>
                    <mat-select formControlName="grantTypesList" multiple>
                        <mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
                            {{ ('APP.OIDC.GRANT' + grant.type) | translate }}
                        </mat-option>
                    </mat-select>
-                </mat-form-field>
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.OIDC.RESPONSE' | translate }}</cnsl-label>
                    <mat-select formControlName="responseTypesList" multiple>
                        <mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
                            {{ 'APP.OIDC.RESPONSE'+type.type | translate }}
                        </mat-option>
                    </mat-select>
-                </mat-form-field>
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield">
-                    <mat-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield">
+                    <cnsl-label>{{ 'APP.OIDC.AUTHMETHOD' | translate }}</cnsl-label>
                    <mat-select formControlName="authMethodType">
                        <mat-option *ngFor="let type of oidcAuthMethodType" [value]="type.type">
                            {{ 'APP.OIDC.AUTHMETHOD'+type.type | translate }}
                        </mat-option>
                    </mat-select>
-                </mat-form-field>
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield full-width">
-                    <mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield full-width">
+                    <cnsl-label>{{ 'APP.OIDC.REDIRECT' | translate }}</cnsl-label>
                    <mat-chip-list #chipRedirectList aria-label="uri selection">
                        <mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" removable
                            (removed)="removeUri(uri, 'REDIRECT')">
                            {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                        </mat-chip>
-                        <input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                            [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
+                        <input cnslInput [matChipInputFor]="chipRedirectList"
+                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
+                            (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
                    </mat-chip-list>
-                </mat-form-field>
+                </cnsl-form-field>

-                <mat-form-field appearance="outline" class="formfield full-width">
-                    <mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
+                <cnsl-form-field appearance="outline" class="formfield full-width">
+                    <cnsl-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</cnsl-label>
                    <mat-chip-list #chipPostRedirectList aria-label="uri selection">
                        <mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
                            (removed)="removeUri(uri, 'POSTREDIRECT')">
                            {{uri}} <mat-icon matChipRemove>cancel</mat-icon>
                        </mat-chip>
-                        <input [matChipInputFor]="chipPostRedirectList"
+                        <input cnslInput [matChipInputFor]="chipPostRedirectList"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
                            (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
                    </mat-chip-list>
-                </mat-form-field>
+                </cnsl-form-field>

            </div>