feat: password age policy (#8132)

# Which Problems Are Solved Some organizations / customers have the requirement, that there users regularly need to change their password. ZITADEL already had the possibility to manage a `password age policy` ( thought the API) with the maximum amount of days a password should be valid, resp. days after with the user should be warned of the upcoming expiration. The policy could not be managed though the Console UI and was not checked in the Login UI. # How the Problems Are Solved - The policy can be managed in the Console UI's settings sections on an instance and organization level. - During an authentication in the Login UI, if a policy is set with an expiry (>0) and the user's last password change exceeds the amount of days set, the user will be prompted to change their password. - The prompt message of the Login UI can be customized in the Custom Login Texts though the Console and API on the instance and each organization. - The information when the user last changed their password is returned in the Auth, Management and User V2 API. - The policy can be retrieved in the settings service as `password expiry settings`. # Additional Changes None. # Additional Context - closes #8081 --------- Co-authored-by: Tim Möhlmann <[email protected]>
2026-10-21 23:14:26 +00:00 · 2024-06-18 11:27:44 +00:00
parent 65f787cc02
commit fb8cd18f93
93 changed files with 1250 additions and 487 deletions
@@ -188,6 +188,7 @@ export function mapRequestValues(map: Partial<Map>, req: Req): Req {

  const r17 = new PasswordChangeScreenText();
  r17.setDescription(map.passwordChangeText?.description ?? '');
+  r17.setExpiredDescription(map.passwordChangeText?.expiredDescription ?? '');
  r17.setNextButtonText(map.passwordChangeText?.nextButtonText ?? '');
  r17.setTitle(map.passwordChangeText?.title ?? '');
  r17.setNewPasswordLabel(map.passwordChangeText?.newPasswordLabel ?? '');
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { PasswordAgePolicyComponent } from './password-age-policy.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PasswordAgePolicyComponent,
+    data: {
+      animation: 'DetailPage',
+    },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PasswordAgePolicyRoutingModule {}
@@ -0,0 +1,50 @@
+<h2>{{ 'POLICY.PWD_AGE.TITLE' | translate }}</h2>
+<p class="cnsl-secondary-text">{{ 'POLICY.PWD_AGE.DESCRIPTION' | translate }}</p>
+
+<div *ngIf="loading" class="spinner-wr">
+  <mat-spinner diameter="30" color="primary"></mat-spinner>
+</div>
+
+<ng-template cnslHasRole [hasRole]="['policy.delete']">
+  <button
+    *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
+    matTooltip="{{ 'POLICY.RESET' | translate }}"
+    color="warn"
+    (click)="resetPolicy()"
+    mat-stroked-button
+  >
+    {{ 'POLICY.RESET' | translate }}
+  </button>
+</ng-template>
+
+<form class="lifetime-form" (ngSubmit)="savePolicy()" [formGroup]="passwordAgeForm" autocomplete="off">
+  <cnsl-card *ngIf="passwordAgeData">
+    <div class="age-content">
+      <div class="row">
+        <cnsl-form-field class="pwd-age-form-field" required="true">
+          <cnsl-label>{{ 'POLICY.DATA.MAXAGEDAYS' | translate }}</cnsl-label>
+          <input cnslInput type="number" name="maxAgeDays" formControlName="maxAgeDays" />
+        </cnsl-form-field>
+      </div>
+
+      <div class="row">
+        <cnsl-form-field class="pwd-age-form-field" required="true">
+          <cnsl-label>{{ 'POLICY.DATA.EXPIREWARNDAYS' | translate }}</cnsl-label>
+          <input cnslInput type="number" name="expireWarnDays" formControlName="expireWarnDays" />
+        </cnsl-form-field>
+      </div>
+    </div>
+  </cnsl-card>
+</form>
+
+<div class="btn-container">
+  <button
+    (click)="savePolicy()"
+    [disabled]="(['policy.write'] | hasRole | async) === false"
+    color="primary"
+    type="submit"
+    mat-raised-button
+  >
+    {{ 'ACTIONS.SAVE' | translate }}
+  </button>
+</div>
@@ -0,0 +1,37 @@
+.default {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.policy-applied-to {
+  margin: -1rem 0 0 0;
+  font-size: 14px;
+}
+
+.age-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .row {
+    display: flex;
+    align-items: center;
+    padding: 0.3rem 0;
+
+    .pwd-age-form-field {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+}
+
+.btn-container {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+
+  button {
+    display: block;
+    margin-right: 1rem;
+  }
+}
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PasswordAgePolicyComponent } from './password-age-policy.component';
+
+describe('PasswordLockoutPolicyComponent', () => {
+  let component: PasswordAgePolicyComponent;
+  let fixture: ComponentFixture<PasswordAgePolicyComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PasswordAgePolicyComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordAgePolicyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,178 @@
+import { Component, Injector, Input, OnInit, Type } from '@angular/core';
+import { AbstractControl, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { GetPasswordAgePolicyResponse as AdminGetPasswordAgePolicyResponse } from 'src/app/proto/generated/zitadel/admin_pb';
+import { GetPasswordAgePolicyResponse as MgmtGetPasswordAgePolicyResponse } from 'src/app/proto/generated/zitadel/management_pb';
+import { PasswordAgePolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { AdminService } from 'src/app/services/admin.service';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { InfoSectionType } from '../../info-section/info-section.component';
+import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
+import { PolicyComponentServiceType } from '../policy-component-types.enum';
+import { requiredValidator } from '../../form-field/validators/validators';
+import { Observable } from 'rxjs';
+import { GrpcAuthService } from '../../../services/grpc-auth.service';
+import { take } from 'rxjs/operators';
+
+@Component({
+  selector: 'cnsl-password-age-policy',
+  templateUrl: './password-age-policy.component.html',
+  styleUrls: ['./password-age-policy.component.scss'],
+})
+export class PasswordAgePolicyComponent implements OnInit {
+  @Input() public service!: ManagementService | AdminService;
+  @Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
+
+  public passwordAgeForm!: UntypedFormGroup;
+  public passwordAgeData?: PasswordAgePolicy.AsObject;
+  public PolicyComponentServiceType: any = PolicyComponentServiceType;
+  public InfoSectionType: any = InfoSectionType;
+  public loading: boolean = false;
+
+  public canWrite$: Observable<boolean> = this.authService.isAllowed([
+    this.serviceType === PolicyComponentServiceType.ADMIN
+      ? 'iam.policy.write'
+      : this.serviceType === PolicyComponentServiceType.MGMT
+        ? 'policy.write'
+        : '',
+  ]);
+
+  constructor(
+    private authService: GrpcAuthService,
+    private toast: ToastService,
+    private injector: Injector,
+    private dialog: MatDialog,
+    private fb: UntypedFormBuilder,
+  ) {
+    this.passwordAgeForm = this.fb.group({
+      maxAgeDays: ['', []],
+      expireWarnDays: ['', []],
+    });
+
+    this.canWrite$.pipe(take(1)).subscribe((canWrite) => {
+      if (canWrite) {
+        this.passwordAgeForm.enable();
+      } else {
+        this.passwordAgeForm.disable();
+      }
+    });
+  }
+
+  public ngOnInit(): void {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        this.service = this.injector.get(ManagementService as Type<ManagementService>);
+        break;
+      case PolicyComponentServiceType.ADMIN:
+        this.service = this.injector.get(AdminService as Type<AdminService>);
+        break;
+    }
+    this.fetchData();
+  }
+
+  private fetchData(): void {
+    this.loading = true;
+
+    this.getData().then((resp) => {
+      if (resp.policy) {
+        this.passwordAgeData = resp.policy;
+        this.passwordAgeForm.patchValue(this.passwordAgeData);
+        this.loading = false;
+      }
+    });
+  }
+
+  private getData(): Promise<AdminGetPasswordAgePolicyResponse.AsObject | MgmtGetPasswordAgePolicyResponse.AsObject> {
+    switch (this.serviceType) {
+      case PolicyComponentServiceType.MGMT:
+        return (this.service as ManagementService).getPasswordAgePolicy();
+      case PolicyComponentServiceType.ADMIN:
+        return (this.service as AdminService).getPasswordAgePolicy();
+    }
+  }
+
+  public resetPolicy(): void {
+    if (this.service instanceof ManagementService) {
+      const dialogRef = this.dialog.open(WarnDialogComponent, {
+        data: {
+          confirmKey: 'ACTIONS.RESET',
+          cancelKey: 'ACTIONS.CANCEL',
+          titleKey: 'SETTING.DIALOG.RESET.DEFAULTTITLE',
+          descriptionKey: 'SETTING.DIALOG.RESET.DEFAULTDESCRIPTION',
+        },
+        width: '400px',
+      });
+
+      dialogRef.afterClosed().subscribe((resp) => {
+        if (resp) {
+          (this.service as ManagementService)
+            .resetPasswordAgePolicyToDefault()
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+              this.fetchData();
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      });
+    }
+  }
+
+  public savePolicy(): void {
+    let promise: Promise<any>;
+    if (this.passwordAgeData) {
+      if (this.service instanceof AdminService) {
+        promise = this.service
+          .updatePasswordAgePolicy(this.maxAgeDays?.value ?? 0, this.expireWarnDays?.value ?? 0)
+          .then(() => {
+            this.toast.showInfo('POLICY.TOAST.SET', true);
+            this.fetchData();
+          })
+          .catch((error) => {
+            this.toast.showError(error);
+          });
+      } else {
+        if ((this.passwordAgeData as PasswordAgePolicy.AsObject).isDefault) {
+          promise = (this.service as ManagementService)
+            .addCustomPasswordAgePolicy(this.maxAgeDays?.value ?? 0, this.expireWarnDays?.value ?? 0)
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.SET', true);
+              this.fetchData();
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        } else {
+          promise = (this.service as ManagementService)
+            .updateCustomPasswordAgePolicy(this.maxAgeDays?.value ?? 0, this.expireWarnDays?.value ?? 0)
+            .then(() => {
+              this.toast.showInfo('POLICY.TOAST.SET', true);
+              this.fetchData();
+            })
+            .catch((error) => {
+              this.toast.showError(error);
+            });
+        }
+      }
+    }
+  }
+
+  public get isDefault(): boolean {
+    if (this.passwordAgeData && this.serviceType === PolicyComponentServiceType.MGMT) {
+      return (this.passwordAgeData as PasswordAgePolicy.AsObject).isDefault;
+    } else {
+      return false;
+    }
+  }
+
+  public get maxAgeDays(): AbstractControl | null {
+    return this.passwordAgeForm.get('maxAgeDays');
+  }
+
+  public get expireWarnDays(): AbstractControl | null {
+    return this.passwordAgeForm.get('expireWarnDays');
+  }
+}
@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
+import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { InputModule } from 'src/app/modules/input/input.module';
+import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
+
+import { CardModule } from '../../card/card.module';
+import { InfoSectionModule } from '../../info-section/info-section.module';
+import { WarnDialogModule } from '../../warn-dialog/warn-dialog.module';
+import { PasswordAgePolicyRoutingModule } from './password-age-policy-routing.module';
+import { PasswordAgePolicyComponent } from './password-age-policy.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@NgModule({
+  declarations: [PasswordAgePolicyComponent],
+  imports: [
+    PasswordAgePolicyRoutingModule,
+    CommonModule,
+    FormsModule,
+    InputModule,
+    MatButtonModule,
+    MatSlideToggleModule,
+    HasRolePipeModule,
+    MatDialogModule,
+    WarnDialogModule,
+    MatIconModule,
+    HasRoleModule,
+    MatTooltipModule,
+    CardModule,
+    TranslateModule,
+    DetailLayoutModule,
+    InfoSectionModule,
+    ReactiveFormsModule,
+    MatProgressSpinnerModule,
+  ],
+  exports: [PasswordAgePolicyComponent],
+})
+export class PasswordAgePolicyModule {}
@@ -18,6 +18,9 @@
  <ng-container *ngIf="currentSetting === 'complexity'">
    <cnsl-password-complexity-policy [serviceType]="serviceType"></cnsl-password-complexity-policy>
  </ng-container>
+  <ng-container *ngIf="currentSetting === 'age'">
+    <cnsl-password-age-policy [serviceType]="serviceType"></cnsl-password-age-policy>
+  </ng-container>
  <ng-container *ngIf="currentSetting === 'lockout'">
    <cnsl-password-lockout-policy [serviceType]="serviceType"></cnsl-password-lockout-policy>
  </ng-container>
@@ -16,6 +16,7 @@ import { NotificationPolicyModule } from '../policies/notification-policy/notifi
 import { NotificationSMSProviderModule } from '../policies/notification-sms-provider/notification-sms-provider.module';
 import { OIDCConfigurationModule } from '../policies/oidc-configuration/oidc-configuration.module';
 import { PasswordComplexityPolicyModule } from '../policies/password-complexity-policy/password-complexity-policy.module';
+import { PasswordAgePolicyModule } from '../policies/password-age-policy/password-age-policy.module';
 import { PasswordLockoutPolicyModule } from '../policies/password-lockout-policy/password-lockout-policy.module';
 import { PrivacyPolicyModule } from '../policies/privacy-policy/privacy-policy.module';
 import { PrivateLabelingPolicyModule } from '../policies/private-labeling-policy/private-labeling-policy.module';
@@ -40,6 +41,7 @@ import OrgListModule from 'src/app/pages/org-list/org-list.module';
    LoginPolicyModule,
    CardModule,
    PasswordComplexityPolicyModule,
+    PasswordAgePolicyModule,
    PasswordLockoutPolicyModule,
    PrivateLabelingPolicyModule,
    LanguageSettingsModule,
@@ -117,6 +117,16 @@ export const LOCKOUT: SidenavSetting = {
  },
 };

+export const AGE: SidenavSetting = {
+  id: 'age',
+  i18nKey: 'SETTINGS.LIST.AGE',
+  groupI18nKey: 'SETTINGS.GROUPS.LOGIN',
+  requiredRoles: {
+    [PolicyComponentServiceType.MGMT]: ['policy.read'],
+    [PolicyComponentServiceType.ADMIN]: ['iam.policy.read'],
+  },
+};
+
 export const COMPLEXITY: SidenavSetting = {
  id: 'complexity',
  i18nKey: 'SETTINGS.LIST.COMPLEXITY',