second commit

frontend/angular.json

@@ -34,7 +34,7 @@
               "src/assets"
             ],
             "styles": [
-              "./node_modules/bootstrap/scss/bootstrap.scss",
+              "node_modules/bootstrap/scss/bootstrap.scss",
               "src/styles.scss"
             ],
             "scripts": []

frontend/package-lock.json

@@ -143,6 +143,23 @@
         "tslib": "^2.1.0"
       }
     },
+    "@angular/cdk": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.2.tgz",
+      "integrity": "sha512-1JGayyUJmwaul5YSEgb780aWxk+MLVG5FakVaxz5NtbPZx19ZyOuZqytCh5js11LsBDipF5/kirYhJPBFlMbWQ==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.0.1.tgz",
@@ -423,6 +440,14 @@
         }
       }
     },
+    "@angular/material": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.2.tgz",
+      "integrity": "sha512-jTH53w4iVNk+3K5ciFyHeRhNNtV6TzeuNTSELeme4l3t5FP3VqFTdE56Q55MrV2RMIzDKLYEpiqSiQf+8ZuGSA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "12.0.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.0.2.tgz",

frontend/package.json

@@ -11,11 +11,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.0.1",
+    "@angular/cdk": "^12.0.2",
     "@angular/common": "~12.0.1",
     "@angular/compiler": "~12.0.1",
     "@angular/core": "~12.0.1",
     "@angular/forms": "~12.0.1",
     "@angular/localize": "^12.0.2",
+    "@angular/material": "^12.0.2",
     "@angular/platform-browser": "~12.0.1",
     "@angular/platform-browser-dynamic": "~12.0.1",
     "@angular/router": "~12.0.1",

frontend/src/app/general/general.component.html

