feat(account): implement new login and register html design

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

@@ -0,0 +1,14 @@
+<div class="row">
+  <div class="mx-auto col col-md-5">
+    <abp-tenant-box></abp-tenant-box>
+
+    <div class="abp-account-container">
+      <div class="card mt-3 shadow-sm rounded">
+        <div class="card-body p-5">
+          <ng-content *ngTemplateOutlet="mainContentRef"></ng-content>
+        </div>
+        <ng-content *ngTemplateOutlet="cancelContentRef"></ng-content>
+      </div>
+    </div>
+  </div>
+</div>

npm/ng-packs/packages/account/src/lib/components/auth-wrapper/auth-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+
+@Component({
+  selector: 'abp-auth-wrapper',
+  templateUrl: './auth-wrapper.component.html',
+})
+export class AuthWrapperComponent {
+  @Input()
+  mainContentRef: TemplateRef<any>;
+
+  @Input()
+  cancelContentRef: TemplateRef<any>;
+}

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

@@ -1,41 +1,50 @@
-<div class="row">
-  <div class="col col-md-4 offset-md-4">
-    <abp-tenant-box></abp-tenant-box>
-
-    <div class="abp-account-container">
-      <h2>{{ 'AbpAccount::Login' | abpLocalization }}</h2>
-      <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
-        <div class="form-group">
-          <label for="login-input-user-name-or-email-address">{{
-            'AbpAccount::UserNameOrEmailAddress' | abpLocalization
-          }}</label>
-          <input
-            class="form-control"
-            type="text"
-            id="login-input-user-name-or-email-address"
-            formControlName="username"
-            autofocus
-          />
-        </div>
-        <div class="form-group">
-          <label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
-          <input class="form-control" type="password" id="login-input-password" formControlName="password" />
-        </div>
-        <div class="form-check" validationTarget validationStyle>
-          <label class="form-check-label" for="login-input-remember-me">
-            <input class="form-check-input" type="checkbox" id="login-input-remember-me" formControlName="remember" />
-            {{ 'AbpAccount::RememberMe' | abpLocalization }}
-          </label>
-        </div>
-        <div class="mt-2">
-          <abp-button [loading]="inProgress" type="submit">
-            {{ 'AbpAccount::Login' | abpLocalization }}
-          </abp-button>
-        </div>
-      </form>
-      <div style="padding-top: 20px">
-        <a routerLink="/account/register">{{ 'AbpAccount::Register' | abpLocalization }}</a>
+<abp-auth-wrapper [mainContentRef]="mainContentRef" [cancelContentRef]="cancelContentRef">
+  <ng-template #mainContentRef>
+    <h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
+    <strong>
+      {{ '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">
+      <div class="form-group">
+        <label for="login-input-user-name-or-email-address">{{
+          'AbpAccount::UserNameOrEmailAddress' | abpLocalization
+        }}</label>
+        <input
+          class="form-control"
+          type="text"
+          id="login-input-user-name-or-email-address"
+          formControlName="username"
+          autofocus
+        />
       </div>
+      <div class="form-group">
+        <label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
+        <input class="form-control" type="password" id="login-input-password" formControlName="password" />
+      </div>
+      <div class="form-check" validationTarget validationStyle>
+        <label class="form-check-label" for="login-input-remember-me">
+          <input class="form-check-input" type="checkbox" id="login-input-remember-me" formControlName="remember" />
+          {{ 'AbpAccount::RememberMe' | abpLocalization }}
+        </label>
+      </div>
+      <abp-button
+        [loading]="inProgress"
+        buttonType="submit"
+        name="Action"
+        buttonClass="btn-block btn-lg mt-3 btn btn-primary"
+      >
+        {{ 'AbpAccount::Login' | abpLocalization }}
+      </abp-button>
+    </form>
+  </ng-template>
+  <ng-template #cancelContentRef>
+    <div class="card-footer text-center border-0">
+      <a routerLink="/">
+        <button type="button" name="Action" value="Cancel" class="px-2 py-0 btn btn-link">
+          {{ 'AbpAccount::Cancel' | abpLocalization }}
+        </button>
+      </a>
     </div>
-  </div>
-</div>
+  </ng-template>
+</abp-auth-wrapper>

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

@@ -1,30 +1,32 @@
-<div class="row">
-  <div class="col col-md-4 offset-md-4">
-    <abp-tenant-box></abp-tenant-box>
-
-    <div class="abp-account-container">
-      <h2>{{ 'AbpAccount::Register' | abpLocalization }}</h2>
-      <form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
-        <div class="form-group">
-          <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
-          ><span> * </span
-          ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
-        </div>
-        <div class="form-group">
-          <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
-          ><span> * </span><input type="email" id="input-email-address" class="form-control" formControlName="email" />
-        </div>
-        <div class="form-group">
-          <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
-          ><span> * </span><input type="password" id="input-password" class="form-control" formControlName="password" />
-        </div>
-        <abp-button [loading]="inProgress" type="submit">
-          {{ 'AbpAccount::Register' | abpLocalization }}
-        </abp-button>
-      </form>
-      <div style="padding-top: 20px">
-        <a routerLink="/account/login">{{ 'AbpAccount::Login' | abpLocalization }}</a>
+<abp-auth-wrapper [mainContentRef]="mainContentRef">
+  <ng-template #mainContentRef>
+    <h4>{{ 'AbpAccount::Register' | abpLocalization }}</h4>
+    <strong>
+      {{ '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">
+      <div class="form-group">
+        <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
+        ><span> * </span
+        ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
       </div>
-    </div>
-  </div>
-</div>
+      <div class="form-group">
+        <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label
+        ><span> * </span><input type="email" id="input-email-address" class="form-control" formControlName="email" />
+      </div>
+      <div class="form-group">
+        <label for="input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label
+        ><span> * </span><input type="password" id="input-password" class="form-control" formControlName="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>
+  </ng-template>
+</abp-auth-wrapper>

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

@@ -1,15 +1,28 @@
-<div
-  class="tenant-switch-box"
-  style="background-color: #eee; margin-bottom: 20px; color: #000; padding: 10px; text-align: center;"
->
-  <span style="color: #666;">{{ 'AbpUiMultiTenancy::Tenant' | abpLocalization }}: </span>
-  <strong>
-    <i>{{ tenantName || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
-  </strong>
-  (<a id="abp-tenant-switch-link" style="color: #333; cursor: pointer" (click)="onSwitch()">{{
-    'AbpUiMultiTenancy::Switch' | abpLocalization
-  }}</a
-  >)
+<div class="card shadow-sm rounded mb-3">
+  <div class="card-body px-5">
+    <div class="row">
+      <div class="col">
+        <span style="font-size: 0.8em;" class="text-uppercase text-muted">{{
+          'AbpUiMultiTenancy::Tenant' | abpLocalization
+        }}</span
+        ><br />
+        <h6 class="m-0 d-inline-block">
+          <span>
+            {{ tenantName || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}
+          </span>
+        </h6>
+      </div>
+      <div class="col-auto">
+        <a
+          id="AbpTenantSwitchLink"
+          href="javascript:void(0);"
+          class="btn btn-sm mt-3 btn-outline-primary"
+          (click)="onSwitch()"
+          >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
+        >
+      </div>
+    </div>
+  </div>
 </div>
 
 <abp-modal [(visible)]="isModalVisible" size="md">