TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 21:07: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">
<a
*ngIf="!action[1].externalLink"
[routerLink]="action[1].link"
[queryParams]="{ id: action[1].fragment }"
class="action-card card"
[ngClass]="{ done: action[1].reached !== undefined }"
>
<div class="state-circle">
<mat-icon
*ngIf="action[1]?.reached !== undefined"
matTooltip="{{ action[1].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[1].darkcolor + 50 : action[1].lightcolor + 50
}"
>
<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>
<ng-template
[ngTemplateOutlet]="onboardingContent"
[ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
>
</ng-template>
</a>
<a
*ngIf="action[1].externalLink"
[href]="action[1].link"
class="action-card card"
[ngClass]="{ done: action[1].reached !== undefined }"
>
<ng-template
[ngTemplateOutlet]="onboardingContent"
[ngTemplateOutletContext]="{ title: action[0], action: action[1] }"
>
</ng-template>
</a>
</ng-container>
</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;
milestoneType: MilestoneType;
link: string;
externalLink?: boolean;
fragment?: string | undefined;
iconClasses?: string;
darkcolor: string;
@@ -322,6 +323,7 @@ export interface OnboardingActions {
type OnboardingMilestone = {
order: number;
link: string;
externalLink?: boolean;
fragment: string | undefined;
reached: Milestone.AsObject | undefined;
iconClasses?: string;
@@ -354,6 +356,7 @@ export class AdminService {
obj[Object.keys(MilestoneType)[action.milestoneType].substring(this.milestoneTypePrefixLength)] = {
order: action.order,
link: action.link,
externalLink: action.externalLink,
fragment: action.fragment,
iconClasses: action.iconClasses,
darkcolor: action.darkcolor,

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

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