[CST-15074][#3355] Resolved conflicts and updated control-flow syntax

src/app/external-log-in/email-confirmation/confirm-email/confirm-email.component.html

@@ -12,26 +12,17 @@
       class="form-control form-control-lg position-relative"
       [attr.aria-label]="'external-login.confirmation.email-label' | translate"
     />
-    <div
-      *ngIf="
-        emailForm.get('email').hasError('required') &&
-        emailForm.get('email').touched
-      "
-      class="text-danger"
-    >
-      {{ "external-login.confirmation.email-required" | translate }}
-    </div>
-    <div
-      *ngIf="
-        emailForm.get('email').hasError('email') &&
-        emailForm.get('email').touched
-      "
-      class="text-danger"
-    >
-      {{ "external-login.confirmation.email-invalid" | translate }}
-    </div>
+    @if (emailForm.get('email').hasError('required') && emailForm.get('email').touched) {
+      <div class="text-danger">
+        {{ "external-login.confirmation.email-required" | translate }}
+      </div>
+    }
+    @if (emailForm.get('email').hasError('email') && emailForm.get('email').touched) {
+      <div class="text-danger">
+        {{ "external-login.confirmation.email-invalid" | translate }}
+      </div>
+    }
   </div>
-
   <button type="submit" class="btn btn-lg btn-primary btn-block">
     {{ "external-login.confirm.button.label" | translate }}
   </button>

src/app/external-log-in/email-confirmation/provide-email/provide-email.component.html

@@ -12,24 +12,16 @@
       [attr.aria-label]="'external-login.confirmation.email' | translate"
     />
 
-    <div
-      *ngIf="
-        emailForm.get('email').hasError('required') &&
-        emailForm.get('email').touched
-      "
-      class="text-danger"
-    >
-      {{ "external-login.confirmation.email-required" | translate }}
-    </div>
-    <div
-      *ngIf="
-        emailForm.get('email').hasError('email') &&
-        emailForm.get('email').touched
-      "
-      class="text-danger"
-    >
-      {{ "external-login.confirmation.email-invalid" | translate }}
-    </div>
+    @if (emailForm.get('email').hasError('required') && emailForm.get('email').touched) {
+      <div class="text-danger">
+        {{ "external-login.confirmation.email-required" | translate }}
+      </div>
+    }
+    @if (emailForm.get('email').hasError('email') && emailForm.get('email').touched) {
+      <div class="text-danger">
+        {{ "external-login.confirmation.email-invalid" | translate }}
+      </div>
+    }
   </div>
 
   <button type="submit" class="btn btn-lg btn-primary btn-block">

src/app/external-log-in/external-log-in/external-log-in.component.html

@@ -10,12 +10,11 @@
 </ds-alert>
 <div class="row justify-content-center">
   <div class="col-4 d-flex justify-content-end align-items-center">
-    <ng-container *ngIf="registrationData.email; else provideEmail">
+    @if (registrationData.email) {
       <ds-confirm-email [registrationData]="registrationData" [token]="token"></ds-confirm-email>
-    </ng-container>
-    <ng-template #provideEmail>
+    } @else {
       <ds-provide-email [registrationId]="registrationData.id" [token]="token"></ds-provide-email>
-    </ng-template>
+    }
   </div>
   <div class="col-1 align-items-center d-flex justify-content-center">
     <h4 class="mt-2">{{ 'external-login.component.or' | translate }}</h4>

src/app/external-log-in/registration-types/orcid-confirmation/orcid-confirmation.component.html

@@ -23,7 +23,7 @@
         formControlName="firstname"
         type="text"
         [attr.data-test]="'firstname' | dsBrowserOnly">
-  <ng-container *ngIf="registrationData?.email">
+  @if (registrationData?.email) {
     <label class="font-weight-bold mb-0">{{"external-login-page.orcid-confirmation.email" | translate}}</label>
     <input [attr.aria-label]="'external-login-page.orcid-confirmation.email.label' | translate"
           autocomplete="off"
@@ -31,5 +31,5 @@
           formControlName="email"
           type="email"
           [attr.data-test]="'email' | dsBrowserOnly">
-  </ng-container>
+  }
 </form>

src/app/external-login-page/external-login-page.component.html

@@ -1,11 +1,12 @@
 <div class="container">
-  <ng-container *ngIf="(registrationData$ | async)">
-    <ds-external-log-in [registrationData]="registrationData$ | async" [token]="token"></ds-external-log-in>
-  </ng-container>
+  @if (registrationData$ | async; as registrationData) {
+    <ds-external-log-in [registrationData]="registrationData" [token]="token"></ds-external-log-in>
+  }
 
-  <ds-alert
-  *ngIf="hasErrors"
-  [type]="AlertTypeEnum.Error"
-  [content]="'external-login.error.notification' | translate"
-></ds-alert>
+  @if (hasErrors) {
+    <ds-alert
+      [type]="AlertTypeEnum.Error"
+      [content]="'external-login.error.notification' | translate"
+    ></ds-alert>
+  }
 </div>

src/app/external-login-review-account-info-page/external-login-review-account-info-page.component.html

@@ -1,13 +1,14 @@
 <div class="container">
-  <ng-container *ngIf="(registrationData$ | async)">
+  @if (registrationData$ | async; as registrationData) {
     <ds-review-account-info
       [registrationToken]="token"
-      [registrationData]="registrationData$ | async"
+      [registrationData]="registrationData"
     ></ds-review-account-info>
-  </ng-container>
-  <ds-alert
-    *ngIf="hasErrors"
-    [type]="AlertTypeEnum.Error"
-    [content]="'review-account-info.alert.error.content'"
-  ></ds-alert>
+  }
+  @if (hasErrors) {
+    <ds-alert
+      [type]="AlertTypeEnum.Error"
+      [content]="'review-account-info.alert.error.content'"
+    ></ds-alert>
+  }
 </div>

src/app/external-login-review-account-info-page/review-account-info/review-account-info.component.html

@@ -28,30 +28,32 @@
         </td>
         <td></td>
       </tr>
-      <tr *ngFor="let data of dataToCompare">
-        <th scope="row">{{ data.label | titlecase }}</th>
-        <td>{{ data.receivedValue }}</td>
-        <td>
-          <span
-            [innerHTML]="
-              data.receivedValue | dsCompareValues : data.currentValue
-            "
-          >
-          </span>
-        </td>
-        <td>
-          <ui-switch
-            *ngIf="(data.receivedValue !== data.currentValue) && data.currentValue"
-            [checkedLabel]="'on-label' | translate"
-            [uncheckedLabel]="'off-label' | translate"
-            [checked]="data.overrideValue"
-            (change)="onOverrideChange($event, data.identifier)"
-          ></ui-switch>
-        </td>
-      </tr>
+      @for (data of dataToCompare; track data) {
+        <tr>
+          <th scope="row">{{ data.label | titlecase }}</th>
+          <td>{{ data.receivedValue }}</td>
+          <td>
+            <span
+              [innerHTML]="
+                data.receivedValue | dsCompareValues : data.currentValue
+              "
+            >
+            </span>
+          </td>
+          <td>
+            @if ((data.receivedValue !== data.currentValue) && data.currentValue) {
+              <ui-switch
+                [checkedLabel]="'on-label' | translate"
+                [uncheckedLabel]="'off-label' | translate"
+                [checked]="data.overrideValue"
+                (change)="onOverrideChange($event, data.identifier)"
+              ></ui-switch>
+            }
+          </td>
+        </tr>
+      }
     </tbody>
-  </table>
-  <div class="d-flex justify-content-end">
+  </table>  <div class="d-flex justify-content-end">
     <button class="btn btn-primary" (click)="onSave()">
       {{'confirmation-modal.review-account-info.confirm' | translate}}
     </button>

src/app/shared/log-in/log-in.component.ts

@@ -27,7 +27,6 @@ import { hasValue } from '../empty.util';
 import { ThemedLoadingComponent } from '../loading/themed-loading.component';
 import { LogInContainerComponent } from './container/log-in-container.component';
 import { rendersAuthMethodType } from './methods/log-in.methods-decorator';
-import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-base-log-in',
@@ -35,7 +34,7 @@ import { TranslateModule } from '@ngx-translate/core';
   styleUrls: ['./log-in.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [ThemedLoadingComponent, LogInContainerComponent, AsyncPipe, TranslateModule],
+  imports: [ThemedLoadingComponent, LogInContainerComponent, AsyncPipe],
 })
 export class LogInComponent implements OnInit {