zitadel/console/src/app/pages/home/home.component.html

<div class="wrapper max-width-container">
    <div class="header" *ngIf="(authService.user | async) || {} as user">
        <app-avatar [routerLink]="['/users/me']" *ngIf="user && (user.displayName || (user.firstName && user.lastName))"
            class="avatar" [name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)"
            [size]="100">
        </app-avatar>
        <h3 *ngIf="(user.displayName || user.firstName || user.lastName); else loader">
            {{'HOME.WELCOME' | translate}},
            {{user?.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)}}</h3>
        <p>{{user?.userName}}</p>

        <p class="wlc_stnce">{{'HOME.WELCOMESENTENCE' | translate}}</p>
        <ng-template #loader>
            <mat-spinner diameter="50"></mat-spinner>
        </ng-template>
    </div>

    <div class="container">
        <ng-template appHasRole [appHasRole]="['iam.write']">
            <app-card class="item">
                <div class="top">
                    <h2>
                        <i class="icon las la-gem"></i>
                        {{'HOME.IAM'| translate}}</h2>
                    <p>{{'HOME.IAM_DESC'| translate}}</p>
                </div>

                <ng-template appHasRole [appHasRole]="['org.create','iam.write']">
                    <a class="short-link" [routerLink]="[ '/org', 'create']">{{'HOME.IAM_CREATE_ORG' | translate}}<i
                            class="las la-link"></i></a>
                </ng-template>
                <ng-template appHasRole [appHasRole]="['iam.policy.read']">
                    <a class="short-link"
                        [routerLink]="[ '/iam', 'policy','iam']">{{'HOME.IAM_POLICY_IAM' | translate}}<i
                            class="las la-link"></i></a>
                    <a class="short-link"
                        [routerLink]="[ '/iam', 'policy','complexity']">{{'HOME.IAM_POLICY_COMPLEXITY' | 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>

                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button [routerLink]="['/iam']">{{'HOME.IAM_BUTTON' | translate}}</a>
                </div>
            </app-card>
        </ng-template>

        <app-card class="item">
            <div class="top">
                <h2> <i class="icon las la-user-circle"></i>
                    {{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
                <p>{{'HOME.SECURITYANDPRIVACY_DESC'| translate}}</p>
            </div>
            <a class="short-link" [routerLink]="[ '/users', 'me','password']">{{'HOME.CHANGE_PWD' | translate}}<i
                    class="las la-link"></i></a>

            <span class="fill-space"></span>
            <div class="footer">
                <a color="primary" mat-stroked-button
                    [routerLink]="['/users/me']">{{'HOME.SECURITYANDPRIVACY_BUTTON' | translate}}</a>
            </div>
        </app-card>

        <ng-template appHasRole [appHasRole]="['project.read']">
            <app-card class="item">
                <div class="top">
                    <h2>
                        <i class="icon las la-layer-group"></i>
                        {{'HOME.PROJECTS'| translate}}</h2>
                    <p>{{'HOME.PROJECTS_DESC'| translate}}</p>
                    <ng-template appHasRole [appHasRole]="['project.create']">
                        <a class="short-link"
                            [routerLink]="[ '/projects', 'create']">{{'HOME.PROJECTS_NEW_LINK' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button
                        [routerLink]="['/projects']">{{'HOME.PROJECTS_BUTTON' | translate}}</a>
                </div>
            </app-card>
        </ng-template>

        <ng-template appHasRole [appHasRole]="['org.read']">
            <app-card class="item">
                <div class="top">
                    <h2> <i class="icon las la-archway"></i>
                        {{'HOME.PROTECTION'| translate}}</h2>
                    <p>{{'HOME.PROTECTION_DESC'| translate}}</p>
                    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
                        <a class="short-link"
                            [routerLink]="[ '/org', 'policy','iam']">{{'HOME.ORG_POLICY_IAM' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                    <ng-template appHasRole [appHasRole]="['policy.read']">
                        <a class="short-link"
                            [routerLink]="[ '/org', 'policy','complexity']">{{'HOME.ORG_POLICY_COMPLEXITY' | translate}}<i
                                class="las la-link"></i></a>
                        <a class="short-link"
                            [routerLink]="[ '/org', 'policy','login']">{{'HOME.ORG_POLICY_LOGIN' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button
                        [routerLink]="['/org']">{{'HOME.PROTECTION_BUTTON' | translate}}</a>
                </div>
            </app-card>
        </ng-template>

        <ng-template appHasRole [appHasRole]="['user.read']">
            <app-card class="item">
                <div class="top">
                    <h2>
                        <i class="las la-users"></i>
                        {{'HOME.USERS'| translate}}</h2>
                    <p>{{'HOME.USERS_DESC'| translate}}</p>
                    <ng-template appHasRole [appHasRole]="['user.read(:[0-9]*)?']">
                        <a class="short-link"
                            [routerLink]="[ '/users', 'list', 'humans']">{{'HOME.USERS_HUMANS' | translate}}<i
                                class="las la-link"></i></a>
                        <a class="short-link"
                            [routerLink]="[ '/users', 'list', 'machines']">{{'HOME.USERS_MACHINES' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                    <ng-template appHasRole [appHasRole]="['user.read']">
                        <a class="short-link" [routerLink]="[ '/users', 'create']">{{'HOME.USERS_CREATE' | translate}}<i
                                class="las la-link"></i></a>
                    </ng-template>
                </div>
                <span class="fill-space"></span>
                <div class="footer">
                    <a color="primary" mat-stroked-button
                        [routerLink]="['/users/list/humans']">{{'HOME.USERS_BUTTON' | translate}}</a>
                </div>
            </app-card>
        </ng-template>
    </div>

    <p class="disclaimer">{{'HOME.DISCLAIMER' | translate}}
        <!-- TODO: Add doc link to security here -->
        <!-- <a href="https://caos.github.io/site#security"></a> -->
    </p>
</div>