diff --git a/backend/service-message/server.js b/backend/service-message/server.js index 9798225..c436ca9 100644 --- a/backend/service-message/server.js +++ b/backend/service-message/server.js @@ -82,6 +82,13 @@ io.on('connection',socket => { socket.on("disconnect", function() { console.log(`${getUsername} left the chat.`); + socket.broadcast.emit('general',[{ + username: 'Server', + date: new Date(), + channel: 'general', + message: `${getUsername} left the chat.` + }]); + }); } }); diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index d5c32ae..91049af 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,16 +1,16 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import {LoginComponent} from "./login/login.component"; -import {GeneralComponent} from "./general/general.component"; +import {ChatComponent} from "./chat/chat.component"; const routes: Routes = [ { - path: 'login', + path: '', component: LoginComponent, }, { - path: 'general', - component: GeneralComponent, + path: 'chat', + component: ChatComponent, } ]; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index ce86a8a..95c1535 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -5,15 +5,19 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; -import { GeneralComponent } from './general/general.component'; import {CommonModule, DatePipe} from "@angular/common"; +import { PrivateComponent } from './private/private.component'; +import { ChatComponent } from './chat/chat.component'; +import { MessageComponent } from './message/message.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, - GeneralComponent + PrivateComponent, + ChatComponent, + MessageComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/general/general.component.html b/frontend/src/app/general/general.component.html deleted file mode 100644 index 21f47dc..0000000 --- a/frontend/src/app/general/general.component.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - Socket.IO chat - - - - -
- -
- - diff --git a/frontend/src/app/general/general.component.scss b/frontend/src/app/general/general.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/app/general/general.component.spec.ts b/frontend/src/app/general/general.component.spec.ts deleted file mode 100644 index 99edc2f..0000000 --- a/frontend/src/app/general/general.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GeneralComponent } from './general.component'; - -describe('GeneralComponent', () => { - let component: GeneralComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GeneralComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(GeneralComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/general/general.component.ts b/frontend/src/app/general/general.component.ts deleted file mode 100644 index 096d68b..0000000 --- a/frontend/src/app/general/general.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {ChatInfo, ChatService} from "../services/chat/chat.service"; -import {environment} from "../../environments/environment"; -import {DatePipe} from "@angular/common"; -import {MessageService} from "../services/message/message.service"; - -@Component({ - selector: 'app-general', - templateUrl: './general.component.html', - styleUrls: ['./general.component.scss'] -}) -export class GeneralComponent implements OnInit { - - private username = sessionStorage.getItem('login'); - private room = 'general'; - public msg = ''; - - // @ts-ignore - @ViewChild('ulMessages') ulMsg: ElementRef; - - - constructor(private chatservice: ChatService, private pipe: DatePipe, private messageservice: MessageService) {} - - ngOnInit() { - console.log('General working'); - this.messageservice.sendMessage(environment.urlCL,'getUsers', {username: this.username}).subscribe( - data => { - if (data.status !== 'ok'){ - console.log(data.data.reason); - } - else{ - console.log(data.data); - } - } - ); - this.chatservice.setUrl(environment.urlCG); - this.chatservice.setRoom(this.room); - this.chatservice.onNewMessage(this.room).subscribe((infos: ChatInfo[]) => { - for(let data of infos){ - if(data !== undefined && data.date !== undefined){ - if(data.username === 'Server'){ - this.ulMsg.nativeElement.insertAdjacentHTML('beforeend', '
  • '+data.message+'
    • '); - } - else{ - this.ulMsg.nativeElement.insertAdjacentHTML('beforeend','
  • ['+this.pipe.transform(data.date, 'dd/MM/yyyy HH:MM:ss')+'] '+data.username+' : '+data.message+'
    • '); - } - } - } - window.scrollTo(0, document.body.scrollHeight); - }); - } - - sendButtonClick(){ - console.log('Button working'); - if(this.msg && this.username){ - this.chatservice.sendMessage(this.username, this.room, this.msg); - console.log(this.username, this.room, this.msg); - this.msg = ''; - } - } -} diff --git a/frontend/src/app/login/login.component.html b/frontend/src/app/login/login.component.html index 28e356d..aa64ec3 100644 --- a/frontend/src/app/login/login.component.html +++ b/frontend/src/app/login/login.component.html @@ -2,27 +2,21 @@

    Veuillez-vous authentifier :

    - -
    -
    -
    -
    - - +
    +
    +
    +
    +
    + + +
    -
    - -
    - - -
    - +
    + +
    + +
    +
    {{errorMessage}}
    diff --git a/frontend/src/app/login/login.component.ts b/frontend/src/app/login/login.component.ts index b2c0c55..a675c18 100644 --- a/frontend/src/app/login/login.component.ts +++ b/frontend/src/app/login/login.component.ts @@ -20,16 +20,16 @@ export class LoginComponent implements OnInit { } showCredentials(): void { - console.log('Login :', this.login); - console.log('Password :', this.password); + // console.log('Login :', this.login); + // console.log('Password :', this.password); this.auth.sendAuthentication(this.login, this.password).subscribe(data => { this.auth.finalizeAuthentication(data); - if (this.auth.islog === true) { + if (this.auth.islog) { sessionStorage.setItem('login', this.login); - this.router.navigateByUrl('/general'); + this.router.navigateByUrl('/chat'); } else { this.errorMessage = data.data.reason; - console.log(this.errorMessage); + //console.log(this.errorMessage); } }); diff --git a/frontend/src/app/services/chat/chat.service.ts b/frontend/src/app/services/chat/chat.service.ts index aee3fcb..7245b07 100644 --- a/frontend/src/app/services/chat/chat.service.ts +++ b/frontend/src/app/services/chat/chat.service.ts @@ -49,6 +49,11 @@ export class ChatService { }); } + leaveRoom(): void { + // @ts-ignore + this.socket?.disconnect(); + } + onNewMessage(room: string): Observable { return new Observable(observer => { // @ts-ignore diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 5e6c778..057c44d 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -12,7 +12,8 @@ body { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); height: calc(100vh - 100px); - padding: 10px; + padding: 0; + overflow-y: auto; .user-card { display: flex; @@ -28,6 +29,7 @@ body { font-weight: 500; margin-bottom: 0; display: flex; + margin-left: 5px; justify-content: center; align-items: center; } @@ -64,11 +66,11 @@ body { } .chat-body { - background-image: url(./assets/image/user.png); + background-color: white; background-repeat: no-repeat; background-size: cover; background-position: center center; - height: calc(100vh - 125px); + height: calc(89vh - 125px); overflow-y: auto; .message-container {