mirror of
https://github.com/zitadel/zitadel.git
synced 2025-02-28 16:17:23 +00:00
feat: docs rehaul, fix missing context in console, quickstarts (#1212)
* onboarding components, routing, steps * onboarding component, toc * fix onboarding mixin * header * refactor docs * fix layout * cleanup routing * docs routing * fix conventions * de en routing * docs, guide contents, nav * rem i18n support * fix routing from docs * rollup onwarn changes, preload * update svelte plugin, update rollup config * move docs * revert img style, remove code table * rem de completely * rollup optim, template * angular quickstart, quickstart overview page, update deps * fix link * pack, slug * prefetch binding, hidden links * export log * guards route ch * fix homepage * angular docs * docs * resolve fsh * overview * docs * docs * packages fix race condition * nav, home link * add vue, aspnet * doc optimizations * embed status pal * angular guide * angular guide * dotnet, angular guide * viewbox * typo * block onboarding route for non iam writers * set links from component data * fix: fetch org context in guard, more main cnt (#1192) * change get started guide, fix code blockquotes, typos * flutter guide * h2 spacing * highlight strong * plus * rm start sublinks * add proxy quickstart * regex * prevent outside click, fix project grant write Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
GitHub
parent
30a06e5bec
commit
27be460c07
@ -11,6 +11,15 @@ const routes: Routes = [
|
|||||||
loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
|
loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
|
||||||
canActivate: [AuthGuard],
|
canActivate: [AuthGuard],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'firststeps',
|
||||||
|
loadChildren: () => import('./modules/onboarding/onboarding.module')
|
||||||
|
.then(m => m.OnboardingModule),
|
||||||
|
canActivate: [AuthGuard, RoleGuard],
|
||||||
|
data: {
|
||||||
|
roles: ['iam.write'],
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'granted-projects',
|
path: 'granted-projects',
|
||||||
loadChildren: () => import('./pages/projects/granted-projects/granted-projects.module')
|
loadChildren: () => import('./pages/projects/granted-projects/granted-projects.module')
|
||||||
|
|||||||
@ -1,19 +1,25 @@
|
|||||||
<ng-container *ngIf="(authService.user | async) || {} as user">
|
<ng-container *ngIf="(authService.user | async) || {} as user">
|
||||||
<ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
|
<ng-container *ngIf="((['iam.read$','iam.write$'] | hasRole)) as iamuser$">
|
||||||
<mat-toolbar class="root-header">
|
<mat-toolbar class="root-header">
|
||||||
<button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
|
<button *ngIf="authenticationService.authenticated" aria-label="Toggle sidenav" mat-icon-button
|
||||||
|
(click)="drawer.toggle()">
|
||||||
<i class="icon las la-bars"></i>
|
<i class="icon las la-bars"></i>
|
||||||
</button>
|
</button>
|
||||||
<a *ngIf="(isHandset$ | async) == false" class="title" [routerLink]="['/']">
|
<a class="title" [routerLink]="['/']">
|
||||||
<img class="logo" alt="zitadel logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
|
<img class="logo" alt="zitadel logo" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
|
||||||
src="../assets/images/zitadel-logo-light.svg" />
|
src="../assets/images/zitadel-logo-solo-light.svg" />
|
||||||
<ng-template #lighttheme>
|
<ng-template #lighttheme>
|
||||||
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-dark.svg" />
|
<img alt="zitadel logo" class="logo" src="../assets/images/zitadel-logo-solo-dark.svg" />
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<button (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button [matMenuTriggerFor]="menu"
|
<svg class="slash" viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="1"
|
||||||
(menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
|
stroke-linecap="round" stroke-linejoin="round" fill="none" shape-rendering="geometricPrecision">
|
||||||
|
<path d="M16.88 3.549L7.12 20.451"></path>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<button class="org-button" (click)="loadOrgs()" *ngIf="profile?.id && org" mat-button
|
||||||
|
[matMenuTriggerFor]="menu" (menuOpened)="focusFilter()">{{org?.name ? org.name : 'NO NAME'}}
|
||||||
<mat-icon>
|
<mat-icon>
|
||||||
arrow_drop_down</mat-icon>
|
arrow_drop_down</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
@ -37,8 +43,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="show-all" mat-menu-item
|
<button class="show-all" mat-menu-item [routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' |
|
||||||
[routerLink]="[ '/org/overview' ]">{{'MENU.SHOWORGS' | translate}}</button>
|
translate}}</button>
|
||||||
|
|
||||||
<ng-template appHasRole [appHasRole]="['org.create','iam.write']">
|
<ng-template appHasRole [appHasRole]="['org.create','iam.write']">
|
||||||
<button mat-menu-item [routerLink]="[ '/org/create' ]">
|
<button mat-menu-item [routerLink]="[ '/org/create' ]">
|
||||||
@ -49,23 +55,29 @@
|
|||||||
</mat-menu>
|
</mat-menu>
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
|
|
||||||
<a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button
|
<a class="doc-link" href="https://docs.zitadel.ch" mat-stroked-button target="_blank">{{'MENU.DOCUMENTATION'
|
||||||
target="_blank">{{'MENU.DOCUMENTATION' | translate}}</a>
|
| translate}}</a>
|
||||||
<div (clickOutside)="closeAccountCard()" class="icon-container">
|
<div (clickOutside)="closeAccountCard()" class="icon-container">
|
||||||
<app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
|
<app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
|
||||||
class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
|
class="avatar dontcloseonclick" (click)="showAccount = !showAccount" [active]="showAccount"
|
||||||
[name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="38">
|
[name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="38">
|
||||||
</app-avatar>
|
</app-avatar>
|
||||||
<app-accounts-card @accounts class="a_card mat-elevation-z5" *ngIf="showAccount"
|
<app-accounts-card @accounts class="a_card mat-elevation-z1" *ngIf="showAccount"
|
||||||
(close)="showAccount = false" [profile]="profile" [iamuser]="iamuser$ | async">
|
(close)="showAccount = false" [profile]="profile" [iamuser]="iamuser$ | async">
|
||||||
</app-accounts-card>
|
</app-accounts-card>
|
||||||
</div>
|
</div>
|
||||||
</mat-toolbar>
|
</mat-toolbar>
|
||||||
<mat-drawer-container class="main-container">
|
<mat-drawer-container class="main-container">
|
||||||
<mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
<mat-drawer #drawer class="sidenav" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||||
[opened]="!(isHandset$ | async)">
|
[opened]="!(isHandset$ | async) && authenticationService.authenticated">
|
||||||
<div class="side-column">
|
<div class="side-column">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
|
<a @navitem class="nav-item" [routerLinkActive]="['active']"
|
||||||
|
[routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/']">
|
||||||
|
<i class="icon las la-home"></i>
|
||||||
|
<span class="label">{{ 'MENU.DASHBOARD' | translate }}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<ng-container *ngIf="authenticationService.authenticationChanged | async">
|
<ng-container *ngIf="authenticationService.authenticationChanged | async">
|
||||||
<a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
|
<a @navitem matTooltip="{{'MENU.TOOLTIP.PERSONAL' | translate}}" class="nav-item"
|
||||||
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
|
[routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"
|
||||||
@ -163,6 +175,14 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
|
|
||||||
|
<div class="toc-line">
|
||||||
|
<a class="toc" href="https://zitadel.ch/pdf/agb.pdf" alt="Terms and Conditions"
|
||||||
|
target="_blank">{{'MENU.TOC'
|
||||||
|
| translate}}</a>
|
||||||
|
<span> </span>
|
||||||
|
<a class="sp-status" href="//status.zitadel.ch">Status</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,9 +11,14 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
||||||
|
.org-button {
|
||||||
|
font-weight: bold;
|
||||||
|
padding-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
max-height: 50px;
|
max-height: 40px;
|
||||||
width: 160px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@ -22,7 +27,6 @@
|
|||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu {
|
.context-menu {
|
||||||
@ -82,7 +86,7 @@
|
|||||||
padding-top: 60px;
|
padding-top: 60px;
|
||||||
|
|
||||||
.sidenav {
|
.sidenav {
|
||||||
width: 300px;
|
width: 280px;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
|
||||||
.side-column {
|
.side-column {
|
||||||
@ -90,6 +94,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -123,7 +128,6 @@
|
|||||||
.label {
|
.label {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: .05em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_label {
|
.c_label {
|
||||||
@ -132,7 +136,6 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
letter-spacing: .03em;
|
|
||||||
|
|
||||||
.count {
|
.count {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -140,7 +143,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #00000010;
|
// background-color: #00000010;
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
border-bottom-right-radius: 1.5rem;
|
border-bottom-right-radius: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -148,6 +151,7 @@
|
|||||||
&.active {
|
&.active {
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
border-bottom-right-radius: 1.5rem;
|
border-bottom-right-radius: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -160,6 +164,43 @@
|
|||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toc-line {
|
||||||
|
margin: 2rem 2rem;
|
||||||
|
|
||||||
|
.toc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--grey);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-status {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--grey);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-status .sp-status-badge.sp-status-ok {
|
||||||
|
background: darkgreen;
|
||||||
|
}
|
||||||
|
.sp-status .sp-status-badge.sp-status-scheduled {
|
||||||
|
background: darkblue;
|
||||||
|
}
|
||||||
|
.sp-status .sp-status-badge.sp-status-minor {
|
||||||
|
background: darkorange;
|
||||||
|
}
|
||||||
|
.sp-status .sp-status-badge.sp-status-major {
|
||||||
|
background: darkred;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.logout-button {
|
.logout-button {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -251,7 +251,7 @@ export class AppComponent implements OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private getProjectCount(): void {
|
private getProjectCount(): void {
|
||||||
this.authService.isAllowed(['project.read$']).subscribe((allowed) => {
|
this.authService.isAllowed(['project.read']).subscribe((allowed) => {
|
||||||
if (allowed) {
|
if (allowed) {
|
||||||
this.mgmtService.SearchProjects(0, 0);
|
this.mgmtService.SearchProjects(0, 0);
|
||||||
|
|
||||||
|
|||||||
@ -23,6 +23,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
|
|||||||
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
|
||||||
import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
|
import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
|
||||||
import { QuicklinkModule } from 'ngx-quicklink';
|
import { QuicklinkModule } from 'ngx-quicklink';
|
||||||
|
import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module';
|
||||||
import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module';
|
import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module';
|
||||||
|
|
||||||
import { environment } from '../environments/environment';
|
import { environment } from '../environments/environment';
|
||||||
@ -121,6 +122,7 @@ const authConfig: AuthConfig = {
|
|||||||
WarnDialogModule,
|
WarnDialogModule,
|
||||||
MatDialogModule,
|
MatDialogModule,
|
||||||
RegExpPipeModule,
|
RegExpPipeModule,
|
||||||
|
OnboardingModule,
|
||||||
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
|
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
|
|||||||
@ -3,20 +3,23 @@ import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angul
|
|||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
import { AuthenticationService } from '../services/authentication.service';
|
import { AuthenticationService } from '../services/authentication.service';
|
||||||
|
import { GrpcAuthService } from '../services/grpc-auth.service';
|
||||||
|
|
||||||
|
|
||||||
@Injectable({
|
@Injectable({
|
||||||
providedIn: 'root',
|
providedIn: 'root',
|
||||||
})
|
})
|
||||||
export class AuthGuard implements CanActivate {
|
export class AuthGuard implements CanActivate {
|
||||||
constructor(private auth: AuthenticationService) { }
|
constructor(private auth: AuthenticationService, private authService: GrpcAuthService) { }
|
||||||
|
|
||||||
public canActivate(
|
public canActivate(
|
||||||
_: ActivatedRouteSnapshot,
|
_: ActivatedRouteSnapshot,
|
||||||
state: RouterStateSnapshot,
|
state: RouterStateSnapshot,
|
||||||
): Observable<boolean> | Promise<boolean> | boolean {
|
): Observable<boolean> | Promise<boolean> | Promise<any> | boolean {
|
||||||
if (!this.auth.authenticated) {
|
if (!this.auth.authenticated) {
|
||||||
return this.auth.authenticate();
|
return this.auth.authenticate().then(() => {
|
||||||
|
return this.authService.GetActiveOrg();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return this.auth.authenticated;
|
return this.auth.authenticated;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { RouterModule, Routes } from '@angular/router';
|
||||||
|
|
||||||
|
import { OnboardingComponent } from './onboarding.component';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: OnboardingComponent,
|
||||||
|
data: { animation: 'AddPage' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
export class OnboardingRoutingModule { }
|
||||||
27
console/src/app/modules/onboarding/onboarding.component.html
Normal file
27
console/src/app/modules/onboarding/onboarding.component.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<div class="split">
|
||||||
|
<div class="left">
|
||||||
|
<p class="firststeps">{{'ONBOARDING.HEADER' | translate}}</p>
|
||||||
|
<h1>{{'ONBOARDING.TITLE' | translate}}</h1>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<p class="desc">{{'ONBOARDING.DESCRIPTION' | translate}}</p>
|
||||||
|
|
||||||
|
<h2>{{'ONBOARDING.STEPS_TITLE' | translate}}</h2>
|
||||||
|
<div class="onboarding-row" *ngFor="let step of steps; index as i">
|
||||||
|
<div class="prev">{{i + 1}}</div>
|
||||||
|
<div>
|
||||||
|
<h3>{{step.titleI18nKey | translate}}</h3>
|
||||||
|
<p>{{step.descI18nKey | translate}}</p>
|
||||||
|
</div>
|
||||||
|
<span class="fill-space"></span>
|
||||||
|
<div class="action-row">
|
||||||
|
<a *ngIf="step?.docs" [href]="step.docs" alt="Zitadel Docs" target="_blank"
|
||||||
|
class="goto docs">{{'ONBOARDING.DOCS' |
|
||||||
|
translate}}
|
||||||
|
<i class="las la-external-link-alt"></i>
|
||||||
|
</a>
|
||||||
|
<a *ngIf="step.link" class="goto" [routerLink]="step.link">{{'ONBOARDING.START' | translate}}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
147
console/src/app/modules/onboarding/onboarding.component.scss
Normal file
147
console/src/app/modules/onboarding/onboarding.component.scss
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
@import '~@angular/material/theming';
|
||||||
|
|
||||||
|
@mixin onboarding-theme($theme) {
|
||||||
|
/* stylelint-disable */
|
||||||
|
$primary: map-get($theme, primary);
|
||||||
|
$primary-color: mat-color($primary, 500);
|
||||||
|
$is-dark-theme: map-get($theme, is-dark);
|
||||||
|
/* stylelint-enable */
|
||||||
|
|
||||||
|
.onboarding-row {
|
||||||
|
box-shadow: inset 0 -1px if($is-dark-theme, #303131, #e3e8ee);
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goto {
|
||||||
|
text-decoration: none;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid if($is-dark-theme, #303131, #e3e8ee);
|
||||||
|
|
||||||
|
&.docs {
|
||||||
|
background-color: $primary-color;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.split {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||||
|
|
||||||
|
@media only screen and (min-width: 1024px) {
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.right {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
flex-basis: 300px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: linear-gradient(40deg, rgb(80, 66, 121),rgb(177, 59, 122),rgb(225,53,81), rgb(230,107,86));
|
||||||
|
box-shadow: inset -2px 1px 15px -9px #000000;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.firststeps {
|
||||||
|
color: #fad6e3;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fad6e3;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
padding: 1.5rem;
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: var(--grey);
|
||||||
|
font-size: 20px;
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onboarding-row {
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem 0;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.prev {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
border-radius: .5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 2rem;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-space {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
.goto {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2px 1rem;
|
||||||
|
color: black;
|
||||||
|
border-radius: 50vw;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: .5rem 0 .5rem 1rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { OnboardingComponent } from './onboarding.component';
|
||||||
|
|
||||||
|
describe('OnboardingComponent', () => {
|
||||||
|
let component: OnboardingComponent;
|
||||||
|
let fixture: ComponentFixture<OnboardingComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ OnboardingComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(OnboardingComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
16
console/src/app/modules/onboarding/onboarding.component.ts
Normal file
16
console/src/app/modules/onboarding/onboarding.component.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { AuthenticationService } from 'src/app/services/authentication.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'cnsl-onboarding',
|
||||||
|
templateUrl: './onboarding.component.html',
|
||||||
|
styleUrls: ['./onboarding.component.scss']
|
||||||
|
})
|
||||||
|
export class OnboardingComponent {
|
||||||
|
public steps = [
|
||||||
|
{ titleI18nKey: 'ONBOARDING.STEPS.1.TITLE', descI18nKey: 'ONBOARDING.STEPS.1.DESC', docs: "https://docs.zitadel.ch/use", link: ['/projects', 'create'] },
|
||||||
|
{ titleI18nKey: 'ONBOARDING.STEPS.2.TITLE', descI18nKey: 'ONBOARDING.STEPS.2.DESC', docs: "https://docs.zitadel.ch/use", link: ['/projects'] },
|
||||||
|
{ titleI18nKey: 'ONBOARDING.STEPS.3.TITLE', descI18nKey: 'ONBOARDING.STEPS.3.DESC', link: ['/iam', 'policies'] },
|
||||||
|
];
|
||||||
|
constructor() { }
|
||||||
|
}
|
||||||
18
console/src/app/modules/onboarding/onboarding.module.ts
Normal file
18
console/src/app/modules/onboarding/onboarding.module.ts
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
|
|
||||||
|
import { OnboardingRoutingModule } from './onboarding-routing.module';
|
||||||
|
import { OnboardingComponent } from './onboarding.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [OnboardingComponent],
|
||||||
|
imports: [
|
||||||
|
CommonModule,
|
||||||
|
TranslateModule,
|
||||||
|
OnboardingRoutingModule,
|
||||||
|
MatButtonModule,
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class OnboardingModule { }
|
||||||
@ -16,12 +16,42 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<ng-template appHasRole [appHasRole]="['iam.write']">
|
||||||
|
<a matRipple *ngIf="!firstStepsDismissed" class="onboard" [routerLink]="['/firststeps']">
|
||||||
|
<p class="first-steps">{{'ONBOARDING.HEADER' | translate}}</p>
|
||||||
|
<h2>{{'ONBOARDING.TITLE' | translate}}</h2>
|
||||||
|
<p class="desc">{{'ONBOARDING.DESCRIPTION' | translate}}</p>
|
||||||
|
<button matTooltip="{{'ACTIONS.CLOSE' | translate}}" (click)="dismissFirstSteps($event)" mat-icon-button
|
||||||
|
class="close">
|
||||||
|
<i class="las la-times"></i>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
<a matRipple *ngIf="!firstStepsDismissed" class="quickstart" target="_blank"
|
||||||
|
href="https://docs.zitadel.ch/quickstarts">
|
||||||
|
<p class="first-steps">{{'HOME.QUICKSTARTS.LABEL' | translate}}</p>
|
||||||
|
<h2>{{'HOME.QUICKSTARTS.TITLE' | translate}}</h2>
|
||||||
|
<p class="desc">{{'HOME.QUICKSTARTS.DESCRIPTION' | translate}}</p>
|
||||||
|
<div class="logo-cloud">
|
||||||
|
<i class="lab la-angular"></i>
|
||||||
|
<i class="lab la-react"></i>
|
||||||
|
<i class="lab la-android"></i>
|
||||||
|
<i class="lab la-app-store-ios"></i>
|
||||||
|
</div>
|
||||||
|
<button matTooltip="{{'ACTIONS.CLOSE' | translate}}" (click)="dismissQuickstarts($event)" mat-icon-button
|
||||||
|
class="close">
|
||||||
|
<i class="las la-times"></i>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
|
||||||
<ng-template appHasRole [appHasRole]="['iam.write']">
|
<ng-template appHasRole [appHasRole]="['iam.write']">
|
||||||
<app-card class="item">
|
<app-card class="item">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<h2>
|
<h2>
|
||||||
<i class="icon las la-gem"></i>
|
<i class="icon las la-gem"></i>
|
||||||
{{'HOME.IAM'| translate}}</h2>
|
{{'HOME.IAM'| translate}}
|
||||||
|
</h2>
|
||||||
<p>{{'HOME.IAM_DESC'| translate}}</p>
|
<p>{{'HOME.IAM_DESC'| translate}}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -30,15 +60,12 @@
|
|||||||
class="las la-link"></i></a>
|
class="las la-link"></i></a>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template appHasRole [appHasRole]="['iam.policy.read']">
|
<ng-template appHasRole [appHasRole]="['iam.policy.read']">
|
||||||
<a class="short-link"
|
<a class="short-link" [routerLink]="[ '/iam', 'policy','iam']">{{'HOME.IAM_POLICY_IAM' |
|
||||||
[routerLink]="[ '/iam', 'policy','iam']">{{'HOME.IAM_POLICY_IAM' | translate}}<i
|
translate}}<i class="las la-link"></i></a>
|
||||||
class="las la-link"></i></a>
|
<a class="short-link" [routerLink]="[ '/iam', 'policy','complexity']">{{'HOME.IAM_POLICY_COMPLEXITY'
|
||||||
<a class="short-link"
|
| translate}}<i class="las la-link"></i></a>
|
||||||
[routerLink]="[ '/iam', 'policy','complexity']">{{'HOME.IAM_POLICY_COMPLEXITY' | translate}}<i
|
<a class="short-link" [routerLink]="[ '/iam', 'policy','login']">{{'HOME.IAM_POLICY_LOGIN' |
|
||||||
class="las la-link"></i></a>
|
translate}}<i class="las la-link"></i></a>
|
||||||
<a class="short-link"
|
|
||||||
[routerLink]="[ '/iam', 'policy','login']">{{'HOME.IAM_POLICY_LOGIN' | translate}}<i
|
|
||||||
class="las la-link"></i></a>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
@ -59,8 +86,8 @@
|
|||||||
|
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<a color="primary" mat-stroked-button
|
<a color="primary" mat-stroked-button [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' |
|
||||||
[routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
|
translate}}</a>
|
||||||
</div>
|
</div>
|
||||||
</app-card>
|
</app-card>
|
||||||
|
|
||||||
@ -69,18 +96,18 @@
|
|||||||
<div class="top">
|
<div class="top">
|
||||||
<h2>
|
<h2>
|
||||||
<i class="icon las la-layer-group"></i>
|
<i class="icon las la-layer-group"></i>
|
||||||
{{'HOME.PROJECTS'| translate}}</h2>
|
{{'HOME.PROJECTS'| translate}}
|
||||||
|
</h2>
|
||||||
<p>{{'HOME.PROJECTS_DESC'| translate}}</p>
|
<p>{{'HOME.PROJECTS_DESC'| translate}}</p>
|
||||||
<ng-template appHasRole [appHasRole]="['project.create']">
|
<ng-template appHasRole [appHasRole]="['project.create']">
|
||||||
<a class="short-link"
|
<a class="short-link" [routerLink]="[ '/projects', 'create']">{{'HOME.PROJECTS_NEW_LINK' |
|
||||||
[routerLink]="[ '/projects', 'create']">{{'HOME.PROJECTS_NEW_LINK' | translate}}<i
|
translate}}<i class="las la-link"></i></a>
|
||||||
class="las la-link"></i></a>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<a color="primary" mat-stroked-button
|
<a color="primary" mat-stroked-button [routerLink]="['/projects']">{{'HOME.PROJECTS_BUTTON' |
|
||||||
[routerLink]="['/projects']">{{'HOME.PROJECTS_BUTTON' | translate}}</a>
|
translate}}</a>
|
||||||
</div>
|
</div>
|
||||||
</app-card>
|
</app-card>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
@ -92,23 +119,21 @@
|
|||||||
{{'HOME.PROTECTION'| translate}}</h2>
|
{{'HOME.PROTECTION'| translate}}</h2>
|
||||||
<p>{{'HOME.PROTECTION_DESC'| translate}}</p>
|
<p>{{'HOME.PROTECTION_DESC'| translate}}</p>
|
||||||
<ng-template appHasRole [appHasRole]="['iam.policy.read']">
|
<ng-template appHasRole [appHasRole]="['iam.policy.read']">
|
||||||
<a class="short-link"
|
<a class="short-link" [routerLink]="[ '/org', 'policy','iam']">{{'HOME.ORG_POLICY_IAM' |
|
||||||
[routerLink]="[ '/org', 'policy','iam']">{{'HOME.ORG_POLICY_IAM' | translate}}<i
|
translate}}<i class="las la-link"></i></a>
|
||||||
class="las la-link"></i></a>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template appHasRole [appHasRole]="['policy.read']">
|
<ng-template appHasRole [appHasRole]="['policy.read']">
|
||||||
<a class="short-link"
|
<a class="short-link"
|
||||||
[routerLink]="[ '/org', 'policy','complexity']">{{'HOME.ORG_POLICY_COMPLEXITY' | translate}}<i
|
[routerLink]="[ '/org', 'policy','complexity']">{{'HOME.ORG_POLICY_COMPLEXITY' |
|
||||||
class="las la-link"></i></a>
|
translate}}<i class="las la-link"></i></a>
|
||||||
<a class="short-link"
|
<a class="short-link" [routerLink]="[ '/org', 'policy','login']">{{'HOME.ORG_POLICY_LOGIN' |
|
||||||
[routerLink]="[ '/org', 'policy','login']">{{'HOME.ORG_POLICY_LOGIN' | translate}}<i
|
translate}}<i class="las la-link"></i></a>
|
||||||
class="las la-link"></i></a>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<a color="primary" mat-stroked-button
|
<a color="primary" mat-stroked-button [routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' |
|
||||||
[routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' | translate}}</a>
|
translate}}</a>
|
||||||
</div>
|
</div>
|
||||||
</app-card>
|
</app-card>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
@ -118,15 +143,14 @@
|
|||||||
<div class="top">
|
<div class="top">
|
||||||
<h2>
|
<h2>
|
||||||
<i class="las la-users"></i>
|
<i class="las la-users"></i>
|
||||||
{{'HOME.USERS'| translate}}</h2>
|
{{'HOME.USERS'| translate}}
|
||||||
|
</h2>
|
||||||
<p>{{'HOME.USERS_DESC'| translate}}</p>
|
<p>{{'HOME.USERS_DESC'| translate}}</p>
|
||||||
<ng-template appHasRole [appHasRole]="['user.read(:[0-9]*)?']">
|
<ng-template appHasRole [appHasRole]="['user.read(:[0-9]*)?']">
|
||||||
<a class="short-link"
|
<a class="short-link" [routerLink]="[ '/users', 'list', 'humans']">{{'HOME.USERS_HUMANS' |
|
||||||
[routerLink]="[ '/users', 'list', 'humans']">{{'HOME.USERS_HUMANS' | translate}}<i
|
translate}}<i class="las la-link"></i></a>
|
||||||
class="las la-link"></i></a>
|
<a class="short-link" [routerLink]="[ '/users', 'list', 'machines']">{{'HOME.USERS_MACHINES' |
|
||||||
<a class="short-link"
|
translate}}<i class="las la-link"></i></a>
|
||||||
[routerLink]="[ '/users', 'list', 'machines']">{{'HOME.USERS_MACHINES' | translate}}<i
|
|
||||||
class="las la-link"></i></a>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template appHasRole [appHasRole]="['user.read']">
|
<ng-template appHasRole [appHasRole]="['user.read']">
|
||||||
<a class="short-link" [routerLink]="[ '/users', 'create']">{{'HOME.USERS_CREATE' | translate}}<i
|
<a class="short-link" [routerLink]="[ '/users', 'create']">{{'HOME.USERS_CREATE' | translate}}<i
|
||||||
@ -135,8 +159,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<span class="fill-space"></span>
|
<span class="fill-space"></span>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<a color="primary" mat-stroked-button
|
<a color="primary" mat-stroked-button [routerLink]="['/users/list/humans']">{{'HOME.USERS_BUTTON' |
|
||||||
[routerLink]="['/users/list/humans']">{{'HOME.USERS_BUTTON' | translate}}</a>
|
translate}}</a>
|
||||||
</div>
|
</div>
|
||||||
</app-card>
|
</app-card>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -31,6 +32,78 @@
|
|||||||
margin: -1rem;
|
margin: -1rem;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.onboard,
|
||||||
|
.quickstart {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex: 1 0 45%;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-steps {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: white;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.close {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.onboard {
|
||||||
|
background: linear-gradient(40deg, rgb(80, 66, 121),rgb(177, 59, 122),rgb(225,53,81), rgb(230,107,86));
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #fad6e3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quickstart {
|
||||||
|
background: linear-gradient(30deg, #2283a6,#6c8f59);
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #d6f3fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-cloud {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: -0.5rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 40px;
|
||||||
|
padding: .5rem;
|
||||||
|
border: 1px solid #ffffff50;
|
||||||
|
border-radius: .5rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
flex: 1 0 45%;
|
flex: 1 0 45%;
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
|
|||||||
@ -8,8 +8,26 @@ import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
|
|||||||
})
|
})
|
||||||
export class HomeComponent {
|
export class HomeComponent {
|
||||||
public dark: boolean = true;
|
public dark: boolean = true;
|
||||||
|
public firstStepsDismissed: boolean = false;
|
||||||
|
public quickstartsDismissed: boolean = false;
|
||||||
|
|
||||||
constructor(public authService: GrpcAuthService) {
|
constructor(public authService: GrpcAuthService) {
|
||||||
const theme = localStorage.getItem('theme');
|
const theme = localStorage.getItem('theme');
|
||||||
this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
|
this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
|
||||||
|
|
||||||
|
this.firstStepsDismissed = localStorage.getItem('firstStartDismissed') == 'true' ? true : false;
|
||||||
|
this.quickstartsDismissed = localStorage.getItem('quickstartsDismissed') == 'true' ? true : false;
|
||||||
|
}
|
||||||
|
|
||||||
|
dismissFirstSteps(event: Event): void {
|
||||||
|
event.preventDefault();
|
||||||
|
localStorage.setItem('firstStartDismissed', 'true');
|
||||||
|
this.firstStepsDismissed = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
dismissQuickstarts(event: Event): void {
|
||||||
|
event.preventDefault();
|
||||||
|
localStorage.setItem('quickstartsDismissed', 'true');
|
||||||
|
this.firstStepsDismissed = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,19 +1,20 @@
|
|||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatRippleModule } from '@angular/material/core';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||||
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||||
import { TranslateModule } from '@ngx-translate/core';
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||||
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
|
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
|
||||||
import { CardModule } from 'src/app/modules/card/card.module';
|
import { CardModule } from 'src/app/modules/card/card.module';
|
||||||
|
import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module';
|
||||||
import { SharedModule } from 'src/app/modules/shared/shared.module';
|
import { SharedModule } from 'src/app/modules/shared/shared.module';
|
||||||
|
|
||||||
import { HomeRoutingModule } from './home-routing.module';
|
import { HomeRoutingModule } from './home-routing.module';
|
||||||
import { HomeComponent } from './home.component';
|
import { HomeComponent } from './home.component';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [HomeComponent],
|
declarations: [HomeComponent],
|
||||||
imports: [
|
imports: [
|
||||||
@ -24,9 +25,12 @@ import { HomeComponent } from './home.component';
|
|||||||
MatButtonModule,
|
MatButtonModule,
|
||||||
TranslateModule,
|
TranslateModule,
|
||||||
AvatarModule,
|
AvatarModule,
|
||||||
|
MatTooltipModule,
|
||||||
SharedModule,
|
SharedModule,
|
||||||
MatProgressSpinnerModule,
|
MatProgressSpinnerModule,
|
||||||
CardModule,
|
CardModule,
|
||||||
|
MatRippleModule,
|
||||||
|
OnboardingModule,
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
export class HomeModule { }
|
export class HomeModule { }
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
<h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
|
<h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
|
||||||
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
|
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
|
||||||
|
|
||||||
<app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
|
<app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource" [canWrite]="['project.grant.member.write','project.grant.member.write:' + grant.id] | hasRole | async"
|
||||||
[memberRoleOptions]="memberRoleOptions" (updateRoles)="updateMemberRoles($event.member, $event.change)"
|
[memberRoleOptions]="memberRoleOptions" (updateRoles)="updateMemberRoles($event.member, $event.change)"
|
||||||
[factoryLoadFunc]="changePageFactory" (changedSelection)="selection = $event" [refreshTrigger]="changePage">
|
[factoryLoadFunc]="changePageFactory" (changedSelection)="selection = $event" [refreshTrigger]="changePage">
|
||||||
<button selectactions (click)="removeProjectMemberSelection()"
|
<button selectactions (click)="removeProjectMemberSelection()"
|
||||||
|
|||||||
@ -7,8 +7,9 @@
|
|||||||
</ng-template>
|
</ng-template>
|
||||||
<p>{{'USER.SIGNEDOUT' | translate}}</p>
|
<p>{{'USER.SIGNEDOUT' | translate}}</p>
|
||||||
|
|
||||||
<button color="primary" mat-raised-button
|
<button matTooltip="{{'ACTIONS.LOGIN' | translate}}" color="primary" mat-raised-button
|
||||||
[routerLink]="[ '/users/me' ]">{{'USER.SIGNEDOUT_BTN' | translate}}</button>
|
[routerLink]="[ '/users/me' ]">{{'USER.SIGNEDOUT_BTN' |
|
||||||
|
translate}} <i class="las la-sign-in-alt"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -17,19 +17,24 @@
|
|||||||
p {
|
p {
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1rem;
|
font-size: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
max-width: 170px;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
padding: .5rem 4rem;
|
padding: .5rem 4rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
.head {
|
.head {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid #ffffff20;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: .5rem;
|
padding-bottom: .5rem;
|
||||||
|
|
||||||
|
|||||||
@ -55,6 +55,7 @@ export class AuthInterceptor<TReq = unknown, TResp = unknown> implements UnaryIn
|
|||||||
titleKey: 'ERRORS.TOKENINVALID.TITLE',
|
titleKey: 'ERRORS.TOKENINVALID.TITLE',
|
||||||
descriptionKey: 'ERRORS.TOKENINVALID.DESCRIPTION',
|
descriptionKey: 'ERRORS.TOKENINVALID.DESCRIPTION',
|
||||||
},
|
},
|
||||||
|
disableClose: true,
|
||||||
width: '400px',
|
width: '400px',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,29 @@
|
|||||||
{
|
{
|
||||||
"APP_NAME": "ZITADEL",
|
"APP_NAME": "ZITADEL",
|
||||||
|
"ONBOARDING": {
|
||||||
|
"HEADER":"Erste Schritte",
|
||||||
|
"TITLE":"Lernen Sie unsere ZITADEL Console kennen.",
|
||||||
|
"LOGINDESC":"Melden Sie sich an um Zugriff auf Funktionen von Zitadel zu erhalten",
|
||||||
|
"LOGIN":"Anmelden",
|
||||||
|
"DESCRIPTION":"Führen Sie die folgenden Schritte aus und passen Sie ZITADEL optimal an Ihre Bedürfnisse an.",
|
||||||
|
"STEPS_TITLE":"Führen Sie die folgenden Schritte in gewünschter Reihenfolge aus:",
|
||||||
|
"STEPS": {
|
||||||
|
"1": {
|
||||||
|
"TITLE":"Projekt erstellen",
|
||||||
|
"DESC":"Erstellen Sie Ihr erstes Projekt und legen Sie Zugangsberechtigungen eventueller Mitarbeiter fest."
|
||||||
|
},
|
||||||
|
"2": {
|
||||||
|
"TITLE":"Applikation erstellen",
|
||||||
|
"DESC":"Erstellen Sie eine Applikation innerhalb Ihres Projektes und legen Sie dessen Eigenschaften fest."
|
||||||
|
},
|
||||||
|
"3": {
|
||||||
|
"TITLE":"Sicherheit verbessern",
|
||||||
|
"DESC":"Erweitern Sie die Zugangsrichtlinien und erhöhen Sie dadurch die Sicherheit ihrer Benutzer."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"START":"Start",
|
||||||
|
"DOCS":"Docs"
|
||||||
|
},
|
||||||
"HOME": {
|
"HOME": {
|
||||||
"TITLE": "ZITADEL",
|
"TITLE": "ZITADEL",
|
||||||
"SECURITYANDPRIVACY": "Datenschutz und Personalisierung",
|
"SECURITYANDPRIVACY": "Datenschutz und Personalisierung",
|
||||||
@ -32,9 +56,15 @@
|
|||||||
"WELCOME":"Willkommen",
|
"WELCOME":"Willkommen",
|
||||||
"WELCOMESENTENCE":"Hier findest Du die empfohlenen Aktionen basierend auf Deinen zuletzt erworbenen Berechtigungen. Beachte bitte, dass Du möglicherweise Deine Organisation in der Kopfzeile wechseln musst.",
|
"WELCOMESENTENCE":"Hier findest Du die empfohlenen Aktionen basierend auf Deinen zuletzt erworbenen Berechtigungen. Beachte bitte, dass Du möglicherweise Deine Organisation in der Kopfzeile wechseln musst.",
|
||||||
"DISCLAIMER":"Du kannst nur die Einstellungen Deiner aktuellen Organisation, die in der Kopfzeile angegeben ist, sehen. ZITADEL behandelt Deine Daten vertraulich und sicher.",
|
"DISCLAIMER":"Du kannst nur die Einstellungen Deiner aktuellen Organisation, die in der Kopfzeile angegeben ist, sehen. ZITADEL behandelt Deine Daten vertraulich und sicher.",
|
||||||
"DISCLAIMERLINK":"Mehr Informationen zur Sicherheit"
|
"DISCLAIMERLINK":"Mehr Informationen zur Sicherheit",
|
||||||
|
"QUICKSTARTS": {
|
||||||
|
"LABEL":"Erste Schritte",
|
||||||
|
"TITLE":"Quickstarts",
|
||||||
|
"DESCRIPTION":"Mit ZITADEL schnell durchstarten."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"MENU": {
|
"MENU": {
|
||||||
|
"DASHBOARD":"Übersicht",
|
||||||
"PERSONAL_INFO": "Persönliche Informationen",
|
"PERSONAL_INFO": "Persönliche Informationen",
|
||||||
"DOCUMENTATION":"Dokumentation",
|
"DOCUMENTATION":"Dokumentation",
|
||||||
"IAMPOLICIES":"IAM",
|
"IAMPOLICIES":"IAM",
|
||||||
@ -54,6 +84,7 @@
|
|||||||
"SHOWORGS":"Alle Organisationen anzeigen",
|
"SHOWORGS":"Alle Organisationen anzeigen",
|
||||||
"GRANTSECTION":"Berechtigungssektion",
|
"GRANTSECTION":"Berechtigungssektion",
|
||||||
"GRANTS":"Berechtigungen",
|
"GRANTS":"Berechtigungen",
|
||||||
|
"TOC":"Datenschutz und AGB",
|
||||||
"TOOLTIP": {
|
"TOOLTIP": {
|
||||||
"PERSONAL":"Verwalte deinen persönlichen Account, deine IDPs, Login Methoden, Faktoren und Berechtigungen",
|
"PERSONAL":"Verwalte deinen persönlichen Account, deine IDPs, Login Methoden, Faktoren und Berechtigungen",
|
||||||
"IAMPOLICIES":"Verwalte ZITADELs globale Zugangsrichtlinien und verwalte ZITADEL Manager",
|
"IAMPOLICIES":"Verwalte ZITADELs globale Zugangsrichtlinien und verwalte ZITADEL Manager",
|
||||||
|
|||||||
@ -1,5 +1,29 @@
|
|||||||
{
|
{
|
||||||
"APP_NAME": "ZITADEL",
|
"APP_NAME": "ZITADEL",
|
||||||
|
"ONBOARDING": {
|
||||||
|
"HEADER":"First Steps",
|
||||||
|
"TITLE":"Learn how to use ZITADEL",
|
||||||
|
"LOGINDESC":"You need to log in to control your ZITADEL settings.",
|
||||||
|
"LOGIN":"Login",
|
||||||
|
"DESCRIPTION":"We at ZITADEL care a lot about security and performance. Carry out the following steps and adapt ZITADEL optimally to your needs.",
|
||||||
|
"STEPS_TITLE":"Complete the following steps in the order you want:",
|
||||||
|
"STEPS": {
|
||||||
|
"1": {
|
||||||
|
"TITLE":"Projekt erstellen",
|
||||||
|
"DESC":"Erstellen Sie Ihr erstes Projekt und legen Sie Zugangsberechtigungen eventueller Mitarbeiter fest."
|
||||||
|
},
|
||||||
|
"2": {
|
||||||
|
"TITLE":"Applikation erstellen",
|
||||||
|
"DESC":"Erstellen Sie eine Applikation innerhalb Ihres Projektes und legen Sie dessen Eigenschaften fest."
|
||||||
|
},
|
||||||
|
"3": {
|
||||||
|
"TITLE":"Sicherheit verbessern",
|
||||||
|
"DESC":"Erweitern Sie die Zugangsrichtlinien und erhöhen Sie dadurch die Sicherheit ihrer Benutzer."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"START":"Start",
|
||||||
|
"DOCS":"Docs"
|
||||||
|
},
|
||||||
"HOME": {
|
"HOME": {
|
||||||
"TITLE": "ZITADEL",
|
"TITLE": "ZITADEL",
|
||||||
"SECURITYANDPRIVACY": "Data Protection and Personalisation",
|
"SECURITYANDPRIVACY": "Data Protection and Personalisation",
|
||||||
@ -32,9 +56,15 @@
|
|||||||
"WELCOME":"Welcome",
|
"WELCOME":"Welcome",
|
||||||
"WELCOMESENTENCE":"Here you can find recommended actions based on your last acquired permissions. Note that you may have to select your organisation in the header above.",
|
"WELCOMESENTENCE":"Here you can find recommended actions based on your last acquired permissions. Note that you may have to select your organisation in the header above.",
|
||||||
"DISCLAIMER":"You can only see settings of your current organisation specified in the header. ZITADEL treats your data confidentially and securely.",
|
"DISCLAIMER":"You can only see settings of your current organisation specified in the header. ZITADEL treats your data confidentially and securely.",
|
||||||
"DISCLAIMERLINK":"Further information"
|
"DISCLAIMERLINK":"Further information",
|
||||||
|
"QUICKSTARTS": {
|
||||||
|
"LABEL":"First Steps",
|
||||||
|
"TITLE":"Quickstarts",
|
||||||
|
"DESCRIPTION":"Get started with ZITADEL quickly."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"MENU": {
|
"MENU": {
|
||||||
|
"DASHBOARD":"Overview",
|
||||||
"PERSONAL_INFO": "Personal Information",
|
"PERSONAL_INFO": "Personal Information",
|
||||||
"DOCUMENTATION":"Documentation",
|
"DOCUMENTATION":"Documentation",
|
||||||
"IAMPOLICIES":"IAM",
|
"IAMPOLICIES":"IAM",
|
||||||
@ -54,6 +84,7 @@
|
|||||||
"SHOWORGS":"Show All Organisations",
|
"SHOWORGS":"Show All Organisations",
|
||||||
"GRANTSECTION":"Authorization Section",
|
"GRANTSECTION":"Authorization Section",
|
||||||
"GRANTS":"Authorizations",
|
"GRANTS":"Authorizations",
|
||||||
|
"TOC":"Privacy Policy and TOC",
|
||||||
"TOOLTIP": {
|
"TOOLTIP": {
|
||||||
"PERSONAL":"Show your Personal Account, your IDPs, Login methods, Factors and Authorisations",
|
"PERSONAL":"Show your Personal Account, your IDPs, Login methods, Factors and Authorisations",
|
||||||
"IAMPOLICIES":"Manage ZITADELs global Access policies und elect ZITADEL Managers",
|
"IAMPOLICIES":"Manage ZITADELs global Access policies und elect ZITADEL Managers",
|
||||||
|
|||||||
76
console/src/assets/images/zitadel-logo-solo-dark.svg
Normal file
76
console/src/assets/images/zitadel-logo-solo-dark.svg
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 467 468" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g transform="matrix(1,0,0,1,0,-492)">
|
||||||
|
<g id="zitadel-logo-solo-lightdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,492.925)">
|
||||||
|
<rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
|
||||||
|
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
|
||||||
|
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
|
||||||
|
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||||
|
<path d="M1495,760L1495,744" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||||
|
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||||
|
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||||
|
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||||
|
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||||
|
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:rgb(35,35,35);"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.5 KiB |
74
console/src/assets/images/zitadel-logo-solo-light.svg
Normal file
74
console/src/assets/images/zitadel-logo-solo-light.svg
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 467 467" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||||
|
<g id="zitadel-logo-solo-darkdesign" transform="matrix(0.564847,0,0,0.659318,-1282.85,0)">
|
||||||
|
<rect x="2271.15" y="0" width="826.773" height="708.241" style="fill:none;"/>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5923.46,-2258.26)">
|
||||||
|
<path d="M1493.5,1056.38L1493.5,1037L1496.5,1037L1496.5,1061.62L1426.02,1020.38L1496.5,979.392L1496.5,1004L1493.5,1004L1493.5,984.608L1431.98,1020.39L1493.5,1056.38Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(31.0036,0,0,15.0393,-397275,-666.457)">
|
||||||
|
<g transform="matrix(-0.0429306,-0.282967,0.160219,-0.0758207,12884.5,137.392)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear1);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.160219,0.0758207,-0.0429306,0.282967,12878.9,10.8747)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear2);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.117289,0.207146,-0.117289,-0.207146,12943.8,65.7)">
|
||||||
|
<path d="M212.517,110L200.392,110L190,92L179.608,110L167.483,110L190,71L212.517,110Z" style="fill:url(#_Linear3);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.160219,-0.0758207,0.0429306,-0.282967,12917.4,132.195)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear4);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.117289,0.207146,0.117289,0.207146,12897.8,5.87512)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear5);"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.0429306,-0.282967,-0.160219,0.0758207,12936.8,97.6441)">
|
||||||
|
<path d="M139.622,117L149,142L130.244,142L139.622,117Z" style="fill:url(#_Linear6);"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5928.43,-2257.12)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5884.5,-2116.69)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5855.22,-2023.06)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-6234.47,-2112.14)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.331,4.25561,-5957.71,-2350.75)">
|
||||||
|
<circle cx="1496" cy="1004" r="7" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5477.99,-831.33)">
|
||||||
|
<path d="M1499.26,757.787C1499.26,757.787 1497.37,756.489 1497,755.2C1496.71,754.182 1496.57,750.662 1496.54,750C1496.41,747.303 1499.21,745.644 1499.21,745.644L1490.01,745.835C1490.01,745.835 1493.15,745.713 1493.46,750C1493.51,750.661 1493.23,753.476 1493,755.2C1492.91,756.447 1491.2,757.668 1491.2,757.668L1499.26,757.787Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||||
|
<path d="M1495,760L1495,744" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5404.79,-597.271)">
|
||||||
|
<path d="M1498.27,757.077C1498.27,757.077 1496.71,756.46 1496.65,754.8C1496.65,753.658 1496.64,753.281 1496.65,752.016C1496.62,751.334 1496.59,750.608 1496.65,749.949C1496.78,746.836 1498.5,746.156 1498.5,746.156L1491.46,745.931C1491.46,745.931 1493.37,746.719 1493.65,749.83C1493.71,750.489 1493.69,751.528 1493.65,752.209C1493.64,753.331 1493.64,753.413 1493.65,754.518C1493.68,756.334 1492.58,756.827 1492.58,756.827L1498.27,757.077Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||||
|
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,1.16463,3.72366,-5770.62,-677.495)">
|
||||||
|
<path d="M1500.86,762.056C1500.86,762.056 1499.86,760.4 1503.09,757.456C1504.91,755.797 1507.33,754.151 1509.98,752.255C1514.82,748.79 1520.68,744.94 1526.52,741.049C1531.45,737.766 1536.38,734.479 1540.82,731.68C1544.52,729.349 1547.85,727.296 1550.54,725.8C1551.07,725.506 1551.6,725.329 1552.05,725.029C1554.73,723.257 1556.85,724.968 1556.85,724.968L1552.23,716.282C1552.23,716.282 1551.99,719.454 1550,720.997C1549.57,721.333 1549.15,721.741 1548.67,722.12C1546.2,724.053 1542.99,726.344 1539.39,728.867C1535.06,731.898 1530.13,735.166 1525.19,738.438C1519.35,742.314 1513.52,746.234 1508.49,749.329C1505.74,751.023 1503.28,752.577 1501.13,753.598C1497.99,755.086 1495.28,753.617 1495.28,753.617L1500.86,762.056Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||||
|
<path d="M1496.17,759.473L1555.54,720.014" style="fill:none;"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(4.96737,-1.14029,-1.16463,-3.72366,-3997,4993.28)">
|
||||||
|
<path d="M1496.1,754.362C1496.1,754.362 1497.2,755.607 1501.13,753.598C1503.25,752.509 1505.74,751.023 1508.49,749.329C1513.52,746.234 1519.35,742.314 1525.19,738.438C1530.13,735.166 1534.94,731.832 1539.27,728.802C1542.87,726.279 1549.36,722.059 1549.81,721.75C1552.75,719.73 1552.18,718.196 1552.18,718.196L1555.28,724.152C1555.28,724.152 1553.77,722.905 1551.37,724.681C1550.93,725.006 1544.52,729.349 1540.82,731.68C1536.38,734.479 1531.45,737.766 1526.52,741.049C1520.68,744.94 1514.82,748.79 1509.98,752.255C1507.33,754.151 1504.89,755.771 1503.09,757.456C1499.47,760.841 1501.26,763.283 1501.26,763.283L1496.1,754.362Z" style="fill:white;"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,155.247,-155.247,-41.5984,201.516,76.8392)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(155.247,-41.5984,41.5984,155.247,110.08,195.509)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,-113.649,113.649,-113.649,258.31,215.618)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-155.247,41.5984,-41.5984,-155.247,220.914,144.546)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-113.649,113.649,113.649,113.649,206.837,124.661)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-41.5984,-155.247,-155.247,41.5984,152.054,262.8)"><stop offset="0" style="stop-color:rgb(255,143,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(254,0,255);stop-opacity:1"/></linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 8.1 KiB |
@ -15,6 +15,7 @@
|
|||||||
@import 'src/app/modules/form-field/form-field.component.scss';
|
@import 'src/app/modules/form-field/form-field.component.scss';
|
||||||
@import 'src/app/modules/label/label.component.scss';
|
@import 'src/app/modules/label/label.component.scss';
|
||||||
@import 'src/app/modules/meta-layout/meta.scss';
|
@import 'src/app/modules/meta-layout/meta.scss';
|
||||||
|
@import 'src/app/modules/onboarding/onboarding.component.scss';
|
||||||
|
|
||||||
@mixin component-themes($theme) {
|
@mixin component-themes($theme) {
|
||||||
@include avatar-theme($theme);
|
@include avatar-theme($theme);
|
||||||
@ -34,4 +35,5 @@
|
|||||||
@include link-theme($theme);
|
@include link-theme($theme);
|
||||||
@include meta-theme($theme);
|
@include meta-theme($theme);
|
||||||
@include info-section-theme($theme);
|
@include info-section-theme($theme);
|
||||||
|
@include onboarding-theme($theme);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,6 +29,7 @@
|
|||||||
<meta name="twitter:title" content="ZITADEL Console" />
|
<meta name="twitter:title" content="ZITADEL Console" />
|
||||||
<meta name="twitter:description" content="Management Platform for ZITADEL IAM" />
|
<meta name="twitter:description" content="Management Platform for ZITADEL IAM" />
|
||||||
<meta name="twitter:image" content="https://www.zitadel.ch/zitadel-social-preview25.png">
|
<meta name="twitter:image" content="https://www.zitadel.ch/zitadel-social-preview25.png">
|
||||||
|
<script src="https://statuspal.io/js/widget.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -219,18 +219,21 @@ $custom-typography:
|
|||||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
|
||||||
background-color: #2d2e30;
|
background-color: #2d2e30;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
background-color: #2d2e30;
|
background-color: #2d2e30;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #737c8870;
|
background-color: #737c8870;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root-header {
|
.root-header {
|
||||||
|
|||||||
@ -16,18 +16,23 @@
|
|||||||
box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee);
|
box-shadow: inset 1px 0 if($is-dark-theme, #303131, #e3e8ee);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidenav {
|
||||||
|
box-shadow: inset -1px 0 if($is-dark-theme, #303131, #e3e8ee);
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-item {
|
.nav-item {
|
||||||
color: mat-color($foreground, text) !important;
|
color: mat-color($foreground, text) !important;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $sec-dark;
|
background-color: if($is-dark-theme, $sec-dark, rgb(84 105 212 / 6%));
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
border-bottom-right-radius: 1.5rem;
|
border-bottom-right-radius: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $primary-color !important;
|
color: $primary-color !important;
|
||||||
background-color: rgba($color: $primary-color, $alpha: .1) !important;
|
background-color: if($is-dark-theme, rgba($color: $primary-color, $alpha: .1), rgb(84 105 212 / 6%)) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_label {
|
.c_label {
|
||||||
@ -54,7 +59,16 @@
|
|||||||
.root-header {
|
.root-header {
|
||||||
box-shadow: inset 0 -1px #e3e8ee;
|
box-shadow: inset 0 -1px #e3e8ee;
|
||||||
background-color: $primary-dark !important;
|
background-color: $primary-dark !important;
|
||||||
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||||
|
|
||||||
|
.slash {
|
||||||
|
color: if($is-dark-theme, #525454, #d1d5d9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-button {
|
||||||
|
border: 1px solid if($is-dark-theme, #303131, #e3e8ee);
|
||||||
|
transition: all .3s cubic-bezier(.645, .045, .355, 1) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-line {
|
.admin-line {
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
export const SLUG_PRESERVE_UNICODE = false;
|
export const SLUG_PRESERVE_UNICODE = false;
|
||||||
export const SLUG_SEPARATOR = '_';
|
export const SLUG_SEPARATOR = '_';
|
||||||
export const SLUG_LANG = 'en';
|
export const SLUG_LANG = 'en';
|
||||||
export const LANGUAGES = ['de', 'en'];
|
export const LANGUAGES = ['en'];
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Übersicht
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -2,6 +2,8 @@
|
|||||||
title: Overview
|
title: Overview
|
||||||
---
|
---
|
||||||
|
|
||||||
|
This documentation describes the structure of ZITADEL, its role system and in parallel the use of [console](https://console.zitadel.ch), our administration UI for ZITADEL.
|
||||||
|
|
||||||
> All documentations are under active work and subject to change soon!
|
> All documentations are under active work and subject to change soon!
|
||||||
|
|
||||||
### Features
|
### Features
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Console
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Organisationen
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Projekte
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Clients
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -13,7 +13,7 @@ Typical types of applications are:
|
|||||||
* User Agent (Single-Page-Application)
|
* User Agent (Single-Page-Application)
|
||||||
* Native
|
* Native
|
||||||
|
|
||||||
Check out our [Integration Guide](integrate#Overview) for more information.
|
Check out our [Integration Guide](quickstarts#Overview) for more information.
|
||||||
|
|
||||||
### Manage clients
|
### Manage clients
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Rollen
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -10,7 +10,7 @@ title: Roles
|
|||||||
|
|
||||||
For more information about how **roles** can be consumed, have a look the protocol specific information.
|
For more information about how **roles** can be consumed, have a look the protocol specific information.
|
||||||
|
|
||||||
- [OpenID Connect / OAuth](integrate#How_to_consume_authorizations_in_your_application_or_service)
|
- [OpenID Connect / OAuth](quickstarts#How_to_consume_authorizations_in_your_application_or_service)
|
||||||
|
|
||||||
### Manage Roles
|
### Manage Roles
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Benutzer
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Richtlinien
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Identitäts Provider
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Authorizations
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Management Rollen
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: ZITADEL Rollen
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Audit
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: System Administration
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -38,7 +38,7 @@ There is even a possibility to regenerate a read model.
|
|||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
> Additional infos to the architecture of ZITADEL is located in [Architecture Docs](documentation#Architecture)
|
> Additional infos to the architecture of ZITADEL is located in [Architecture Docs](architecture#Architecture)
|
||||||
|
|
||||||
### Secret Handling
|
### Secret Handling
|
||||||
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<meta property="description" content="{$_('home_seo.description')}" />
|
|
||||||
|
|
||||||
<meta property="og:url" content="https://docs.zitadel.ch" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="Administration" />
|
|
||||||
<meta property="og:description" content="Erfahren Sie mehr über die Administration von ZITADEL" />
|
|
||||||
<meta property="og:image" content="https://www.zitadel.ch/zitadel-social-preview25.png" />
|
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary">
|
|
||||||
<meta name="twitter:site" content="@caos_ch">
|
|
||||||
<meta name="twitter:title" content="Administration" />
|
|
||||||
<meta name="twitter:description" content="Erfahren Sie mehr über die Administration von ZITADEL" />
|
|
||||||
<meta name="twitter:image" content="https://www.zitadel.ch/zitadel-social-preview25.png">
|
|
||||||
|
|
||||||
<script type='application/ld+json'>
|
|
||||||
{
|
|
||||||
"@context" : "http://schema.org/",
|
|
||||||
"@type" : "WebPage",
|
|
||||||
"about": {
|
|
||||||
"name":"Administrations Dokumentation",
|
|
||||||
"description":"Erfahren Sie mehr über die Administration von ZITADEL",
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name":"caos AG",
|
|
||||||
"address":"Teufener Strasse 19, 9000 St.Gallen",
|
|
||||||
"email":"hi@caos.ch"
|
|
||||||
},
|
|
||||||
"copyrightYear":"2020",
|
|
||||||
"creator": {
|
|
||||||
"name":"caos AG",
|
|
||||||
"address":"Teufener Strasse 19, 9000 St.Gallen",
|
|
||||||
"email":"hi@caos.ch"
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<meta property="description" content="How to administrate ZITADEL" />
|
|
||||||
|
|
||||||
<meta property="og:url" content="https://docs.zitadel.ch" />
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:title" content="Administration Documentation" />
|
|
||||||
<meta property="og:description" content="How to administrate ZITADEL" />
|
|
||||||
<meta property="og:image" content="https://www.zitadel.ch/zitadel-social-preview25.png" />
|
|
||||||
|
|
||||||
<meta name="twitter:card" content="summary">
|
|
||||||
<meta name="twitter:site" content="@zitadel_ch">
|
|
||||||
<meta name="twitter:title" content="Administration Documentation" />
|
|
||||||
<meta name="twitter:description" content="How to administrate ZITADEL" />
|
|
||||||
<meta name="twitter:image" content="https://www.zitadel.ch/zitadel-social-preview25.png">
|
|
||||||
|
|
||||||
<script type='application/ld+json'>
|
|
||||||
{
|
|
||||||
"@context" : "http://schema.org/",
|
|
||||||
"@type" : "WebPage",
|
|
||||||
"about": {
|
|
||||||
"name":"Administration Documentation",
|
|
||||||
"description":"How to administrate ZITADEL",
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name":"caos AG",
|
|
||||||
"address":"Teufener Strasse 19, 9000 St.Gallen",
|
|
||||||
"email":"hi@caos.ch"
|
|
||||||
},
|
|
||||||
"copyrightYear":"2020",
|
|
||||||
"creator": {
|
|
||||||
"name":"caos AG",
|
|
||||||
"address":"Teufener Strasse 19, 9000 St.Gallen",
|
|
||||||
"email":"hi@caos.ch"
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
16
site/docs/angular/00-overview.md
Normal file
16
site/docs/angular/00-overview.md
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
title: Angular
|
||||||
|
---
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<img src="logos/zitadel-logo-solo-darkdesign.svg" height="160px" alt="zitadel"/>
|
||||||
|
<i style="font-size: 40px; height: 40px; margin: 0 15px;" class="las la-plus"></i>
|
||||||
|
<img src="tech/angular.svg" height="200px" alt="angular"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
This Integration guide shows you the recommended way to integrate **ZITADEL** into your Angular Application.
|
||||||
|
It demonstrates how to add a user login to your application and fetch some data from the user info endpoint.
|
||||||
|
|
||||||
|
At the end of the guide you should have an application able to login a user and read the user profile.
|
||||||
|
|
||||||
|
> Note that our **ZITADEL Console** is also written in Angular and can therefore be used as a reference.
|
||||||
29
site/docs/angular/01-configure.md
Normal file
29
site/docs/angular/01-configure.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
title: Configure Zitadel
|
||||||
|
---
|
||||||
|
|
||||||
|
### Setup Application and get Keys
|
||||||
|
|
||||||
|
Before we can start building our application we have do do a few configuration steps in ZITADEL Console.
|
||||||
|
You will need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your [Project](https://console.zitadel.ch/projects) and add a new application at the top of the page.
|
||||||
|
Select Web Application and continue.
|
||||||
|
We recommend that you use [Authorization Code](architecture#Authorization_Code) in combination with [Proof Key for Code Exchange](architecture#Proof_Key_for_Code_Exchange) for all web applications.
|
||||||
|
|
||||||
|
> Make sure Authentication Method is set to `NONE` and the Application Type is set to `SPA` or `NATIVE`.
|
||||||
|
|
||||||
|
#### Redirect URLs
|
||||||
|
|
||||||
|
A redirect URL is a URL in your application where ZITADEL redirects the user after they have authenticated. Set your url to the domain the web app will be deployed to or use `localhost:4200` for development as Angular will be running on port 4200.
|
||||||
|
|
||||||
|
> If you are following along with the sample project you downloaded from our templates, you should set the Allowed Callback URL to http://localhost:4200/auth/callback. You will also have to set dev mode to `true` as this will enable unsecure http for the moment.
|
||||||
|
|
||||||
|
If you want to redirect the users back to a route on your application after they have logged out, add an optional redirect in the post redirectURI field.
|
||||||
|
|
||||||
|
Continue and Create the application.
|
||||||
|
|
||||||
|
#### Client ID and Secret
|
||||||
|
|
||||||
|
After successful app creation a popup will appear showing you your clientID as well as a secret.
|
||||||
|
Copy your client ID as it will be needed in the next step.
|
||||||
|
|
||||||
|
> Note: You will be able to regenerate the secret at a later time, though it is not needed for SPAs with Authorization Code Flow.
|
||||||
198
site/docs/angular/02-code.md
Normal file
198
site/docs/angular/02-code.md
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
---
|
||||||
|
title: Angular Setup
|
||||||
|
---
|
||||||
|
|
||||||
|
### Install Angular dependencies
|
||||||
|
|
||||||
|
You need to install an oauth / oidc client to connect with ZITADEL. Run the following command:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install angular-oauth2-oidc
|
||||||
|
```
|
||||||
|
|
||||||
|
This library helps integrating ZITADEL Authentication in your Angular Application.
|
||||||
|
|
||||||
|
### Create and configure Auth Module
|
||||||
|
|
||||||
|
Add the Auth module to your Angular imports in AppModule and setup the AuthConfig in a constant above.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
...
|
||||||
|
import { AuthConfig, OAuthModule } from 'angular-oauth2-oidc';
|
||||||
|
|
||||||
|
const authConfig: AuthConfig = {
|
||||||
|
clientId: 'YOUR CLIENT ID',
|
||||||
|
redirectUri: 'http://localhost:4200/auth/callback', // change this to your domain later or use window.location.origin.
|
||||||
|
scope: 'openid profile email',
|
||||||
|
responseType: 'code',
|
||||||
|
oidc: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [
|
||||||
|
AppComponent,
|
||||||
|
SignedoutComponent,
|
||||||
|
],
|
||||||
|
imports: [
|
||||||
|
OAuthModule..forRoot(),
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
Set **openid**, **profile** and **email** as scope, **code** as responseType, and oidc to **true**.
|
||||||
|
Then create a Authentication Service to provide the functions to authenticate your user.
|
||||||
|
|
||||||
|
You can use Angulars schematics to do so:
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
ng g component services/auth
|
||||||
|
```
|
||||||
|
This will create an AuthService automatically for you.
|
||||||
|
|
||||||
|
Copy the following code to your service. This code provides a function `authenticate()` which redirects the user to ZITADEL. After the user has logged in it will be redirected back to your redirectURI set in Auth Module and Console. Make sure both correspond, otherwise ZITADEL will throw an error.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
|
||||||
|
|
||||||
|
export default class AuthService {
|
||||||
|
private authConfig!: AuthConfig;
|
||||||
|
private _authenticated: boolean = false;
|
||||||
|
private readonly _authenticationChanged: BehaviorSubject<
|
||||||
|
boolean
|
||||||
|
> = new BehaviorSubject(this.authenticated);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private oauthService: OAuthService,
|
||||||
|
private statehandler: StatehandlerService,
|
||||||
|
) { }
|
||||||
|
|
||||||
|
public get authenticated(): boolean {
|
||||||
|
return this._authenticated;
|
||||||
|
}
|
||||||
|
|
||||||
|
public get authenticationChanged(): Observable<boolean> {
|
||||||
|
return this._authenticationChanged;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getOIDCUser(): Observable<any> {
|
||||||
|
return from(this.oauthService.loadUserProfile());
|
||||||
|
}
|
||||||
|
|
||||||
|
public async authenticate(): Promise<boolean> {
|
||||||
|
this.oauthService.configure(this.authConfig);
|
||||||
|
|
||||||
|
this.oauthService.strictDiscoveryDocumentValidation = false;
|
||||||
|
await this.oauthService.loadDiscoveryDocumentAndTryLogin();
|
||||||
|
|
||||||
|
this._authenticated = this.oauthService.hasValidAccessToken();
|
||||||
|
|
||||||
|
if (!this.oauthService.hasValidIdToken() || !this.authenticated || partialConfig || force) {
|
||||||
|
const newState = setState ? await this.statehandler.createState().toPromise() : undefined;
|
||||||
|
this.oauthService.initCodeFlow(newState);
|
||||||
|
}
|
||||||
|
this._authenticationChanged.next(this.authenticated);
|
||||||
|
|
||||||
|
return this.authenticated;
|
||||||
|
}
|
||||||
|
|
||||||
|
public signout(): void {
|
||||||
|
this.oauthService.logOut();
|
||||||
|
this._authenticated = false;
|
||||||
|
this._authenticationChanged.next(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Add Login in your application
|
||||||
|
|
||||||
|
To login a user, a component or a guard is needed.
|
||||||
|
|
||||||
|
- A component provides a button prompting the user to start the login flow.
|
||||||
|
`authenticate()` redirects your user to ZITADEL.ch for authentication. Upon successfull Authentication, ZITADEL will redirect the user back to your previously defined Redirect URL.
|
||||||
|
|
||||||
|
- A guard can be setup to check if the user has a valid **Access Token** to proceed. This will check if the user has a stored **accesstoken** in storage or otherwise prompt the user to login.
|
||||||
|
|
||||||
|
The use of this components totally depends on your application. In most cases you need both.
|
||||||
|
|
||||||
|
To create a component use
|
||||||
|
``` bash
|
||||||
|
ng g component components/login
|
||||||
|
```
|
||||||
|
and then inject the authService to call `authenticate()`.
|
||||||
|
|
||||||
|
Same for the guard:
|
||||||
|
``` bash
|
||||||
|
ng g guard guards/auth
|
||||||
|
```
|
||||||
|
|
||||||
|
This code shows the AuthGuard used in our Console.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AuthService } from 'src/app/services/auth.service';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class AuthGuard implements CanActivate {
|
||||||
|
constructor(private auth: AuthService) { }
|
||||||
|
|
||||||
|
public canActivate(
|
||||||
|
_: ActivatedRouteSnapshot,
|
||||||
|
state: RouterStateSnapshot,
|
||||||
|
): Observable<boolean> | Promise<boolean> | boolean {
|
||||||
|
if (!this.auth.authenticated) {
|
||||||
|
return this.auth.authenticate();
|
||||||
|
}
|
||||||
|
return this.auth.authenticated;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
it can easily be added to your RouterModule.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
...
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
|
||||||
|
canActivate: [AuthGuard],
|
||||||
|
},
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
### Add Logout in your application
|
||||||
|
|
||||||
|
The authService and Library also provides a useful function for logging out your users. Just call `auth.signout()` to log out your user. Note that you can also configure your Logout Redirect URL if you want your Users to be redirected after logout.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AuthService } from 'src/app/services/auth.service.ts';
|
||||||
|
|
||||||
|
export class SomeComponentWithLogout {
|
||||||
|
constructor(private authService: AuthService){}
|
||||||
|
|
||||||
|
public signout(): Promise<void> {
|
||||||
|
return this.authService.signout();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Show User Information
|
||||||
|
|
||||||
|
To fetch user data, ZITADELS user info endpoint has to be called. This data contains sensitive information and artifacts related to your users identity and the scopes you defined in your Auth Config.
|
||||||
|
Our AuthService already includes a function called getOIDCUser(). You can call it whereever you need this information.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { AuthService } from 'src/app/services/auth.service.ts';
|
||||||
|
|
||||||
|
export class SomeComponentWithUserInfo {
|
||||||
|
constructor(public authService: AuthService){}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
and in your html
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div *ngIf="(authService.getOIDCUser | async) as oidcInfo">
|
||||||
|
<p>{{oidcInfo | json}}</p>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
9
site/docs/angular/03-end.md
Normal file
9
site/docs/angular/03-end.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
title: Completion
|
||||||
|
---
|
||||||
|
|
||||||
|
### What next?
|
||||||
|
|
||||||
|
You have successfully integrated ZITADEL in your Angular Application! Now you can proceed implementing our APIs to include Authorization. Refer to our [Docs](apis#Authentication_API) or checkout our Console Code on [Github](https://github.com/caos/zitadel) which is using GRPC to access data.
|
||||||
|
|
||||||
|
For more information about creating an angular application we refer to [Angular](https://angular.io/start) and for more information about the used oauth/oidc library consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||||
@ -3,6 +3,8 @@ title: Overview
|
|||||||
description: …
|
description: …
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<i class="las la-code" style="font-size: 100px; height: 100px; color:#6c8eef" ></i>
|
||||||
|
|
||||||
> All documentations are under active work and subject to change soon!
|
> All documentations are under active work and subject to change soon!
|
||||||
|
|
||||||
### APIs
|
### APIs
|
||||||
@ -2,6 +2,8 @@
|
|||||||
title: Overview
|
title: Overview
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<i class="las la-project-diagram" style="font-size: 100px; height: 100px; color:#6c8eef"></i>
|
||||||
|
|
||||||
> All documentations are under active work and subject to change soon!
|
> All documentations are under active work and subject to change soon!
|
||||||
|
|
||||||
This part of the **ZITADEL** documentation comprises three major subject areas:
|
This part of the **ZITADEL** documentation comprises three major subject areas:
|
||||||
@ -97,3 +97,4 @@ With this design even the outage of a whole data-center would have a minimal imp
|
|||||||
<figcaption itemprop="caption description">Multi-Cluster Architecture</figcaption>
|
<figcaption itemprop="caption description">Multi-Cluster Architecture</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -3,22 +3,21 @@ title: OpenID Connect 1.0 & OAuth 2.0
|
|||||||
---
|
---
|
||||||
|
|
||||||
### Endpoints and Domains
|
### Endpoints and Domains
|
||||||
|
|
||||||
This chapter documents the [OpenID Connect 1.0](https://openid.net/connect/) and [OAuth 2.0](https://oauth.net/2/) features provided by **ZITADEL**.
|
This chapter documents the [OpenID Connect 1.0](https://openid.net/connect/) and [OAuth 2.0](https://oauth.net/2/) features provided by **ZITADEL**.
|
||||||
|
|
||||||
Under normal circumstances **ZITADEL** need four domain names to operate properly.
|
Under normal circumstances **ZITADEL** need four domain names to operate properly.
|
||||||
|
|
||||||
| Domain Name | Example | Description |
|
| Domain Name | Example | Description |
|
||||||
|:------------|:----------------------|--------------------------------------------------------------------------------------------------------------------------------------|
|
|:------------|:----------------------|--------------------------------------------------------------------------------------------------------------------------------------|
|
||||||
| issuer | `issuer.zitadel.ch` | Provides the [OpenID Connect 1.0 Discovery Endpoint](#openid-connect-10-discovery) |
|
| issuer | `issuer.zitadel.ch` | Provides the [OpenID Connect 1.0 Discovery Endpoint](#OpenID_Connect_1_0_Discovery) |
|
||||||
| api | `api.zitadel.ch` | All ZITADEL API's are located under this domain see [API explanation](develop#APIs) for details |
|
| api | `api.zitadel.ch` | All ZITADEL API's are located under this domain see [API explanation](apis#APIs) for details |
|
||||||
| login | `accounts.zitadel.ch` | The accounts.* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
|
| login | `accounts.zitadel.ch` | The accounts.* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
|
||||||
| console | `console.zitadel.ch` | With the console.* domain we serve the assets for the management gui |
|
| console | `console.zitadel.ch` | With the console.* domain we serve the assets for the management gui |
|
||||||
|
|
||||||
#### OpenID Connect 1.0 Discovery
|
#### OpenID Connect 1.0 Discovery
|
||||||
|
|
||||||
The OpenID Connect Discovery Endpoint is located within the issuer domain.
|
The OpenID Connect Discovery Endpoint is located within the issuer domain.
|
||||||
For example with [zitadel.ch](zitadel.ch) this would be the domain [issuer.zitadel.ch](issuer.zitadel.ch). This would give us [https://issuer.zitadel.ch/.well-known/openid-configuration](https://issuer.zitadel.ch/.well-known/openid-configuration).
|
For example with [zitadel.ch](https://zitadel.ch), issuer.zitadel.ch would be the domain. This would give us [https://issuer.zitadel.ch/.well-known/openid-configuration](https://issuer.zitadel.ch/.well-known/openid-configuration).
|
||||||
|
|
||||||
**Link to spec.** [OpenID Connect Discovery 1.0 incorporating errata set 1](https://openid.net/specs/openid-connect-discovery-1_0.html)
|
**Link to spec.** [OpenID Connect Discovery 1.0 incorporating errata set 1](https://openid.net/specs/openid-connect-discovery-1_0.html)
|
||||||
|
|
||||||
@ -50,7 +49,7 @@ For example with [zitadel.ch](zitadel.ch) this would be the domain [issuer.zitad
|
|||||||
|
|
||||||
#### OAuth 2.0 Metadata
|
#### OAuth 2.0 Metadata
|
||||||
|
|
||||||
**ZITADEL** does not yet provide a OAuth 2.0 Metadata endpoint but instead provides a [OpenID Connect Discovery Endpoint](#openid-connect-10-discovery).
|
**ZITADEL** does not yet provide a OAuth 2.0 Metadata endpoint but instead provides a [OpenID Connect Discovery Endpoint](#OpenID_Connect_1_0_Discovery).
|
||||||
|
|
||||||
### Scopes
|
### Scopes
|
||||||
|
|
||||||
@ -287,3 +286,4 @@ curl --request POST \
|
|||||||
#### Security Assertion Markup Language (SAML) 2.0 Profile
|
#### Security Assertion Markup Language (SAML) 2.0 Profile
|
||||||
|
|
||||||
**Link to spec.** [Security Assertion Markup Language (SAML) 2.0 Profile for OAuth 2.0 Client Authentication and Authorization Grants](https://tools.ietf.org/html/rfc7522)
|
**Link to spec.** [Security Assertion Markup Language (SAML) 2.0 Profile for OAuth 2.0 Client Authentication and Authorization Grants](https://tools.ietf.org/html/rfc7522)
|
||||||
|
|
||||||
15
site/docs/aspnet/00-overview.md
Normal file
15
site/docs/aspnet/00-overview.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
title: ASP.NET Auth and Authz
|
||||||
|
description: ...
|
||||||
|
---
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<img src="logos/zitadel-logo-solo-darkdesign.svg" height="160px" alt="zitadel"/>
|
||||||
|
<i style="font-size: 40px; height: 40px; margin: 0 15px;" class="las la-plus"></i>
|
||||||
|
<img src="tech/net.svg" height="160px" alt="aspnet"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
> This quickstart is not yet released. Come back later!
|
||||||
|
|
||||||
|
This Integration guide shows you the recommended way on how to integrate **ZITADEL** into your ASP NET Backend.
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Übersicht
|
|
||||||
description: …
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Authentication API
|
|
||||||
description: …
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Management API
|
|
||||||
description: …
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Admin API
|
|
||||||
description: …
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Übersicht
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
---
|
|
||||||
title: Prinzipien
|
|
||||||
---
|
|
||||||
|
|
||||||
- Seien Sie bei Ihren Entscheidungen transparent
|
|
||||||
- Zustandsloses Anwendungsdesign
|
|
||||||
- Das System der Aufzeichnungen ist der Ereignisspeicher
|
|
||||||
- Alles andere muss regeneriert werden können
|
|
||||||
- Versuchen Sie nicht, komplexe Probleme außerhalb des IAM-Bereichs zu lösen
|
|
||||||
- Verwenden Sie skalierbaren Speicher für den Ereignisspeicher und die Abfragemodelle
|
|
||||||
- Versuchen Sie, wenn immer möglich idempotent zu sein
|
|
||||||
- Reduzieren Sie die Notwendigkeit von System- oder externen Abhängigkeiten so weit wie möglich
|
|
||||||
- Automatisierung einbeziehen
|
|
||||||
- Zuerst die Design-API
|
|
||||||
- Optimieren Sie alle Komponenten für den Betrieb am zweiten Tag
|
|
||||||
- Verwenden Sie nur Open-Source-Projekte mit permissiven Lizenzen
|
|
||||||
- Rollen Sie nicht Ihre eigene Krypto
|
|
||||||
- Standard so weit wie möglich einbeziehen
|
|
||||||
- Nutzen Sie die Funktionen der Plattform
|
|
||||||
- Mit einem CDN und einer WAF laufen können
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: Architektur
|
|
||||||
---
|
|
||||||
|
|
||||||
> TBD
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
title: OpenID Connect 1.0 & OAuth 2.0
|
|
||||||
---
|
|
||||||
|
|
||||||
> TBD
|
|
||||||
78
site/docs/export-log
Normal file
78
site/docs/export-log
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
4.66 kB service-worker-index.html
|
||||||
|
10.5 kB index.html
|
||||||
|
1.15 kB icons/favicon.ico
|
||||||
|
481 B manifest.json
|
||||||
|
3.17 kB prism.css
|
||||||
|
11.6 kB default-skin/default-skin.css
|
||||||
|
14.8 kB client/client-48a0d285.css
|
||||||
|
3.88 kB client/index-5d76bab7.css
|
||||||
|
4.14 kB photoswipe.css
|
||||||
|
33.9 kB client/client.ea30bda8.js
|
||||||
|
559 B client/inject_styles.5607aec6.js
|
||||||
|
18.1 kB client/index.6f1d050b.js
|
||||||
|
5.54 kB start.json
|
||||||
|
967 B quickstarts.json
|
||||||
|
6.45 kB logos/zitadel-logo-light.svg
|
||||||
|
8.3 kB logos/zitadel-logo-solo-darkdesign.svg
|
||||||
|
18 kB start/index.html
|
||||||
|
14.9 kB img/develop2.png
|
||||||
|
10.1 kB img/projects2.png
|
||||||
|
11.1 kB img/personal2.png
|
||||||
|
7.96 kB quickstarts/index.html
|
||||||
|
15.2 kB use/index.html
|
||||||
|
22.8 kB apis/index.html
|
||||||
|
73.1 kB img/accounts_org_register.png
|
||||||
|
10.3 kB client/[slug]-3cb415b8.css
|
||||||
|
1.52 kB client/index-4d174bf5.css
|
||||||
|
20.7 kB client/[slug].aebb20dc.js
|
||||||
|
4.16 kB client/index.c2043c63.js
|
||||||
|
114 kB architecture/index.html
|
||||||
|
207 kB img/accounts_password.png
|
||||||
|
199 kB img/accounts_page.png
|
||||||
|
899 B tech/angular.svg
|
||||||
|
1.79 kB tech/dart.svg
|
||||||
|
2.29 kB tech/golang.svg
|
||||||
|
200 kB img/accounts_otp_verify.png
|
||||||
|
21.3 kB img/zitadel_software_architecture.png
|
||||||
|
10.4 kB img/zitadel_cluster_architecture.png
|
||||||
|
184 kB administrate/index.html
|
||||||
|
39 kB angular/index.html
|
||||||
|
38.9 kB dart/index.html
|
||||||
|
38.8 kB go/index.html
|
||||||
|
7.37 kB img/zitadel_multicluster_architecture.png
|
||||||
|
31 kB img/console_user_entry.png
|
||||||
|
83.5 kB img/console_admin_entry.png
|
||||||
|
167 kB img/console_admin_system.png
|
||||||
|
129 kB img/console_org_domain_default.png
|
||||||
|
126 kB img/console_org_domain_add.png
|
||||||
|
142 kB img/console_org_domain_added.png
|
||||||
|
126 kB img/console_user_personal_information.png
|
||||||
|
135 kB img/console_org_domain_verify.png
|
||||||
|
52.8 kB img/console_user_personal_info.png
|
||||||
|
15 kB img/console_projects_empty.png
|
||||||
|
40.2 kB img/console_projects_my_first_project.png
|
||||||
|
40.7 kB img/console_org_domain_verified.png
|
||||||
|
178 kB img/console_org_manage_roles_2.png
|
||||||
|
129 kB img/console_org_manage_roles_1.png
|
||||||
|
38.1 kB img/console_org_domain_verify_dns.png
|
||||||
|
112 kB img/console_project_manage_roles_1.png
|
||||||
|
19.5 kB img/console_clients_my_first_spa_wizard_1.png
|
||||||
|
21.6 kB img/console_clients_my_first_spa_wizard_4.png
|
||||||
|
22.3 kB img/console_clients_my_first_spa_wizard_3.png
|
||||||
|
28.3 kB img/console_clients_my_first_spa_config.png
|
||||||
|
27.1 kB img/console_user_list_search.png
|
||||||
|
159 kB img/console_project_manage_roles_2.png
|
||||||
|
25.2 kB img/console_user_list.png
|
||||||
|
16.3 kB img/console_clients_my_first_spa_wizard_2.png
|
||||||
|
38.8 kB img/console_authz_add_1.png
|
||||||
|
77.2 kB administrate.json
|
||||||
|
26.6 kB img/console_authz_overview.png
|
||||||
|
186 kB img/console_user_manage_roles_1.png
|
||||||
|
47.9 kB img/console_user_manage_roles_2.png
|
||||||
|
110 kB img/console_user_create_done.png
|
||||||
|
36.1 kB img/console_authz_add_2.png
|
||||||
|
34.1 kB img/console_authz_add_3.png
|
||||||
|
29.6 kB img/console_user_create_form.png
|
||||||
|
6.53 kB apis.json
|
||||||
|
142 kB img/console_iam_admin_failed.png
|
||||||
|
167 kB img/console_iam_admin_views.png
|
||||||
14
site/docs/flutter/00-overview.md
Normal file
14
site/docs/flutter/00-overview.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
---
|
||||||
|
title: Flutter Login
|
||||||
|
description: ...
|
||||||
|
---
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<img src="logos/zitadel-logo-solo-darkdesign.svg" height="160px" alt="zitadel"/>
|
||||||
|
<i style="font-size: 40px; height: 40px; margin: 0 15px;" class="las la-plus"></i>
|
||||||
|
<img src="tech/flutter.svg" height="150px" alt="flutter"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
> This quickstart is not yet released. Come back later!
|
||||||
|
|
||||||
|
This Integration guide shows you the recommended way on how to integrate **ZITADEL** into your Dart Application.
|
||||||
15
site/docs/go/00-overview.md
Normal file
15
site/docs/go/00-overview.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
---
|
||||||
|
title: Dart Login
|
||||||
|
description: ...
|
||||||
|
---
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<img src="logos/zitadel-logo-solo-darkdesign.svg" height="160px" alt="zitadel"/>
|
||||||
|
<i style="font-size: 40px; height: 40px; margin: 0 15px;" class="las la-plus"></i>
|
||||||
|
<img src="tech/golang.svg" height="80px" alt="golang"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
> This quickstart is not yet released. Come back later!
|
||||||
|
|
||||||
|
This Integration guide shows you the recommended way on how to integrate **ZITADEL** into your Go Lang Backend.
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Übersicht
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Single Page Application
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Server Side Application
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Mobile Application
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Native Application
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Proxy / WAF
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: API
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
---
|
|
||||||
title: Products
|
|
||||||
description: ...
|
|
||||||
---
|
|
||||||
|
|
||||||
> This Language is not yet translated. Please consult the English version.
|
|
||||||
13
site/docs/oauth2-proxy/00-overview.md
Normal file
13
site/docs/oauth2-proxy/00-overview.md
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
---
|
||||||
|
title: OAuth 2.0 Proxy
|
||||||
|
---
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center;">
|
||||||
|
<img src="logos/zitadel-logo-solo-darkdesign.svg" height="160px" alt="zitadel"/>
|
||||||
|
<i style="font-size: 40px; height: 40px; margin: 0 15px;" class="las la-plus"></i>
|
||||||
|
<img src="tech/oauth2-proxy.svg" height="200px" alt="oauth2-proxy"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### OAuth2 Proxy Project
|
||||||
|
|
||||||
|
[OAuth2-proxy](https://github.com/oauth2-proxy/oauth2-proxy) is a project which allows services to delegate the authentication flow to a IDP, for example **ZITADEL**
|
||||||
29
site/docs/oauth2-proxy/01-configure-zitadel.md
Normal file
29
site/docs/oauth2-proxy/01-configure-zitadel.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
title: Configure Zitadel
|
||||||
|
---
|
||||||
|
|
||||||
|
### Setup Application and get Keys
|
||||||
|
|
||||||
|
Before we can start building our application we have do do a few configuration steps in ZITADEL Console.
|
||||||
|
You will need to provide some information about your app. We recommend creating a new app to start from scratch. Navigate to your [Project](https://console.zitadel.ch/projects) and add a new application at the top of the page.
|
||||||
|
Select Web Application and continue.
|
||||||
|
We recommend that you use [Authorization Code](architecture#Authorization_Code) for the OAuth 2.0 Proxy.
|
||||||
|
|
||||||
|
> Make sure Authentication Method is set to `BASIC` and the Application Type is set to `Web`.
|
||||||
|
|
||||||
|
#### Redirect URLs
|
||||||
|
|
||||||
|
A redirect URL is a URL in your application where ZITADEL redirects the user after they have authenticated. Set your url to the domain the proxy will be deployed to or use the default one `http://127.0.0.1:4180/oauth2/callback`.
|
||||||
|
|
||||||
|
> If you are following along with the sample project you downloaded from our templates, you should set the Allowed Callback URL to http://localhost:4200/auth/callback. You will also have to set dev mode to `true` as this will enable unsecure http for the moment.
|
||||||
|
|
||||||
|
If you want to redirect the users back to a route on your application after they have logged out, add an optional redirect in the post redirectURI field.
|
||||||
|
|
||||||
|
Continue and Create the application.
|
||||||
|
|
||||||
|
#### Client ID and Secret
|
||||||
|
|
||||||
|
After successful app creation a popup will appear showing you your clientID as well as a secret.
|
||||||
|
Copy your client ID and Secrets as it will be needed in the next step.
|
||||||
|
|
||||||
|
> Note: You will be able to regenerate the secret at a later time if you loose it.
|
||||||
28
site/docs/oauth2-proxy/02-configure-proxy.md
Normal file
28
site/docs/oauth2-proxy/02-configure-proxy.md
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
---
|
||||||
|
title: OAuth 2.0 Proxy Setup
|
||||||
|
---
|
||||||
|
|
||||||
|
### Authentication Example
|
||||||
|
|
||||||
|
```toml
|
||||||
|
provider = "oidc"
|
||||||
|
user_id_claim = "sub" #uses the subject as ID instead of the email
|
||||||
|
provider_display_name = "ZITADEL"
|
||||||
|
redirect_url = "http://127.0.0.1:4180/oauth2/callback"
|
||||||
|
oidc_issuer_url = "https://issuer.zitadel.ch"
|
||||||
|
upstreams = [
|
||||||
|
"https://example.corp.com"
|
||||||
|
]
|
||||||
|
email_domains = [
|
||||||
|
"*"
|
||||||
|
]
|
||||||
|
client_id = "{ZITADEL_GENERATED_CLIENT_ID}"
|
||||||
|
client_secret = "{ZITADEL_GENERATED_CLIENT_SECRET}"
|
||||||
|
pass_access_token = true
|
||||||
|
cookie_secret = "{SUPPLY_SOME_SECRET_HERE}"
|
||||||
|
skip_provider_button = true
|
||||||
|
cookie_secure = false #localdev only false
|
||||||
|
http_address = "127.0.0.1:4180" #localdev only
|
||||||
|
```
|
||||||
|
|
||||||
|
> This was tested with version `oauth2-proxy v6.1.1 (built with go1.14.2)`
|
||||||
7
site/docs/oauth2-proxy/03-end.md
Normal file
7
site/docs/oauth2-proxy/03-end.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Completion
|
||||||
|
---
|
||||||
|
|
||||||
|
### What next?
|
||||||
|
|
||||||
|
You have successfully integrated ZITADEL in your proxy!
|
||||||
@ -13,4 +13,4 @@ This Integration guide gives you recommendations on how to integrate different C
|
|||||||
- Native App
|
- Native App
|
||||||
- Reverse Proxy
|
- Reverse Proxy
|
||||||
|
|
||||||
For more details about how **ZITADEL** treats [scopes](documentation#Scopes) and [claims](documentation#Claims) see the [documentations](documentation).
|
For more details about how **ZITADEL** treats [scopes](architecture#Scopes) and [claims](architecture#Claims) see the [documentations](architecture).
|
||||||
@ -5,7 +5,7 @@ description: ...
|
|||||||
|
|
||||||
### SPA Protocol and Flow recommendation
|
### SPA Protocol and Flow recommendation
|
||||||
|
|
||||||
If your [client](administrate#Clients) is a single page application (SPA) we recommend that you use [Authorization Code](documentation#Authorization_Code) in combination with [Proof Key for Code Exchange](documentation#Proof_Key_for_Code_Exchange).
|
If your [client](administrate#Clients) is a single page application (SPA) we recommend that you use [Authorization Code](architecture#Authorization_Code) in combination with [Proof Key for Code Exchange](architecture#Proof_Key_for_Code_Exchange).
|
||||||
|
|
||||||
This flow has great support with most modern languages and frameworks and is the recommended default.
|
This flow has great support with most modern languages and frameworks and is the recommended default.
|
||||||
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user