@@ -1 +1,54 @@
-<p>general works!</p>
+<div class="container-fluid" >
+  <div class="row">
+
+    <div class="col-md-4">
+
+      <div class="user-list-card">
+        <div class="user-card"
+             [ngClass]="{'active' : user?.password === selectedUser?.password}"
+             *ngFor="let user of userList"
+             (click)="selectUserHandler(user.password)"
+        >
+          <!---->
+
+          <img src="../../assets/image/user.png" height="25" width="25"/>
+          <p class="username">{{user?.name}}</p>
+
+        </div>
+      </div>
+
+    </div>
+    <div class="col-md-8">
+
+      <div class="chat-container">
+        <ng-container *ngIf="selectedUser">
+          <div class="chat-header">
+            <p class="username">{{selectedUser?.name}}</p>
+          </div>
+
+          <div class="chat-body">
+            <div *ngFor="let item of messageArray">
+              <span><strong>{{item.user}} : </strong> {{item.message}}</span>
+            </div>
+
+          </div>
+
+          <div class="chat-footer">
+            <div class="row">
+              <div class="col-md-10">
+                <div class="form-group mb-0">
+                  <input type="text" placeholder="Entrez votre message" class="form-control"
+                         [(ngModel)]="messageText"/>
+                </div>
+              </div>
+              <div class="col-md-2 text-center align-self-center">
+                <button class="btn btn-primary btn-bm px-3 " (click)="sendMessage()">Envoyer</button>
+              </div>
+            </div>
+
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/app/general/general.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {ChatService} from "../services/chat/chat.service";
+import {AuthService} from "../services/auth/auth.service";
 
 @Component({
   selector: 'app-general',
@@ -6,10 +8,141 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./general.component.scss']
 })
 export class GeneralComponent implements OnInit {
+  public currentUser;
 
-  constructor() { }
+  // @ts-ignore
+  public user:String;
+  // @ts-ignore
+  public room:String;
+  // @ts-ignore
+  public messageText: string;
+  messageArray:Array<{user:String,message:String}> = [];
+  private storageArray = [];
 
+  // @ts-ignore
+  public showScreen: boolean;
+
+  // @ts-ignore
+  public password: string;
+  // @ts-ignore
+  public currentUser;
+  // @ts-ignore
+  public selectedUser;
+
+  public userList = [
+    {
+      id: 1,
+      name: 'Yuki Vachot',
+      login: 'yuki',
+      password: 'vachot1',
+      room: 'general'
+    },
+    {
+      id: 2,
+      name: 'Wilfried Vallee',
+      login: 'wilfried',
+      password: 'vallee2',
+      room: 'general'
+    },
+    {
+      id: 3,
+      name: 'Khai Phan',
+      login: 'khai',
+      password: 'phan3',
+      room: 'general'
+    }
+  ];
+
+
+  constructor(private chatService:ChatService,
+              private Auth: AuthService
+  ) {
+    this.currentUser = this.Auth.sendAuth(this.currentUser);
+    this.userList = this.userList.filter((user) => user.password !== this.currentUser.password.toString());
+    console.log(this.userList);
+
+    this.chatService.newUserJoined()
+      .subscribe(data=> this.messageArray.push(data));
+
+
+    this.chatService.userLeftRoom()
+      .subscribe(data=>this.messageArray.push(data));
+
+    this.chatService.getMessage()
+      .subscribe(data=>this.messageArray.push(data));
+  }
   ngOnInit(): void {
+    this.chatService.getMessage()
+      .subscribe((data: {user: string, message: string}) => {
+        this.messageArray.push(data);
+        if (this.room) {
+          setTimeout( () => {
+            this.storageArray = this.chatService.getStorage();
+            //@ts-ignore
+            const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
+            //@ts-ignore
+            this.messageArray = this.storageArray[storeIndex].chats;
+          }, 500);
         }
+      });
+
+  }
+
+  selectUserHandler(password: string): void {
+    this.selectedUser = this.userList.find(user => user.password === password);
+    this.room = this.selectedUser.room[this.currentUser.id];
+    this.messageArray = [];
+
+    this.storageArray = this.chatService.getStorage();
+    // @ts-ignore
+    const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
+
+    if (storeIndex > -1) {
+      // @ts-ignore
+      this.messageArray = this.storageArray[storeIndex].chats;
+    }
+
+    // @ts-ignore
+    this.join(this.currentUser.name, this.room);
+  }
+
+  join(username: string, room: string): void {
+    this.chatService.joinRoom({user: username, room: room});
+  }
+
+  sendMessage()
+  {
+    this.chatService.sendMessage({user:this.user, room:this.room, message:this.messageText});
+
+    this.storageArray = this.chatService.getStorage();
+    // @ts-ignore
+    const storeIndex = this.storageArray.findIndex((storage) => storage.room === this.room);
+
+    if (storeIndex > -1) {
+      // @ts-ignore
+      this.storageArray[storeIndex].chats.push({
+        user: this.currentUser.name,
+        message: this.messageText
+      })
+    } else {
+      const updateStorage = {
+        room: this.room,
+        chats: [{
+          user: this.currentUser.name,
+          message: this.messageText
+        }]
+      };
+      // @ts-ignore
+      this.storageArray.push(updateStorage);
+    }
+    this.chatService.setStorage(this.storageArray);
+    this.messageText = '';
+  }
+
+
+  leave(){
+    this.chatService.leaveRoom({user:this.user, room:this.room});
+  }
+
 
 }

frontend/src/app/login/login.component.html

@@ -1,23 +1,28 @@
 <div class="container">
   <div class="modal-header">
-    <h4 class="modal-title">Login</h4>
+    <h4 class="modal-title">Veuillez-vous authentifier :</h4>
   </div>
 
   <div class="modal-body">
     <div class="row">
-      <div class="col-md-12">
-        <div class="form-group">
+      <div class="col-md-10">
+        <div class="form-group mb-0">
           <input type="text"
-                 placeholder="Enter your phone number"
+                 placeholder="Entrez votre login"
                  class="form-control"
-                 [(ngModel)]="phone">
+                 [(ngModel)]="name">
+          <input type="text"
+                 placeholder="Entrez votre password"
+                 class="form-control"
+                 [(ngModel)]="password">
         </div>
       </div>
     </div>
   </div>
 
   <div class="modal-footer">
-    <button class="btn btn-sm btn-primary" (click) = "login()">Login</button>
+    <button class="btn btn-sm btn-primary" (click) = "login()">Connexion Privée</button>
+    <button class="btn btn-sm btn-primary" (click) = "login2()">Connexion Générale</button>
   </div>
 
 </div>

frontend/src/app/login/login.component.ts

