fix(console): create user route, common mixin for app grid, avatar (#505)

* warn color, move themed conf to destination

* fix user creation

* cleanup create component

console/src/app/modules/avatar/avatar.component.scss

@@ -1,15 +1,23 @@
-:host {
-    display: block;
-}
 
-.avatar-circle {
+@import '~@angular/material/theming';
+
+@mixin avatar-theme($theme) {
+    $primary: map-get($theme, primary);
+    $primary-color: mat-color($primary, 500);
+
+    .avatar-circle {
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         text-transform: uppercase;
+        background-color: $primary-color;
+        box-sizing: border-box;
+        outline: none;
+        color: white;
 
         &.active:hover  {
             border: 2px solid #8795a1;
         }
+    }
 }

console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html

@@ -1,4 +1,4 @@
-<div class="header">
+<div class="app-grid-header">
     <h3>{{'APP.LIST' | translate}}</h3>
     <span class="fill-space"></span>
     <button mat-icon-button (click)="closeView()">

console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss

@@ -1,13 +1,21 @@
-.header {
+@import '~@angular/material/theming';
+
+@mixin application-grid-theme($theme) {
+    $primary: map-get($theme, primary);
+    $primary-dark: mat-color($primary, A900);
+    $accent: map-get($theme, accent);
+    $accent-color: mat-color($accent, 500);
+
+    .app-grid-header {
         display: flex;
         align-items: center;
 
         .fill-space {
             flex: 1;
         }
-}
+    }
 
-.app-container {
+    .app-container {
         display: flex;
         flex-wrap: wrap;
         margin: 0 -1rem;
@@ -21,10 +29,23 @@
             max-width: 150px;
 
             .morph-card {
+                cursor: pointer;
+                animation: all .2s;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 font-size: 2rem;
+                height: 80px;
+                width: 80px;
+                margin: 1rem;
+                border-radius: .5rem;
+                border: 1px solid $accent-color;
+                background-color: $primary-dark;
+                transition: background-color .4s ease-in-out;
+
+                &.add {
+                    background: $accent-color;
+                }
             }
 
             .name {
@@ -32,4 +53,5 @@
                 color: #8a868a;
             }
         }
+    }
 }

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html

@@ -15,10 +15,10 @@
 
             <span class="fill-space"></span>
 
-            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+            <button mat-stroked-button color="warn" [disabled]="isZitadel"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
                 (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
-            <button mat-stroked-button color="accent" [disabled]="isZitadel"
+            <button mat-stroked-button color="warn" [disabled]="isZitadel"
                 *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
                 (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
 

console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html

@@ -27,10 +27,10 @@
                 <span class="fill-space"></span>
 
                 <div>
-                    <button mat-stroked-button color="accent"
+                    <button mat-stroked-button color="warn"
                         *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE" class="state-button"
                         (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
-                    <button mat-stroked-button color="accent"
+                    <button mat-stroked-button color="warn"
                         *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE" class="state-button"
                         (click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
                 </div>

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

@@ -90,44 +90,9 @@
                             {{ 'USER.VALIDATION.REQUIRED' | translate }}
                         </mat-error>
                     </mat-form-field>
-                    <!-- <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
-                        <input matInput formControlName="streetAddress" />
-                        <mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.POSTAL_CODE' | translate }}</mat-label>
-                        <input matInput formControlName="postalCode" />
-                        <mat-error *ngIf="postalCode?.invalid && postalCode?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.LOCALITY' | translate }}</mat-label>
-                        <input matInput formControlName="locality" />
-                        <mat-error *ngIf="locality?.invalid && locality?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.REGION' | translate }}</mat-label>
-                        <input matInput formControlName="region" />
-                        <mat-error *ngIf="region?.invalid && region?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field>
-                    <mat-form-field class="formfield">
-                        <mat-label>{{ 'USER.ADDRESS.COUNTRY' | translate }}</mat-label>
-                        <input matInput formControlName="country" />
-                        <mat-error *ngIf="country?.invalid && country?.errors?.required">
-                            {{ 'USER.VALIDATION.REQUIRED' | translate }}
-                        </mat-error>
-                    </mat-form-field> -->
                 </div>
                 <div class="btn-container">
-                    <button color="accent" [disabled]="userForm.invalid" type="submit"
+                    <button color="primary" [disabled]="userForm.invalid" type="submit"
                         mat-raised-button>{{ 'ACTIONS.CREATE' | translate }}</button>
                 </div>
             </form>

console/src/app/pages/users/user-detail/user-detail-routing.module.ts

@@ -8,6 +8,14 @@ import { PasswordComponent } from './password/password.component';
 import { UserDetailComponent } from './user-detail/user-detail.component';
 
 const routes: Routes = [
+    {
+        path: 'create',
+        loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule),
+        canActivate: [AuthGuard, RoleGuard],
+        data: {
+            roles: ['user.write'],
+        },
+    },
     {
         path: 'me',
         component: AuthUserDetailComponent,

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -9,10 +9,10 @@
             <span class="fill-space"></span>
 
             <ng-template appHasRole [appHasRole]="['user.write', 'user.write:'+user?.id]">
-                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
+                <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_ACTIVE"
                     class="state-button"
                     (click)="changeState(UserState.USERSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' | translate}}</button>
-                <button mat-stroked-button color="accent" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
+                <button mat-stroked-button color="warn" *ngIf="user?.state === UserState.USERSTATE_INACTIVE"
                     class="state-button"
                     (click)="changeState(UserState.USERSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' | translate}}</button>
             </ng-template>

console/src/app/pages/users/user-list/user-list-routing.module.ts

@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from 'src/app/guards/auth.guard';
-import { RoleGuard } from 'src/app/guards/role.guard';
 
 import { UserListComponent } from './user-list.component';
 
@@ -12,14 +10,6 @@ const routes: Routes = [
         component: UserListComponent,
         data: { animation: 'HomePage' },
     },
-    {
-        path: 'create',
-        loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule),
-        canActivate: [AuthGuard, RoleGuard],
-        data: {
-            roles: ['user.write'],
-        },
-    },
 ];
 
 @NgModule({

console/src/component-themes.scss

@@ -1,9 +1,9 @@
 @import './styles/card';
 @import './styles/table';
 @import './styles/sidenav-list';
-@import './styles/morph-card';
+@import 'src/app/modules/avatar/avatar.component';
 @import './styles/changes';
-@import './styles/avatar';
+@import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
 @import './styles/meta';
 @import './styles/theme-card';
 
@@ -12,7 +12,7 @@
     @include card-theme($theme);
     @include table-theme($theme);
     @include sidenav-list-theme($theme);
-    @include morph-card-theme($theme);
+    @include application-grid-theme($theme);
     @include changes-theme($theme);
     @include meta-theme($theme);
     @include theme-card($theme);

console/src/styles/avatar.scss

@@ -1,19 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin avatar-theme($theme) {
-    $accent: map-get($theme, accent);
-    $background: map-get($theme, background);
-    $background-color: mat-color($background, card);
-    $primary: map-get($theme, primary);
-    $primary-color: mat-color($primary, 500);
-    $primary-dark: mat-color($primary, A800);
-    $border-color: mat-color($primary, A700);
-    $border-selected-color: mat-color($primary, A600);
-
-    .avatar-circle {
-        background-color: $primary-color;
-        box-sizing: border-box;
-        outline: none;
-        color: white;
-    }
-}

console/src/styles/morph-card.scss

@@ -1,29 +0,0 @@
-@import '~@angular/material/theming';
-
-@mixin morph-card-theme($theme) {
-    $accent: map-get($theme, accent);
-    $background: map-get($theme, background);
-    $background-color: mat-color($background, card);
-    $primary: map-get($theme, primary);
-    $primary-dark: mat-color($primary, A900);
-    $secondary-dark: mat-color($primary, A800);
-    $accent: map-get($theme, accent);
-    $accent-color: mat-color($accent, 500);
-
-    .morph-card {
-        cursor: pointer;
-        animation: all .2s;
-        height: 80px;
-        width: 80px;
-        margin: 1rem;
-        border-radius: 16px;
-        border: 1px solid $accent-color;
-        background-color: $primary-dark;
-        transition: background-color .4s ease-in-out;
-
-
-        &.add {
-            background: $accent-color;
-        }
-    }
-}