Skip to content

Commit 3b29d41

Browse files
hikalkanhikalkan
committed
Implemented account layout and views.
1 parent 686bf71 commit 3b29d41

11 files changed

+137
-99
lines changed

‎angular/src/account/account.component.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
<topbar></topbar>
1+
<div class="login-box">
2+
<div class="logo">
3+
<a href="javascript:void(0);">AbpProjectName</a>
4+
</div>
25

3-
<div class="content account-forms">
4-
<div *ngIf="showTenantChange()" class="content tenant-change-box">
6+
<div *ngIf="showTenantChange()" class="tenant-change-box">
57
<tenant-change></tenant-change>
68
</div>
9+
710
<router-outlet></router-outlet>
11+
12+
<!--<vc:account-languages></vc:account-languages>-->
13+
14+
<!--<div class="row">
15+
<div class="col-xs-12 text-center" style="color: #e9e9e9">
16+
<small>&copy; @DateTime.Now.Year AbpProjectName. <b>Version </b> @AppVersionHelper.Version [@AppVersionHelper.ReleaseDate.ToString("yyyyMMdd")]</small>
17+
</div>
18+
</div>-->
19+
820
</div>

‎angular/src/account/account.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@ export class AccountComponent implements OnInit {
2828

2929
ngOnInit(): void {
3030
this._loginService.init();
31-
$('body').attr('class', 'page-md login');
31+
$('body').attr('class', 'login-page');
3232
}
3333
}

‎angular/src/account/login/login.component.html‎

