mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-15 18:25:13 +00:00
fix(console): new colorpicker, remove icons logo font (#1826)
* custom color picker, delete font * delete asset, i18n * escape deep styles * ts, proto * remove fallback img, color clickable, remove font * stylelint * fix spinner * fix deprecated chipinput.input * improve logo on login * fix qr code * always use black on white for qr code * fix header and footer css Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Livio Amstutz
Livio Amstutz
parent
255139862d
commit
59af02b2f3
+148
-148
@@ -1,14 +1,14 @@
|
||||
import { COMMA, ENTER } from '@angular/cdk/keycodes';
|
||||
import {
|
||||
AfterContentChecked,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
AfterContentChecked,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
||||
@@ -22,163 +22,163 @@ import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
export enum UserTarget {
|
||||
SELF = 'self',
|
||||
EXTERNAL = 'external',
|
||||
SELF = 'self',
|
||||
EXTERNAL = 'external',
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-user-autocomplete',
|
||||
templateUrl: './search-user-autocomplete.component.html',
|
||||
styleUrls: ['./search-user-autocomplete.component.scss'],
|
||||
selector: 'app-search-user-autocomplete',
|
||||
templateUrl: './search-user-autocomplete.component.html',
|
||||
styleUrls: ['./search-user-autocomplete.component.scss'],
|
||||
})
|
||||
export class SearchUserAutocompleteComponent implements OnInit, AfterContentChecked {
|
||||
public selectable: boolean = true;
|
||||
public removable: boolean = true;
|
||||
public addOnBlur: boolean = true;
|
||||
public separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
public selectable: boolean = true;
|
||||
public removable: boolean = true;
|
||||
public addOnBlur: boolean = true;
|
||||
public separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
|
||||
public myControl: FormControl = new FormControl();
|
||||
public globalLoginNameControl: FormControl = new FormControl();
|
||||
public myControl: FormControl = new FormControl();
|
||||
public globalLoginNameControl: FormControl = new FormControl();
|
||||
|
||||
public loginNames: string[] = [];
|
||||
@Input() public users: Array<User.AsObject> = [];
|
||||
public filteredUsers: Array<User.AsObject> = [];
|
||||
public isLoading: boolean = false;
|
||||
@Input() public target: UserTarget = UserTarget.SELF;
|
||||
public hint: string = '';
|
||||
public UserTarget: any = UserTarget;
|
||||
@ViewChild('usernameInput') public usernameInput!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
|
||||
@Output() public selectionChanged: EventEmitter<User.AsObject | User.AsObject[]> = new EventEmitter();
|
||||
@Input() public singleOutput: boolean = false;
|
||||
public loginNames: string[] = [];
|
||||
@Input() public users: Array<User.AsObject> = [];
|
||||
public filteredUsers: Array<User.AsObject> = [];
|
||||
public isLoading: boolean = false;
|
||||
@Input() public target: UserTarget = UserTarget.SELF;
|
||||
public hint: string = '';
|
||||
public UserTarget: any = UserTarget;
|
||||
@ViewChild('usernameInput') public usernameInput!: ElementRef<HTMLInputElement>;
|
||||
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
|
||||
@Output() public selectionChanged: EventEmitter<User.AsObject | User.AsObject[]> = new EventEmitter();
|
||||
@Input() public singleOutput: boolean = false;
|
||||
|
||||
private unsubscribed$: Subject<void> = new Subject();
|
||||
constructor(private userService: ManagementService, private toast: ToastService, private cdref: ChangeDetectorRef) { }
|
||||
private unsubscribed$: Subject<void> = new Subject();
|
||||
constructor(private userService: ManagementService, private toast: ToastService, private cdref: ChangeDetectorRef) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
if (this.target === UserTarget.EXTERNAL) {
|
||||
this.filteredUsers = [];
|
||||
this.unsubscribed$.next(); // clear old subscription
|
||||
} else if (this.target === UserTarget.SELF) {
|
||||
this.getFilteredResults(); // new subscription
|
||||
}
|
||||
public ngOnInit(): void {
|
||||
if (this.target === UserTarget.EXTERNAL) {
|
||||
this.filteredUsers = [];
|
||||
this.unsubscribed$.next(); // clear old subscription
|
||||
} else if (this.target === UserTarget.SELF) {
|
||||
this.getFilteredResults(); // new subscription
|
||||
}
|
||||
}
|
||||
|
||||
public ngAfterContentChecked(): void {
|
||||
this.cdref.detectChanges();
|
||||
}
|
||||
public ngAfterContentChecked(): void {
|
||||
this.cdref.detectChanges();
|
||||
}
|
||||
|
||||
private getFilteredResults(): void {
|
||||
this.myControl.valueChanges.pipe(debounceTime(200),
|
||||
takeUntil(this.unsubscribed$),
|
||||
tap(() => this.isLoading = true),
|
||||
switchMap(value => {
|
||||
const query = new SearchQuery();
|
||||
private getFilteredResults(): void {
|
||||
this.myControl.valueChanges.pipe(debounceTime(200),
|
||||
takeUntil(this.unsubscribed$),
|
||||
tap(() => this.isLoading = true),
|
||||
switchMap(value => {
|
||||
const query = new SearchQuery();
|
||||
|
||||
const unQuery = new UserNameQuery();
|
||||
unQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
|
||||
unQuery.setUserName(value);
|
||||
const unQuery = new UserNameQuery();
|
||||
unQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
|
||||
unQuery.setUserName(value);
|
||||
|
||||
query.setUserNameQuery(unQuery);
|
||||
query.setUserNameQuery(unQuery);
|
||||
|
||||
if (this.target === UserTarget.SELF) {
|
||||
return from(this.userService.listUsers(10, 0, [query]));
|
||||
} else {
|
||||
return of();
|
||||
}
|
||||
}),
|
||||
).subscribe((userresp: ListUsersResponse.AsObject | unknown) => {
|
||||
this.isLoading = false;
|
||||
if (this.target === UserTarget.SELF && userresp) {
|
||||
this.filteredUsers = (userresp as ListUsersResponse.AsObject).resultList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public displayFn(user?: User.AsObject): string | undefined {
|
||||
return user ? `${user.preferredLoginName}` : undefined;
|
||||
}
|
||||
|
||||
public add(event: MatChipInputEvent): void {
|
||||
if (!this.matAutocomplete.isOpen) {
|
||||
const input = event.input;
|
||||
const value = event.value;
|
||||
|
||||
if ((value || '').trim()) {
|
||||
const index = this.filteredUsers.findIndex((user) => {
|
||||
if (user.preferredLoginName) {
|
||||
return user.preferredLoginName === value;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
if (this.users && this.users.length > 0) {
|
||||
this.users.push(this.filteredUsers[index]);
|
||||
} else {
|
||||
this.users = [this.filteredUsers[index]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public remove(user: User.AsObject): void {
|
||||
const index = this.users.indexOf(user);
|
||||
|
||||
if (index >= 0) {
|
||||
this.users.splice(index, 1);
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
}
|
||||
|
||||
public selected(event: MatAutocompleteSelectedEvent): void {
|
||||
const index = this.filteredUsers.findIndex((user) => user === event.option.value);
|
||||
if (index !== -1) {
|
||||
if (this.singleOutput) {
|
||||
this.selectionChanged.emit(this.filteredUsers[index]);
|
||||
} else {
|
||||
if (this.users && this.users.length > 0) {
|
||||
this.users.push(this.filteredUsers[index]);
|
||||
} else {
|
||||
this.users = [this.filteredUsers[index]];
|
||||
}
|
||||
|
||||
if (this.singleOutput) {
|
||||
this.selectionChanged.emit(this.users[0]);
|
||||
} else {
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
this.usernameInput.nativeElement.value = '';
|
||||
this.myControl.setValue(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public changeTarget(): void {
|
||||
if (this.target === UserTarget.SELF) {
|
||||
this.target = UserTarget.EXTERNAL;
|
||||
this.filteredUsers = [];
|
||||
this.unsubscribed$.next(); // clear old subscription
|
||||
} else if (this.target === UserTarget.EXTERNAL) {
|
||||
this.target = UserTarget.SELF;
|
||||
this.getFilteredResults(); // new subscription
|
||||
return from(this.userService.listUsers(10, 0, [query]));
|
||||
} else {
|
||||
return of();
|
||||
}
|
||||
}
|
||||
}),
|
||||
).subscribe((userresp: ListUsersResponse.AsObject | unknown) => {
|
||||
this.isLoading = false;
|
||||
if (this.target === UserTarget.SELF && userresp) {
|
||||
this.filteredUsers = (userresp as ListUsersResponse.AsObject).resultList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public getGlobalUser(): void {
|
||||
this.userService.getUserByLoginNameGlobal(this.globalLoginNameControl.value).then(resp => {
|
||||
if (this.singleOutput && resp.user) {
|
||||
this.users = [resp.user];
|
||||
this.selectionChanged.emit(this.users[0]);
|
||||
} else if (resp.user) {
|
||||
this.users.push(resp.user);
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
public displayFn(user?: User.AsObject): string | undefined {
|
||||
return user ? `${user.preferredLoginName}` : undefined;
|
||||
}
|
||||
|
||||
public add(event: MatChipInputEvent): void {
|
||||
if (!this.matAutocomplete.isOpen) {
|
||||
const input = event.chipInput?.inputElement;
|
||||
const value = event.value;
|
||||
|
||||
if ((value || '').trim()) {
|
||||
const index = this.filteredUsers.findIndex((user) => {
|
||||
if (user.preferredLoginName) {
|
||||
return user.preferredLoginName === value;
|
||||
}
|
||||
});
|
||||
if (index > -1) {
|
||||
if (this.users && this.users.length > 0) {
|
||||
this.users.push(this.filteredUsers[index]);
|
||||
} else {
|
||||
this.users = [this.filteredUsers[index]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (input) {
|
||||
input.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public remove(user: User.AsObject): void {
|
||||
const index = this.users.indexOf(user);
|
||||
|
||||
if (index >= 0) {
|
||||
this.users.splice(index, 1);
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
}
|
||||
|
||||
public selected(event: MatAutocompleteSelectedEvent): void {
|
||||
const index = this.filteredUsers.findIndex((user) => user === event.option.value);
|
||||
if (index !== -1) {
|
||||
if (this.singleOutput) {
|
||||
this.selectionChanged.emit(this.filteredUsers[index]);
|
||||
} else {
|
||||
if (this.users && this.users.length > 0) {
|
||||
this.users.push(this.filteredUsers[index]);
|
||||
} else {
|
||||
this.users = [this.filteredUsers[index]];
|
||||
}
|
||||
|
||||
if (this.singleOutput) {
|
||||
this.selectionChanged.emit(this.users[0]);
|
||||
} else {
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
this.usernameInput.nativeElement.value = '';
|
||||
this.myControl.setValue(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public changeTarget(): void {
|
||||
if (this.target === UserTarget.SELF) {
|
||||
this.target = UserTarget.EXTERNAL;
|
||||
this.filteredUsers = [];
|
||||
this.unsubscribed$.next(); // clear old subscription
|
||||
} else if (this.target === UserTarget.EXTERNAL) {
|
||||
this.target = UserTarget.SELF;
|
||||
this.getFilteredResults(); // new subscription
|
||||
}
|
||||
}
|
||||
|
||||
public getGlobalUser(): void {
|
||||
this.userService.getUserByLoginNameGlobal(this.globalLoginNameControl.value).then(resp => {
|
||||
if (this.singleOutput && resp.user) {
|
||||
this.users = [resp.user];
|
||||
this.selectionChanged.emit(this.users[0]);
|
||||
} else if (resp.user) {
|
||||
this.users.push(resp.user);
|
||||
this.selectionChanged.emit(this.users);
|
||||
}
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user