mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-31 03:22:15 +00:00
feat(console): add stylelint scss, app redirecturi validation, user grant api change (#531)
* add custom validator for redirect inputs * change http pattern, i18n * throw out deprecated usergrant functions * remove deprecation service * show docs in app detail * reorder data promises * show redirect desc in app detail * custom validator * grant search filters * rm animations * add validation to app detail * user grant udpate * rm grantid from update req * fix project member guard * fix hasrole directive * show validation errors, i18n * fix router link from org members * navitem padding * mobile layout * policy grid mobile layout * rm unused background * lint * add stylelinter add to pipeline * update stylelint rules * lint unknown rule * disable enable rules * lint * table style lint * table classes * fix stylelinter rule, lint * overflow fix member detail * common detail page * user create, password, project grant detail clnup * move meta styles * lint * password policy indicator * lint * fix org create * common component for complexity view * lint * user grant filter * 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/en.json Co-authored-by: Florian Forster <[email protected]> Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Florian Forster
Florian Forster
parent
8d1725a81d
commit
22ba33c2ef
+42
@@ -0,0 +1,42 @@
|
||||
<div class="validation-col" *ngIf="this.policy">
|
||||
<div class="val" *ngIf="this.policy.minLength">
|
||||
|
||||
<i *ngIf="password?.value?.length == 0; else showSpinner" class="las la-times red"></i>
|
||||
|
||||
<ng-template #showSpinner>
|
||||
<div *ngIf="(password?.errors?.minlength || password?.value?.length == 0) as currentError; else trueminlength"
|
||||
class="sp-wrapper">
|
||||
<mat-progress-spinner class="spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
|
||||
mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
|
||||
</mat-progress-spinner>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #trueminlength>
|
||||
<i class="las la-check green"></i>
|
||||
</ng-template>
|
||||
|
||||
<span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: password?.value?.length} }}
|
||||
({{password?.value?.length}}/{{ policy.minLength}})
|
||||
</span>
|
||||
</div>
|
||||
<div class="val" *ngIf="this.policy.hasSymbol">
|
||||
<i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
|
||||
<i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
|
||||
<span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
|
||||
</div>
|
||||
<div class="val" *ngIf="this.policy.hasNumber">
|
||||
<i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
|
||||
<i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
|
||||
<span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
|
||||
</div>
|
||||
<div class="val" *ngIf="this.policy.hasUppercase">
|
||||
<i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
|
||||
<i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
|
||||
<span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
|
||||
</div>
|
||||
<div class="val" *ngIf="this.policy.hasLowercase">
|
||||
<i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
|
||||
<i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
|
||||
<span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
|
||||
.validation-col {
|
||||
display: flex wrap;
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
|
||||
&.between {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.val {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-basis: 50%;
|
||||
padding: 2px 0;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #8795a1;
|
||||
}
|
||||
|
||||
.sp-wrapper {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-right: 1rem;
|
||||
|
||||
i {
|
||||
font-size: .9rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.spinner[color='valid'] {
|
||||
color: #56a392;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 1rem;
|
||||
font-size: 20px;
|
||||
|
||||
&.green {
|
||||
color: #56a392;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #f44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PasswordComplexityViewComponent } from './password-complexity-view.component';
|
||||
|
||||
describe('PasswordComplexityViewComponent', () => {
|
||||
let component: PasswordComplexityViewComponent;
|
||||
let fixture: ComponentFixture<PasswordComplexityViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [PasswordComplexityViewComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PasswordComplexityViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { PasswordComplexityPolicy } from 'src/app/proto/generated/management_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'app-password-complexity-view',
|
||||
templateUrl: './password-complexity-view.component.html',
|
||||
styleUrls: ['./password-complexity-view.component.scss'],
|
||||
})
|
||||
export class PasswordComplexityViewComponent implements OnInit {
|
||||
@Input() public password!: FormControl;
|
||||
@Input() public policy!: PasswordComplexityPolicy.AsObject;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
import { PasswordComplexityViewComponent } from './password-complexity-view.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [PasswordComplexityViewComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatProgressSpinnerModule,
|
||||
TranslateModule,
|
||||
FormsModule,
|
||||
],
|
||||
exports: [
|
||||
PasswordComplexityViewComponent,
|
||||
],
|
||||
})
|
||||
export class PasswordComplexityViewModule { }
|
||||
Reference in New Issue
Block a user