tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat(account): make auth wrapper component replaceable 

#2404
pull/2522/head
mehmet-erim 7 years ago
parent
8f78d2371b
commit
e9f8d90a1f
4 changed files with 139 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      npm/ng-packs/packages/account/src/lib/components/login/login.component.html
  2. 109
      npm/ng-packs/packages/account/src/lib/components/register/register.component.html
  3. 11
      npm/ng-packs/packages/account/src/lib/models/account.ts
  4. 1
      npm/ng-packs/packages/account/src/lib/models/index.ts

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

@ -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>

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

@ -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>

11
npm/ng-packs/packages/account/src/lib/models/account.ts
View File

@ -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 {}

1
npm/ng-packs/packages/account/src/lib/models/index.ts
View File

@ -1,3 +1,4 @@
export * from './account';
export * from './options';
export * from './user';
export * from './tenant';

Write Preview
Loading…
Cancel
Save