Feature/websockets and dev center

.devcontainer/devcontainer.json

@@ -37,6 +37,7 @@
         "formulahendry.auto-rename-tag",
         "donjayamanne.githistory",
         "oderwat.indent-rainbow",
+        "Postman.postman-for-vscode",
         "GitHub.copilot"
       ],
       "settings": {

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "johnpapa.vscode-peacock",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "postman.postman-for-vscode"
   ]
 }

.vscode/settings.json

@@ -4,6 +4,7 @@
   "files.associations": {
     "*.json": "json"
   },
+  "files.autoSave": "off",
   "workbench.colorTheme": "Andromeda Bordered",
   "indentRainbow.indicatorStyle": "light",
   "indentRainbow.colors": [
@@ -12,6 +13,7 @@
     "rgba(255,127,255,0.3)",
     "rgba(79,236,236,0.3)"
   ],
+  "workbench.editor.pinnedTabsOnSeparateRow": true,
   "indentRainbow.lightIndicatorStyleLineWidth": 2,
   "gitlens.statusBar.enabled": false,
   "peacock.showColorInStatusBar": false,
@@ -53,6 +55,7 @@
   "scss.validate": false,
   "stylelint.validate": [ "css", "scss" ],
   "cSpell.words": [
+    "achieveebeet",
     "achievibit",
     "adpyke",
     "autoimport",
@@ -90,6 +93,7 @@
     "ritwickdey",
     "Smee",
     "steoates",
+    "Streamable",
     "stylelint",
     "stylelintrc",
     "thatkookooguy",

client/package.json

@@ -24,6 +24,7 @@
     "beercss": "^3.7.10",
     "material-dynamic-colors": "^1.1.2",
     "rxjs": "~7.8.0",
+    "socket.io-client": "^4.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

client/proxy.conf.json

@@ -10,5 +10,12 @@
     "changeOrigin": true,
     "secure": false,
     "logLevel": "debug"
+  },
+  "/socket.io": {
+    "target": "http://localhost:10102/",
+    "ws": true,
+    "changeOrigin": true,
+    "secure": false,
+    "logLevel": "debug"
   }
 }

client/src/app/app.component.ts

@@ -1,8 +1,9 @@
-import { combineLatest } from 'rxjs';
+import { combineLatest, Subscription } from 'rxjs';
 import { NgFor, NgIf } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
+import { SocketService } from './services/socket.service';
 import { AppService } from './app.service';
 
 @Component({
@@ -12,12 +13,33 @@ import { AppService } from './app.service';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   loggedInUser: any;
 
+  private messageSubscription: Subscription;
+  messages: string[] = [];
+  newMessage: string = '';
+
   constructor(
-    private appService: AppService
-  ) {}
+    private appService: AppService,
+    private socketService: SocketService
+  ) {
+    this.messageSubscription = this.socketService
+      .on('ping')
+      .subscribe((data) => {
+        // this.messages.push(data.text);
+        console.log('Received ping message:', data);
+      });
+  }
+
+  sendMessage() {
+    this.socketService.emit('message', { text: this.newMessage });
+    this.newMessage = '';
+  }
+
+  ngOnDestroy() {
+    this.messageSubscription.unsubscribe();
+  }
 
   ngOnInit(): void {
     const loggedInUserObs = this

client/src/app/services/socket.service.ts

@@ -0,0 +1,31 @@
+import { Observable } from 'rxjs';
+import { io, Socket } from 'socket.io-client';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SocketService {
+  private socket: Socket;
+
+  constructor() {
+    this.socket = io(window.location.origin);
+  }
+
+  emit(event: string, data: any) {
+    this.socket.emit(event, data);
+  }
+
+  on(event: string): Observable<any> {
+    return new Observable((observer) => {
+      this.socket.on(event, (data) => {
+        observer.next(data);
+      });
+
+      // Handle cleanup
+      return () => {
+        this.socket.off(event);
+      };
+    });
+  }
+}

e2e/example.spec.ts

@@ -1,18 +1,43 @@
 import { expect, test } from '@playwright/test';
 
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test('achievibit test', async ({ page }) => {
+  await page.goto('http://localhost:10101');
 
   // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
+  await expect(page).toHaveTitle(/achievibit/);
+
+  await expect(page.getByRole('heading', { name: 'achievibit' })).toBeVisible();
+});
+
+test('login with github', async ({ page }) => {
+  await page.goto('http://localhost:10101');
+
+  // Click the login with github button.
+  await page.getByRole('link', { name: 'Login with GitHub' }).click();
+
+  // expect to be redirected to github login page
+  await expect(page).toHaveURL(/github/);
+  await expect(page.getByText('Sign in to GitHub to continue')).toBeVisible();
+});
+
+test('login with gitlab', async ({ page }) => {
+  await page.goto('http://localhost:10101');
+
+  // Click the login with gitlab button.
+  await page.getByRole('link', { name: 'Login with GitLab' }).click();
+
+  // expect to be redirected to gitlab login page
+  await expect(page).toHaveURL(/gitlab/);
+  await expect(page.getByRole('heading', { name: 'Verify you are human by' })).toBeVisible();
 });
 
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+test('login with bitbucket', async ({ page }) => {
+  await page.goto('http://localhost:10101');
 
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
+  // Click the login with bitbucket button.
+  await page.getByRole('link', { name: 'Login with Bitbucket' }).click();
 
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+  // expect to be redirected to bitbucket login page
+  await expect(page).toHaveURL(/bitbucket/);
+  await expect(page.getByTestId('username')).toBeVisible();
 });