Skip to content

Commit 860cebf

Browse files
ismcagdasismcagdas
committed
#14: implemented login page
1 parent e6ea4e3 commit 860cebf

23 files changed

+208
-147
lines changed

‎angular/angular-cli.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@
2626
"../node_modules/toastr/build/toastr.css",
2727
"../node_modules/sweetalert/dist/sweetalert.css",
2828

29-
"../src/shared/core.less"
29+
"../src/shared/core.less",
30+
31+
"../node_modules/bootswatch/cosmo/bootstrap.min.css"
3032
],
3133
"scripts": [
3234
"../node_modules/jquery/dist/jquery.min.js",

‎angular/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"abp-web-resources": "^1.3.0",
3535
"block-ui": "^2.70.1",
3636
"bootstrap": "^3.3.7",
37+
"bootswatch": "^3.3.7",
3738
"core-js": "^2.4.1",
3839
"famfamfam-flags": "^1.0.0",
3940
"font-awesome": "^4.6.3",

‎angular/src/AppPreBootstrap.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ import { UtilsService } from '@abp/utils/utils.service';
1010
export class AppPreBootstrap {
1111

1212
static run(callback: () => void): void {
13-
console.log("here...");
1413
AppPreBootstrap.getApplicationConfig(() => {
15-
console.log("get config...");
1614
AppPreBootstrap.getUserConfiguration(callback);
1715
});
1816
}
@@ -37,7 +35,7 @@ export class AppPreBootstrap {
3735

3836
AppConsts.remoteServiceBaseUrlFormat = result.remoteServiceBaseUrl;
3937
AppConsts.remoteServiceBaseUrl = result.remoteServiceBaseUrl.replace(AppConsts.tenancyNamePlaceHolderInUrl, tenancyName);
40-
console.log("x:" + AppConsts.remoteServiceBaseUrl);
38+
4139
callback();
4240
});
4341
}

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,9 @@
1-
<div class="logo">
2-
<a href="~/">
3-
<img src="/assets/common/images/app-logo-on-dark.png" alt="" width="149" height="35" />
4-
</a>
5-
</div>
1+
<topbar></topbar>
62

7-
<div *ngIf="showTenantChange()" class="content tenant-change-box">
8-
<tenant-change></tenant-change>
9-
</div>
103

114
<div class="content account-forms">
5+
<div *ngIf="showTenantChange()" class="content tenant-change-box">
6+
<tenant-change></tenant-change>
7+
</div>
128
<router-outlet></router-outlet>
13-
</div>
14-
15-
16-
<div class="copyright">
17-
{{currentYear}} © AbpProjectName
189
</div>

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,18 @@
1-
body {
1+
.content.account-forms {
2+
margin-top: 10px;
3+
}
4+
5+
.content.tenant-change-box {
6+
padding: 16px 16px 0px 16px;
7+
text-align: center;
8+
margin: 120px auto 0px auto;
9+
max-width: 400px;
10+
11+
a {
12+
cursor: pointer;
13+
}
14+
}
15+
16+
div#LoginArea {
17+
margin-top: 0px !important;
218
}

‎angular/src/account/account.module.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@ import { AccountRoutingModule } from './account-routing.module';
1111
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
1212

1313
import { AppConsts } from '@shared/AppConsts';
14-
import { CommonModule } from '@shared/common/common.module';
14+
import { SharedModule } from '@shared/common/shared.module';
1515

1616
import { AccountComponent } from './account.component';
1717
import { TenantChangeComponent } from './tenant/tenant-change.component';
1818
import { TenantChangeModalComponent } from './tenant/tenant-change-modal.component';
1919
import { LoginComponent } from './login/login.component';
2020
import { RegisterComponent } from './register/register.component';
2121
import { LoginService } from './login/login.service';
22+
import { TopBarComponent } from '@shared/layout/topbar.component';
2223

