modified

package.json

@@ -21,6 +21,7 @@
  "@angular/platform-browser": "~8.1.2",
  "@angular/platform-browser-dynamic": "~8.1.2",
  "@angular/router": "~8.1.2",
+ "ngx-cookie-service": "^2.2.0",
  "rxjs": "~6.4.0",
  "tslib": "^1.9.0",
  "zone.js": "~0.9.1"

src/app/app.component.html

@@ -1,3 +1,3 @@
-<app-top-bar></app-top-bar>
+<app-top-bar ></app-top-bar>
 
-<router-outlet></router-outlet>
+<router-outlet ></router-outlet>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { LoginService } from './services/login.service';
 
 @Component({
  selector: 'app-root',
@@ -7,4 +8,6 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
  title = 'chat';
+ constructor( private loginService: LoginService) {
+ }
 }

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { TopBarComponent } from './top-bar/top-bar.component';
 import { MyMaterialModule } from './helpers/material.module';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
  declarations: [
@@ -27,7 +28,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
  HttpClientModule,
  ],
  exports: [],
- providers: [],
+ providers: [CookieService],
  bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/dashboard/dashboard.component.ts

@@ -1,15 +1,29 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { LoginService } from '../services/login.service';
+import {Router} from '@angular/router';
 
 @Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
-
- constructor() { }
-
+ constructor(private loginService: LoginService, private router: Router) {
+ loginService.authenticate();
+ }
  ngOnInit() {
+ // this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js');
+ // this.loadScript('https://code.jquery.com/jquery-1.11.1.js');
+ // this.loadScript('../assets/socket.io/socket.io-client.js');
+ }
+ public loadScript(url: string) {
+ const body = document.body as HTMLDivElement;
+ const script = document.createElement('script');
+ script.innerHTML = '';
+ script.src = url;
+ script.async = false;
+ script.defer = true;
+ body.appendChild(script);
  }
 
 }

src/app/login/login.component.html

@@ -24,19 +24,19 @@
  </td>
  </tr>
 
- <tr *ngIf="FLAG_OTP">
+ <tr *ngIf="FLAG_TOKEN">
  <td></td>
  <td>
  <mat-form-field class="example-full-width">
- <input matInput placeholder="Enter OTP" formControlName="otp"
- type="text" name="otp" > 
+ <input matInput placeholder="Enter Token" formControlName="token"
+ type="text" name="token" > 
  </mat-form-field>
  </td>
  </tr>
  <tr>
  <td></td>
  <td>
- <mat-error #error></mat-error>
+ <span #log></span>
  </td>
  </tr>
  </table>

src/app/login/login.component.ts

@@ -1,57 +1,108 @@
-import { Component, OnInit, ViewChild, ElementRef} from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef} from '@angular/core';
 import {Validators, FormBuilder} from '@angular/forms';
 import { LoginService } from '../services/login.service';
+import {Router} from '@angular/router';
+
 
 @Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
- @ViewChild('error', {static: false}) error: ElementRef;
-
+ @ViewChild('log', {static: false}) error: ElementRef;
+ FLAG_COOKIE: boolean;
  FLAG_VALID = false;
- FLAG_OTP = false;
+ FLAG_TOKEN = false;
+ cookieValue;
  form = this.fb.group({
  mobile: ['', [Validators.required, Validators.min(1000000000), Validators.max(9999999999)]],
  countryCode: ['+91', [Validators.required]],
 });
- constructor(private fb: FormBuilder, private loginService: LoginService) { }
+ constructor(private fb: FormBuilder, private loginService: LoginService){
+ // loginService.authenticate();
+ }
 
  onSubmit() {
 
  if (this.formValidator()) {
 
-
- this.loginService.login(this.form.value).subscribe(
- response => {
- if (response) {
- console.log(response.body);
- this.error.nativeElement.innerHTML = response.body;
- }
- },
- err => {
- console.log('Error:', err.error);
- this.error.nativeElement.innerHTML = err.error;
- });
- this.update_error();
- this.getOtp();
+ if (!this.form.value.token) {
+ // registration process
+ this.registerUser(this.form.value);
+ } else {
+ // verify token sent
+ this.verifyToken(this.form.value);
+ }
+ this.update_error();
 
  } else { this.update_error(); }
+
+// submit end
 }
  // form Validator
  formValidator() {
  this.FLAG_VALID = (this.form.valid) && (this.form.get('mobile').valid);
  return this.FLAG_VALID;
  }
