Skip to content

Instantly share code, notes, and snippets.

@imVinayPandya
Last active March 3, 2017 04:41
Show Gist options
  • Save imVinayPandya/a2696802d8112a9ffdf9f4e0cbf24563 to your computer and use it in GitHub Desktop.
Save imVinayPandya/a2696802d8112a9ffdf9f4e0cbf24563 to your computer and use it in GitHub Desktop.
<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circular'; strategy:'overlay'; color:'accent'">
<div layout="column" layout-fill>
<md-toolbar color="primary" class="md-whiteframe-z1">
<span>Login</span>
</md-toolbar>
<div class="md-content" layout-padding flex>
<div layout-gt-xs="row" layout-align-gt-xs="center start" class="margin">
<div flex-gt-xs="50">
<form [formGroup]="_loginForm" (submit)="_login($event)">
<md-card tdMediaToggle="gt-xs" [mediaClasses]="['push-top-lg']">
<md-card-title>
<md-icon class="md-icon-logo" svgIcon="assets:covalent"></md-icon>
Login
</md-card-title>
<md-card-subtitle>Sign in via your current developer account</md-card-subtitle>
<md-card-subtitle *ngIf="_errorMessage" style="color: red;">{{_errorMessage}}</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<div layout="row">
<md-input-container flex>
<input mdInput placeholder="Email" type="email"
formControlName="email">
<span md-prefix><md-icon>email</md-icon></span>
<md-hint align="start">
<span [hidden]="!_loginForm.controls.email.errors?.required || _loginForm.controls.email.pristine"
class="tc-red-600">Email is Required</span>
<span [hidden]="_loginForm.controls.email.errors?.incorrectMailFormat !== true
|| _loginForm.controls.email.pristine"
class="tc-red-600">Email is not valid</span>
</md-hint>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex>
<input mdInput placeholder="Password" type="password"
formControlName="password">
<span md-prefix><md-icon>lock</md-icon></span>
<md-hint align="start">
<span
[hidden]="!_loginForm.controls.password.errors?.required || _loginForm.controls.password.pristine"
class="tc-red-600">Password is Required</span>
</md-hint>
</md-input-container>
</div>
</md-card-content>
<md-divider></md-divider>
<md-card-actions layout="row">
<button flex md-raised-button color="primary" [disabled]="!_loginForm.valid" type="submit">
Sign In
</button>
</md-card-actions>
</md-card>
</form>
</div>
</div>
</div>
</div>
</div>
:host /deep/ {
.md-input-prefix {
width: 44px;
text-align: center;
}
md-divider {
display: block;
border-top-style: solid;
border-top-width: 1px;
}
}
import {Component, AfterViewInit} from '@angular/core';
import {Router} from '@angular/router';
import {TdLoadingService} from '@covalent/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
import {GlobalValidator} from "../shared/global.validator";
import {LoginService} from "./login.service";
@Component({
selector: 'qs-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent {
private _loginForm: FormGroup;
private _errorMessage: string = "";
overlayStarSyntax: boolean = false;
constructor(private _fb: FormBuilder,
private _loginService: LoginService,
private _router: Router,
private _loadingService: TdLoadingService) {
this._initLoginForm();
}
_login(event): void {
console.log(this._loginForm.value);
this._loadingService.register('overlayStarSyntax');
if (event.isTrusted && this._loginForm.valid && this._loginForm.dirty) {
this._loginService.login(this._loginForm.value)
.subscribe(
res => {
console.log(res);
if (res.success) {
console.log('Logged in');
this._loadingService.resolve('overlayStarSyntax');
this._router.navigate(['/leaf-admin']);
}
},
error => {
if (error.status === 401) {
console.log(JSON.parse(error._body).reason);
this._errorMessage = JSON.parse(error._body).reason;
}
if (error.status === 400) {
console.log(JSON.parse(error._body).reason);
this._errorMessage = "Looks like input data is wrong";
}
if (error.status === 409) {
console.log(JSON.parse(error._body).reason);
this._errorMessage = JSON.parse(error._body).reason;
}
if (error.status === 500) {
this._errorMessage = "Something went wrong";
}
this._loadingService.resolve('overlayStarSyntax');
}
)
} else {
console.log("Event is not trusted or form is not dirty");
}
}
_initLoginForm() {
this._loginForm = this._fb.group({
email: ['', Validators.compose([Validators.required, GlobalValidator.mailFormat])],
password: ['', Validators.required]
});
}
}
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
import {ReactiveFormsModule} from "@angular/forms";
import {CommonModule} from "@angular/common";
import {RouterModule, Routes} from "@angular/router";
import {LoginComponent} from "./login.component";
import {CovalentCoreModule, CovalentLoadingModule} from "@covalent/core";
const routes: Routes = [
{path: '', component: LoginComponent}
];
@NgModule({
imports: [
CommonModule,
ReactiveFormsModule,
RouterModule.forChild(routes),
CovalentCoreModule,
CovalentLoadingModule
],
declarations: [LoginComponent],
providers: []
})
export class LoginModule {
}
import {Injectable} from "@angular/core";
import {Http, Headers, RequestOptions} from "@angular/http";
import {Observable} from "rxjs";
import 'rxjs/add/operator/map';
import {ConfigService} from "../shared/services/config.service";
import {JwtHelper} from "angular2-jwt";
import {ExtendedHttpService} from "../shared/services/extended-http.service";
@Injectable()
export class LoginService {
constructor(private _http: ExtendedHttpService, private jwtHelper: JwtHelper) {
}
public isAuthorized(): boolean {
if (localStorage.getItem("id_token")) {
return true;
} else {
return false;
}
}
public logout(): boolean {
localStorage.removeItem("id_token");
localStorage.removeItem("profile");
localStorage.removeItem("refresh_token");
localStorage.removeItem("dev_id");
return true;
}
public getUserProfile() {
return localStorage.getItem("profile") ? JSON.parse(localStorage.getItem("profile")) : {};
}
public setUserProfile(profile) {
localStorage.setItem("profile", JSON.stringify(profile));
console.log("User Profile Set");
}
public login(userData): Observable<any> {
const url = ConfigService.authServerApiUrl + "/developers/login";
const body = JSON.stringify(userData);
const headers = new Headers({
"Content-Type": "application/json"
});
const options = new RequestOptions({
headers: headers
});
return this._http.post(url, body, options)
.map(response => {
if (response.status !== 201) {
return Observable.throw("Error from server");
}
const res = response.json();
if (!res.data.access_token || !res.data.refresh_token || !res.data.developer_id) {
this.logout();
return Observable.throw("Session is not set");
}
localStorage.setItem("id_token", res.data.access_token);
this.setUserProfile(this.jwtHelper.decodeToken(res.data.access_token));
localStorage.setItem("refresh_token", res.data.refresh_token);
localStorage.setItem("dev_id", res.data.developer_id);
console.log("LOCAL STORAGE: session set");
return res;
}).catch((error): any => {
return Observable.throw(error || 'Login Service Error');
});
}
public refreshtoken() {
console.log("inside it");
if (!localStorage.getItem("refresh_token") || !localStorage.getItem("dev_id")) {
console.log("logout");
this.logout();
return false;
// return Observable.throw("refresh token not found");
}
const dev_id = localStorage.getItem("dev_id");
const refresh_token = localStorage.getItem("refresh_token");
const url = ConfigService.authServerApiUrl + "/" + dev_id + "/token";
const headers = new Headers({
"Content-Type": "application /json",
"Authorization": refresh_token
});
const options = new RequestOptions({
headers: headers
});
this._http.get(url, options)
.map(response => {
if (response.status !== 201) {
return false;
// return Observable.throw("Error from server");
}
const res = response.json();
if (!res.data.access_token || !res.data.developer_id) {
this.logout();
return false;// return Observable.throw("Session is not set");
}
localStorage.setItem("id_token", res.data.access_token);
this.setUserProfile(this.jwtHelper.decodeToken(res.data.access_token));
localStorage.setItem("dev_id", res.data.developer_id);
console.log("SESSION REFRESHED");
return true;
}).catch((error): any => {
return false;
// return Observable.throw(error || 'Login Service Error');
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment