fix(web-app, admin): Angular 21+ modernizing for the auth-strategy component family

web-app/src/app/admin/admin-authentication/admin-authentication-ldap/admin-authentication-ldap.component.html

@@ -43,7 +43,9 @@ <h3 class="section-title">User Search</h3>
   <mat-form-field appearance="fill">
     <mat-label>Search Scope</mat-label>
     <mat-select [(ngModel)]="strategy.settings.searchScope" [disabled]="!editable" (selectionChange)="setDirty(true)">
-      <mat-option *ngFor="let scope of scopes" [value]="scope.value">{{ scope.viewValue }}</mat-option>
+      @for (scope of scopes; track scope.value) {
+        <mat-option [value]="scope.value">{{ scope.viewValue }}</mat-option>
+      }
     </mat-select>
     <mat-hint>Scope of the search. Default: sub.</mat-hint>
   </mat-form-field>
@@ -68,7 +70,9 @@ <h3 class="section-title">Group Search</h3>
     <mat-label>Group Search Scope</mat-label>
     <mat-select [(ngModel)]="strategy.settings.groupSearchScope" [disabled]="!editable"
       (selectionChange)="setDirty(true)">
-      <mat-option *ngFor="let scope of scopes" [value]="scope.value">{{ scope.viewValue }}</mat-option>
+      @for (scope of scopes; track scope.value) {
+        <mat-option [value]="scope.value">{{ scope.viewValue }}</mat-option>
+      }
     </mat-select>
     <mat-hint>Scope of the search. Default: sub.</mat-hint>
   </mat-form-field>

web-app/src/app/admin/admin-authentication/admin-authentication-ldap/admin-authentication-ldap.component.spec.ts

@@ -9,7 +9,7 @@ describe('AdminAuthenticationLDAPComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminAuthenticationLDAPComponent ],
+      imports: [ AdminAuthenticationLDAPComponent ],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
     })
     .compileComponents();

web-app/src/app/admin/admin-authentication/admin-authentication-ldap/admin-authentication-ldap.component.ts

@@ -1,5 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Strategy } from '../../admin-authentication/admin-settings.model';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 interface Scope {
   value: string;
@@ -10,7 +15,14 @@ interface Scope {
     selector: 'admin-authentication-ldap',
     templateUrl: './admin-authentication-ldap.component.html',
     styleUrls: ['./admin-authentication-ldap.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatFormFieldModule,
+      FormsModule,
+      MatSelectModule,
+      MatInputModule,
+      MatExpansionModule,
+    ]
 })
 export class AdminAuthenticationLDAPComponent implements OnInit {
 

web-app/src/app/admin/admin-authentication/admin-authentication-local/account-lock/account-lock.component.html

@@ -4,12 +4,14 @@ <h3 class="section-title">Account Lock</h3>
   <mat-label>Account Lock</mat-label>
   <mat-select [(ngModel)]="strategy.settings.accountLock.enabled" [ngModelOptions]="{standalone: true}"
     (selectionChange)="setDirty(true)">
-    <mat-option *ngFor="let choice of accountLockChoices" [value]="choice.value">{{ choice.title }}</mat-option>
+    @for (choice of accountLockChoices; track choice.value) {
+      <mat-option [value]="choice.value">{{ choice.title }}</mat-option>
+    }
   </mat-select>
   <mat-hint>MAGE can lock user accounts after a number of invalid login attempts for a certain amount of time.</mat-hint>
 </mat-form-field>
 
-<ng-container *ngIf="strategy.settings.accountLock.enabled">
+@if (strategy.settings.accountLock.enabled) {
   <p class="field-label">Account Lockout Threshold</p>
   <mat-form-field appearance="fill">
     <input matInput type="number" [(ngModel)]="strategy.settings.accountLock.threshold"
@@ -28,17 +30,19 @@ <h3 class="section-title">Account Lock</h3>
   <mat-form-field appearance="fill">
     <mat-label>Max Lockout</mat-label>
     <mat-select [(ngModel)]="maxLock.enabled" [ngModelOptions]="{standalone: true}" (selectionChange)="setDirty(true)">
-      <mat-option *ngFor="let choice of maxLockChoices" [value]="choice.value">{{ choice.title }}</mat-option>
+      @for (choice of maxLockChoices; track choice.value) {
+        <mat-option [value]="choice.value">{{ choice.title }}</mat-option>
+      }
     </mat-select>
     <mat-hint>MAGE can disable user accounts if a user locks their account a certain number of times.</mat-hint>
   </mat-form-field>
 
-  <ng-container *ngIf="maxLock.enabled">
+  @if (maxLock.enabled) {
     <p class="field-label">Max Lockout Threshold</p>
     <mat-form-field appearance="fill">
       <input matInput type="number" [(ngModel)]="strategy.settings.accountLock.max"
         [ngModelOptions]="{standalone: true}" (input)="setDirty(true)">
       <mat-hint>Number of times a user account can be locked before it is disabled. Disabled accounts must be re-enabled by an admin.</mat-hint>
     </mat-form-field>
-  </ng-container>
-</ng-container>
+  }
+}

web-app/src/app/admin/admin-authentication/admin-authentication-local/account-lock/account-lock.component.ts

@@ -1,13 +1,23 @@
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { Strategy, AdminChoice } from '../../../admin-authentication/admin-settings.model';
 import { MaxLock } from './account-lock.model';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
 
 
 @Component({
     selector: 'account-lock',
     templateUrl: 'account-lock.component.html',
     styleUrls: ['./account-lock.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatInputModule
+    ]
 })
 export class AccountLockComponent implements OnInit {
     @Input() strategy: Strategy;
@@ -22,6 +32,7 @@ export class AccountLockComponent implements OnInit {
         description: 'Lock MAGE user accounts for defined time \n after defined number of invalid login attempts.',
         value: true
     }];
+    // no signal - set once
     maxLock: MaxLock = {
         enabled: false
     };

web-app/src/app/admin/admin-authentication/admin-authentication-local/admin-authentication-local.component.spec.ts

@@ -8,14 +8,25 @@ describe('AdminAuthenticationLocalComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [AdminAuthenticationLocalComponent],
+      imports: [AdminAuthenticationLocalComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AdminAuthenticationLocalComponent);
     component = fixture.componentInstance;
+    component.strategy = {
+      enabled: true,
+      name: 'local',
+      type: 'local',
+      textColor: '#000000',
+      buttonColor: '#ffffff',
+      settings: {
+        accountLock: { enabled: false },
+        passwordPolicy: {}
+      }
+    };
     fixture.detectChanges();
   });
 

