feat: implement new home page

npm/ng-packs/angular.json

@@ -418,7 +418,7 @@
       },
       "root": "apps/dev-app",
       "sourceRoot": "apps/dev-app/src",
-      "prefix": "app",
+      "prefix": "abp",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",

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

@@ -3,7 +3,7 @@ import { LAYOUTS } from '@abp/ng.theme.basic';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { environment } from '../environments/environment';
@@ -16,6 +16,8 @@ import { IdentityConfigModule } from '@abp/ng.identity.config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management.config';
 
+const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -26,6 +28,8 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management.config
       },
     }),
     ThemeSharedModule.forRoot(),
+    OAuthModule.forRoot(),
+    NgxsModule.forRoot([]),
     AccountConfigModule.forRoot({ redirectUrl: '/' }),
     IdentityConfigModule,
     TenantManagementConfigModule,
@@ -35,10 +39,7 @@ import { SettingManagementConfigModule } from '@abp/ng.setting-management.config
     AppRoutingModule,
     SharedModule,
 
-    OAuthModule.forRoot(),
+    ...(environment.production ? [] : LOGGERS),
-    NgxsModule.forRoot([]),
-
-    NgxsReduxDevtoolsPluginModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

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

@@ -1,15 +1,19 @@
-<div class="card">
+<div id="AbpContentToolbar"></div>
-  <div class="card-header">{{ '::Welcome' | abpLocalization }}</div>
+<div class="jumbotron text-center">
-  <div class="card-body">
+  <h1>{{ '::Welcome' | abpLocalization }}</h1>
-    <p>
+  <div class="row">
-      {{ '::LongWelcomeMessage' | abpLocalization }}
+    <div class="col-md-6 mx-auto">
-    </p>
+      <p>{{ '::LongWelcomeMessage' | abpLocalization }}</p>
-    <p *ngIf="!hasLoggedIn">
+      <hr class="my-4" />
-      <a routerLink="/account/login" [state]="{ redirectUrl: '/' }" class="btn btn-primary" role="button"
+    </div>
-        ><i class="fa fa-sign-in mr-1"></i>{{ 'AbpIdentity::Login' | abpLocalization }}</a
-      >
-    </p>
-    <hr />
-    <p class="text-right"><a href="https://abp.io?ref=tmpl" target="_blank">abp.io</a></p>
   </div>
+  <a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a>
+  <a
+    *ngIf="!hasLoggedIn"
+    routerLink="/account/login"
+    [state]="{ redirectUrl: '/' }"
+    class="px-4 btn btn-primary ml-1"
+    role="button"
+    ><i class="fa fa-sign-in"></i> {{ 'AbpIdentity::Login' | abpLocalization }}</a
+  >
 </div>

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
-  selector: 'app-home',
+  selector: 'abp-home',
   templateUrl: './home.component.html',
 })
 export class HomeComponent {

npm/ng-packs/apps/dev-app/src/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <body class="abp-application-layout bg-light">
     <app-root></app-root>
   </body>
 </html>

templates/app/angular/src/app/home/home.component.html

@@ -1,16 +1,19 @@
-<div class="container">
+<div id="AbpContentToolbar"></div>
-  <div id="AbpContentToolbar"></div>
+<div class="jumbotron text-center">
-  <div class="jumbotron text-center">
+  <h1>{{ '::Welcome' | abpLocalization }}</h1>
-    <h1>{{ '::Welcome' | abpLocalization }}</h1>
+  <div class="row">
-    <div class="row">
+    <div class="col-md-6 mx-auto">
-      <div class="col-md-6 mx-auto">
+      <p>{{ '::LongWelcomeMessage' | abpLocalization }}</p>
-        <p>{{ '::LongWelcomeMessage' | abpLocalization }}</p>
+      <hr class="my-4" />
-        <hr class="my-4" />
-      </div>
     </div>
-    <a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a>
-    <a routerLink="/account/login" [state]="{ redirectUrl: '/' }" class="px-4 btn btn-primary" role="button"
-      ><i class="fa fa-sign-in"></i> {{ 'AbpIdentity::Login' | abpLocalization }}</a
-    >
   </div>
+  <a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a>
+  <a
+    *ngIf="!hasLoggedIn"
+    routerLink="/account/login"
+    [state]="{ redirectUrl: '/' }"
+    class="px-4 btn btn-primary ml-1"
+    role="button"
+    ><i class="fa fa-sign-in"></i> {{ 'AbpIdentity::Login' | abpLocalization }}</a
+  >
 </div>

templates/app/angular/src/index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
-  <body>
+  <body class="abp-application-layout bg-light">
     <app-root>
       <div class="donut centered"></div>
     </app-root>