feat(console): deactivate, reactivate org, fix signedout route (#3834)

* org detail

* feat: org deactivate, reactivate

* statehandler includes instead of startsWith

* fix signout route

* Update console/src/assets/i18n/de.json

Co-authored-by: Livio Spring <livio.a@gmail.com>

* french

Co-authored-by: Livio Spring <livio.a@gmail.com>

console/src/app/app-routing.module.ts

@@ -13,6 +13,10 @@ const routes: Routes = [
     loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule),
     canActivate: [AuthGuard],
   },
+  {
+    path: 'signedout',
+    loadChildren: () => import('./pages/signedout/signedout.module').then((m) => m.SignedoutModule),
+  },
   {
     path: 'orgs',
     loadChildren: () => import('./pages/org-list/org-list.module').then((m) => m.OrgListModule),
@@ -38,13 +42,8 @@ const routes: Routes = [
   {
     path: 'users',
     canActivate: [AuthGuard],
-    children: [
-      {
-        path: '',
     loadChildren: () => import('src/app/pages/users/users.module').then((m) => m.UsersModule),
   },
-    ],
-  },
   {
     path: 'instance',
     loadChildren: () => import('./pages/instance/instance.module').then((m) => m.InstanceModule),
@@ -170,10 +169,6 @@ const routes: Routes = [
       roles: ['policy.read'],
     },
   },
-  {
-    path: 'signedout',
-    loadChildren: () => import('./pages/signedout/signedout.module').then((m) => m.SignedoutModule),
-  },
   {
     path: '**',
     redirectTo: '/',

console/src/app/app.component.html

@@ -1,10 +1,9 @@
-<ng-container *ngIf="(authService.user | async) || undefined as user">
+<div class="main-container">
-  <ng-container *ngIf="['iam.read$', 'iam.write$'] | hasRole as iamuser$">
+  <ng-container *ngIf="(authService.user | async) || {} as user">
-    <div class="main-container">
     <cnsl-header
-        *ngIf="user"
+      *ngIf="user && user !== {}"
       [org]="org"
-        [user]="user"
+      [user]="$any(user)"
       [isDarkTheme]="componentCssClass === 'dark-theme'"
       [labelpolicy]="labelpolicy"
       (changedActiveOrg)="changedOrg($event)"
@@ -14,12 +13,14 @@
       id="mainnav"
       class="nav"
       [ngClass]="{ shadow: yoffset > 60 }"
-        *ngIf="user"
+      *ngIf="user && user !== {}"
       [org]="org"
-        [user]="user"
+      [user]="$any(user)"
       [isDarkTheme]="componentCssClass === 'dark-theme'"
       [labelpolicy]="labelpolicy"
     ></cnsl-nav>
+  </ng-container>
+
   <div class="router-container" [@routeAnimations]="prepareRoute(outlet)">
     <div class="outlet">
       <router-outlet class="outlet" #outlet="outlet"></router-outlet>
@@ -27,6 +28,4 @@
   </div>
   <span class="fill-space"></span>
   <cnsl-footer [privateLabelPolicy]="labelpolicy"></cnsl-footer>
-    </div>
+</div>
-  </ng-container>
-</ng-container>

console/src/app/app.component.ts

@@ -69,6 +69,7 @@ export class AppComponent implements OnDestroy {
     private activatedRoute: ActivatedRoute,
     @Inject(DOCUMENT) private document: Document,
   ) {
+    this.themeService.loadPrivateLabelling(true);
     console.log(
       '%cWait!',
       'text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #5469D4; font-size: 50px',

console/src/app/app.module.ts

@@ -26,7 +26,6 @@ import { HeaderModule } from './modules/header/header.module';
 import { KeyboardShortcutsModule } from './modules/keyboard-shortcuts/keyboard-shortcuts.module';
 import { NavModule } from './modules/nav/nav.module';
 import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
-import { SignedoutComponent } from './pages/signedout/signedout.component';
 import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
 import { AdminService } from './services/admin.service';
 import { AuthenticationService } from './services/authentication.service';
@@ -79,7 +78,7 @@ const authConfig: AuthConfig = {
 };
 
 @NgModule({
-  declarations: [AppComponent, SignedoutComponent],
+  declarations: [AppComponent],
   imports: [
     AppRoutingModule,
     CommonModule,

console/src/app/guards/auth.guard.ts

@@ -4,13 +4,12 @@ import { AuthConfig } from 'angular-oauth2-oidc';
 import { Observable } from 'rxjs';
 
 import { AuthenticationService } from '../services/authentication.service';
-import { GrpcAuthService } from '../services/grpc-auth.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthGuard implements CanActivate {
-  constructor(private auth: AuthenticationService, private authService: GrpcAuthService) {}
+  constructor(private auth: AuthenticationService) {}
 
   public canActivate(
     route: ActivatedRouteSnapshot,

console/src/app/modules/header/header.component.html

@@ -196,6 +196,9 @@
       </a>
     </div>
 
+    <ng-container
+      *ngIf="user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))"
+    >
       <div class="account-card-wrapper">
         <button
           cdkOverlayOrigin
@@ -206,9 +209,6 @@
         >
           <cnsl-avatar
             id="avatartoggle"
-          *ngIf="
-            user && (user.human?.profile?.displayName || (user.human?.profile?.firstName && user.human?.profile?.lastName))
-          "
             class="avatar-toggle dontcloseonclick"
             [active]="showAccount"
             [avatarUrl]="user.human?.profile?.avatarUrl || ''"
@@ -246,5 +246,6 @@
         >
         </cnsl-accounts-card>
       </ng-template>
+    </ng-container>
   </div>
 </mat-toolbar>

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -5,7 +5,25 @@
   [isInactive]="org?.state === OrgState.ORG_STATE_INACTIVE"
   [hasContributors]="true"
   stateTooltip="{{ 'ORG.STATE.' + org?.state | translate }}"
+  [hasActions]="['org.write:' + org?.id, 'org.write$'] | hasRole | async"
 >
+  <ng-template topActions cnslHasRole [hasRole]="['org.write:' + org?.id, 'org.write$']">
+    <button
+      mat-menu-item
+      *ngIf="org?.state === OrgState.ORG_STATE_ACTIVE"
+      (click)="changeState(OrgState.ORG_STATE_INACTIVE)"
+    >
+      {{ 'ORG.PAGES.DEACTIVATE' | translate }}
+    </button>
+
+    <button
+      mat-menu-item
+      *ngIf="org?.state === OrgState.ORG_STATE_INACTIVE"
+      (click)="changeState(OrgState.ORG_STATE_ACTIVE)"
+    >
+      {{ 'ORG.PAGES.REACTIVATE' | translate }}
+    </button>
+  </ng-template>
   <cnsl-contributors
     topContributors
     [totalResult]="totalMemberResult"

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -7,6 +7,7 @@ import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-m
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
+import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { Member } from 'src/app/proto/generated/zitadel/member_pb';
 import { Org, OrgState } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
@@ -62,6 +63,56 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
+  public changeState(newState: OrgState): void {
+    if (newState === OrgState.ORG_STATE_ACTIVE) {
+      const dialogRef = this.dialog.open(WarnDialogComponent, {
+        data: {
+          confirmKey: 'ACTIONS.REACTIVATE',
+          cancelKey: 'ACTIONS.CANCEL',
+          titleKey: 'ORG.DIALOG.REACTIVATE.TITLE',
+          descriptionKey: 'ORG.DIALOG.REACTIVATE.DESCRIPTION',
+        },
+        width: '400px',
+      });
+      dialogRef.afterClosed().subscribe((resp) => {
+        if (resp) {
+          this.mgmtService
+            .reactivateOrg()
+            .then(() => {
+              this.toast.showInfo('ORG.TOAST.REACTIVATED', true);
+              this.org.state = OrgState.ORG_STATE_ACTIVE;
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
+    } else if (newState === OrgState.ORG_STATE_INACTIVE) {
+      const dialogRef = this.dialog.open(WarnDialogComponent, {
+        data: {
+          confirmKey: 'ACTIONS.DEACTIVATE',
+          cancelKey: 'ACTIONS.CANCEL',
+          titleKey: 'ORG.DIALOG.DEACTIVATE.TITLE',
+          descriptionKey: 'ORG.DIALOG.DEACTIVATE.DESCRIPTION',
+        },
+        width: '400px',
+      });
+      dialogRef.afterClosed().subscribe((resp) => {
+        if (resp) {
+          this.mgmtService
+            .deactivateOrg()
+            .then(() => {
+              this.toast.showInfo('ORG.TOAST.DEACTIVATED', true);
+              this.org.state = OrgState.ORG_STATE_INACTIVE;
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
+    }
+  }
+
   private async getData(): Promise<void> {
     this.mgmtService
       .getMyOrg()

console/src/app/pages/signedout/signedout-routing.module.ts

@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class SignedoutRoutingModule { }
+export class SignedoutRoutingModule {}

console/src/app/pages/signedout/signedout.component.html

@@ -5,11 +5,18 @@
       <ng-template #lighttheme>
         <img alt="zitadel logo" src="../../../assets/images/zitadel-logo-dark.svg" />
       </ng-template>
-      <p class="cnsl-secondary-text">{{'USER.SIGNEDOUT' | translate}}</p>
+      <p class="cnsl-secondary-text">{{ 'USER.SIGNEDOUT' | translate }}</p>
 
-      <button matTooltip="{{'ACTIONS.LOGIN' | translate}}" color="primary" mat-raised-button
+      <button
-        [routerLink]="[ '/users/me' ]">{{'USER.SIGNEDOUT_BTN' |
+        class="cnsl-action-button"
-        translate}} <i class="las la-sign-in-alt"></i></button>
+        matTooltip="{{ 'ACTIONS.LOGIN' | translate }}"
+        color="primary"
+        mat-raised-button
+        [routerLink]="['/users/me']"
+      >
+        <i class="las la-sign-in-alt"></i>
+        <span>{{ 'USER.SIGNEDOUT_BTN' | translate }}</span>
+      </button>
     </div>
   </div>
 </div>

console/src/app/pages/signedout/signedout.component.scss

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 50px;
 
     h1 {
       font-size: 3rem;
@@ -24,16 +25,6 @@
     img {
       height: 100px;
       max-width: 170px;
-      margin-bottom: 2rem;
-    }
-
-    button {
-      display: block;
-      padding: 0.5rem 4rem;
-
-      i {
-        margin-left: 0.5rem;
-      }
     }
   }
 }

console/src/app/pages/signedout/signedout.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ThemeService } from 'src/app/services/theme.service';
 
 @Component({
   selector: 'cnsl-signedout',
@@ -8,7 +9,9 @@ import { Component } from '@angular/core';
 export class SignedoutComponent {
   public dark: boolean = true;
 
-  constructor() {
+  constructor(themeService: ThemeService) {
+    themeService.loadPrivateLabelling();
+
     const theme = localStorage.getItem('theme');
     this.dark = theme === 'dark-theme' ? true : theme === 'light-theme' ? false : true;
   }

console/src/app/pages/signedout/signedout.module.ts

@@ -1,15 +1,15 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 
 import { SignedoutRoutingModule } from './signedout-routing.module';
+import { SignedoutComponent } from './signedout.component';
 
 @NgModule({
-    declarations: [],
+  declarations: [SignedoutComponent],
-    imports: [
+  imports: [CommonModule, SignedoutRoutingModule, MatButtonModule, MatTooltipModule, TranslateModule, SharedModule],
-        CommonModule,
-        SignedoutRoutingModule,
-        SharedModule,
-    ],
 })
-export class SignedoutModule { }
+export class SignedoutModule {}

console/src/app/services/statehandler/statehandler.service.ts

@@ -49,10 +49,10 @@ export class StatehandlerServiceImpl implements StatehandlerService, OnDestroy {
       switchMap((url: string) => {
         if (url.includes('?login_hint=')) {
           const newUrl = this.removeParam('login_hint', url);
-          const urlWithoutBasePath = newUrl.startsWith('/ui/console') ? newUrl.replace('/ui/console', '') : newUrl;
+          const urlWithoutBasePath = newUrl.includes('/ui/console') ? newUrl.replace('/ui/console', '') : newUrl;
           return of(this.processor.createState(urlWithoutBasePath));
         } else if (url) {
-          const urlWithoutBasePath = url.startsWith('/ui/console') ? url.replace('/ui/console', '') : url;
+          const urlWithoutBasePath = url.includes('/ui/console') ? url.replace('/ui/console', '') : url;
           return of(this.processor.createState(urlWithoutBasePath));
         } else {
           return of(undefined);

console/src/app/services/theme.service.ts

@@ -140,9 +140,10 @@ export class ThemeService {
     this.saveTextColor(lightText, false);
   };
 
-  public loadPrivateLabelling(): void {
+  public loadPrivateLabelling(forceDefault: boolean = false): void {
+    if (forceDefault) {
       this.setDefaultColors();
-
+    } else {
       const isDark = (color: string) => this.isDark(color);
       const isLight = (color: string) => this.isLight(color);
 
@@ -206,4 +207,5 @@ export class ThemeService {
           this.setDefaultColors();
         });
     }
+  }
 }

console/src/assets/i18n/de.json

@@ -757,6 +757,8 @@
       "LISTDESCRIPTION": "Wähle eine Organisation aus.",
       "ACTIVE": "Aktiv",
       "CREATE": "Organisation erstellen",
+      "DEACTIVATE": "Organisation deaktivieren",
+      "REACTIVATE": "Organisation reaktivieren",
       "NOPERMISSION": "Sie haben keine Berechtigung, auf Einstellungen der Organisation zuzugreifen.",
       "USERSELFACCOUNT": "Verwenden Sie Ihr persönliches Konto als Organisationsinhaber",
       "ORGDETAIL_TITLE": "Gebe den Namen und die Domain für die neue Organisation ein.",
@@ -821,6 +823,16 @@
       "MEMBERREMOVED": "Manager entfernt.",
       "MEMBERCHANGED": "Manager geändert.",
       "SETPRIMARY": "Primäre Domain gesetzt."
+    },
+    "DIALOG": {
+      "DEACTIVATE": {
+        "TITLE": "Organisation deaktivieren",
+        "DESCRIPTION": "Sie sind im Begriff Ihre Organisation zu deaktivieren. User können Sich danach nicht mehr anmelden? Wollen Sie fortfahren?"
+      },
+      "REACTIVATE": {
+        "TITLE": "Organisation reaktivieren",
+        "DESCRIPTION": "Sie sind im Begriff Ihre Organisation zu reaktivieren. User können Sich danach wieder anmelden? Wollen Sie fortfahren?"
+      }
     }
   },
   "SETTINGS": {

console/src/assets/i18n/en.json

@@ -757,6 +757,8 @@
       "LISTDESCRIPTION": "Choose an organization.",
       "ACTIVE": "Active",
       "CREATE": "Create Organization",
+      "DEACTIVATE": "Deactivate Organization",
+      "REACTIVATE": "Reactivate Organization",
       "NOPERMISSION": "You don't have the permission to access organization settings.",
       "USERSELFACCOUNT": "Use your personal account as organization owner",
       "ORGDETAIL_TITLE": "Enter the name and domain of your new organization.",
@@ -821,6 +823,16 @@
       "MEMBERREMOVED": "Manager removed.",
       "MEMBERCHANGED": "Manager changed.",
       "SETPRIMARY": "Primary domain set."
+    },
+    "DIALOG": {
+      "DEACTIVATE": {
+        "TITLE": "Deactivate organization",
+        "DESCRIPTION": "You are about to deactivate your organization. Users won't be able to login afterwards. Are you sure to proceed?"
+      },
+      "REACTIVATE": {
+        "TITLE": "Reactivate organization",
+        "DESCRIPTION": "You are about to reactivate your organization. Users will be able to login again. Are you sure to proceed?"
+      }
     }
   },
   "SETTINGS": {

console/src/assets/i18n/fr.json

@@ -757,6 +757,8 @@
       "LISTDESCRIPTION": "Choisissez une organisation.",
       "ACTIVE": "Actif",
       "CREATE": "Créer une organisation",
+      "DEACTIVATE": "Désactiver l'organisation",
+      "REACTIVATE": "Réactiver l'organisation",
       "NOPERMISSION": "Vous n'avez pas la permission d'accéder aux paramètres de l'organisation.",
       "USERSELFACCOUNT": "Utilisez votre compte personnel comme propriétaire de l'organisation",
       "ORGDETAIL_TITLE": "Saisissez le nom et le domaine de votre nouvelle organisation.",
@@ -821,6 +823,16 @@
       "MEMBERREMOVED": "Gestionnaire supprimé.",
       "MEMBERCHANGED": "Gestionnaire modifié.",
       "SETPRIMARY": "Domaine primaire défini."
+    },
+    "DIALOG": {
+      "DEACTIVATE": {
+        "TITLE": "Désactiver l'organisation",
+        "DESCRIPTION": "Vous êtes sur le point de désactiver votre organisation. Les utilisateurs ne peuvent plus se connecter ? Voulez-vous continuer ?"
+      },
+      "REACTIVATE": {
+        "TITLE": "Réactiver l'organisation",
+        "DESCRIPTION": "Vous êtes sur le point de réactiver votre organisation. Les utilisateurs peuvent ensuite se reconnecter ? Voulez-vous continuer ?"
+      }
     }
   },
   "SETTINGS": {

console/src/assets/i18n/it.json

@@ -757,6 +757,8 @@
       "LISTDESCRIPTION": "Scegli un'organizzazione.",
       "ACTIVE": "Attivo",
       "CREATE": "Creare un'organizzazione",
+      "DEACTIVATE": "Disattiva organizzazione",
+      "REACTIVATE": "Riattiva organizzazione",
       "NOPERMISSION": "Non hai l'autorizzazione per accedere alle impostazioni dell'organizzazione.",
       "USERSELFACCOUNT": "Usa il tuo account personale come proprietario dell'organizzazione",
       "ORGDETAIL_TITLE": "Inserisci il nome e il dominio della tua nuova organizzazione.",
@@ -821,6 +823,16 @@
       "MEMBERREMOVED": "Manager rimosso con successo",
       "MEMBERCHANGED": "Manager cambiato con successo",
       "SETPRIMARY": "Dominio primario cambiato con successo"
+    },
+    "DIALOG": {
+      "DEACTIVATE": {
+        "TITLE": "Disattivare l'organizzazione",
+        "DESCRIPTION": "Stai per disattivate la tua organizzazione. Utenti dell' organizzazione non possono più accedere in seguito. Sei sicuro di procedere?"
+      },
+      "REACTIVATE": {
+        "TITLE": "Riattivare l'organizzazione",
+        "DESCRIPTION": "Stai per riattivare la tua organizzazione. Utenti dell' organizzazione possono accedere nuovamente dopo l'attivazione. Vuoi procedere?"
+      }
     }
   },
   "SETTINGS": {

internal/api/ui/login/static/resources/themes/scss/styles/footer/footer_theme.scss

@@ -19,7 +19,7 @@
     }
 
     a {
-      color: var(--zitadel-color-font-500);
+      color: var(--zitadel-color-text-500);
     }
 
     .lgn-logo-watermark {

internal/api/ui/login/static/resources/themes/scss/styles/vars.scss

@@ -50,17 +50,17 @@
   --zitadel-color-input-border-active: var(--zitadel-color-primary-500);
   --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
 
-  --zitadel-color-font-50: rgb(0, 0, 0);
+  --zitadel-color-text-50: rgb(0, 0, 0);
-  --zitadel-color-font-100: rgb(0, 0, 0);
+  --zitadel-color-text-100: rgb(0, 0, 0);
-  --zitadel-color-font-200: rgb(0, 0, 0);
+  --zitadel-color-text-200: rgb(0, 0, 0);
-  --zitadel-color-font-300: rgb(0, 0, 0);
+  --zitadel-color-text-300: rgb(0, 0, 0);
-  --zitadel-color-font-400: rgb(0, 0, 0);
+  --zitadel-color-text-400: rgb(0, 0, 0);
-  --zitadel-color-font-500: rgb(0, 0, 0);
+  --zitadel-color-text-500: rgb(0, 0, 0);
-  --zitadel-color-font-600: rgb(0, 0, 0);
+  --zitadel-color-text-600: rgb(0, 0, 0);
-  --zitadel-color-font-700: rgb(0, 0, 0);
+  --zitadel-color-text-700: rgb(0, 0, 0);
-  --zitadel-color-font-800: rgb(0, 0, 0);
+  --zitadel-color-text-800: rgb(0, 0, 0);
-  --zitadel-color-font-900: rgb(0, 0, 0);
+  --zitadel-color-text-900: rgb(0, 0, 0);
-  --zitadel-color-font-contrast: rgb(255, 255, 255);
+  --zitadel-color-text-contrast: rgb(255, 255, 255);
   --zitadel-color-label: #0000008a;
 
   --zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);

internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css

@@ -44,17 +44,17 @@
   --zitadel-color-input-border-hover: #1a1b1b;
   --zitadel-color-input-border-active: var(--zitadel-color-primary-500);
   --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
-  --zitadel-color-font-50: rgb(0, 0, 0);
+  --zitadel-color-text-50: rgb(0, 0, 0);
-  --zitadel-color-font-100: rgb(0, 0, 0);
+  --zitadel-color-text-100: rgb(0, 0, 0);
-  --zitadel-color-font-200: rgb(0, 0, 0);
+  --zitadel-color-text-200: rgb(0, 0, 0);
-  --zitadel-color-font-300: rgb(0, 0, 0);
+  --zitadel-color-text-300: rgb(0, 0, 0);
-  --zitadel-color-font-400: rgb(0, 0, 0);
+  --zitadel-color-text-400: rgb(0, 0, 0);
-  --zitadel-color-font-500: rgb(0, 0, 0);
+  --zitadel-color-text-500: rgb(0, 0, 0);
-  --zitadel-color-font-600: rgb(0, 0, 0);
+  --zitadel-color-text-600: rgb(0, 0, 0);
-  --zitadel-color-font-700: rgb(0, 0, 0);
+  --zitadel-color-text-700: rgb(0, 0, 0);
-  --zitadel-color-font-800: rgb(0, 0, 0);
+  --zitadel-color-text-800: rgb(0, 0, 0);
-  --zitadel-color-font-900: rgb(0, 0, 0);
+  --zitadel-color-text-900: rgb(0, 0, 0);
-  --zitadel-color-font-contrast: rgb(255, 255, 255);
+  --zitadel-color-text-contrast: rgb(255, 255, 255);
   --zitadel-color-label: #0000008a;
   --zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);
   --zitadel-color-account-selector-active: rgba(0, 0, 0, 0.05);
@@ -2819,7 +2819,7 @@ footer {
   }
 }
 footer a {
-  color: var(--zitadel-color-font-500);
+  color: var(--zitadel-color-text-500);
 }
 footer .lgn-logo-watermark {
   background: var(--zitadel-logo-powered-by) no-repeat;