TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 21:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* warn color, move themed conf to destination

* fix user creation

* cleanup create component
This commit is contained in:
Max Peintner
2020-07-22 14:40:37 +02:00
committed by GitHub
parent c66d9d3490
commit 7dcc5f9e58
12 changed files with 85 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
console/src/app/modules/avatar/avatar.component.scss
View File

@@ -1,15 +1,23 @@
:host {
display: block;
}
.avatar-circle {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
@import '~@angular/material/theming';
&.active:hover {
border: 2px solid #8795a1;
@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;
}
}
}

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

@@ -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()">

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

@@ -1,35 +1,57 @@
.header {
display: flex;
align-items: center;
@import '~@angular/material/theming';
.fill-space {
flex: 1;
}
}
@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-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.app-wrap {
outline: none;
.app-grid-header {
display: flex;
flex-direction: column;
align-items: center;
max-width: 150px;
.morph-card {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
.fill-space {
flex: 1;
}
}
.name {
font-size: .8rem;
color: #8a868a;
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.app-wrap {
outline: none;
display: flex;
flex-direction: column;
align-items: center;
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 {
font-size: .8rem;
color: #8a868a;
}
}
}
}

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

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

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

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

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

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

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

@@ -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,

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

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

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

@@ -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({

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

@@ -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);

19
console/src/styles/avatar.scss
View File

@@ -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;
}
}

29
console/src/styles/morph-card.scss
View File

@@ -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;
}
}
}