refactor(account): add inprogress variable to tenant-box

add validateOnSubmit directive to forms

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

@@ -5,7 +5,7 @@
       {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
       <a class="text-decoration-none" routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
     </strong>
-    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
       <div class="form-group">
         <label for="login-input-user-name-or-email-address">{{
           'AbpAccount::UserNameOrEmailAddress' | abpLocalization

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

@@ -5,7 +5,7 @@
       {{ 'AbpAccount::AlreadyRegistered' | abpLocalization }}
       <a class="text-decoration-none" routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
     </strong>
-    <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate class="mt-4">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
       <div class="form-group">
         <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
         ><span> * </span

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

@@ -25,7 +25,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" size="md">
+<abp-modal size="md" [(visible)]="isModalVisible" [busy]="inProgress">
   <ng-template #abpHeader>
     <h5>Switch Tenant</h5>
   </ng-template>
@@ -44,8 +44,8 @@
     <button #abpClose type="button" class="btn btn-secondary">
       {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
     </button>
-    <button type="button" class="btn btn-primary" (click)="save()">
+    <abp-button buttonType="button" buttonClass="btn btn-primary" (click)="save()">
       <i class="fa fa-check mr-1"></i> <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
-    </button>
+    </abp-button>
   </ng-template>
 </abp-modal>

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.ts

@@ -3,31 +3,27 @@ import { ToasterService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngxs/store';
 import { throwError } from 'rxjs';
-import { catchError, take } from 'rxjs/operators';
+import { catchError, take, finalize } from 'rxjs/operators';
 import snq from 'snq';
 import { AccountService } from '../../services/account.service';
 
 @Component({
   selector: 'abp-tenant-box',
-  templateUrl: './tenant-box.component.html'
+  templateUrl: './tenant-box.component.html',
 })
 export class TenantBoxComponent implements OnInit {
-  constructor(
-    private store: Store,
-    private toasterService: ToasterService,
-    private accountService: AccountService
-  ) {}
-
   tenant = {} as ABP.BasicItem;
 
   tenantName: string;
 
   isModalVisible: boolean;
 
+  inProgress: boolean;
+
+  constructor(private store: Store, private toasterService: ToasterService, private accountService: AccountService) {}
+
   ngOnInit() {
-    this.tenant =
+    this.tenant = this.store.selectSnapshot(SessionState.getTenant) || ({} as ABP.BasicItem);
-      this.store.selectSnapshot(SessionState.getTenant) ||
-      ({} as ABP.BasicItem);
     this.tenantName = this.tenant.name || '';
   }
 
@@ -36,38 +32,33 @@ export class TenantBoxComponent implements OnInit {
   }
 
   save() {
-    if (this.tenant.name) {
+    if (this.tenant.name && !this.inProgress) {
+      this.inProgress = true;
       this.accountService
         .findTenant(this.tenant.name)
         .pipe(
+          finalize(() => (this.inProgress = false)),
           take(1),
           catchError(err => {
             this.toasterService.error(
-              snq(
+              snq(() => err.error.error_description, 'AbpUi::DefaultErrorMessage'),
-                () => err.error.error_description,
+              'AbpUi::Error',
-                'AbpUi::DefaultErrorMessage'
-              ),
-              'AbpUi::Error'
             );
             return throwError(err);
-          })
+          }),
         )
         .subscribe(({ success, tenantId }) => {
           if (success) {
             this.tenant = {
               id: tenantId,
-              name: this.tenant.name
+              name: this.tenant.name,
             };
             this.tenantName = this.tenant.name;
             this.isModalVisible = false;
           } else {
-            this.toasterService.error(
+            this.toasterService.error('AbpUiMultiTenancy::GivenTenantIsNotAvailable', 'AbpUi::Error', {
-              'AbpUiMultiTenancy::GivenTenantIsNotAvailable',
+              messageLocalizationParams: [this.tenant.name],
-              'AbpUi::Error',
+            });
-              {
-                messageLocalizationParams: [this.tenant.name]
-              }
-            );
             this.tenant = {} as ABP.BasicItem;
           }
           this.store.dispatch(new SetTenant(success ? this.tenant : null));