Skip to content

Commit 7bccb28

Browse files
iyilm4ziyilm4z
committed
login component done
1 parent 5c21983 commit 7bccb28

File tree

4 files changed

+161
-169
lines changed

4 files changed

+161
-169
lines changed

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

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,83 @@
1-
<div class="card" [@routerTransition]>
2-
<div class="body">
3-
<form
4-
novalidate
5-
autocomplete="off"
6-
#loginForm="ngForm"
7-
(ngSubmit)="login()"
8-
>
9-
<h4 class="text-center">{{ "LogIn" | localize }}</h4>
10-
<div class="row clearfix">
11-
<div class="col-xs-12">
12-
<div class="input-group">
13-
<span class="input-group-addon">
14-
<i class="material-icons">person</i>
15-
</span>
16-
<div>
17-
<mat-form-field>
18-
<input
19-
matInput
20-
name="userNameOrEmailAddress"
21-
[(ngModel)]="
22-
loginService.authenticateModel.userNameOrEmailAddress
23-
"
24-
[placeholder]="'UserNameOrEmail' | localize"
25-
autocomplete="off"
26-
required
27-
maxlength="255"
28-
/>
29-
</mat-form-field>
30-
</div>
1+
<div [@routerTransition]>
2+
<h4 class="text-center mb-3">{{ "LogIn" | localize }}</h4>
3+
<form novalidate autocomplete="off" #loginForm="ngForm" (ngSubmit)="login()">
4+
<div class="form-group">
5+
<div class="input-group">
6+
<input
7+
type="text"
8+
class="form-control"
9+
name="userNameOrEmailAddress"
10+
[(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress"
11+
[placeholder]="'UserNameOrEmail' | localize"
12+
required
13+
maxlength="256"
14+
#userNameOrEmailAddressModel="ngModel"
15+
#userNameOrEmailAddressEl
16+
/>
17+
<div class="input-group-append">
18+
<div class="input-group-text">
19+
<span class="fas fa-user"></span>
3120
</div>
32-
<div class="input-group">
33-
<span class="input-group-addon">
34-
<i class="material-icons">lock</i>
35-
</span>
36-
<div>
37-
<mat-form-field>
38-
<input
39-
matInput
40-
type="password"
41-
name="password"
42-
[(ngModel)]="loginService.authenticateModel.password"
43-
[placeholder]="'Password' | localize"
44-
required
45-
maxlength="32"
46-
/>
47-
</mat-form-field>
48-
</div>
21+
</div>
22+
</div>
23+
<abp-validation-summary
24+
[control]="userNameOrEmailAddressModel"
25+
[controlEl]="userNameOrEmailAddressEl"
26+
></abp-validation-summary>
27+
</div>
28+
<div class="form-group">
29+
<div class="input-group">
30+
<input
31+
type="password"
32+
class="form-control"
33+
name="password"
34+
[(ngModel)]="loginService.authenticateModel.password"
35+
[placeholder]="'Password' | localize"
36+
required
37+
maxlength="32"
38+
#passwordModel="ngModel"
39+
#passwordEl
40+
/>
41+
<div class="input-group-append">
42+
<div class="input-group-text">
43+
<span class="fas fa-lock"></span>
4944
</div>
5045
</div>
5146
</div>
52-
<div class="row">
53-
<div class="col-xs-8 p-t-5">
54-
<mat-checkbox name="rememberMe" [(ngModel)]="loginService.rememberMe">
47+
<abp-validation-summary
48+
[control]="passwordModel"
49+
[controlEl]="passwordEl"
50+
></abp-validation-summary>
51+
</div>
52+
<div class="form-group row">
53+
<div class="col-md-8">
54+
<div class="custom-control custom-checkbox">
55+
<input
56+
type="checkbox"
57+
class="custom-control-input"
58+
id="rememberMe"
59+
name="rememberMe"
60+
[(ngModel)]="loginService.rememberMe"
61+
/>
62+
<label for="rememberMe" class="custom-control-label">
5563
{{ "RememberMe" | localize }}
56-
</mat-checkbox>
57-
</div>
58-
<div class="col-xs-4">
59-
<button
60-
mat-flat-button
61-
type="submit"
62-
flex="15"
63-
color="accent"
64-
[disabled]="!loginForm.form.valid || submitting"
65-
>
66-
{{ "LogIn" | localize }}
67-
</button>
64+
</label>
6865
</div>
6966
</div>
70-
<div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">
71-
<div class="col-xs-12">
72-
<a [routerLink]="['../register']">{{ "Register" | localize }}</a>
73-
</div>
67+
<div class="col-md-4">
68+
<button
69+
type="submit"
70+
class="btn btn-primary btn-block"
71+
[disabled]="!loginForm.form.valid || submitting"
72+
>
73+
{{ "LogIn" | localize }}
74+
</button>
7475
</div>
75-
</form>
76-
</div>
76+
</div>
77+
</form>
78+
<p *ngIf="isSelfRegistrationAllowed" class="mb-1">
79+
<a [routerLink]="['../register']">
80+
<i class="fa fa-plus-circle"></i> {{ "Register" | localize }}
81+
</a>
82+
</p>
7783
</div>

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { Component, Injector } from '@angular/core';
22
import { AbpSessionService } from '@abp/session/abp-session.service';
33
import { AppComponentBase } from '@shared/app-component-base';
4-
import { accountModuleAnimation } from '@shared/animations/routerTransition';
54
import { LoginService } from './login.service';
5+
import { accountModuleAnimation } from '@shared/animations/routerTransition';
66

77
@Component({
88
templateUrl: './login.component.html',
9-
styleUrls: ['./login.component.less'],
109
animations: [accountModuleAnimation()]
1110
})
1211
export class LoginComponent extends AppComponentBase {

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

Lines changed: 86 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,100 @@
1+
import { Injectable } from '@angular/core';
2+
import { Router } from '@angular/router';
13
import { TokenService } from '@abp/auth/token.service';
24
import { LogService } from '@abp/log/log.service';
3-
import { MessageService } from '@abp/message/message.service';
45
import { UtilsService } from '@abp/utils/utils.service';
5-
import { Injectable } from '@angular/core';
6-
import { Router } from '@angular/router';
76
import { AppConsts } from '@shared/AppConsts';
87
import { UrlHelper } from '@shared/helpers/UrlHelper';
9-
import { AuthenticateModel, AuthenticateResultModel, TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
8+
import {
9+
AuthenticateModel,
10+
AuthenticateResultModel,
11+
TokenAuthServiceProxy,
12+
} from '@shared/service-proxies/service-proxies';
1013
import { finalize } from 'rxjs/operators';
1114

12-
1315
@Injectable()
1416
export class LoginService {
15-
16-
static readonly twoFactorRememberClientTokenName = 'TwoFactorRememberClientToken';
17-
18-
authenticateModel: AuthenticateModel;
19-
authenticateResult: AuthenticateResultModel;
20-
21-
rememberMe: boolean;
22-
23-
constructor(
24-
private _tokenAuthService: TokenAuthServiceProxy,
25-
private _router: Router,
26-
private _utilsService: UtilsService,
27-
private _messageService: MessageService,
28-
private _tokenService: TokenService,
29-
private _logService: LogService
30-
) {
31-
this.clear();
17+
authenticateModel: AuthenticateModel;
18+
authenticateResult: AuthenticateResultModel;
19+
rememberMe: boolean;
20+
21+
constructor(
22+
private _tokenAuthService: TokenAuthServiceProxy,
23+
private _router: Router,
24+
private _utilsService: UtilsService,
25+
private _tokenService: TokenService,
26+
private _logService: LogService
27+
) {
28+
this.clear();
29+
}
30+
31+
authenticate(finallyCallback?: () => void): void {
32+
finallyCallback = finallyCallback || (() => {});
33+
34+
this._tokenAuthService
35+
.authenticate(this.authenticateModel)
36+
.pipe(
37+
finalize(() => {
38+
finallyCallback();
39+
})
40+
)
41+
.subscribe((result: AuthenticateResultModel) => {
42+
this.processAuthenticateResult(result);
43+
});
44+
}
45+
46+
private processAuthenticateResult(
47+
authenticateResult: AuthenticateResultModel
48+
) {
49+
this.authenticateResult = authenticateResult;
50+
51+
if (authenticateResult.accessToken) {
52+
// Successfully logged in
53+
this.login(
54+
authenticateResult.accessToken,
55+
authenticateResult.encryptedAccessToken,
56+
authenticateResult.expireInSeconds,
57+
this.rememberMe
58+
);
59+
} else {
60+
// Unexpected result!
61+
62+
this._logService.warn('Unexpected authenticateResult!');
63+
this._router.navigate(['account/login']);
3264
}
33-
34-
authenticate(finallyCallback?: () => void): void {
35-
finallyCallback = finallyCallback || (() => { });
36-
37-
this._tokenAuthService
38-
.authenticate(this.authenticateModel)
39-
.pipe(finalize(() => { finallyCallback(); }))
40-
.subscribe((result: AuthenticateResultModel) => {
41-
this.processAuthenticateResult(result);
42-
});
65+
}
66+
67+
private login(
68+
accessToken: string,
69+
encryptedAccessToken: string,
70+
expireInSeconds: number,
71+
rememberMe?: boolean
72+
): void {
73+
const tokenExpireDate = rememberMe
74+
? new Date(new Date().getTime() + 1000 * expireInSeconds)
75+
: undefined;
76+
77+
this._tokenService.setToken(accessToken, tokenExpireDate);
78+
79+
this._utilsService.setCookieValue(
80+
AppConsts.authorization.encryptedAuthTokenName,
81+
encryptedAccessToken,
82+
tokenExpireDate,
83+
abp.appPath
84+
);
85+
86+
let initialUrl = UrlHelper.initialUrl;
87+
if (initialUrl.indexOf('/login') > 0) {
88+
initialUrl = AppConsts.appBaseUrl;
4389
}
4490

45-
private processAuthenticateResult(authenticateResult: AuthenticateResultModel) {
46-
this.authenticateResult = authenticateResult;
47-
48-
if (authenticateResult.accessToken) {
49-
// Successfully logged in
50-
this.login(
51-
authenticateResult.accessToken,
52-
authenticateResult.encryptedAccessToken,
53-
authenticateResult.expireInSeconds,
54-
this.rememberMe);
91+
location.href = initialUrl;
92+
}
5593

56-
} else {
57-
// Unexpected result!
58-
59-
this._logService.warn('Unexpected authenticateResult!');
60-
this._router.navigate(['account/login']);
61-
}
62-
}
63-
64-
private login(accessToken: string, encryptedAccessToken: string, expireInSeconds: number, rememberMe?: boolean): void {
65-
66-
const tokenExpireDate = rememberMe ? (new Date(new Date().getTime() + 1000 * expireInSeconds)) : undefined;
67-
68-
this._tokenService.setToken(
69-
accessToken,
70-
tokenExpireDate
71-
);
72-
73-
this._utilsService.setCookieValue(
74-
AppConsts.authorization.encryptedAuthTokenName,
75-
encryptedAccessToken,
76-
tokenExpireDate,
77-
abp.appPath
78-
);
79-
80-
let initialUrl = UrlHelper.initialUrl;
81-
if (initialUrl.indexOf('/login') > 0) {
82-
initialUrl = AppConsts.appBaseUrl;
83-
}
84-
85-
location.href = initialUrl;
86-
}
87-
88-
private clear(): void {
89-
this.authenticateModel = new AuthenticateModel();
90-
this.authenticateModel.rememberClient = false;
91-
this.authenticateResult = null;
92-
this.rememberMe = false;
93-
}
94+
private clear(): void {
95+
this.authenticateModel = new AuthenticateModel();
96+
this.authenticateModel.rememberClient = false;
97+
this.authenticateResult = null;
98+
this.rememberMe = false;
99+
}
94100
}

0 commit comments

Comments
 (0)