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]>

console/src/app/pages/users/user-create/user-create.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -40,12 +40,13 @@ export class UserCreateComponent implements OnDestroy {
     public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
     public languages: string[] = ['de', 'en'];
     public userForm!: FormGroup;
-
+    public envSuffixLabel: string = '';
     private sub: Subscription = new Subscription();
 
     public userLoginMustBeDomain: boolean = false;
     public loading: boolean = false;
 
+    @ViewChild('suffix') public suffix!: any;
     private primaryDomain!: OrgDomain.AsObject;
 
     constructor(
@@ -53,6 +54,7 @@ export class UserCreateComponent implements OnDestroy {
         private toast: ToastService,
         private fb: FormBuilder,
         private mgmtService: ManagementService,
+        private changeDetRef: ChangeDetectorRef,
     ) {
         this.loading = true;
         this.loadOrg();
@@ -60,10 +62,14 @@ export class UserCreateComponent implements OnDestroy {
             this.userLoginMustBeDomain = iampolicy.toObject().userLoginMustBeDomain;
             this.initForm();
             this.loading = false;
+            this.envSuffixLabel = this.envSuffix();
+            this.changeDetRef.detectChanges();
         }).catch(error => {
             console.error(error);
             this.initForm();
             this.loading = false;
+            this.envSuffixLabel = this.envSuffix();
+            this.changeDetRef.detectChanges();
         });
     }
 
@@ -92,6 +98,11 @@ export class UserCreateComponent implements OnDestroy {
             preferredLanguage: [''],
             phone: [''],
         });
+
+    }
+
+    public logsuff(): void {
+        console.log((this.suffix.nativeElement as HTMLElement), (this.suffix.nativeElement as HTMLElement).offsetWidth);
     }
 
     public createUser(): void {
@@ -123,7 +134,6 @@ export class UserCreateComponent implements OnDestroy {
     }
 
     ngOnDestroy(): void {
-
         this.sub.unsubscribe();
     }
 
@@ -167,11 +177,17 @@ export class UserCreateComponent implements OnDestroy {
         return this.userForm.get('country');
     }
 
-    public get envSuffix(): string {
+    private envSuffix(): string {
         if (this.userLoginMustBeDomain && this.primaryDomain?.domain) {
             return `@${this.primaryDomain.domain}`;
         } else {
             return '';
         }
     }
+
+    public get suffixPadding(): string | undefined {
+        if (this.suffix?.nativeElement.offsetWidth) {
+            return `${(this.suffix.nativeElement as HTMLElement).offsetWidth + 10}px`;
+        }
+    }
 }