2324
@NgModule({
2425
imports: [
@@ -27,7 +28,7 @@ import { LoginService } from './login/login.service';
2728
HttpModule,
2829
JsonpModule,
2930
AbpModule,
30-
CommonModule,
31+
SharedModule,
3132
ServiceProxyModule,
3233
AccountRoutingModule,
3334
ModalModule.forRoot()
@@ -37,7 +38,8 @@ import { LoginService } from './login/login.service';
3738
TenantChangeComponent,
3839
TenantChangeModalComponent,
3940
LoginComponent,
40-
RegisterComponent
41+
RegisterComponent,
42+
TopBarComponent
4143
],
4244
providers: [
4345
LoginService

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

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
<div [@routerTransition]>
2-
<h3 class="form-title">{{l("LogIn")}}</h3>
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>
314

4-
<form #loginForm="ngForm" class="login-form" method="post" novalidate (ngSubmit)="login()">
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>
527

6-
<div class="form-group">
7-
<label class="control-label visible-ie8 visible-ie9">{{l("UserNameOrEmail")}}</label>
8-
<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 />
9-
</div>
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>
1036

11-
<div class="form-group">
12-
<label class="control-label visible-ie8 visible-ie9">{{l('Password')}}</label>
13-
<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" />
14-
</div>
37+
</fieldset>
38+
</form>
1539

16-
<div class="form-group">
17-
<div class="mt-checkbox-list">
18-
<label class="mt-checkbox mt-checkbox-outline">
19-
<input class="form-control" [(ngModel)]="loginService.rememberMe" type="checkbox" name="rememberMe" value="true" />{{l("RememberMe")}}
20-
<span></span>
21-
</label>
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="social-login-icon social-icon-color {{provider.icon}}"
45+
(click)="externalLogin(provider)"
46+
title="{{provider.name}}"></a>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
2251
</div>
2352
</div>
24-
25-
<div class="form-actions">
26-
<button type="submit" class="btn btn-success uppercase" [disabled]="!loginForm.form.valid">{{l("LogIn")}}</button>
27-
<a routerLink="/forgot-password" id="forget-password" class="forget-password">{{l("ForgotPassword")}}</a>
28-
</div>
29-
</form>
30-
31-
<div class="login-options" *ngIf="multiTenancySideIsTeanant && loginService.externalLoginProviders.length > 0">
32-
<h4>{{l("LoginWith")}}</h4>
33-
<ul class="social-icons">
34-
<li *ngFor="let provider of loginService.externalLoginProviders">
35-
<a class="social-login-icon social-icon-color {{provider.icon}}"
36-
(click)="externalLogin(provider)"
37-
title="{{provider.name}}"></a>
38-
</li>
39-
</ul>
40-
</div>
41-
42-
<div class="create-account">
43-
<p>
44-
<span *ngIf="isSelfRegistrationAllowed">
45-
<a routerLink="/register" id="register-btn" class="uppercase">{{l("CreateAnAccount")}}</a>
46-
<span class="pipe-divider"> | </span>
47-
</span>
48-
<a routerLink="/email-activation" id="email-activation-btn" class="uppercase">{{l("EmailActivation")}}</a>
49-
</p>
5053
</div>
51-
</div>
54+
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#LoginArea {
2+
max-width: 400px;
3+
margin: 120px auto 10px auto;
4+
}
5+
.social-icons {
6+
padding-left: 0px;
7+
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import { AbpSessionService } from '@abp/session/abp-session.service';
1010

1111
@Component({
1212
templateUrl: './login.component.html',
13-
animations: [accountModuleAnimation()]
13+
styleUrls: [
14+
'./login.component.less'
15+
],
16+
animations: [accountModuleAnimation()]
1417
})
1518
export class LoginComponent extends AppComponentBase {
1619

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { AppSessionService } from '@shared/common/session/app-session.service';
77
@Component({
88
selector: 'tenant-change',
99
template:
10-
`<span *ngIf="isMultiTenancyEnabled">
10+
`<div *ngIf="isMultiTenancyEnabled" class='well'>
1111
{{l("CurrentTenant")}}: <span *ngIf="tenancyName" title="{{name}}"><strong>{{tenancyName}}</strong></span> <span *ngIf="!tenancyName">{{l("NotSelected")}}</span> (<a (click)="showChangeModal()">{{l("Change")}}</a>)
1212
<tenantChangeModal #tenantChangeModal></tenantChangeModal>
13-
</span>`
13+
</div>`
1414
})
1515
export class TenantChangeComponent extends AppComponentBase implements OnInit {
1616

0 commit comments

Comments
 (0)