web-app/src/app/admin/admin-authentication/admin-authentication-local/admin-authentication-local.component.ts

@@ -1,11 +1,17 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Strategy } from '../../admin-authentication/admin-settings.model';
+import { AccountLockComponent } from './account-lock/account-lock.component';
+import { PasswordPolicyComponent } from './password-policy/password-policy.component';
 
 @Component({
     selector: 'admin-authentication-local',
     templateUrl: './admin-authentication-local.component.html',
     styleUrls: ['./admin-authentication-local.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      AccountLockComponent,
+      PasswordPolicyComponent
+    ]
 })
 export class AdminAuthenticationLocalComponent {
 

web-app/src/app/admin/admin-authentication/admin-authentication-local/password-policy/password-policy.component.ts

@@ -1,13 +1,28 @@
 import { Component, Input, EventEmitter, Output } from '@angular/core';
 import { Strategy } from '../../../admin-authentication/admin-settings.model';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'password-policy',
     templateUrl: 'password-policy.component.html',
     styleUrls: ['./password-policy.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+        FormsModule,
+        MatSlideToggleModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatTooltipModule
+    ]
 })
 export class PasswordPolicyComponent {
+    // No signal needed - strategy is never reassigned
     @Input() strategy: Strategy;
     @Output() strategyDirty = new EventEmitter<boolean>();
 

web-app/src/app/admin/admin-authentication/admin-authentication-oauth2/admin-authentication-oauth2.component.spec.ts

@@ -9,7 +9,7 @@ describe('AdminAuthenticationOAuth2Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [AdminAuthenticationOAuth2Component],
+      imports: [AdminAuthenticationOAuth2Component],
       schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
     })
       .compileComponents();

web-app/src/app/admin/admin-authentication/admin-authentication-oauth2/admin-authentication-oauth2.component.ts

@@ -1,11 +1,23 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Strategy } from '../../admin-authentication/admin-settings.model';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
     selector: 'admin-authentication-oauth2',
     templateUrl: './admin-authentication-oauth2.component.html',
     styleUrls: ['./admin-authentication-oauth2.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      FormsModule,
+      MatFormFieldModule,
+      MatInputModule,
+      MatSlideToggleModule,
+      MatExpansionModule
+    ]
 })
 export class AdminAuthenticationOAuth2Component implements OnInit {
 

web-app/src/app/admin/admin-authentication/admin-authentication-oidc/admin-authentication-oidc.component.spec.ts

@@ -9,8 +9,7 @@ describe('AdminAuthenticationOidcComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminAuthenticationOidcComponent ],
-      imports: [],
+      imports: [ AdminAuthenticationOidcComponent ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
     })
     .compileComponents();

web-app/src/app/admin/admin-authentication/admin-authentication-oidc/admin-authentication-oidc.component.ts

@@ -1,11 +1,21 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Strategy } from '../../admin-authentication/admin-settings.model';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @Component({
     selector: 'admin-authentication-oidc',
     templateUrl: './admin-authentication-oidc.component.html',
     styleUrls: ['./admin-authentication-oidc.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatFormFieldModule,
+      FormsModule,
+      MatInputModule,
+      MatExpansionModule
+    ]
 })
 export class AdminAuthenticationOidcComponent implements OnInit {
 

web-app/src/app/admin/admin-authentication/admin-authentication-saml/admin-authentication-saml.component.html

@@ -49,9 +49,11 @@ <h4 class="subsection-title">Signing</h4>
   <mat-form-field appearance="fill">
     <mat-label>Signature Algorithm</mat-label>
     <mat-select [(ngModel)]="strategy.settings.signatureAlgorithm" (selectionChange)="setDirty(true)">
-      <mat-option *ngFor="let algorithm of signatureAlgorithms" [value]="algorithm.value">
-        {{ algorithm.viewValue }}
-      </mat-option>
+      @for (algorithm of signatureAlgorithms; track algorithm.value) {
+        <mat-option [value]="algorithm.value">
+          {{algorithm.viewValue}}
+        </mat-option>  
+      }
     </mat-select>
     <mat-hint>Signature algorithm for signing requests. Default: SHA-1.</mat-hint>
   </mat-form-field>
@@ -157,7 +159,11 @@ <h3 class="section-title">Additional SAML Parameters</h3>
   <mat-form-field appearance="fill">
     <mat-label>RAC Comparison</mat-label>
     <mat-select [(ngModel)]="strategy.settings.RACComparison" (selectionChange)="setDirty(true)">
-      <mat-option *ngFor="let rac of racs" [value]="rac.value">{{ rac.viewValue }}</mat-option>
+      @for (rac of racs; track rac.value) {
+        <mat-option [value]="rac.value">
+          {{rac.viewValue}}
+        </mat-option>  
+      }
     </mat-select>
     <mat-hint>Requested Authentication Context comparison type. Default: Exact.</mat-hint>
   </mat-form-field>

web-app/src/app/admin/admin-authentication/admin-authentication-saml/admin-authentication-saml.component.spec.ts

@@ -9,7 +9,7 @@ describe('AdminAuthenticationSAMLComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ AdminAuthenticationSAMLComponent ],
+      imports: [ AdminAuthenticationSAMLComponent ],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
     })
     .compileComponents();

