Feature #121662 Users Login Component

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",

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';
 

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%;
+  } */

code/src/app/clientmodule/users/login/login.component.html

@@ -1,17 +1,40 @@
-<!--<div fxLayout fxLayoutAlign="center">
-  <form class="example-form" [formGroup]="loginForm" (ngSubmit)="login()">
-
-    <mat-form-field class="example-full-width">
-      <input formControlName="username" matInput placeholder="Username" >
-    </mat-form-field>
-
-    <mat-form-field class="example-full-width">
-      <input formControlName="password" type="password" matInput placeholder="Password">
-    </mat-form-field>
-
-    <mat-checkbox>Remember me!</mat-checkbox>
-
-    <button type="submit" mat-raised-button color="primary">Login</button>
-
-  </form>
-</div>-->
+<!--div [ngBusy]="{busy: busy1, message: 'Loading...', wrapperClass:'truck-busy'}"></div-->
+<div class="col-md-6 col-md-offset-3">
+<div class="col-md-3 col-sm-6 col-xs-10 bg-white br-5 div-center">
+    <div class="row border-bottom-5 px-40">
+        <div class="col-xs-12">
+            <h2 class="font-bold my-15">Login</h2>
+        </div>
+    </div>
+    <form class="py-15 px-40 jobForm-modal" (ngSubmit)="onSubmit(login)" id="loginForm" [formGroup]="login">
+        <div class="form-group">
+            <label for="username">Login ID</label>
+            <input type="text" formControlName="username" name="username" id="username" class="form-control" required="required" placeholder="Login ID"/>
+            <div *ngIf="login.get('username').touched && login.get('username').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> Login ID required
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" formControlName="password" name="password" id="password" placeholder="Password" class="form-control"
+                required="required" />
+            <div *ngIf="login.get('password').touched && login.get('password').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> Password required
+            </div>
+        </div>
+        <!--div class="form-actions text-center">
+            <button type="submit" class="btn btn-yellow font-bold" [disabled]="!login.valid">Login</button>
+        </div-->
+        <div class="form-group">
+            <button [disabled]="!login.valid" class="btn btn-primary">Login</button>
+            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+            <a [routerLink]="['/register']" class="btn btn-link">Register</a>
+        </div>
+    </form>
+    </div>
+</div>

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', () => {

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']);
+              }
+            });
+        }
+      }
+    });
+  }
+}

code/src/app/clientmodule/users/profile/profile.component.html

@@ -1 +1,5 @@
-<h1>I am inside profile {{ userid }} </h1>
+<div class="col-md-6 col-md-offset-3">
+    <h1>Hi {{currentUser.name}}!</h1>
+    <p>You're logged in</p>
+    <p><a [routerLink]="['/login']">Logout</a></p>
+</div>

code/src/app/clientmodule/users/profile/profile.component.ts

@@ -1,11 +1,18 @@
 import { Component } from '@angular/core';
-
+import { Router } from '@angular/router';
+import { LoginService } from "../services/index";
 @Component({
   selector: 'japp-profile',
   templateUrl: './profile.component.html',
   styleUrls: []
 })
 export class ProfileComponent
 {
-
+  currentUser;
+
+  constructor(private LoginService: LoginService, private router: Router) {
+      this.currentUser = JSON.parse(localStorage.getItem('authorizedUser'));
+  }
+  ngOnInit() {
+  }
 }

code/src/app/clientmodule/users/register/register.component.html

@@ -0,0 +1,66 @@
+<!--div [ngBusy]="{busy: busy1, message: 'Loading...', wrapperClass:'truck-busy'}"></div-->
+<div class="col-md-3 col-sm-6 col-xs-10 bg-white br-5 div-center">
+    <div class="row border-bottom-5 px-40">
+        <div class="col-xs-12">
+            <h2 class="font-bold my-15">Registration Page</h2>
+        </div>
+    </div>
+    <form class="py-15 px-40 jobForm-modal" (ngSubmit)="onSubmit(register)" id="registerationForm" [formGroup]="register">
+        <div class="form-group">
+            <label for="firstname">First Name</label>
+            <input type="text" formControlName="firstname" name="firstname" id="firstname" class="form-control" required="required" placeholder="First Name"/>
+            <div *ngIf="register.get('firstname').touched && register.get('firstname').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> First Name is required
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="lastname">Last Name</label>
+            <input type="text" formControlName="lastname" name="lastname" id="lastname" class="form-control" required="required" placeholder="Last Name"/>
+            <div *ngIf="register.get('lastname').touched && register.get('lastname').hasError('required')" class="alert p-0 mt-5 text-danger"
+                 role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> Last Name is required
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="username">User Name</label>
+            <input type="text" formControlName="username" name="username" id="username" class="form-control" required="required" placeholder="User Name"/>
+            <div *ngIf="register.get('username').touched && register.get('username').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span>User Name is required
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="email">Email Id</label>
+            <input type="text" formControlName="email" name="email" id="email" class="form-control" required="required" placeholder="Email"/>
+            <div *ngIf="register.get('email').touched && register.get('email').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> Email Id is required
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" formControlName="password" name="password" id="password" class="form-control" required="required" placeholder="Password"/>
+            <div *ngIf="register.get('password').touched && register.get('password').hasError('required')" class="alert p-0 mt-5 text-danger"
+                role="alert">
+                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+                <span class="sr-only">Error:</span> Password is required
+            </div>
+        </div>
+
+        <!--div class="form-actions text-center">
+        <button type="submit" class="btn btn-yellow font-bold" [disabled]="!login.valid">Login</button>
+        </div-->
+        <div class="form-group">
+           <button [disabled]="" class="btn btn-primary">Register</button>
+            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+            <a [routerLink]="['/login']" class="btn btn-link">Login</a>
+        </div>
+    </form>
+</div>

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');
+      }
+    }); 
+  }
+}