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

fix(console): onboarding actions with external links (#6822)

Browse Source 
* fix: attr for external links

* template outlet
This commit is contained in:
Max Peintner
2023-11-22 10:14:37 +01:00
committed by GitHub
parent d4b18a3eda
commit 5fa596a871
3 changed files with 63 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
console/src/app/modules/onboarding/onboarding.component.html
View File

@@ -24,53 +24,71 @@
> >
<ng-container *ngFor="let action of actions | async"> <ng-container *ngFor="let action of actions | async">
<a <a
*ngIf="!action[1].externalLink"
[routerLink]="action[1].link" [routerLink]="action[1].link"
[queryParams]="{ id: action[1].fragment }" [queryParams]="{ id: action[1].fragment }"
class="action-card card" class="action-card card"
[ngClass]="{ done: action[1].reached !== undefined }" [ngClass]="{ done: action[1].reached !== undefined }"
> >
<div class="state-circle"> <ng-template
<mat-icon [ngTemplateOutlet]="onboardingContent"
*ngIf="action[1]?.reached !== undefined" [ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
matTooltip="{{ action[1].reached | milestone }}" >
class="success-icon" </ng-template>
>check_circle</mat-icon </a>
> <a
</div> *ngIf="action[1].externalLink"
[href]="action[1].link"
<div class="action-content"> class="action-card card"
<div class="action-content-row"> [ngClass]="{ done: action[1].reached !== undefined }"
<div >
class="icon-wrapper" <ng-template
[ngStyle]="{ [ngTemplateOutlet]="onboardingContent"
background: (themeService.isDarkTheme | async) ? action[1].darkcolor + 50 : action[1].lightcolor + 50 [ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
}" >
> </ng-template>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action[1].darkcolor : action[1].lightcolor,
color: (themeService.isDarkTheme | async) ? action[1].lightcolor : action[1].darkcolor
}"
>
<i class="{{ action[1].iconClasses }}"></i>
</div>
</div>
<div class="text-block">
<span class="name">{{ 'ONBOARDING.MILESTONES.' + action[0] + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.MILESTONES.' + action[0] + '.description' | translate
}}</span>
</div>
</div>
<span class="fill-space"></span>
<div class="action-row">
<span>{{ 'ONBOARDING.MILESTONES.' + action[0] + '.action' | translate }}</span>
<mat-icon class="icon">keyboard_arrow_right</mat-icon>
</div>
</div>
</a> </a>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<ng-template #onboardingContent let-action="action" let-title="title">
<div class="state-circle">
<mat-icon *ngIf="action?.reached !== undefined" matTooltip="{{ action.reached | milestone }}" class="success-icon"
>check_circle</mat-icon
>
</div>
<div class="action-content">
<div class="action-content-row">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action.darkcolor + 50 : action.lightcolor + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? action.darkcolor : action.lightcolor,
color: (themeService.isDarkTheme | async) ? action.lightcolor : action.darkcolor
}"
>
<i class="{{ action.iconClasses }}"></i>
</div>
</div>
<div class="text-block">
<span class="name">{{ 'ONBOARDING.MILESTONES.' + title + '.title' | translate }}</span>
<span class="cnsl-secondary-text description">{{
'ONBOARDING.MILESTONES.' + title + '.description' | translate
}}</span>
</div>
</div>
<span class="fill-space"></span>
<div class="action-row">
<span>{{ 'ONBOARDING.MILESTONES.' + title + '.action' | translate }}</span>
<mat-icon class="icon">keyboard_arrow_right</mat-icon>
</div>
</div>
</ng-template>

3
console/src/app/services/admin.service.ts
View File

@@ -313,6 +313,7 @@ export interface OnboardingActions {
order: number; order: number;
milestoneType: MilestoneType; milestoneType: MilestoneType;
link: string; link: string;
externalLink?: boolean;
fragment?: string | undefined; fragment?: string | undefined;
iconClasses?: string; iconClasses?: string;
darkcolor: string; darkcolor: string;
@@ -322,6 +323,7 @@ export interface OnboardingActions {
type OnboardingMilestone = { type OnboardingMilestone = {
order: number; order: number;
link: string; link: string;
externalLink?: boolean;
fragment: string | undefined; fragment: string | undefined;
reached: Milestone.AsObject | undefined; reached: Milestone.AsObject | undefined;
iconClasses?: string; iconClasses?: string;
@@ -354,6 +356,7 @@ export class AdminService {
obj[Object.keys(MilestoneType)[action.milestoneType].substring(this.milestoneTypePrefixLength)] = { obj[Object.keys(MilestoneType)[action.milestoneType].substring(this.milestoneTypePrefixLength)] = {
order: action.order, order: action.order,
link: action.link, link: action.link,
externalLink: action.externalLink,
fragment: action.fragment, fragment: action.fragment,
iconClasses: action.iconClasses, iconClasses: action.iconClasses,
darkcolor: action.darkcolor, darkcolor: action.darkcolor,

1
console/src/app/utils/onboarding.ts
View File

@@ -44,6 +44,7 @@ export const ONBOARDING_MILESTONES: OnboardingActions[] = [
order: 3, order: 3,
milestoneType: MilestoneType.MILESTONE_TYPE_AUTHENTICATION_SUCCEEDED_ON_APPLICATION, milestoneType: MilestoneType.MILESTONE_TYPE_AUTHENTICATION_SUCCEEDED_ON_APPLICATION,
link: 'https://zitadel.com/docs/guides/integrate/login-users', link: 'https://zitadel.com/docs/guides/integrate/login-users',
externalLink: true,
iconClasses: 'las la-sign-in-alt', iconClasses: 'las la-sign-in-alt',
darkcolor: sthdark, darkcolor: sthdark,
lightcolor: sthlight, lightcolor: sthlight,