use new control flow in account components

npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.html

@@ -1,18 +1,20 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()" [mapErrorsFn]="mapErrorsFn" validateOnSubmit class="abp-md-form">
-  <div *ngIf="!hideCurrentPassword" class="mb-3 form-group">
+  @if (!hideCurrentPassword) {
-    <label for="current-password" class="form-label">{{
+    <div class="mb-3 form-group">
-      'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
+      <label for="current-password" class="form-label">{{
-    }}</label
+        'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization
-    ><span> * </span
+      }}</label
-    ><input
+      ><span> * </span
-      type="password"
+      ><input
-      id="current-password"
+        type="password"
-      class="form-control"
+        id="current-password"
-      formControlName="password"
+        class="form-control"
-      autofocus
+        formControlName="password"
-      autocomplete="current-password"
+        autofocus
-    />
+        autocomplete="current-password"
-  </div>
+      />
+    </div>
+  }
   <div class="mb-3 form-group">
     <label for="new-password" class="form-label">{{
       'AbpIdentity::DisplayName:NewPassword' | abpLocalization

npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html

@@ -1,35 +1,30 @@
 <h4>{{ 'AbpAccount::ForgotPassword' | abpLocalization }}</h4>
 
-<form
+@if (!isEmailSent) {
-  *ngIf="!isEmailSent; else emailSentTemplate"
+  <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit>
-  [formGroup]="form"
+    <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
-  (ngSubmit)="onSubmit()"
+    <div class="mb-3 form-group">
-  validateOnSubmit
+      <label for="input-email-address" class="form-label">{{
->
+        'AbpAccount::EmailAddress' | abpLocalization
-  <p>{{ 'AbpAccount::SendPasswordResetLink_Information' | abpLocalization }}</p>
+      }}</label
-  <div class="mb-3 form-group">
+      ><span> * </span>
-    <label for="input-email-address" class="form-label">{{
+      <input type="email" id="input-email-address" class="form-control" formControlName="email" />
-      'AbpAccount::EmailAddress' | abpLocalization
+    </div>
-    }}</label
+    <abp-button
-    ><span> * </span>
+      class="d-block"
-    <input type="email" id="input-email-address" class="form-control" formControlName="email" />
+      buttonClass="mt-2 mb-3 btn btn-primary btn-block"
-  </div>
+      [loading]="inProgress"
-  <abp-button
+      buttonType="submit"
-    class="d-block"
+      [disabled]="form?.invalid"
-    buttonClass="mt-2 mb-3 btn btn-primary btn-block"
+    >
-    [loading]="inProgress"
+      {{ 'AbpAccount::Submit' | abpLocalization }}
-    buttonType="submit"
+    </abp-button>
-    [disabled]="form?.invalid"
+    <a routerLink="/account/login"
-  >
+      ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
-    {{ 'AbpAccount::Submit' | abpLocalization }}
+      >{{ 'AbpAccount::Login' | abpLocalization }}</a
-  </abp-button>
+    >
-  <a routerLink="/account/login"
+  </form>
-    ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
+} @else {
-    >{{ 'AbpAccount::Login' | abpLocalization }}</a
-  >
-</form>
-
-<ng-template #emailSentTemplate>
   <p>
     {{ 'AbpAccount::PasswordResetMailSentMessage' | abpLocalization }}
   </p>
@@ -40,4 +35,4 @@
       {{ 'AbpAccount::BackToLogin' | abpLocalization }}
     </button>
   </a>
-</ng-template>
+}

npm/ng-packs/packages/account/src/lib/components/login/login.component.html

@@ -1,10 +1,12 @@
 <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
-<strong *ngIf="isSelfRegistrationEnabled">
+@if (isSelfRegistrationEnabled) {
-  {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
+  <strong>
-  <a class="text-decoration-none" routerLink="/account/register" queryParamsHandling="preserve">{{
+    {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
-    'AbpAccount::Register' | abpLocalization
+    <a class="text-decoration-none" routerLink="/account/register" queryParamsHandling="preserve">{{
-  }}</a>
+      'AbpAccount::Register' | abpLocalization
-</strong>
+    }}</a>
+  </strong>
+}
 <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
   <div class="mb-3 form-group">
     <label for="login-input-user-name-or-email-address" class="form-label">{{
@@ -20,7 +22,9 @@
     />
   </div>
   <div class="mb-3 form-group">
-    <label for="login-input-password" class="form-label">{{ 'AbpAccount::Password' | abpLocalization }}</label>
+    <label for="login-input-password" class="form-label">{{
+      'AbpAccount::Password' | abpLocalization
+    }}</label>
     <input
       class="form-control"
       type="password"

npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html

@@ -1,22 +1,20 @@
 <div id="AbpContentToolbar"></div>
-<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName" >
+<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName">
   <div class="card-body">
     <div class="row">
       <div class="col-12 col-md-3">
         <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-          <li
+          @if (!hideChangePasswordTab && (profile$ | async)) {
-            *ngIf="!hideChangePasswordTab && (profile$ | async)"
+            <li class="nav-item" (click)="selectedTab = 0">
-            class="nav-item"
+              <a
-            (click)="selectedTab = 0"
+                class="nav-link"
-          >
+                [ngClass]="{ active: selectedTab === 0 }"
-            <a
+                role="tab"
-              class="nav-link"
+                href="javascript:void(0)"
-              [ngClass]="{ active: selectedTab === 0 }"
+                >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
-              role="tab"
+              >
-              href="javascript:void(0)"
+            </li>
-              >{{ 'AbpUi::ChangePassword' | abpLocalization }}</a
+          }
-            >
-          </li>
           <li class="nav-item mb-2" (click)="selectedTab = 1">
             <a
               class="nav-link"
@@ -28,34 +26,40 @@
           </li>
         </ul>
       </div>
-      <div *ngIf="profile$ | async" class="col-12 col-md-9">
+      @if (profile$ | async) {
-        <div class="tab-content" *ngIf="selectedTab === 0" [@fadeIn]>
+        <div class="col-12 col-md-9">
-          <div class="tab-pane active" role="tabpanel">
+          @if (selectedTab === 0) {
-            <h4>
+            <div class="tab-content" [@fadeIn]>
-              {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
+              <div class="tab-pane active" role="tabpanel">
-              <hr />
+                <h4>
-            </h4>
+                  {{ 'AbpIdentity::ChangePassword' | abpLocalization }}
-            <abp-change-password-form
+                  <hr />
-              *abpReplaceableTemplate="{
+                </h4>
-                componentKey: changePasswordKey
+                <abp-change-password-form
-              }"
+                  *abpReplaceableTemplate="{
-            ></abp-change-password-form>
+                    componentKey: changePasswordKey
-          </div>
+                  }"
+                ></abp-change-password-form>
+              </div>
+            </div>
+          }
+          @if (selectedTab === 1) {
+            <div class="tab-content" [@fadeIn]>
+              <div class="tab-pane active" role="tabpanel">
+                <h4>
+                  {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
+                  <hr />
+                </h4>
+                <abp-personal-settings-form
+                  *abpReplaceableTemplate="{
+                    componentKey: personalSettingsKey
+                  }"
+                ></abp-personal-settings-form>
+              </div>
+            </div>
+          }
         </div>
-        <div class="tab-content" *ngIf="selectedTab === 1" [@fadeIn]>
+      }
-          <div class="tab-pane active" role="tabpanel">
-            <h4>
-              {{ 'AbpIdentity::PersonalSettings' | abpLocalization }}
-              <hr />
-            </h4>
-            <abp-personal-settings-form
-              *abpReplaceableTemplate="{
-                componentKey: personalSettingsKey
-              }"
-            ></abp-personal-settings-form>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </div>

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html

@@ -1,12 +1,14 @@
-<form [formGroup]="form"   *ngIf="form"  (ngSubmit)="submit()" validateOnSubmit class="abp-md-form">
+@if (form) {
-  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+  <form [formGroup]="form" (ngSubmit)="submit()" validateOnSubmit class="abp-md-form">
-
+    <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-  <abp-button
+  
-    buttonType="submit"
+    <abp-button
-    iconClass="fa fa-check"
+      buttonType="submit"
-    buttonClass="btn btn-primary color-white"
+      iconClass="fa fa-check"
-    [loading]="inProgress"
+      buttonClass="btn btn-primary color-white"
-  >
+      [loading]="inProgress"
-    {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
+    >
-  >
+      {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
-</form>
+    >
+  </form>
+}

npm/ng-packs/packages/account/src/lib/components/register/register.component.html

@@ -5,53 +5,54 @@
     'AbpAccount::Login' | abpLocalization
   }}</a>
 </strong>
-<form
+@if (isSelfRegistrationEnabled) {
-  *ngIf="isSelfRegistrationEnabled"
+  <form
-  [formGroup]="form"
+    [formGroup]="form"
-  (ngSubmit)="onSubmit()"
+    (ngSubmit)="onSubmit()"
-  validateOnSubmit
+    validateOnSubmit
-  class="mt-4"
+    class="mt-4"
->
-  <div class="mb-3 form-group">
-    <label for="input-user-name" class="form-label">{{
-      'AbpAccount::UserName' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
-      autofocus
-      type="text"
-      id="input-user-name"
-      class="form-control"
-      formControlName="username"
-      autocomplete="username"
-    />
-  </div>
-  <div class="mb-3 form-group">
-    <label for="input-email-address" class="form-label">{{
-      'AbpAccount::EmailAddress' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input type="email" id="input-email-address" class="form-control" formControlName="email" />
-  </div>
-  <div class="mb-3 form-group">
-    <label for="input-password" class="form-label">{{
-      'AbpAccount::Password' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
-      type="password"
-      id="input-password"
-      class="form-control"
-      formControlName="password"
-      autocomplete="current-password"
-    />
-  </div>
-  <abp-button
-    [loading]="inProgress"
-    buttonType="submit"
-    name="Action"
-    buttonClass="btn-block btn-lg mt-3 btn btn-primary"
   >
-    {{ 'AbpAccount::Register' | abpLocalization }}
+    <div class="mb-3 form-group">
-  </abp-button>
+      <label for="input-user-name" class="form-label">{{
-</form>
+        'AbpAccount::UserName' | abpLocalization
+      }}</label
+      ><span> * </span
+      ><input
+        autofocus
+        type="text"
+        id="input-user-name"
+        class="form-control"
+        formControlName="username"
+        autocomplete="username"
+      />
+    </div>
+    <div class="mb-3 form-group">
+      <label for="input-email-address" class="form-label">{{
+        'AbpAccount::EmailAddress' | abpLocalization
+      }}</label
+      ><span> * </span
+      ><input type="email" id="input-email-address" class="form-control" formControlName="email" />
+    </div>
+    <div class="mb-3 form-group">
+      <label for="input-password" class="form-label">{{
+        'AbpAccount::Password' | abpLocalization
+      }}</label
+      ><span> * </span
+      ><input
+        type="password"
+        id="input-password"
+        class="form-control"
+        formControlName="password"
+        autocomplete="current-password"
+      />
+    </div>
+    <abp-button
+      [loading]="inProgress"
+      buttonType="submit"
+      name="Action"
+      buttonClass="btn-block btn-lg mt-3 btn btn-primary"
+    >
+      {{ 'AbpAccount::Register' | abpLocalization }}
+    </abp-button>
+  </form>
+}

npm/ng-packs/packages/account/src/lib/components/reset-password/reset-password.component.html

@@ -1,46 +1,40 @@
 <h4>{{ 'AbpAccount::ResetPassword' | abpLocalization }}</h4>
 
-<form
+@if (!isPasswordReset) {
-  *ngIf="!isPasswordReset; else passwordResetTemplate"
+  <form [formGroup]="form" [mapErrorsFn]="mapErrorsFn" (ngSubmit)="onSubmit()" validateOnSubmit>
-  [formGroup]="form"
+    <p>{{ 'AbpAccount::ResetPassword_Information' | abpLocalization }}</p>
-  [mapErrorsFn]="mapErrorsFn"
+    <div class="mb-3 form-group">
-  (ngSubmit)="onSubmit()"
+      <label for="input-password" class="form-label">{{
-  validateOnSubmit
+        'AbpAccount::Password' | abpLocalization
->
+      }}</label
-  <p>{{ 'AbpAccount::ResetPassword_Information' | abpLocalization }}</p>
+      ><span> * </span>
-  <div class="mb-3 form-group">
+      <input type="password" id="input-password" class="form-control" formControlName="password" />
-    <label for="input-password" class="form-label">{{
+    </div>
-      'AbpAccount::Password' | abpLocalization
+    <div class="mb-3 form-group">
-    }}</label
+      <label for="input-confirm-password" class="form-label">{{
-    ><span> * </span>
+        'AbpAccount::ConfirmPassword' | abpLocalization
-    <input type="password" id="input-password" class="form-control" formControlName="password" />
+      }}</label
-  </div>
+      ><span> * </span>
-  <div class="mb-3 form-group">
+      <input
-    <label for="input-confirm-password" class="form-label">{{
+        type="password"
-      'AbpAccount::ConfirmPassword' | abpLocalization
+        id="input-confirm-password"
-    }}</label
+        class="form-control"
-    ><span> * </span>
+        formControlName="confirmPassword"
-    <input
+      />
-      type="password"
+    </div>
-      id="input-confirm-password"
+    <button class="me-2 btn btn-outline-primary" type="button" routerLink="/account/login">
-      class="form-control"
+      {{ 'AbpAccount::Cancel' | abpLocalization }}
-      formControlName="confirmPassword"
+    </button>
-    />
+    <abp-button
-  </div>
+      buttonType="submit"
-  <button class="me-2 btn btn-outline-primary" type="button" routerLink="/account/login">
+      buttonClass="me-2 btn btn-primary"
-    {{ 'AbpAccount::Cancel' | abpLocalization }}
+      [loading]="inProgress"
-  </button>
+      (click)="onSubmit()"
-  <abp-button
+    >
-    buttonType="submit"
+      {{ 'AbpAccount::Submit' | abpLocalization }}
-    buttonClass="me-2 btn btn-primary"
+    </abp-button>
-    [loading]="inProgress"
+  </form>
-    (click)="onSubmit()"
+} @else {
-  >
-    {{ 'AbpAccount::Submit' | abpLocalization }}
-  </abp-button>
-</form>
-
-<ng-template #passwordResetTemplate>
   <p>
     {{ 'AbpAccount::YourPasswordIsSuccessfullyReset' | abpLocalization }}
   </p>
@@ -50,4 +44,4 @@
       {{ 'AbpAccount::BackToLogin' | abpLocalization }}
     </button>
   </a>
-</ng-template>
+}