diff --git a/code/package.json b/code/package.json index 7606a2f..3b5bcd2 100644 --- a/code/package.json +++ b/code/package.json @@ -26,6 +26,7 @@ "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "@appcarvers/ngx-unitelist": "^0.1.10", + "@jaspero/ng2-alerts": "0.0.7", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "hammerjs": "^2.0.8", diff --git a/code/src/app/clientmodule/client.module.ts b/code/src/app/clientmodule/client.module.ts index a9fff1b..0429151 100644 --- a/code/src/app/clientmodule/client.module.ts +++ b/code/src/app/clientmodule/client.module.ts @@ -1,8 +1,5 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - - - import { UsersModule } from './users/users.module'; import { ContentModule } from './content/content.module'; diff --git a/code/src/app/clientmodule/users/login/login.component.css b/code/src/app/clientmodule/users/login/login.component.css index e69de29..c681069 100644 --- a/code/src/app/clientmodule/users/login/login.component.css +++ b/code/src/app/clientmodule/users/login/login.component.css @@ -0,0 +1,9 @@ +.example-container { + max-width: 500px; + } +.example-full-width{ + width: 100%; +} + /* .example-container > * { + width: 100%; + } */ \ No newline at end of file diff --git a/code/src/app/clientmodule/users/login/login.component.html b/code/src/app/clientmodule/users/login/login.component.html index 259230d..17c2bc8 100644 --- a/code/src/app/clientmodule/users/login/login.component.html +++ b/code/src/app/clientmodule/users/login/login.component.html @@ -1,17 +1,40 @@ - \ No newline at end of file + +
+
+
+
+

Login

