From e9f8d90a1f3fa4b9e9fa27944e86be6be1756144 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Mon, 30 Dec 2019 15:43:50 +0300
Subject: [PATCH] feat(account): make auth wrapper component replaceable

#2404
---
 .../lib/components/login/login.component.html | 132 ++++++++++--------
 .../register/register.component.html          | 109 ++++++++-------
 .../account/src/lib/models/account.ts         |  11 ++
 .../packages/account/src/lib/models/index.ts  |   1 +
 4 files changed, 139 insertions(+), 114 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
index db4e7e9f45..c448e2a228 100644
--- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html
@@ -1,64 +1,74 @@
-<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()" validateOnSubmit 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"
-          autocomplete="username"
-          autofocus
-        />
-      </div>
-      <div class="form-group">
-        <label for="login-input-password">{{ 'AbpAccount::Password' | abpLocalization }}</label>
+<abp-auth-wrapper
+  *abpReplaceableTemplate="{
+    componentKey: 'Account.AuthWrapperComponent',
+    inputs: {
+      mainContentRef: { value: mainContentRef },
+      cancelContentRef: { value: cancelContentRef }
+    }
+  }"
+  [mainContentRef]="mainContentRef"
+  [cancelContentRef]="cancelContentRef"
+>
+</abp-auth-wrapper>
+<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()" validateOnSubmit 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"
+        autocomplete="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"
+        autocomplete="current-password"
+      />
+    </div>
+    <div class="form-check" validationTarget validationStyle>
+      <label class="form-check-label" for="login-input-remember-me">
         <input
-          class="form-control"
-          type="password"
-          id="login-input-password"
-          formControlName="password"
-          autocomplete="current-password"
+          class="form-check-input"
+          type="checkbox"
+          id="login-input-remember-me"
+          formControlName="remember"
         />
-      </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>
+        {{ 'AbpAccount::RememberMe' | abpLocalization }}
+      </label>
     </div>
-  </ng-template>
-</abp-auth-wrapper>
+    <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>
+</ng-template>
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
index eebd20cdde..4a0f75d010 100644
--- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html
@@ -1,54 +1,57 @@
-<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()" validateOnSubmit 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"
-          autocomplete="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"
-          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>
-  </ng-template>
+<abp-auth-wrapper
+  *abpReplaceableTemplate="{
+    componentKey: 'Account.AuthWrapperComponent',
+    inputs: {
+      mainContentRef: { value: mainContentRef }
+    }
+  }"
+  [mainContentRef]="mainContentRef"
+>
 </abp-auth-wrapper>
+<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()" validateOnSubmit 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"
+        autocomplete="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"
+        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>
+</ng-template>
diff --git a/npm/ng-packs/packages/account/src/lib/models/account.ts b/npm/ng-packs/packages/account/src/lib/models/account.ts
index b0bbae02ab..faa38252c9 100644
--- a/npm/ng-packs/packages/account/src/lib/models/account.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/account.ts
@@ -1,3 +1,14 @@
+import { TemplateRef } from '@angular/core';
+
+export namespace Account {
+  export interface AuthWrapperComponentInputs {
+    readonly mainContentRef: TemplateRef<any>;
+    readonly cancelContentRef?: TemplateRef<any>;
+  }
+
+  // tslint:disable-next-line: no-empty-interface
+  export interface AuthWrapperComponentOutputs {}
+
   // tslint:disable-next-line: no-empty-interface
   export interface TenantBoxComponentInputs {}
 
diff --git a/npm/ng-packs/packages/account/src/lib/models/index.ts b/npm/ng-packs/packages/account/src/lib/models/index.ts
index 4dcd63408e..25b28cb9a0 100644
--- a/npm/ng-packs/packages/account/src/lib/models/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/index.ts
@@ -1,3 +1,4 @@
+export * from './account';
 export * from './options';
 export * from './user';
 export * from './tenant';