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>
2025-12-13 21:40:45 +00:00 · 2022-07-08 08:58:23 +02:00
parent 91771bc49b
commit 190a454140
22 changed files with 316 additions and 202 deletions
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.html
+++ b/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"
--- a/console/src/app/pages/orgs/org-detail/org-detail.component.ts
+++ b/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()
--- a/console/src/app/pages/signedout/signedout-routing.module.ts
+++ b/console/src/app/pages/signedout/signedout-routing.module.ts
@@ -4,14 +4,14 @@ import { RouterModule, Routes } from '@angular/router';
 import { SignedoutComponent } from './signedout.component';

 const routes: Routes = [
-    {
-        path: '',
-        component: SignedoutComponent,
-    },
+  {
+    path: '',
+    component: SignedoutComponent,
+  },
 ];

@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
 })
-export class SignedoutRoutingModule { }
+export class SignedoutRoutingModule {}
--- a/console/src/app/pages/signedout/signedout.component.html
+++ b/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
-        [routerLink]="[ '/users/me' ]">{{'USER.SIGNEDOUT_BTN' |
-        translate}} <i class="las la-sign-in-alt"></i></button>
+      <button
+        class="cnsl-action-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>
+</div>
--- a/console/src/app/pages/signedout/signedout.component.scss
+++ b/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;
-      }
    }
  }
 }
--- a/console/src/app/pages/signedout/signedout.component.ts
+++ b/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;
  }
--- a/console/src/app/pages/signedout/signedout.module.ts
+++ b/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: [],
-    imports: [
-        CommonModule,
-        SignedoutRoutingModule,
-        SharedModule,
-    ],
+  declarations: [SignedoutComponent],
+  imports: [CommonModule, SignedoutRoutingModule, MatButtonModule, MatTooltipModule, TranslateModule, SharedModule],
 })
-export class SignedoutModule { }
+export class SignedoutModule {}