When the login button is clicked, the button will be disabled and the loading icon will appear in front of it and then redirect to the login page.

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -14,7 +14,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
 import { FeatureManagementModule } from '@abp/ng.feature-management';
-// import { AbpOAuthModule } from '@abp/ng.oauth';
+import { AbpOAuthModule } from '@abp/ng.oauth';
 
 @NgModule({
   imports: [
@@ -27,7 +27,7 @@ import { FeatureManagementModule } from '@abp/ng.feature-management';
       sendNullsAsQueryParam: false,
       skipGetAppConfiguration: false,
     }),
-    // AbpOAuthModule.forRoot(),
+    AbpOAuthModule.forRoot(),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot(),
     IdentityConfigModule.forRoot(),

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -10,9 +10,23 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ml-1" role="button"
-      ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
+    <button
+      *ngIf="!hasLoggedIn"
+      [disabled]="isLog"
+      (click)="login()"
+      class="px-4 btn btn-primary ml-1"
+      role="button"
     >
+      <i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}
+      <div
+        *ngIf="isLog"
+        style="width: 17px; height: 17px"
+        class="spinner-border text-light ms-2"
+        role="status"
+      >
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </button>
   </div>
   <div class="my-3 text-center">
     <h3>Let's improve your application!</h3>

npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@@ -1,12 +1,14 @@
 import { AuthService } from '@abp/ng.core';
 import { Component } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
+import { timeInterval } from 'rxjs';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
+  isLog: boolean = false;
   get hasLoggedIn(): boolean {
     return this.authService.isAuthenticated;
   }
@@ -14,6 +16,10 @@ export class HomeComponent {
   constructor(private authService: AuthService) {}
 
   login() {
-    this.authService.navigateToLogin();
+    this.isLog = true;
+    setTimeout(data => {
+      this.authService.navigateToLogin();
+      this.isLog = false;
+    }, 1000);
   }
 }

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.DbMigrator/appsettings.json

@@ -1,6 +1,6 @@
 {
   "ConnectionStrings": {
-    "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName;Trusted_Connection=True;TrustServerCertificate=True"
+    "Default": "Server=özer\\OZER;Database=MyProjectName;Trusted_Connection=True;TrustServerCertificate=True"
   },
   "OpenIddict": {
     "Applications": {

templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.HostWithIds/appsettings.json

@@ -1,19 +1,19 @@
 {
-  "App": {
-    "SelfUrl": "https://localhost:44305",
-    "ClientUrl": "http://localhost:4200",
-    "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200,https://localhost:44307",
-    "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
-  },
-  "ConnectionStrings": {
-    "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName;Trusted_Connection=True;TrustServerCertificate=True"
-  },
-  "AuthServer": {
-    "Authority": "https://localhost:44305",
-    "RequireHttpsMetadata": "false",
-    "SwaggerClientId": "MyProjectName_Swagger"
-  },
-  "StringEncryption": {
-    "DefaultPassPhrase": "gsKnGZ041HLL4IM8"
-  }
+    "App": {
+        "SelfUrl": "https://localhost:44305",
+        "ClientUrl": "http://localhost:4200",
+        "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200,https://localhost:44307",
+        "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
+    },
+    "ConnectionStrings": {
+        "Default": "Server=özer\\OZER;Database=MyProjectName;Trusted_Connection=True;TrustServerCertificate=True"
+    },
+    "AuthServer": {
+        "Authority": "https://localhost:44305",
+        "RequireHttpsMetadata": "false",
+        "SwaggerClientId": "MyProjectName_Swagger"
+    },
+    "StringEncryption": {
+        "DefaultPassPhrase": "gsKnGZ041HLL4IM8"
+    }
 }