- // otp
- getOtp() {
- setTimeout(() => {
- this.FLAG_OTP = true;
- this.form.addControl('otp', this.fb.control(''));
- this.form.get('otp').setValidators([Validators.required]);
-}, 200);
-}
+
+ // registrtion process function
+ registerUser(user) {
+ // check registeration user
+ this.loginService.ifRegistered(user).subscribe(
+ res => {
+ if (res.status === 200) {
+ console.log(res.body);
+ this.error.nativeElement.innerHTML = res.body;
+
+ // send token
+ this.sendToken(user);
+ }
+ },
+ err => {
+ console.log('Error:', err.error);
+ this.error.nativeElement.innerHTML = err.error;
+ });
+ }
+
+ // send token function
+ sendToken(user) {
+ this.loginService.sendToken(user).subscribe(
+ response => {
+ if (response.status === 200) {
+ console.log(response.body);
+ this.error.nativeElement.innerHTML = response.body;
+ this.setTokenInput();
+ }
+ },
+ error => {
+ console.log('Error:', error.error);
+ this.error.nativeElement.innerHTML = error.error;
+ }
+ );
+ }
+ // varify token function
+ verifyToken(user) {
+ this.loginService.verifyToken(user).subscribe(
+ response => {
+ if (response.status === 200) {
+ console.log(response.body);
+ this.error.nativeElement.innerHTML = response.body;
+ // login user
+ this.loginService.login(user.mobile); }
+ },
+ error => {
+ console.log('Error:', error.error);
+ this.error.nativeElement.innerHTML = error.error;
+ }
+ );
+ }
+ // set Token function
+ setTokenInput() {
+ this.FLAG_TOKEN = true;
+ this.form.addControl('token', this.fb.control(''));
+ this.form.get('token').setValidators([Validators.required]);
+ }
 // error updates
  update_error() {
  if (!this.FLAG_VALID) {
@@ -60,7 +111,8 @@ export class LoginComponent implements OnInit {
  } else { this.error.nativeElement.innerHTML = ''; }
 
 }
- ngOnInit() {
+
+ngOnInit() {
 
  }
 

src/app/services/login.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { CookieService } from 'ngx-cookie-service';
+import {Router} from '@angular/router';
 
 @Injectable({
  providedIn: 'root'
@@ -13,10 +15,51 @@ export class LoginService {
  }),
  // responseType:
  };
- constructor(private http: HttpClient) {
+ constructor(private http: HttpClient, private cookieService: CookieService, private router: Router) {}
+
+ authenticate() {
+ if (this.getLoggedUser()) {
+ this.router.navigateByUrl('/dashboard');
+ } else {
+ this.router.navigateByUrl('/login');
+ }
+ }
+ login(mobile) {
+ this.cookieService.set( 'user', mobile, 1); // take mobile as string, expires in 1 days
+ this.router.navigateByUrl('/dashboard');
+
+ }
+ getLoggedUser() {
+ const cookieExists: boolean = this.cookieService.check('user');
+ if (cookieExists) {
+ return Number(this.cookieService.get('user'));
+ }
+ return false;
+ }
+
+ logout() {
+ this.cookieService.delete('user');
+ this.router.navigateByUrl('/login');
+
  }
- login(data) {
-console.log(data);
-return this.http.post(this.baseurl + '/login', data, {observe: 'response'});
+ifRegistered(data) {
+ console.log(data);
+ return this.http.post(this.baseurl + '/ifregistered', data, {observe: 'response'});
  }
+
+registerUser(data) {
+ console.log(data);
+ return this.http.post(this.baseurl + '/register', data, {observe: 'response'});
+ }
+
+ sendToken(data) {
+ console.log(data);
+ return this.http.post(this.baseurl + '/sendToken', data, {observe: 'response'});
+ }
+
+ verifyToken(data) {
+ console.log(data);
+ return this.http.post(this.baseurl + '/verifyToken', data, {observe: 'response'});
+ }
+
 }

src/app/top-bar/top-bar.component.html

@@ -1,7 +1,8 @@
 <mat-toolbar color="primary">
  <mat-toolbar-row>
- <span><a mat-button><h3>Home</h3></a></span>
+ <span><a mat-button routerLink="/dashboard"><h3>Home</h3></a></span>
  <span class="spacer"></span>
  <a mat-button routerLink="/login">Login</a>
+ <a mat-button *ngIf="1" (click)="logout()">Logout</a>
  </mat-toolbar-row>
 </mat-toolbar>

src/app/top-bar/top-bar.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { LoginService } from '../services/login.service';
+
 
 @Component({
  selector: 'app-top-bar',
@@ -7,8 +9,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TopBarComponent implements OnInit {
 
- constructor() { }
-
+ constructor(private loginService: LoginService) {
+ }
+ logout() {
+ this.loginService.logout();
+ }
  ngOnInit() {
  }
 

src/assets/socket.io/socket.io-client.js

@@ -0,0 +1,8 @@
+var socket = io();
+
+ // on connection to server, ask for user's name with an anonymous callback
+ socket.on('connect', function(){
+ // call the server-side function 'adduser' and send one parameter (value of prompt)
+ alert();
+ socket.emit('adduser', prompt("What's your name?"));
+ });

src/index.html

@@ -11,7 +11,18 @@
 </head>
 <body>
  <app-root></app-root>
- <script src="./socket.io/socket.io.js"></script> 
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script> 
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+<script>
+var socket = io();
+
+// on connection to server, ask for user's name with an anonymous callback
+socket.on('connect', function(){
+ // call the server-side function 'adduser' and send one parameter (value of prompt)
+ alert();
+ socket.emit('adduser', prompt("What's your name?"));
+});
+
+</script>
 </body>
 </html>