+
+
+
+
+ + + +
+ +
+ + + +
+ +
+ + + Register +
+
+
+
\ No newline at end of file diff --git a/code/src/app/clientmodule/users/login/login.component.spec.ts b/code/src/app/clientmodule/users/login/login.component.spec.ts index b9b2bc1..fc5f46a 100644 --- a/code/src/app/clientmodule/users/login/login.component.spec.ts +++ b/code/src/app/clientmodule/users/login/login.component.spec.ts @@ -1,5 +1,4 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - import { LoginComponent } from './login.component'; describe('LoginComponent', () => { diff --git a/code/src/app/clientmodule/users/login/login.component.ts b/code/src/app/clientmodule/users/login/login.component.ts index f618d11..3e41ac9 100644 --- a/code/src/app/clientmodule/users/login/login.component.ts +++ b/code/src/app/clientmodule/users/login/login.component.ts @@ -1,5 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { LoginService } from "../services/index"; +import { Router } from '@angular/router'; +import { AlertsService } from '@jaspero/ng2-alerts'; @Component({ @@ -8,15 +11,73 @@ import { FormGroup, FormControl } from '@angular/forms'; styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { + invalidLoginFormMessage: any; + isLoginFormValid: boolean = true; + busy1; - loginForm : FormGroup = new FormGroup({ - username : new FormControl(), - password : new FormControl() - }); + alertOptions = { + showCloseButton: true, + duration: 50000 + } - constructor( ) { } + constructor(private router: Router, + private LoginService : LoginService, + private _alert: AlertsService + ) { + console.log('In Login Component'); + } ngOnInit() { + if (this.LoginService.isLoggedIn()) { + // Get the logged in user details + this.router.navigate(['/profile']); + } + else { + this.LoginService.logout(); + this.LoginService.refreshNav.emit(); + } + } + + login = new FormGroup({ + username: new FormControl(null, [Validators.required]), + password: new FormControl(null, [Validators.required]), + }); + + onSubmit({ value, valid }) { + if (valid) { + var username = value.username; + var password = value.password; + this.getLoginKey(username, password) + } } -} + getLoginKey(user, pass) { + this.busy1 = this.LoginService.getAuthenticationKey(user, pass) + .subscribe(result => { + if (result.err_msg) { + this.isLoginFormValid = false; + this.invalidLoginFormMessage = result.err_msg; + this._alert.create("error", this.invalidLoginFormMessage, this.alertOptions); + } + else { + if (result.data.auth) { + // Get the agency details and store in to local storage + localStorage.setItem('auth_token', result.data.auth); + this._alert.create("info", "You are logged in successfully redirecting....", this.alertOptions); + this.LoginService.loggedIn = true; + this.LoginService.getUserDetails(result.data.id) + .subscribe(data => { + if (data.err_msg) { + this._alert.create("error", data.err_msg, this.alertOptions); + } + else { + localStorage.setItem('authorizedUser', JSON.stringify(data.data)); + this.LoginService.refreshNav.emit(); + this.router.navigate(['/profile']); + } + }); + } + } + }); + } +} \ No newline at end of file diff --git a/code/src/app/clientmodule/users/profile/profile.component.html b/code/src/app/clientmodule/users/profile/profile.component.html index be88b13..66ae4a9 100644 --- a/code/src/app/clientmodule/users/profile/profile.component.html +++ b/code/src/app/clientmodule/users/profile/profile.component.html @@ -1 +1,5 @@ -

I am inside profile {{ userid }}

\ No newline at end of file +
+

Hi {{currentUser.name}}!

+

You're logged in

+

Logout

+
\ No newline at end of file diff --git a/code/src/app/clientmodule/users/profile/profile.component.ts b/code/src/app/clientmodule/users/profile/profile.component.ts index 87fb5d3..647179e 100644 --- a/code/src/app/clientmodule/users/profile/profile.component.ts +++ b/code/src/app/clientmodule/users/profile/profile.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; - +import { Router } from '@angular/router'; +import { LoginService } from "../services/index"; @Component({ selector: 'japp-profile', templateUrl: './profile.component.html', @@ -7,5 +8,11 @@ import { Component } from '@angular/core'; }) export class ProfileComponent { - + currentUser; + + constructor(private LoginService: LoginService, private router: Router) { + this.currentUser = JSON.parse(localStorage.getItem('authorizedUser')); + } + ngOnInit() { + } } \ No newline at end of file diff --git a/code/src/app/clientmodule/users/register/register.component.html b/code/src/app/clientmodule/users/register/register.component.html new file mode 100644 index 0000000..6ed9633 --- /dev/null +++ b/code/src/app/clientmodule/users/register/register.component.html @@ -0,0 +1,66 @@ + +
+
+
+

Registration Page

+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+ + + Login +
+
+
\ No newline at end of file diff --git a/code/src/app/clientmodule/users/register/register.component.ts b/code/src/app/clientmodule/users/register/register.component.ts new file mode 100644 index 0000000..4514be6 --- /dev/null +++ b/code/src/app/clientmodule/users/register/register.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { Base,RegisterService } from '../services/index'; +import { AlertsService } from '@jaspero/ng2-alerts'; + +@Component({ + templateUrl: './register.component.html' +}) +export class RegisterComponent implements OnInit { + + alertOptions = { + showCloseButton: true, + duration: 50000 + } + + constructor(private route:Router, + private Base : Base, + private RegisterService :RegisterService, + private _alert : AlertsService + ) { + console.log('In Login Component'); + } + + register = new FormGroup({ + firstname: new FormControl(null, [Validators.required]), + lastname: new FormControl(null, [Validators.required]), + email: new FormControl(null, [Validators.required]), + password: new FormControl(null, [Validators.required]), + username: new FormControl(null, [Validators.required]), + }); + + ngOnInit() { + } + + onSubmit({ value, valid }) { + if (valid) { + let data = []; + data['name'] = value.firstname+' '+value.lastname; + data['email'] = value.email; + data['username'] = value.username; + data['password'] = value.password; + this.createUser(data); + } + } + + createUser(data){ + console.log('Posted Data',data); + this.RegisterService.createUser(data).subscribe(result => { + console.log('User Created'); + if (result.err_msg) { + //this.invalidLoginFormMessage = result.err_msg; + this._alert.create("error", result.err_msg, this.alertOptions); + } + else{ + console.log('Registered User Successfully'); + } + }); + } +} \ No newline at end of file diff --git a/code/src/app/clientmodule/users/services/base.service.ts b/code/src/app/clientmodule/users/services/base.service.ts new file mode 100644 index 0000000..54af7a6 --- /dev/null +++ b/code/src/app/clientmodule/users/services/base.service.ts @@ -0,0 +1,74 @@ +import { Injectable, EventEmitter } from '@angular/core'; +import { Http, Headers, URLSearchParams, RequestOptionsArgs } from '@angular/http'; +import { environment } from '../../../../environments/environment'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/catch'; +import { Observable } from 'rxjs/Rx'; +import { Router } from '@angular/router'; + +@Injectable() +export class Base { + private loggedIn = false; + public globalHeaders; + refreshNav: EventEmitter = new EventEmitter(); + + constructor(public http: Http, private router: Router) { + this.loggedIn = !!localStorage.getItem('auth_token'); + let authToken = localStorage.getItem('auth_token'); + this.globalHeaders = new Headers({ "Authorization": 'Bearer ' + authToken }); + } + + post(url: string, body: any, options) { + console.log('Base Service Post'); + console.log('Base Service Post URL',url); + console.log('Base Service Post BODY',body); + console.log('Base Service Post OPTIONS',options); + console.log('HTTP'); + console.dir(this.http); + return this.http.post(url, body, { headers: options }) + .map(res => { + let response = res.json(); + if (response.err_code == '403') { + this.logout(); + this.router.navigate(['/login']); + return response; + } + else { + return response; + } + }).catch(this.handleErrors); + } + + get(url: string, options) { + return this.http.get(url, { headers: options }) + .map(res => { + let response = res.json(); + if (response.err_code == '403') { + this.logout(); + this.router.navigate(['/login']); + return response; + } + else { + return response; + } + }).catch(this.handleErrors); + } + + logout() { + localStorage.removeItem('auth_token'); + localStorage.removeItem('authorizedUser'); + this.globalHeaders = new Headers(); + this.loggedIn = false; + this.router.navigate(['/login']); + } + + handleErrors(error: Response) { + return Observable.throw(error || "Server Error"); + } + + isLoggedIn() { + return this.loggedIn; + } + +} \ No newline at end of file diff --git a/code/src/app/clientmodule/users/services/index.ts b/code/src/app/clientmodule/users/services/index.ts new file mode 100644 index 0000000..8274310 --- /dev/null +++ b/code/src/app/clientmodule/users/services/index.ts @@ -0,0 +1,3 @@ +export * from './login.service'; +export * from './base.service'; +export * from './register.service'; diff --git a/code/src/app/clientmodule/users/services/login.service.ts b/code/src/app/clientmodule/users/services/login.service.ts new file mode 100644 index 0000000..a198f4f --- /dev/null +++ b/code/src/app/clientmodule/users/services/login.service.ts @@ -0,0 +1,54 @@ +import { Injectable, EventEmitter } from '@angular/core'; +import { Http, Headers, URLSearchParams } from '@angular/http'; +import { environment } from '../../../../environments/environment'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/catch'; +import { Observable } from 'rxjs/Rx'; +import { Router } from '@angular/router'; +import { Base } from './base.service'; + +@Injectable() +export class LoginService { + public loggedIn = false; + public headers: Headers; + refreshNav: EventEmitter = new EventEmitter(); + + constructor(private BaseService: Base) { + console.log('Here in login service'); + } + + getAuthenticationKey(username, password) { + let urlSearchParams = new URLSearchParams(); + urlSearchParams.set('username', username); + urlSearchParams.set('password', password); + let body = urlSearchParams.toString(); + this.BaseService.globalHeaders.set("Content-Type", "application/x-www-form-urlencoded"); + return this.BaseService.post(environment.apiBase + '/api/users/login', body, this.BaseService.globalHeaders).map(result => { + if (result.err_msg) { + this.BaseService.logout(); + return result; + } + else { + if (result.data.auth) { + localStorage.setItem('auth_token', result.data.auth); + this.BaseService.globalHeaders.set("Authorization", 'Bearer ' + result.data.auth); + return result; + } + } + }); + } + + getUserDetails(userId = 0) { + this.BaseService.globalHeaders.delete("Content-Type"); + return this.BaseService.get(environment.apiBase + '/api/users/users/' + userId, this.BaseService.globalHeaders).map(res => res); + } + + logout() { + return this.BaseService.logout(); + } + + isLoggedIn() { + return this.BaseService.isLoggedIn(); + } +} \ No newline at end of file diff --git a/code/src/app/clientmodule/users/services/register.service.ts b/code/src/app/clientmodule/users/services/register.service.ts new file mode 100644 index 0000000..36c8a90 --- /dev/null +++ b/code/src/app/clientmodule/users/services/register.service.ts @@ -0,0 +1,43 @@ +import { Injectable, EventEmitter } from '@angular/core'; +import { Http, Headers, URLSearchParams } from '@angular/http'; +import { environment } from '../../../../environments/environment'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/catch'; +import { Observable } from 'rxjs/Rx'; +import { Router } from '@angular/router'; +import { Base } from "../services/index"; + +@Injectable() +export class RegisterService { + public headers: Headers; + refreshNav: EventEmitter = new EventEmitter(); + + constructor(private BaseService: Base) { + console.log('Here in login service'); + } + + createUser(data) { + console.log('In Register Service', data); + let urlSearchParams = new URLSearchParams(); + urlSearchParams.set('username', data['username']); + urlSearchParams.set('name', data['name']); + urlSearchParams.set('email', data['email']); + urlSearchParams.set('password', data['password']); + let body = urlSearchParams.toString(); + this.BaseService.globalHeaders.set("Content-Type", "application/x-www-form-urlencoded"); + return this.BaseService.post(environment.apiBase + '/api/users/users', body, this.BaseService.globalHeaders).map(result => { + if (result.err_msg) { + console.log('Error Here',result); + //this.BaseService.logout(); + return result; + } + else { + if (result) { + console.log('Success Here in',result); + return result; + } + } + }); + } +} \ No newline at end of file diff --git a/code/src/app/clientmodule/users/users.module.ts b/code/src/app/clientmodule/users/users.module.ts index d602424..ccc1ca4 100644 --- a/code/src/app/clientmodule/users/users.module.ts +++ b/code/src/app/clientmodule/users/users.module.ts @@ -8,6 +8,9 @@ import { UserRouterModule } from './users.router.module'; import { LoginComponent } from './login/login.component'; import { ProfileComponent } from './profile/profile.component'; +import { RegisterComponent } from './register/register.component'; +import { LoginService, Base, RegisterService } from './services/index'; +import { AlertsService } from '@jaspero/ng2-alerts'; @NgModule({ imports: [ @@ -17,8 +20,8 @@ import { ProfileComponent } from './profile/profile.component'; HttpClientModule, FlexLayoutModule ], - declarations: [LoginComponent, ProfileComponent], - providers : [], + declarations: [LoginComponent, ProfileComponent, RegisterComponent], + providers : [LoginService, Base, AlertsService, RegisterService], exports : [LoginComponent, ProfileComponent] }) export class UsersModule { } diff --git a/code/src/app/clientmodule/users/users.router.module.ts b/code/src/app/clientmodule/users/users.router.module.ts index c707dd7..b04c07c 100644 --- a/code/src/app/clientmodule/users/users.router.module.ts +++ b/code/src/app/clientmodule/users/users.router.module.ts @@ -3,10 +3,12 @@ import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './login/login.component'; import { ProfileComponent } from './profile/profile.component'; +import { RegisterComponent } from './register/register.component'; const appRoutes: Routes = [ { path: 'login', component: LoginComponent }, - { path: 'profile', component: ProfileComponent } + { path: 'profile', component: ProfileComponent }, + { path: 'register', component: RegisterComponent } ] @NgModule({ diff --git a/code/src/app/jangular/jangular.module.ts b/code/src/app/jangular/jangular.module.ts index 6e75e40..78b4cae 100644 --- a/code/src/app/jangular/jangular.module.ts +++ b/code/src/app/jangular/jangular.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; - +import { HttpModule } from '@angular/http'; import {UsersModule} from './users/users.module'; import { ContentModule } from './content/content.module'; @@ -12,7 +12,8 @@ export { MenuService } from './services/menu.service'; imports: [ CommonModule, UsersModule, - ContentModule + ContentModule, + HttpModule ], declarations: [], providers: [JAngularBaseService], diff --git a/code/src/app/jangular/users/login/login.component.css b/code/src/app/jangular/users/login/login.component.css deleted file mode 100644 index c681069..0000000 --- a/code/src/app/jangular/users/login/login.component.css +++ /dev/null @@ -1,9 +0,0 @@ -.example-container { - max-width: 500px; - } -.example-full-width{ - width: 100%; -} - /* .example-container > * { - width: 100%; - } */ \ No newline at end of file diff --git a/code/src/app/jangular/users/login/login.component.html b/code/src/app/jangular/users/login/login.component.html deleted file mode 100644 index bf1d553..0000000 --- a/code/src/app/jangular/users/login/login.component.html +++ /dev/null @@ -1,21 +0,0 @@ -
- - -
- - - - - - - - - - Remember me! - - - -
- - -
\ No newline at end of file diff --git a/code/src/app/jangular/users/login/login.component.ts b/code/src/app/jangular/users/login/login.component.ts deleted file mode 100644 index 08235a5..0000000 --- a/code/src/app/jangular/users/login/login.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; - -import { AuthService } from '../services/auth.service'; - -@Component({ - selector: 'japp-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.css'], - providers : [ AuthService ] -}) -export class LoginComponent implements OnInit { - - loginForm : FormGroup = new FormGroup({ - username : new FormControl(""), - password : new FormControl("") - }); - - constructor( private _authService : AuthService ) { } - - ngOnInit() { - } - - login(){ - console.log(this.loginForm); - this._authService.login(this.loginForm.value).subscribe(data => { - console.log(data); - }); - } - -} diff --git a/code/src/app/jangular/users/users.module.ts b/code/src/app/jangular/users/users.module.ts index 4a7a407..ffbffb6 100644 --- a/code/src/app/jangular/users/users.module.ts +++ b/code/src/app/jangular/users/users.module.ts @@ -7,10 +7,10 @@ import { HttpClientModule } from '@angular/common/http'; import { JangularMaterial } from '../jangular.material.module'; import { UserRouterModule } from './users.router.module'; -import { LoginComponent } from './login/login.component'; import { ProfileComponent } from './profile/profile.component'; import { RegistrationComponent } from './registration/registration.component'; + @NgModule({ imports: [ CommonModule, @@ -20,8 +20,8 @@ import { RegistrationComponent } from './registration/registration.component'; JangularMaterial // FlexLayoutModule ], - declarations: [LoginComponent, ProfileComponent, RegistrationComponent], + declarations: [ProfileComponent, RegistrationComponent], providers : [], - exports : [LoginComponent, ProfileComponent, RegistrationComponent] + exports : [ ProfileComponent, RegistrationComponent] }) export class UsersModule { }