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
SE-TINF22B2 · May 3, 2024 · 34d0b6f · 34d0b6f
1 parent 0424d6e
commit 34d0b6f
Show file tree

Hide file tree

Showing 42 changed files with 628 additions and 320 deletions.
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
@@ -4,17 +4,27 @@ import { MainpageComponent } from './components/pages/mainpage/mainpage.componen
 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';
+import { FriendpageComponent } from './components/pages/friendpage/friendpage.component';
 
 const routes: Routes = [
-  {path:"main", component: MainpageComponent},
-  {path:"auth", component : AuthenticationpageComponent, children : [
-    {path: "signup", component: SignupformComponent},
-    {path: "login", component: LoginformComponent}
-  ]}
-];
+  { 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: 'friends', component: FriendpageComponent},
+  { path: '**', redirectTo: '/home' },
+
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,3 +1,3 @@
 <router-outlet></router-outlet>
 
-<app-toast></app-toast>
+<app-toast></app-toast>
diff --git a/frontend/src/app/app.component.spec.ts b/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'
+    );
   });
 });
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -19,6 +19,9 @@ import { LoginformComponent } from './components/organisms/loginform/loginform.c
 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';
+import { FriendpageComponent } from './components/pages/friendpage/friendpage.component';
+
 
 @NgModule({
   declarations: [
@@ -37,6 +40,9 @@ import { LoaderComponent } from './components/atoms/loader/loader.component';
     InputfieldComponent,
     SignupformComponent,
     LoaderComponent,
+    LandingpageComponent,
+    FriendpageComponent,
+
   ],
   imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   providers: [provideAnimations()],

diff --git a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.html
@@ -8,7 +8,7 @@
 </button>
 
 <app-challenge-dialog
-  [trigger] = "buttonIsclicked"
+  [trigger]="buttonIsclicked"
   [num]="num"
   [steps]="steps"
   [time]="time"

diff --git a/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts b/frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts
@@ -1,24 +1,20 @@
-import { Component, Input, Output, EventEmitter} from '@angular/core';
+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;
+
+  constructor(public eventService: EventService) {
+    this.eventService = eventService;
   }
 
   challengeButtonIsClicked() {

diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.html b/frontend/src/app/components/atoms/inputfield/inputfield.component.html
@@ -1,2 +1,3 @@
 
-    <input class="input" type="{{typetext}}" placeholder="{{ placeholder }}" >
+<input class="input" type="{{ typetext }}" placeholder="{{ placeholder }}" />
+
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss
@@ -1,19 +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;
+  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);
+  }
+}
 
-    &:last-child {
-        border-bottom: 0;
-    }
-    &::-webkit-input-placeholder {
-        color: rgba(0,0,0,0.4);
-    }
-}
diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts b/frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts
@@ -8,10 +8,9 @@ describe('InputfieldComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [InputfieldComponent]
-    })
-    .compileComponents();
-
+      declarations: [InputfieldComponent],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(InputfieldComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.ts b/frontend/src/app/components/atoms/inputfield/inputfield.component.ts
@@ -3,12 +3,10 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'app-inputfield',
   templateUrl: './inputfield.component.html',
-  styleUrl: './inputfield.component.scss'
+  styleUrl: './inputfield.component.scss',
 })
 export class InputfieldComponent {
-  @Input() typetext: string = "Hallo";
-  @Input() placeholder: string = ""; 
-  @Input() labeltext:  string = ""; 
-
-
+  @Input() typetext: string = 'Hallo';
+  @Input() placeholder: string = '';
+  @Input() labeltext: string = '';
 }
diff --git a/frontend/src/app/components/atoms/loader/loader.component.html b/frontend/src/app/components/atoms/loader/loader.component.html
@@ -1 +1,2 @@
-<span class="loader"></span>
+
+<span class="loader"></span>
diff --git a/frontend/src/app/components/atoms/loader/loader.component.scss b/frontend/src/app/components/atoms/loader/loader.component.scss
@@ -1,42 +1,51 @@
 .loader {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    display: block;
-    margin:15px auto;
-    position: relative;
-    color: #FFF;
-    left: -100px;
-    box-sizing: border-box;
-    animation: shadowRolling 2s linear infinite;
-  }
-
-  @keyframes shadowRolling {
-    0% {
-      box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    12% {
-      box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    25% {
-      box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
-    }
-    36% {
-      box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
-    }
-    50% {
-      box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
-    }
-    62% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
-    }
-    75% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
-    }
-    87% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
-    }
-    100% {
-      box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
-    }
-  }
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: #fff;
+  left: -100px;
+  box-sizing: border-box;
+  animation: shadowRolling 2s linear infinite;
+}
+
+@keyframes shadowRolling {
+  0% {
+    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  12% {
+    box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
+  }
+  25% {
+    box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0),
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  36% {
+    box-shadow: 120px 0 white, 110px 0 white, 100px 0 white,
+      0px 0 rgba(255, 255, 255, 0);
+  }
+  50% {
+    box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
+  }
+  62% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white,
+      110px 0 white;
+  }
+  75% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      130px 0 white, 120px 0 white;
+  }
+  87% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0), 130px 0 white;
+  }
+  100% {
+    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
+      200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
+  }
+}
+
diff --git a/frontend/src/app/components/atoms/loader/loader.component.ts b/frontend/src/app/components/atoms/loader/loader.component.ts
@@ -3,8 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-loader',
   templateUrl: './loader.component.html',
-  styleUrl: './loader.component.scss'
+  styleUrl: './loader.component.scss',
 })
-export class LoaderComponent {
-
-}
+export class LoaderComponent {}