connect backend with fronted (#235)

* feat: login ist nun möglich und abmeldung

* add authService

* connect task from backen to frontend

* feat: start task

* feat add streaks

* feat: Nutzerinfos laden und anzeigen

* change reverse proxy target

* fix bugs

* fix tests

* fix loader

backend/package.json

@@ -66,7 +66,7 @@
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.0",
     "ts-loader": "^9.4.3",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.1.3"
   },

frontend/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "verify": "npm run build && npm run test:ci",
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.js",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",

frontend/proxy.conf.js

@@ -0,0 +1,15 @@
+// Code for proxying requests to the backend server
+const PROXY_CONFIG = [
+      {
+        context: [
+          "/api/"
+        ],
+        target: "https://staging.duo-gradus.de",
+        changeOrigin: true,
+        secure: false,
+
+
+      }
+    ];
+
+    module.exports = PROXY_CONFIG;

frontend/src/app/app-routing.module.ts

@@ -10,17 +10,17 @@ import { ProfilepageComponent } from './components/pages/profilepage/profilepage
 import { SettingspageComponent } from './components/pages/settingspage/settingspage.component';
 import { AddfriendpageComponent } from './components/pages/addfriendpage/addfriendpage.component';
 import { FriendpageComponent } from './components/pages/friendpage/friendpage.component';
+import { authGuard } from './auth.guard';
 
 
 const routes: Routes = [
-  { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'home', component: LandingpageComponent },
-  { path: 'main', component: MainpageComponent },
-  { path: 'ranking', component: RankingPageComponent},
-  { path: 'profile', component: ProfilepageComponent, data: { animation: 'one' }},
-  { path: 'settings', component: SettingspageComponent, data: { animation: 'two' }},
-  { path: 'friends', component: FriendpageComponent, data: { animation: 'one' }},
-  { path: 'addfriend', component: AddfriendpageComponent, data : { animation: 'two' }},
+  { path: 'main', component: MainpageComponent , canActivate: [authGuard] },
+  { path: 'ranking', component: RankingPageComponent , canActivate: [authGuard]},
+  { path: 'profile', component: ProfilepageComponent, data: { animation: 'one' } , canActivate: [authGuard]},
+  { path: 'settings', component: SettingspageComponent, data: { animation: 'two' } , canActivate: [authGuard]},
+  { path: 'friends', component: FriendpageComponent, data: { animation: 'one' } , canActivate: [authGuard]},
+  { path: 'addfriend', component: AddfriendpageComponent, data : { animation: 'two' }, canActivate: [authGuard]},
   {
     path: 'auth',
     component: AuthenticationpageComponent,

frontend/src/app/app.module.ts

@@ -3,6 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -71,12 +73,16 @@ import { provideRouter, withViewTransitions } from '@angular/router';
     FriendCardComponent,
     DeleteDialogComponent,
     UserfilterPipe,
+
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     FormsModule,
+    HttpClientModule
+
+
   ],
   providers: [provideAnimations()],
   bootstrap: [AppComponent],

frontend/src/app/auth.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

frontend/src/app/auth.guard.ts

@@ -0,0 +1,17 @@
+import { CanActivateFn } from '@angular/router';
+
+export const authGuard: CanActivateFn = (route, state) => {
+
+  /**
+   * Check if the user is logged in
+   * if not, redirect to login page
+   */
+
+  const token = localStorage.getItem('credentials');
+  if (token) {
+    return true;
+  } else {
+    window.location.href = '/login';
+    return false;
+  }
+};

frontend/src/app/components/atoms/challenge-button/challenge-button.component.html

@@ -10,8 +10,9 @@
 <app-challenge-dialog
   [trigger]="buttonIsclicked"
   [num]="num"
-  [steps]="steps"
-  [time]="time"
+  [title]="title"
+  [description]= "description"
+  [id]="id"
   class="wipe-up"
   (closeDialog)="closeDialog()"
 ></app-challenge-dialog>

frontend/src/app/components/atoms/challenge-button/challenge-button.component.spec.ts

@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ChallengeButtonComponent } from './challenge-button.component';
 import { ChallengeDialogComponent } from 'app/components/organisms/challenge-dialog/challenge-dialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClient } from '@angular/common/http';
+import { HttpHandler } from '@angular/common/http';
 
 describe('ChallengeButtonComponent', () => {
   let component: ChallengeButtonComponent;
@@ -12,9 +13,11 @@ describe('ChallengeButtonComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [ChallengeButtonComponent, ChallengeDialogComponent],
       imports: [BrowserAnimationsModule],
+      providers: [HttpClient, HttpHandler]
+
     })
     .compileComponents();
-    
+
     fixture = TestBed.createComponent(ChallengeButtonComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -30,6 +33,6 @@ describe('ChallengeButtonComponent', () => {
     expect(routerOutlet).toBeTruthy();
   });
 
- 
+
 
 });

frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts

