projects/apttus/elements/src/lib/forms/login/login.component.ts
| selector | apt-login-form |
| styleUrls | ./login.component.scss |
| templateUrl | ./login.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(userService: UserService, ngZone: NgZone, translateService: TranslateService)
|
||||||||||||
|
Parameters :
|
| type |
Type : "SOAP" | "OAuth"
|
Default value : 'SOAP'
|
| onLogin |
Type : EventEmitter<boolean>
|
|
Event emitter for when user logs in. |
| onRegister |
Type : EventEmitter<User>
|
|
Event emitter for when user registers. |
| doLogin |
doLogin()
|
|
Allows user to login to the site using user credentials like username and password for the registered user otherwise it shows the error message.
Returns :
void
|
| doLogout |
doLogout()
|
|
Allows user to logout form the site
Returns :
void
|
| doRegister |
doRegister()
|
|
Allows user to register to the site using user email.
Returns :
void
|
| doResetPassword |
doResetPassword()
|
|
Allows user to reset the password for the exisiting user.
Returns :
void
|
| samlLogin |
samlLogin()
|
|
Returns :
void
|
| authConfig$ |
Type : Observable<AuthConfig>
|
| loading |
Type : boolean
|
Default value : false
|
| loginMessage |
Type : string
|
| loginState |
Type : "LOGIN" | "REGISTER" | "RESET-PASSWORD" | "REGISTER-CONFIRM" | "RESET-CONFIRM"
|
Default value : 'LOGIN'
|
| me$ |
Type : Observable<User>
|
| password |
Type : string
|
| registerMessage |
Type : string
|
| resetMessage |
Type : string
|
| resetUsername |
Type : string
|
| user |
Type : User
|
Default value : new User()
|
| username |
Type : string
|
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabbable-panel p-3">
<div class="tabbable-line">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link"
[class.active]="loginState === 'LOGIN' || loginState === 'RESET-PASSWORD'"
href="#login" data-toggle="tab" (click)="loginState='LOGIN'">
LOGIN </a>
</li>
<li class="nav-item">
<a class="nav-link" [class.active]="loginState === 'REGISTER'" href="#register"
data-toggle="tab" (click)="loginState='REGISTER'">
REGISTER </a>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane"
[class.active]="loginState === 'LOGIN' || loginState === 'RESET-PASSWORD' || loginState === 'RESET-CONFIRM'" id="login">
<!-- LOGIN FORM -->
<form class="center_form" *ngIf="loginState === 'LOGIN'" (ngSubmit)="doLogin()">
<ng-container>
<div class="form-group">
<label for="email">{{'COMMON.USERNAME' | translate}}</label>
<input autofocus type="email" class="form-control" id="username"
name="username"
placeholder="{{'MINI_PROFILE.ENTER_USERNAME' | translate}}"
[(ngModel)]="username" required/>
</div>
<div class="form-group">
<label for="password">{{'MINI_PROFILE.PASSWORD' | translate}}</label>
<input type="password" class="form-control" id="password" name="password"
placeholder="{{'MINI_PROFILE.PASSWORD' | translate}}"
[(ngModel)]="password" required>
</div>
<div class="mt-5">
<small class="text-danger" *ngIf="loginMessage">{{loginMessage}}</small>
<button class="btn btn-primary btn-block btn-raised" type="submit" [ladda]="loading">
{{'COMMON.SUBMIT' | translate}}
</button>
</div>
<br />
<div class="text-center">
<a href="#reset_password" data-toggle="tab" (click)="loginState='RESET-PASSWORD'">
{{'MINI_PROFILE.FORGOT_PASSWORD' | translate}}? </a>
</div>
</ng-container>
<!-- For GA release we dont need this -->
<!-- <ng-container>
<hr class="my-4 hr-text" data-content="OR" />
<button class="btn btn-outline-primary btn-raised btn-icon btn-block"
type="button" (click)="samlLogin()">
<i class="fab fa-windows mr-3"></i>
Login With Microsoft
</button>
</ng-container> -->
</form>
<!-- RESET-PASSWORD FORM -->
<form
*ngIf="loginState === 'RESET-PASSWORD'"
id="reset_password"
class="center_form"
(ngSubmit)="resetForm.valid && doResetPassword()"
#resetForm="ngForm"
>
<div class="card-body">
<p>{{'MINI_PROFILE.TROUBLE_LOGGINGIN' | translate}}</p>
<ul>
<li>{{'MINI_PROFILE.USERNAME_ARE_IN_EMAIL' | translate}}</li>
<li>{{'MINI_PROFILE.PASSWORDS_ARE_CASESENSITIVE' | translate}}</li>
</ul>
<p>{{'MINI_PROFILE.TO_RESET_PASSWORD_ENTER_USERNAME' | translate}}</p>
<div class="form-group">
<label for="resetUsername">{{'COMMON.USERNAME' | translate}}</label>
<input type="email" [(ngModel)]="resetUsername" class="form-control"
name="resetUsername" placeholder="{{'COMMON.USERNAME' | translate}}" required>
</div>
<small class="text-danger " *ngIf="resetMessage">{{resetMessage}}</small>
<small class="text-danger" *ngIf="(resetForm.dirty && resetForm.invalid) || (resetForm.submitted && resetForm.invalid)">{{'MINI_PROFILE.PLEASE_ENTER_USERNAME' | translate}}</small>
</div>
<div class="card-footer">
<button type="button" class="btn btn-secondary col-sm-6 text-center"
(click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button>
<button type="submit" class="btn btn-raised btn-primary col-sm-6 text-center"
type="submit" [ladda]="loading">{{'COMMON.SUBMIT' | translate}}</button>
</div>
</form>
<div *ngIf="loginState === 'RESET-CONFIRM'">
<!-- <div class="card-header">
<h5>{{'MINI_PROFILE.PASSWORD_RESET' | translate}}</h5>
</div> -->
<div class="card-body">
<p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM1' | translate}}</p>
<p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM2' | translate}}</p>
<p>{{'MINI_PROFILE.PASSWORD_RESET_CONFIRM3' | translate}}</p>
</div>
<div class="card-footer">
<button type="button" class="btn btn-secondary btn-block"
(click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button>
</div>
</div>
</div>
<div class="tab-pane" [class.active]="loginState === 'REGISTER'" id="register">
<!-- REGISTER FORM -->
<form *ngIf="loginState === 'REGISTER'" class="center_form" (ngSubmit)="doRegister()">
<div class="form-group">
<label for="exampleInputEmail1">{{'COMMON.EMAIL_ADDRESS' | translate}}
<a><i class="fa fa-info-circle"
title="{{'MINI_PROFILE.NEVER_SHARE_YOUR_EMAIL' | translate}}"></i></a></label>
<input type="email" [(ngModel)]="user.Email" class="form-control" name="email"
placeholder="{{'MINI_PROFILE.ENTER_EMAIL' | translate}}" required>
</div>
<div class="form-group">
<label for="firstName">{{'COMMON.FIRST_NAME' | translate}}</label>
<input type="text" class="form-control" id="firstName"
[(ngModel)]="user.FirstName" name="firstName"
placeholder="{{'COMMON.FIRST_NAME' | translate}}">
</div>
<div class="form-group">
<label for="lastName">{{'COMMON.LAST_NAME' | translate}}</label>
<input type="text" class="form-control"
placeholder="{{'COMMON.LAST_NAME' | translate}}" [(ngModel)]="user.LastName"
name="lastName" id="lastName">
</div>
<small class="text-danger " *ngIf="registerMessage">{{registerMessage}}</small>
<div class="card-footer">
<!-- <button type="button" class="btn btn-secondary col-sm-6 text-center"
(click)="loginState = 'LOGIN'">{{'MINI_PROFILE.GO_BACK' | translate}}</button> -->
<button type="submit" class="btn btn-raised btn-primary btn-block text-center"
[ladda]="loading">{{'COMMON.SUBMIT' | translate}}</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
./login.component.scss
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 1.5em;
opacity: .5;
&:before {
content: '';
background: linear-gradient(to right, transparent, gray, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
&:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
// this is really the only tricky part, you need to specify the background color of the container element...
color: gray;
background-color: white;
}
}
.center_form {
min-height: 350px;
margin: 0 auto;
width:80%
}
/* Tabs panel and border around */
.tabbable-panel {
border:1px solid lightgrey;
}
.tabbable-line > .tab-content {
background-color: white;
border-top: 1px solid lightgrey;
}