Merge the current state of the Frontend into the main branch (#158)

* chore: componentes Ordner hinzugefügt

* chore: Styling-Dateien hinzugefügt

* style: Farben und Font hinzugefügt

* style: Standard Styles hinzugefügt

* style: Farbe hinzugefügt

* created all components for the main page (#143)

* feat: Header und Roadmap erstellt

* feat: tab text verändert

* fix: add baseUrl to tsconfig

* feat: challengedialog implemented

* feat: add angular animations for challengerdialog

* fix: update animation speed

* fix: update animation duration

* feat: function to start the training

* feat: implemented Timer and snackbar

* feat: loginpage hinzugefügt

* login and sign in componten design completed (#151)

* style: upgrade login and sign up page

* feat: loader hinzugefügt

* Redesign of the loginpage and formatting code (#156)

* style: upgrade login and sign up page

* feat: loader hinzugefügt

* feat: implemented landing page

* format code

* format code

* fix: Fehler entfernt

---------

Co-authored-by: huber <hubertjustin01@gmail.com>
Co-authored-by: Justin Hubert <135236159+Jstn2004@users.noreply.github.com>

frontend/angular.json

@@ -33,7 +33,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
+              "src/Logo_1_black.ico",
               "src/assets"
             ],
             "styles": [

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

@@ -1,10 +1,29 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { MainpageComponent } from './components/pages/mainpage/mainpage.component';
+import { AuthenticationpageComponent } from './components/pages/authenticationpage/authenticationpage.component';
+import { LoginformComponent } from './components/organisms/loginform/loginform.component';
+import { SignupformComponent } from './components/organisms/signupform/signupform.component';
+import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
 
-const routes: Routes = [];
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'home', component: LandingpageComponent },
+  { path: 'main', component: MainpageComponent },
+  {
+    path: 'auth',
+    component: AuthenticationpageComponent,
+    children: [
+      { path: 'signup', component: SignupformComponent },
+      { path: 'login', component: LoginformComponent },
+    ],
+  },
+  { path: '**', redirectTo: '/home' },
+]
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

frontend/src/app/app.component.spec.ts

@@ -5,12 +5,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
@@ -30,6 +26,8 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Hello, frontend'
+    );
   });
 });

frontend/src/app/app.module.ts