Lines changed: 47 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,52 @@
1-
<div [@routerTransition]>
2-
<div class="container">
3-
<div id="LoginArea" class="row">
4-
<div class="col-lg-12">
5-
<div class="well bs-component">
6-
<form #loginForm="ngForm" id="LoginForm" class="form-horizontal" method="post" novalidate (ngSubmit)="login()">
7-
<fieldset>
8-
<legend>{{l("LogIn")}}</legend>
9-
<div class="form-group">
10-
<div class="col-lg-12">
11-
<input [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control form-control-solid placeholder-no-fix input-ltr" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required />
12-
</div>
13-
</div>
1+
<div class="card" [@routerTransition]>
2+
<div #cardBody class="body">
3+
<form #loginForm="ngForm" id="LoginForm" method="post" novalidate (ngSubmit)="login()">
4+
<h4 class="text-center">{{l("LogIn")}}</h4>
145

15-
<div class="form-group">
16-
<div class="col-lg-12">
17-
<input [(ngModel)]="loginService.authenticateModel.password" class="form-control form-control-solid placeholder-no-fix input-ltr" type="password" autocomplete="off" placeholder="{{l('Password')}}" name="password" required maxlength="32" />
18-
<div class="checkbox">
19-
<label>
20-
<input [(ngModel)]="loginService.rememberMe" type="checkbox" name="rememberMe" value="true" />
21-
<span class="ripple"></span>
22-
<span class="check"></span> {{l("RememberMe")}}
23-
</label>
24-
</div>
25-
</div>
26-
</div>
27-
28-
<div class="form-group">
29-
<div class="col-lg-12">
30-
<button id="LoginButton" type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid"><i class="fa fa-sign-in"></i> {{l("LogIn")}}</button>
31-
<span *ngIf="isSelfRegistrationAllowed">
32-
<a class="btn btn-success" [routerLink]="['../register']"><i class="fa fa-sign-in"></i> {{l("Register")}}</a>
33-
</span>
34-
</div>
35-
</div>
36-
37-
</fieldset>
38-
</form>
39-
40-
<div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
41-
<h4>{{l("LoginWith")}}</h4>
42-
<ul class="social-icons">
43-
<li *ngFor="let provider of loginService.externalLoginProviders">
44-
<a class="btn btn-default btn-sm fa fa-{{provider.icon == 'googleplus' ? 'google-plus' : provider.icon}}"
45-
(click)="externalLogin(provider)"
46-
title="{{provider.name}}"></a>
47-
</li>
48-
</ul>
49-
</div>
6+
<div class="input-group">
7+
<span class="input-group-addon">
8+
<i class="material-icons">person</i>
9+
</span>
10+
<div class="form-line">
11+
<input [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required maxlength="255" />
12+
</div>
13+
</div>
14+
15+
<div class="input-group">
16+
<span class="input-group-addon">
17+
<i class="material-icons">lock</i>
18+
</span>
19+
<div class="form-line">
20+
<input type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
21+
</div>
22+
</div>
23+
<div class="row">
24+
<div class="col-xs-8 p-t-5">
25+
<input type="checkbox" [(ngModel)]="loginService.rememberMe" name="rememberMe" id="rememberme" class="filled-in chk-col-pink" value="true">
26+
<label for="rememberme">{{l("RememberMe")}}</label>
27+
</div>
28+
<div class="col-xs-4">
29+
<button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit">{{l("LogIn")}}</button>
30+
</div>
31+
</div>
32+
33+
<div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">
34+
<div class="col-xs-12">
35+
<a [routerLink]="['../register']">{{l("Register")}}</a>
5036
</div>
5137
</div>
38+
</form>
39+
40+
<!-- TODO: Test social logins (and also for MVC!) -->
41+
<div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
42+
<h4>{{l("LoginWith")}}</h4>
43+
<ul class="social-icons">
44+
<li *ngFor="let provider of loginService.externalLoginProviders">
45+
<a class="btn btn-default btn-sm fa fa-{{provider.icon == 'googleplus' ? 'google-plus' : provider.icon}}"
46+
(click)="externalLogin(provider)"
47+
title="{{provider.name}}"></a>
48+
</li>
49+
</ul>
5250
</div>
5351
</div>
54-
</div>
52+
</div>

‎angular/src/account/login/login.component.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import { Component, Injector, OnInit } from '@angular/core';
1+
import { Component, Injector, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
22
import { Router } from '@angular/router';
3-
import { Http, Headers } from '@angular/http';
4-
import { TokenAuthServiceProxy, AuthenticateModel, AuthenticateResultModel } from '@shared/service-proxies/service-proxies';
53
import { AppComponentBase } from '@shared/app-component-base';
6-
import { AppConsts } from '@shared/AppConsts';
74
import { LoginService, ExternalLoginProvider } from './login.service';
85
import { accountModuleAnimation } from '@shared/animations/routerTransition';
96
import { AbpSessionService } from '@abp/session/abp-session.service';
@@ -17,6 +14,8 @@ import { AbpSessionService } from '@abp/session/abp-session.service';
1714
})
1815
export class LoginComponent extends AppComponentBase {
1916

17+
@ViewChild('cardBody') cardBody: ElementRef;
18+
2019
submitting: boolean = false;
2120

2221
constructor(
@@ -28,6 +27,11 @@ export class LoginComponent extends AppComponentBase {
2827
super(injector);
2928
}
3029

30+
ngAfterViewInit(): void {
31+
($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));
32+
$(this.cardBody.nativeElement).find('input:first').focus();
33+
}
34+
3135
get multiTenancySideIsTeanant(): boolean {
3236
return this._sessionService.tenantId > 0;
3337
}

‎angular/src/account/register/register.component.html‎

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,48 @@
1-
<div [@routerTransition]>
2-
<div class="container">
3-
<div id="LoginArea" class="row">
4-
<div class="col-lg-12">
5-
<div class="well bs-component">
6-
<h3 class="form-title">{{l("Register")}}</h3>
7-
<hr />
8-
<form #registerForm="ngForm" class="login-form" method="post" novalidate (ngSubmit)="save()">
9-
<div class="form-group">
10-
<input class="form-control placeholder-no-fix" autoFocus type="text" placeholder="{{l('Name')}}" [(ngModel)]="model.name" name="Name" required maxlength="32" />
11-
</div>
1+
<div class="card" [@routerTransition]>
2+
<div #cardBody class="body">
3+
<form #registerForm="ngForm" method="post" novalidate (ngSubmit)="save()">
4+
<h4 class="text-center">{{l("Register")}}</h4>
125

13-
<div class="form-group">
14-
<input class="form-control placeholder-no-fix" type="text" placeholder="{{l('Surname')}}" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
6+
<div class="form-group form-float">
7+
<div class="form-line">
8+
<input class="form-control" autoFocus type="text" [(ngModel)]="model.name" name="Name" required maxlength="32" />
9+
<label class="form-label">{{l('Name')}}</label>
10+
</div>
11+
</div>
12+
13+
<div class="form-group form-float">
14+
<div class="form-line">
15+
<input class="form-control" type="text" [(ngModel)]="model.surname" name="Surname" required maxlength="32" />
16+
<label class="form-label">{{l('Surname')}}</label>
17+
</div>
1518
</div>
1619

17-
<div class="form-group">
18-
<input class="form-control placeholder-no-fix" type="email" placeholder="{{l('EmailAddress')}}" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="256" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
20+
<div class="form-group form-float">
21+
<div class="form-line">
22+
<input class="form-control" type="email" [(ngModel)]="model.emailAddress" name="EmailAddress" required maxlength="255" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{1,})+$" />
23+
<label class="form-label">{{l('EmailAddress')}}</label>
24+
</div>
1925
</div>
2026

21-
<div class="form-group">
22-
<input class="form-control placeholder-no-fix input-ltr" type="text" autocomplete="off" placeholder="{{l('UserName')}}" name="UserName" [(ngModel)]="model.userName" required maxlength="32" />
27+
<div class="form-group form-float">
28+
<div class="form-line">
29+
<input class="form-control" type="text" autocomplete="off" [(ngModel)]="model.userName" name="UserName" required maxlength="32" />
30+
<label class="form-label">{{l('UserName')}}</label>
31+
</div>
2332
</div>
24-
<div class="form-group">
25-
<input type="password" name="Password" class="form-control" [(ngModel)]="model.password" placeholder="{{l('Password')}}" required>
33+
34+
<div class="form-group form-float">
35+
<div class="form-line">
36+
<input class="form-control" type="password" [(ngModel)]="model.password" name="Password" required maxlength="32" />
37+
<label class="form-label">{{l('Password')}}</label>
38+
</div>
2639
</div>
2740

2841
<div class="form-actions">
29-
<button [disabled]="saving" [routerLink]="['../login']" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> {{l("Back")}}</button>
30-
<button type="submit" class="btn btn-success uppercase" [disabled]="!registerForm.form.valid"><i class="fa fa-check"></i> {{l("Submit")}}</button>
42+
<button [disabled]="saving" [routerLink]="['../login']" type="button" class="btn btn-default">{{l("Back")}}</button>
43+
<button type="submit" class="btn btn-success uppercase" [disabled]="!registerForm.form.valid">{{l("Submit")}}</button>
3144
</div>
3245

33-
</form>
34-
</div>
35-
</div>
46+
</form>
3647
</div>
37-
</div>
38-
</div>
48+
</div>

‎angular/src/account/register/register.component.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Injector, OnInit } from '@angular/core';
1+
import { Component, Injector, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
22
import { Router } from '@angular/router';
33
import { AccountServiceProxy, RegisterInput } from '@shared/service-proxies/service-proxies'
44
import { AppComponentBase } from '@shared/app-component-base';
@@ -9,7 +9,9 @@ import { accountModuleAnimation } from '@shared/animations/routerTransition';
99
templateUrl: './register.component.html',
1010
animations: [accountModuleAnimation()]
1111
})
12-
export class RegisterComponent extends AppComponentBase {
12+
export class RegisterComponent extends AppComponentBase implements AfterViewInit {
13+
14+
@ViewChild('cardBody') cardBody: ElementRef;
1315

1416
model: RegisterInput = new RegisterInput();
1517

@@ -24,6 +26,10 @@ export class RegisterComponent extends AppComponentBase {
2426
super(injector);
2527
}
2628

29+
ngAfterViewInit(): void {
30+
($ as any).AdminBSB.input.activate($(this.cardBody.nativeElement));
31+
$(this.cardBody.nativeElement).find('input:first').focus();
32+
}
2733

2834
back(): void {
2935
this._router.navigate(['/login']);

‎angular/src/account/tenant/tenant-change-modal.component.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div bsModal #tenantChangeModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="tenantChangeModal" aria-hidden="true" [config]="{backdrop: 'static'}">
22
<div class="modal-dialog">
33

4-
<div class="modal-content">
4+
<div #modalContent class="modal-content">
55

66
<form *ngIf="active" #changeTenantForm="ngForm" novalidate (ngSubmit)="save()">
77

@@ -15,16 +15,18 @@ <h4 class="modal-title">
1515
</div>
1616

1717
<div class="modal-body">
18-
<div class="form-group form-md-line-input form-md-floating-label no-hint">
19-
<label>{{l("TenancyName")}}</label>
20-
<input #tenancyNameInput type="text" name="TenancyName" class="form-control" [ngClass]="{'edited':tenancyName}" [(ngModel)]="tenancyName" maxlength="64">
21-
<span class="help-block">{{l("LeaveEmptyToSwitchToHost")}}</span>
18+
<div class="form-group form-float">
19+
<div class="form-line">
20+
<input #tenancyNameInput type="text" name="TenancyName" class="form-control" [ngClass]="{'edited':tenancyName}" [(ngModel)]="tenancyName" maxlength="64">
21+
<label class="form-label">{{l("TenancyName")}}</label>
22+
</div>
2223
</div>
24+
<span class="help-block">{{l("LeaveEmptyToSwitchToHost")}}</span>
2325
</div>
2426

2527
<div class="modal-footer">
26-
<button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
27-
<button type="submit" class="btn btn-primary blue" [disabled]="!changeTenantForm.form.valid"><i class="fa fa-save"></i> <span>{{l("Save")}}</span></button>
28+
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">{{l("Cancel")}}</button>
29+
<button type="submit" class="btn btn-primary waves-effect" [disabled]="!changeTenantForm.form.valid">{{l("Save")}}</button>
2830
</div>
2931

3032
</form>

‎angular/src/account/tenant/tenant-change-modal.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export class TenantChangeModalComponent extends AppComponentBase {
1313

1414
@ViewChild('tenantChangeModal') modal: ModalDirective;
1515
@ViewChild('tenancyNameInput') tenancyNameInput: ElementRef;
16+
@ViewChild('modalContent') modalContent: ElementRef;
1617

1718
tenancyName: string = '';
1819
active: boolean = false;
@@ -32,6 +33,7 @@ export class TenantChangeModalComponent extends AppComponentBase {
3233
}
3334

3435
onShown(): void {
36+
($ as any).AdminBSB.input.activate($(this.modalContent.nativeElement));
3537
$(this.tenancyNameInput.nativeElement).focus().select();
3638
}
3739

‎angular/src/account/tenant/tenant-change.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div *ngIf="isMultiTenancyEnabled" class="card tenant-change-component" style="margin-bottom: 3px;">
2+
<div class="body text-center">
3+
<span>
4+
{{l("CurrentTenant")}}: <span *ngIf="tenancyName" title="{{name}}"><strong>{{tenancyName}}</strong></span> <span *ngIf="!tenancyName">{{l("NotSelected")}}</span> (<a href="javascript:void();" (click)="showChangeModal()">{{l("Change")}}</a>)
5+
<tenantChangeModal #tenantChangeModal></tenantChangeModal>
6+
</span>
7+
</div>
8+
</div>

‎angular/src/account/tenant/tenant-change.component.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import { AppSessionService } from '@shared/session/app-session.service';
66

77
@Component({
88
selector: 'tenant-change',
9-
template:
10-
`<div *ngIf="isMultiTenancyEnabled" class='well'>
11-
{{l("CurrentTenant")}}: <span *ngIf="tenancyName" title="{{name}}"><strong>{{tenancyName}}</strong></span> <span *ngIf="!tenancyName">{{l("NotSelected")}}</span> (<a (click)="showChangeModal()">{{l("Change")}}</a>)
12-
<tenantChangeModal #tenantChangeModal></tenantChangeModal>
13-
</div>`
9+
templateUrl: './tenant-change.component.html'
1410
})
1511
export class TenantChangeComponent extends AppComponentBase implements OnInit {
1612

0 commit comments

Comments
 (0)