mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-27 09:42:16 +00:00
feat: console flat navigation, settings (#3581)
* instance routing * instance naming * org list * rm isonsystem * breadcrumb type * routing * instance members * fragment refresh org * settings pages * settings list, sidenav grouping, i18n * org-settings, policy changes * lint * grid * rename grid * fallback to general * cleanup * general settings, remove cards * sidenav for settings, label policy * i18n * header, nav backbuild * general, project nav rehaul * login text background adapt * org nav anim * org, instance settings, fix policy layout, roles * i18n, active route for project * lint
This commit is contained in:
Max Peintner
@@ -0,0 +1,62 @@
|
||||
export interface SettingLinks {
|
||||
i18nTitle: string;
|
||||
i18nDesc: string;
|
||||
iamRouterLink: any;
|
||||
orgRouterLink: any;
|
||||
queryParams: any;
|
||||
iamWithRole: string[];
|
||||
orgWithRole: string[];
|
||||
icon?: string;
|
||||
svgIcon?: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export const LOGIN_GROUP: SettingLinks = {
|
||||
i18nTitle: 'SETTINGS.GROUPS.LOGIN',
|
||||
i18nDesc: 'POLICY.LOGIN_POLICY.DESCRIPTION',
|
||||
iamRouterLink: ['/settings'],
|
||||
orgRouterLink: ['/org-settings'],
|
||||
queryParams: { id: 'login' },
|
||||
iamWithRole: ['iam.policy.read'],
|
||||
orgWithRole: ['policy.read'],
|
||||
icon: 'las la-sign-in-alt',
|
||||
color: 'green',
|
||||
};
|
||||
|
||||
export const APPEARANCE_GROUP: SettingLinks = {
|
||||
i18nTitle: 'SETTINGS.GROUPS.APPEARANCE',
|
||||
i18nDesc: 'POLICY.PRIVATELABELING.DESCRIPTION',
|
||||
iamRouterLink: ['/settings'],
|
||||
orgRouterLink: ['/org-settings'],
|
||||
queryParams: { id: 'branding' },
|
||||
iamWithRole: ['iam.policy.read'],
|
||||
orgWithRole: ['policy.read'],
|
||||
icon: 'las la-swatchbook',
|
||||
color: 'blue',
|
||||
};
|
||||
|
||||
export const PRIVACY_POLICY: SettingLinks = {
|
||||
i18nTitle: 'SETTINGS.LIST.PRIVACYPOLICY',
|
||||
i18nDesc: 'POLICY.PRIVACY_POLICY.DESCRIPTION',
|
||||
iamRouterLink: ['/settings'],
|
||||
orgRouterLink: ['/org-settings'],
|
||||
queryParams: { id: 'privacypolicy' },
|
||||
iamWithRole: ['iam.policy.read'],
|
||||
orgWithRole: ['policy.read'],
|
||||
icon: 'las la-file-contract',
|
||||
color: 'black',
|
||||
};
|
||||
|
||||
export const NOTIFICATION_GROUP: SettingLinks = {
|
||||
i18nTitle: 'SETTINGS.GROUPS.NOTIFICATIONS',
|
||||
i18nDesc: '',
|
||||
iamRouterLink: ['/settings'],
|
||||
orgRouterLink: ['/org-settings'],
|
||||
queryParams: { id: 'notifications' },
|
||||
iamWithRole: ['iam.policy.read'],
|
||||
orgWithRole: ['policy.read'],
|
||||
icon: 'las la-bell',
|
||||
color: 'red',
|
||||
};
|
||||
|
||||
export const SETTINGLINKS: SettingLinks[] = [LOGIN_GROUP, APPEARANCE_GROUP, PRIVACY_POLICY, NOTIFICATION_GROUP];
|
||||
@@ -0,0 +1,50 @@
|
||||
<h2>{{ 'POLICY.TITLE' | translate }}</h2>
|
||||
|
||||
<p class="top-desc cnsl-secondary-text">{{ 'POLICY.DESCRIPTION' | translate }}</p>
|
||||
|
||||
<div class="row-lyt" [ngClass]="{ more: type === PolicyComponentServiceType.ADMIN }">
|
||||
<ng-container *ngFor="let setting of SETTINGS">
|
||||
<ng-template
|
||||
cnslHasRole
|
||||
[hasRole]="
|
||||
type === PolicyComponentServiceType.ADMIN
|
||||
? setting.iamWithRole
|
||||
: type === PolicyComponentServiceType.MGMT
|
||||
? setting.orgWithRole
|
||||
: []
|
||||
"
|
||||
>
|
||||
<div class="p-item card" @policy [attr.data-e2e]="'policy-card'">
|
||||
<div class="avatar {{ setting.color }}">
|
||||
<mat-icon *ngIf="setting.svgIcon" class="mat-icon" [svgIcon]="setting.svgIcon"></mat-icon>
|
||||
<i *ngIf="setting.icon" class="icon {{ setting.icon }}"></i>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span>{{ setting.i18nTitle | translate }}</span>
|
||||
</div>
|
||||
|
||||
<p class="desc cnsl-secondary-text">
|
||||
{{ setting.i18nDesc ? (setting.i18nDesc | translate) : '' }}
|
||||
</p>
|
||||
|
||||
<span class="fill-space"></span>
|
||||
|
||||
<div class="btn-wrapper">
|
||||
<a
|
||||
[routerLink]="
|
||||
type === PolicyComponentServiceType.ADMIN
|
||||
? setting.iamRouterLink
|
||||
: type === PolicyComponentServiceType.MGMT
|
||||
? setting.orgRouterLink
|
||||
: null
|
||||
"
|
||||
[queryParams]="setting.queryParams"
|
||||
mat-stroked-button
|
||||
>
|
||||
{{ 'POLICY.BTN_EDIT' | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</div>
|
||||
@@ -0,0 +1,142 @@
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.top-desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.row-lyt {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
margin-top: 1.5rem;
|
||||
row-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
@media only screen and (max-width: 1300px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&.more {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
|
||||
@media only screen and (max-width: 1300px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 850px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.p-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 250px;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media only screen and (max-width: 450px) {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #7b8ada);
|
||||
|
||||
&.purple {
|
||||
background: linear-gradient(40deg, #7c3aed 30%, #6d28d9);
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: linear-gradient(40deg, #dc2626 30%, #db2777);
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: linear-gradient(40deg, #059669 30%, #047857);
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background: linear-gradient(40deg, #f59e0b 30%, #b45309);
|
||||
}
|
||||
|
||||
&.black {
|
||||
background: linear-gradient(40deg, #1f2937, #111827);
|
||||
}
|
||||
|
||||
.mat-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon,
|
||||
i {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SettingsGridComponent } from './settings-grid.component';
|
||||
|
||||
describe('SettingsGridComponent', () => {
|
||||
let component: SettingsGridComponent;
|
||||
let fixture: ComponentFixture<SettingsGridComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [SettingsGridComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SettingsGridComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import { animate, style, transition, trigger } from '@angular/animations';
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
|
||||
|
||||
import { SETTINGLINKS, SettingLinks } from './settinglinks';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-settings-grid',
|
||||
templateUrl: './settings-grid.component.html',
|
||||
styleUrls: ['./settings-grid.component.scss'],
|
||||
animations: [
|
||||
trigger('policy', [
|
||||
transition(':enter', [
|
||||
style({
|
||||
opacity: 0.5,
|
||||
}),
|
||||
animate(
|
||||
'.15s ease-in-out',
|
||||
style({
|
||||
opacity: 1,
|
||||
}),
|
||||
),
|
||||
]),
|
||||
transition(':leave', [
|
||||
style({
|
||||
opacity: 1,
|
||||
}),
|
||||
animate(
|
||||
'.15s ease-in-out',
|
||||
style({
|
||||
opacity: 0.5,
|
||||
}),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class SettingsGridComponent {
|
||||
@Input() public type!: PolicyComponentServiceType;
|
||||
@Input() public tag: string = '';
|
||||
public PolicyComponentServiceType: any = PolicyComponentServiceType;
|
||||
public SETTINGS: SettingLinks[] = SETTINGLINKS;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
|
||||
import { InfoSectionModule } from '../info-section/info-section.module';
|
||||
import { SettingsGridComponent } from './settings-grid.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [SettingsGridComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
HasRolePipeModule,
|
||||
HasRoleModule,
|
||||
TranslateModule,
|
||||
RouterModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
InfoSectionModule,
|
||||
],
|
||||
exports: [SettingsGridComponent],
|
||||
})
|
||||
export class SettingsGridModule {}
|
||||
Reference in New Issue
Block a user