@@ -1,18 +1,49 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {provideAnimations} from '@angular/platform-browser/animations'
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { MainpageComponent } from './components/pages/mainpage/mainpage.component';
+import { StatisticHeaderComponent } from './components/organisms/statistic-header/statistic-header.component';
+import { RoadmapComponent } from './components/organisms/roadmap/roadmap.component';
+import { ChallengeButtonComponent } from './components/atoms/challenge-button/challenge-button.component';
+import { ChallengeDialogComponent } from './components/organisms/challenge-dialog/challenge-dialog.component';
+import { TimerComponent } from './components/atoms/timer/timer.component';
+import { TimerPipe } from './pipes/timer.pipe';
+import { StopbuttonComponent } from './components/atoms/stopbutton/stopbutton.component';
+import { ToastComponent } from './components/atoms/toast/toast.component';
+import { AuthenticationpageComponent } from './components/pages/authenticationpage/authenticationpage.component';
+import { LoginformComponent } from './components/organisms/loginform/loginform.component';
+import { InputfieldComponent } from './components/atoms/inputfield/inputfield.component';
+import { SignupformComponent } from './components/organisms/signupform/signupform.component';
+import { LoaderComponent } from './components/atoms/loader/loader.component';
+import { LandingpageComponent } from './components/pages/landingpage/landingpage.component';
+
 
 @NgModule({
   declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
+    AppComponent,
+    MainpageComponent,
+    StatisticHeaderComponent,
+    RoadmapComponent,
+    ChallengeButtonComponent,
+    ChallengeDialogComponent,
+    TimerComponent,
+    TimerPipe,
+    StopbuttonComponent,
+    ToastComponent,
+    AuthenticationpageComponent,
+    LoginformComponent,
+    InputfieldComponent,
+    SignupformComponent,
+    LoaderComponent,
+    LandingpageComponent,
+
   ],
-  providers: [],
-  bootstrap: [AppComponent]
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
+  providers: [provideAnimations()],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -0,0 +1,17 @@
+<button
+  (click)="challengeButtonIsClicked()"
+  class="button-19"
+  role="button"
+  [disabled]="eventService.disabled"
+>
+  <span id="button-top">Training</span><br /><span>{{ num }}</span>
+</button>
+
+<app-challenge-dialog
+  [trigger]="buttonIsclicked"
+  [num]="num"
+  [steps]="steps"
+  [time]="time"
+  class="wipe-up"
+  (closeDialog)="closeDialog()"
+></app-challenge-dialog>

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

@@ -0,0 +1,134 @@
+.button-19 {
+  appearance: button;
+  background-color: #a0a0a0ef;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 5px;
+  box-sizing: border-box;
+  color: var(--font);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 13px 16px;
+  text-align: center;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  transition: filter 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 80px;
+  height: 80px;
+  margin-top: 15px;
+}
+
+.button-19:after {
+  background-clip: padding-box;
+  background-color: var(--white);
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 4px;
+  bottom: -4px;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.button-19:main,
+.button-19:focus {
+  user-select: auto;
+}
+
+.button-19:hover:not(:disabled) {
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
+}
+
+.button-19:disabled {
+  cursor: auto;
+}
+
+.button-19:active {
+  border-width: 4px 0 0;
+  background: none;
+}
+
+#button-top {
+  font-weight: 100;
+  font-size: 10px;
+}
+
+.button-19-false {
+  appearance: button;
+  background-color: #a0a0a0;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 5px;
+  box-sizing: border-box;
+  color: var(--font);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 13px 16px;
+  text-align: center;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  transition: filter 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 80px;
+  height: 80px;
+  margin-top: 15px;
+}
+
+.button-19-false:after {
+  background-clip: padding-box;
+  background-color: #a0a0a0;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 4px;
+  bottom: -4px;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.button-19-false:main,
+.button-19-false:focus {
+  user-select: auto;
+}
+
+.button-19-false:hover:not(:disabled) {
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
+}
+
+.button-19-false:disabled {
+  cursor: auto;
+}
+
+.button-19-false:active {
+  border-width: 4px 0 0;
+  background: none;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChallengeButtonComponent } from './challenge-button.component';
+
+describe('ChallengeButtonComponent', () => {
+  let component: ChallengeButtonComponent;
+  let fixture: ComponentFixture<ChallengeButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChallengeButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChallengeButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { EventService } from 'app/services/event.service';
+
+@Component({
+  selector: 'app-challenge-button',
+  templateUrl: './challenge-button.component.html',
+  styleUrl: './challenge-button.component.scss',
+})
+export class ChallengeButtonComponent {
+  @Input() num: number = 1;
+  @Input() steps: number = 0;
+  @Input() time: number = 0;
+  @Output() toggleStopButton = new EventEmitter<void>();
+  buttonIsclicked: boolean = false;
+
+  constructor(public eventService: EventService) {
+    this.eventService = eventService;
+  }
+
+  challengeButtonIsClicked() {
+    this.buttonIsclicked = true;
+    this.eventService.disabled = true;
+  }
+
+  closeDialog() {
+    this.buttonIsclicked = false;
+    this.eventService.disabled = false;
+  }
+}

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

@@ -0,0 +1,3 @@
+
+<input class="input" type="{{ typetext }}" placeholder="{{ placeholder }}" />
+

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

@@ -0,0 +1,20 @@
+.input {
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  padding: 8px 15px;
+  border-bottom: 1px solid #eee;
+  width: 80%;
+  font-size: 12px;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+  &::-webkit-input-placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
+

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputfieldComponent } from './inputfield.component';
+
+describe('InputfieldComponent', () => {
+  let component: InputfieldComponent;
+  let fixture: ComponentFixture<InputfieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [InputfieldComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputfieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-inputfield',
+  templateUrl: './inputfield.component.html',
+  styleUrl: './inputfield.component.scss',
+})
+export class InputfieldComponent {
+  @Input() typetext: string = 'Hallo';
+  @Input() placeholder: string = '';
+  @Input() labeltext: string = '';
+}

frontend/src/app/components/atoms/loader/loader.component.html

@@ -0,0 +1,2 @@
+
+<span class="loader"></span>