@@ -8,8 +8,9 @@ import { EventService } from 'app/services/event.service';
 })
 export class ChallengeButtonComponent {
   @Input() num: number = 1;
-  @Input() steps: number = 0;
-  @Input() time: number = 0;
+  @Input() id: string = "";
+  @Input() title: string = "";
+  @Input() description: string = "";
   @Output() toggleStopButton = new EventEmitter<void>();
   buttonIsclicked: boolean = false;
 

frontend/src/app/components/atoms/inputfield/inputfield.component.ts

@@ -9,4 +9,12 @@ export class InputfieldComponent {
   @Input() typetext: string = 'Hallo';
   @Input() placeholder: string = '';
   @Input() labeltext: string = '';
+  @Input() nameOfNgModel: string = '';
+
+
+
+
+
+
+
 }

frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html

@@ -6,16 +6,8 @@ <h3>Training {{ num }}</h3>
       <button class="done-button" (click)="triggerEvent()">Done</button>
     </div>
     <div class="training-infos">
-      <ul>
-        <li class="steps"><span class="span-1">Steps:</span></li>
-        <li class="time"><span class="span-1">Time:</span></li>
-        <li class="points"><span class="span-1">Points:</span></li>
-      </ul>
-      <ul>
-        <li>{{ steps }}</li>
-        <li>{{ time }}</li>
-        <li>{{ points }}</li>
-      </ul>
+      <h3>{{title}}</h3>
+      <p>{{description}}</p>
     </div>
     <button class="start-button" (click)="startEvent()">Start Training</button>
   </div>

frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.scss

@@ -57,10 +57,14 @@
   }
 
   .training-infos {
+    margin-top: 30px;
+    margin-bottom: 30px;
     display: flex;
-    justify-content: start;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
     width: 100%;
-    margin-left: 130px;
+
     ul {
       margin-top: 30px;
       font-size: 12px;

frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { HttpClient } from '@angular/common/http';
+import { HttpHandler } from '@angular/common/http';
 import { ChallengeDialogComponent } from './challenge-dialog.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -11,6 +12,8 @@ describe('ChallengeDialogComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [ChallengeDialogComponent],
       imports: [BrowserAnimationsModule],
+      providers: [HttpClient, HttpHandler]
+
     }).compileComponents();
 
     fixture = TestBed.createComponent(ChallengeDialogComponent);

frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.ts

@@ -6,9 +6,8 @@ import {
   animate,
   transition,
 } from '@angular/animations';
-import { ChallengeButtonComponent } from 'app/components/atoms/challenge-button/challenge-button.component';
 import { EventService } from 'app/services/event.service';
-import { timeout } from 'rxjs';
+import { MainpageService } from 'app/services/mainpage.service';
 
 @Component({
   selector: 'app-challenge-dialog',
@@ -18,11 +17,11 @@ import { timeout } from 'rxjs';
     trigger('openClose', [
       state('open', style({
         height: '45vh',
-       
+
       })),
       state('closed', style({
-        height: '0', 
-  
+        height: '0',
+
       })),
       transition('open <=> closed', [
         animate('0.1s')
@@ -32,14 +31,14 @@ import { timeout } from 'rxjs';
 })
 export class ChallengeDialogComponent {
   @Input() num: number = 1;
-  @Input() steps: number = 0;
-  @Input() time: number = 0;
-  @Input() points: number = 0;
+  @Input() id: string = "";
+  @Input() title: string = "";
+  @Input() description: string = "";
   @Output() closeDialog = new EventEmitter<void>();
-  @Input() trigger: boolean = false; 
+  @Input() trigger: boolean = false;
 
 
-  constructor(public eventservice:EventService) 
+  constructor(public eventservice:EventService, public mainpageService: MainpageService)
   {
       this.eventservice = eventservice;
   }
@@ -50,11 +49,11 @@ export class ChallengeDialogComponent {
 
   startEvent()
   {
+    this.mainpageService.beginAndStopTask(this.id);
     this.closeDialog.emit();
-    this.eventservice.steps = this.steps; 
-    this.eventservice.time = this.time; 
+    this.eventservice.steps = this.extractNumberFromSentence(this.description);
     this.eventservice.disabled = true;
-    this.eventservice.reduceTimer(); 
+    //this.eventservice.reduceTimer();
     this.eventservice.toggleStopButton = true;
     this.eventservice.snackbarText = "Training has started"
     this.eventservice.snackbarBackgroundColor = "#04b02f"
@@ -68,9 +67,28 @@ export class ChallengeDialogComponent {
 
   }
 
+  /**
+   * Extracts number from sentence
+   * @param sentence
+   * @returns excracted number from sentence
+   */
+
+  extractNumberFromSentence(sentence: string): string  {
+    const regex = /\b\d{1,3}(\.\d{3})*\b/g;
+  const match = sentence.match(regex);
+
+  if (match) {
+    const numberStringWithDots = match[0];
+    const numberString = numberStringWithDots.replace(/\./g, '');
+    return numberString;
+  } else {
+    return "0";
+  }
+    }
+
+
+
 
 
-
 
-
 }

frontend/src/app/components/organisms/loginform/loginform.component.html

@@ -3,18 +3,12 @@
   <div class="center">
     <h2 class="form-title" id="login">Login</h2>
     <div class="form-holder">
-      <app-inputfield
-        [labeltext]="'Username'"
-        [typetext]="'text'"
-        [placeholder]="'Enter Username'"
-      ></app-inputfield>
+
+      <input class="input" type="text" placeholder="Enter Username" [(ngModel)]="username"/>
+
       <div class="password">
-        <app-inputfield
-          [labeltext]="'Password'"
-          [typetext]="passwordFieldType"
-          [placeholder]="'Enter Password'"
-        >
-        </app-inputfield>
+        <input class="input" type="password" placeholder="Enter Password" [(ngModel)]="password"/>
+
         <span class="eyeimg" (click)="toggleType()"
           ><img class="img" [src]="img || '../../../../assets/ausblenden.png' "
         /></span>

frontend/src/app/components/organisms/loginform/loginform.component.scss

@@ -110,3 +110,21 @@ p.create-account {
     }
   }
 }
+
+.input {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  padding: 8px 15px;
+  font-size: 12px;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+  &::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+}