@@ -11,8 +11,8 @@ import {AuthService} from "../services/auth/auth.service";
 export class LoginComponent implements OnInit {
 
 
-  public phone = '';
-
+  public password = '';
+  public name = '';
 
   constructor(
     private auth: AuthService,
@@ -27,24 +27,27 @@ export class LoginComponent implements OnInit {
 
 
   login() : void {
-    console.log('1 -Phone :', this.phone);
-    if (this.auth.sendAuthentication(this.phone) === true){
+    console.log(this.name, this.password);
+    if (this.auth.sendAuthentication(this.name, this.password) === true){
+      this.auth.sendAuth(this.password);
       this.router.navigateByUrl('/private');
     } else {
       console.log("error");
     }
   }
 
+  login2() : void {
+    console.log(this.name, this.password);
+    if (this.auth.sendAuthentication(this.name, this.password) === true){
+      this.auth.sendAuth(this.password);
+      this.router.navigateByUrl('/general');
+    } else {
+      console.log("error");
+    }
+  }
+
 }
 
 
 
 
-
-
-
-
-
-
-
-

frontend/src/app/private/private.component.html

@@ -1,17 +1,17 @@
-<div class="container-fluid" *ngIf="showScreen">
+<div class="container-fluid" >
   <div class="row">
 
     <div class="col-md-4">
 
       <div class="user-list-card">
         <div class="user-card"
-             [ngClass]="{'active' : user?.phone === selectedUser?.phone}"
+             [ngClass]="{'active' : user?.password === selectedUser?.password}"
              *ngFor="let user of userList"
-             (click)="selectUserHandler(user.phone)"
+             (click)="selectUserHandler(user.password)"
         >
           <!---->
 
-          <img src="./assets/image/user.png" height="25" width="25"/>
+          <img src="../../assets/image/user.png" height="25" width="25"/>
           <p class="username">{{user?.name}}</p>
 
         </div>
@@ -40,12 +40,12 @@
             <div class="row">
               <div class="col-md-10">
                 <div class="form-group mb-0">
-                  <input type="text" placeholder="Type a message" class="form-control"
+                  <input type="text" placeholder="Entrez votre message" class="form-control"
                          [(ngModel)]="messageText" (keyup)="$event.keyCode === 13 && sendMessage()"/>
                 </div>
               </div>
               <div class="col-md-2 text-center align-self-center">
-                <button class="btn btn-primary btn-bm px-3 " (click)="sendMessage()">Send</button>
+                <button class="btn btn-primary btn-bm px-3 " (click)="sendMessage()">Envoyer</button>
               </div>
             </div>
 

frontend/src/app/private/private.component.ts

@@ -1,6 +1,7 @@
-import {NgModule, Component, OnInit} from '@angular/core';
+import {NgModule, Component, OnInit, Input} from '@angular/core';
 import {ChatService} from "../services/chat/chat.service";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {AuthService} from "../services/auth/auth.service";
 
 
 @Component({
@@ -9,11 +10,13 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
   styleUrls: ['./private.component.scss']
 })
 export class PrivateComponent implements OnInit {
+
   public userList = [
     {
       id: 1,
       name: 'Yuki Vachot',
-      phone: '0608020103',
+      login: 'yuki',
+      password: 'vachot1',
       roomId: {
         2: 'room-1',
         3: 'room-2',
@@ -23,7 +26,8 @@ export class PrivateComponent implements OnInit {
     {
       id: 2,
       name: 'Wilfried Vallee',
-      phone: '0604080701',
+      login: 'wilfried',
+      password: 'vallee2',
       roomId: {
         1: 'room-1',
         3: 'room-4',
@@ -33,7 +37,8 @@ export class PrivateComponent implements OnInit {
     {
       id: 3,
       name: 'Khai Phan',
-      phone: '0603050960',
+      login: 'khai',
+      password: 'phan3',
       roomId: {
         1: 'room-2',
         2: 'room-4',
@@ -53,7 +58,7 @@ export class PrivateComponent implements OnInit {
   public showScreen: boolean;
 
   // @ts-ignore
-  public phone: string;
+  public password: string;
   // @ts-ignore
   public currentUser;
   // @ts-ignore
@@ -62,11 +67,13 @@ export class PrivateComponent implements OnInit {
 
 
   constructor(
+    private Auth: AuthService,
     private chatService: ChatService,
 
   ) {
-
-
+    this.currentUser = this.Auth.sendAuth(this.currentUser);
+    this.userList = this.userList.filter((user) => user.password !== this.currentUser.password.toString());
+    console.log(this.userList);
   }
 
   ngOnInit(): void {
@@ -86,8 +93,8 @@ export class PrivateComponent implements OnInit {
 
   }
 
-  selectUserHandler(phone: string): void {
-    this.selectedUser = this.userList.find(user => user.phone === phone);
+  selectUserHandler(password: string): void {
+    this.selectedUser = this.userList.find(user => user.password === password);
     this.roomId = this.selectedUser.roomId[this.currentUser.id];
     this.messageArray = [];
 
@@ -140,4 +147,3 @@ export class PrivateComponent implements OnInit {
   }
 
 }
-

frontend/src/app/services/auth/auth.service.ts

@@ -8,29 +8,28 @@ import {Observable} from "rxjs";
 })
 
 export class AuthService {
-  // @ts-ignore
+
   // @ts-ignore
   public roomId: string;
   // @ts-ignore
-  public messageText: string;
-  public messageArray: {user: string, message: string}[] = [];
-  private storageArray = [];
+  public name: string;
+  // @ts-ignore
+  public login: string;
 
   // @ts-ignore
   public showScreen: boolean;
 
   // @ts-ignore
-  public phone: string;
+  public password: string;
   // @ts-ignore
   public currentUser;
-  // @ts-ignore
-  public selectedUser;
 
   public userList = [
     {
       id: 1,
       name: 'Yuki Vachot',
-      phone: '0608020103',
+      login: 'yuki',
+      password: 'vachot1',
       roomId: {
         2: 'room-1',
         3: 'room-2',
@@ -40,7 +39,8 @@ export class AuthService {
     {
       id: 2,
       name: 'Wilfried Vallee',
-      phone: '0604080701',
+      login: 'wilfried',
+      password: 'vallee2',
       roomId: {
         1: 'room-1',
         3: 'room-4',
@@ -50,7 +50,8 @@ export class AuthService {
     {
       id: 3,
       name: 'Khai Phan',
-      phone: '0603050960',
+      login: 'khai',
+      password: 'phan3',
       roomId: {
         1: 'room-2',
         2: 'room-4',
@@ -60,20 +61,23 @@ export class AuthService {
   ];
 
   constructor() {}
-  sendAuthentication(phone: string): boolean {
-    this.phone = phone;
-    this.currentUser = this.userList.find(user => user.phone === this.phone.toString());
-    this.userList = this.userList.filter((user) => user.phone !== this.phone.toString());
-    //console.log("2 -", this.currentUser.phone);
-    console.log("3 -", this.phone);
+
+  sendAuthentication(login:string, password: string): boolean {
+    this.login = login;
+    this.password = password;
+    this.currentUser = this.userList.find(user => user.password === this.password.toString());
+    this.userList = this.userList.filter((user) => user.password !== this.password.toString());
     if(this.currentUser) {
       this.showScreen = true;
-      console.log("user : TRUE", this.phone.toString());
     } else {
-      console.log("error user", this.phone.toString());
+      console.log("Password Error", this.password.toString());
     }
     return this.showScreen ;
   }
 
+  sendAuth(password: string): any {
+    this.password = password;
+    return this.currentUser ;
+  }
 
 }

frontend/src/app/services/chat/chat.service.ts

@@ -35,6 +35,34 @@ export class ChatService {
     });
   }
 
+  newUserJoined()
+  {
+    let observable = new Observable<{user:String, message:String}>(observer=>{
+      this.socket.on('new user joined', (data)=>{
+        observer.next(data);
+      });
+      return () => {this.socket.disconnect();}
+    });
+
+    return observable;
+  }
+
+  // @ts-ignore
+  leaveRoom(data){
+    this.socket.emit('leave',data);
+  }
+
+  userLeftRoom(){
+    let observable = new Observable<{user:String, message:String}>(observer=>{
+      this.socket.on('left room', (data)=>{
+        observer.next(data);
+      });
+      return () => {this.socket.disconnect();}
+    });
+
+    return observable;
+  }
+
   getStorage() {
     const storage = localStorage.getItem('chats');
     return storage ? JSON.parse(storage) : [];