web-app/src/app/admin/admin-authentication/admin-authentication-saml/admin-authentication-saml.component.ts

@@ -1,5 +1,11 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Strategy } from '../../admin-authentication/admin-settings.model';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSelectModule } from '@angular/material/select';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 interface SignatureAlgorithm {
   value: string;
@@ -15,7 +21,15 @@ interface RACComparison {
     selector: 'admin-authentication-saml',
     templateUrl: './admin-authentication-saml.component.html',
     styleUrls: ['./admin-authentication-saml.component.scss'],
-    standalone: false
+    standalone: true,
+    imports: [
+      MatFormFieldModule,
+      FormsModule,
+      MatInputModule,
+      MatSlideToggleModule,
+      MatSelectModule,
+      MatExpansionModule
+    ]
 })
 export class AdminAuthenticationSAMLComponent implements OnInit {
 

web-app/src/app/admin/admin.module.ts

@@ -53,13 +53,12 @@ import { AuthenticationDeleteComponent } from './admin-authentication/admin-auth
 import { ButtonPreviewComponent } from './admin-authentication/admin-authentication-create/button-preview/button-preview.component';
 import { IconUploadComponent } from './admin-authentication/admin-authentication-create/icon-upload/icon-upload.component';
 import { AdminAuthenticationOidcComponent } from './admin-authentication/admin-authentication-oidc/admin-authentication-oidc.component';
-import { AdminAuthenticationLocalComponent } from './admin-authentication/admin-authentication-local/admin-authentication-local.component';
 import { AdminAuthenticationOAuth2Component } from './admin-authentication/admin-authentication-oauth2/admin-authentication-oauth2.component';
 import { AdminAuthenticationLDAPComponent } from './admin-authentication/admin-authentication-ldap/admin-authentication-ldap.component';
 import { AdminAuthenticationSAMLComponent } from './admin-authentication/admin-authentication-saml/admin-authentication-saml.component';
+import { AdminAuthenticationLocalComponent } from './admin-authentication/admin-authentication-local/admin-authentication-local.component';
 import { PasswordPolicyComponent } from './admin-authentication/admin-authentication-local/password-policy/password-policy.component';
 import { AccountLockComponent } from './admin-authentication/admin-authentication-local/account-lock/account-lock.component';
-
 @NgModule({
   imports: [
     CommonModule,
@@ -99,7 +98,14 @@ import { AccountLockComponent } from './admin-authentication/admin-authenticatio
     AdminEventFormModule,
     AdminMapModule,
     ColorPickerModule,
-    PluginModule
+    PluginModule,
+    AdminAuthenticationLocalComponent,
+    PasswordPolicyComponent,
+    AccountLockComponent,
+    AdminAuthenticationOidcComponent,
+    AdminAuthenticationOAuth2Component,
+    AdminAuthenticationLDAPComponent,
+    AdminAuthenticationSAMLComponent
   ],
   declarations: [
     SearchModalComponent,
@@ -113,13 +119,6 @@ import { AccountLockComponent } from './admin-authentication/admin-authenticatio
     AuthenticationDeleteComponent,
     ButtonPreviewComponent,
     IconUploadComponent,
-    AdminAuthenticationOidcComponent,
-    AdminAuthenticationLocalComponent,
-    AdminAuthenticationOAuth2Component,
-    AdminAuthenticationLDAPComponent,
-    AdminAuthenticationSAMLComponent,
-    PasswordPolicyComponent,
-    AccountLockComponent
   ],
   exports: [AdminComponent],
   providers: [AdminGuard]