File
Implements
Metadata
| selector |
cd-login |
| styleUrls |
./login.component.scss |
| templateUrl |
./login.component.html |
|
isLoginActive
|
Default value : false
|
|
|
|
model
|
Default value : new Credentials()
|
|
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BsModalService } from 'ngx-bootstrap/modal';
import { AuthService } from '../../../shared/api/auth.service';
import { Credentials } from '../../../shared/models/credentials';
import { AuthStorageService } from '../../../shared/services/auth-storage.service';
@Component({
selector: 'cd-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
model = new Credentials();
isLoginActive = false;
constructor(
private authService: AuthService,
private authStorageService: AuthStorageService,
private bsModalService: BsModalService,
private router: Router
) {}
ngOnInit() {
if (this.authStorageService.isLoggedIn()) {
this.router.navigate(['']);
} else {
// Make sure all open modal dialogs are closed. This might be
// necessary when the logged in user is redirected to the login
// page after a 401.
const modalsCount = this.bsModalService.getModalsCount();
for (let i = 1; i <= modalsCount; i++) {
this.bsModalService.hide(i);
}
let token = null;
if (window.location.hash.indexOf('access_token=') !== -1) {
token = window.location.hash.split('access_token=')[1];
const uri = window.location.toString();
window.history.replaceState({}, document.title, uri.split('?')[0]);
}
this.authService.check(token).subscribe((login: any) => {
if (login.login_url) {
if (login.login_url === '#/login') {
this.isLoginActive = true;
} else {
window.location.replace(login.login_url);
}
} else {
this.authStorageService.set(login.username, token, login.permissions);
this.router.navigate(['']);
}
});
}
}
login() {
this.authService.login(this.model).then(() => {
this.router.navigate(['']);
});
}
}
<div class="login"
*ngIf="isLoginActive">
<div class="row full-height vertical-align">
<div class="col-sm-6 hidden-xs">
<img src="assets/Ceph_Logo_Stacked_RGB_White_120411_fa_256x256.png"
alt="Ceph"
class="pull-right">
</div>
<div class="col-xs-10 col-sm-4 col-lg-3 col-xs-offset-1 col-sm-offset-0 col-md-offset-0 col-lg-offset-0">
<h1 i18n="The welcome message on the login page">Welcome to Ceph!</h1>
<form name="loginForm"
(ngSubmit)="login()"
#loginForm="ngForm"
novalidate>
<!-- I18N -->
<div class="form-group has-feedback">
<cd-language-selector [isDropdown]="false"></cd-language-selector>
</div>
<!-- Username -->
<div class="form-group has-feedback"
[ngClass]="{'has-error': (loginForm.submitted || username.dirty) && username.invalid}">
<input name="username"
[(ngModel)]="model.username"
#username="ngModel"
type="text"
placeholder="Enter your username..."
class="form-control"
required
autofocus>
<div class="help-block"
*ngIf="(loginForm.submitted || username.dirty) && username.invalid"
i18n>Username is required</div>
</div>
<!-- Password -->
<div class="form-group has-feedback"
[ngClass]="{'has-error': (loginForm.submitted || password.dirty) && password.invalid}">
<div class="input-group">
<input id="password"
name="password"
[(ngModel)]="model.password"
#password="ngModel"
type="password"
placeholder="Enter your password..."
class="form-control"
required>
<span class="input-group-btn">
<button type="button"
class="btn btn-default btn-password"
cdPasswordButton="password">
</button>
</span>
</div>
<div class="help-block"
*ngIf="(loginForm.submitted || password.dirty) && password.invalid"
i18n>Password is required</div>
</div>
<input type="submit"
class="btn btn-primary btn-block"
[disabled]="loginForm.invalid"
value="Login"
i18n-value>
</form>
</div>
</div>
</div>
@import '../../../../defaults';
::ng-deep .login {
height: 100%;
.row {
color: $color-login-row-text;
background-color: $color-login-row-bg;
}
h1 {
margin-top: 0;
margin-bottom: 30px;
}
.btn-password,
.form-control {
color: $color-password-toggle-text;
background-color: $color-password-toggle-bg;
}
.btn-password:focus {
outline-color: $color-password-toggle-focus;
}
.checkbox-primary input[type='checkbox']:checked + label::before,
.checkbox-primary input[type='radio']:checked + label::before {
background-color: $color-login-checkbox-bg;
border-color: $color-login-checkbox-border;
}
}
Legend
Html element with directive