login and sign in componten design completed (#151)

* style: upgrade login and sign up page * feat: loader hinzugefügt
SE-TINF22B2 · May 1, 2024 · 0424d6e · 0424d6e
1 parent 2aaaf5c
commit 0424d6e
Show file tree

Hide file tree

Showing 23 changed files with 421 additions and 92 deletions.
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
@@ -2,10 +2,15 @@ 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';
 
 const routes: Routes = [
   {path:"main", component: MainpageComponent},
-  {path:"login", component : AuthenticationpageComponent}
+  {path:"auth", component : AuthenticationpageComponent, children : [
+    {path: "signup", component: SignupformComponent},
+    {path: "login", component: LoginformComponent}
+  ]}
 ];
 
 @NgModule({

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -17,6 +17,8 @@ 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';
 
 @NgModule({
   declarations: [
@@ -33,6 +35,8 @@ import { InputfieldComponent } from './components/atoms/inputfield/inputfield.co
     AuthenticationpageComponent,
     LoginformComponent,
     InputfieldComponent,
+    SignupformComponent,
+    LoaderComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   providers: [provideAnimations()],

diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.html b/frontend/src/app/components/atoms/inputfield/inputfield.component.html
@@ -1,4 +1,2 @@
-<div class="textfield">
-    <label class="label">{{ labeltext }}</label>
-    <input class="input" type="{{typetext}}" placeholder="{{ placeholder }}" >
-</div>
+
+    <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,20 +1,19 @@
-.textfield
-{
-    display: flex;
-    flex-direction: column;
+.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;
 
-    .label
-    {
-
-        font-weight: bold;
+    &:last-child {
+        border-bottom: 0;
     }
-
-    .input
-    {
-        margin-top: 12px;
-        margin-bottom: 12px;
-        height: 40px;
-        border-radius: 8px;
-        text-indent: 10px;
+    &::-webkit-input-placeholder {
+        color: rgba(0,0,0,0.4);
     }
 }
diff --git a/frontend/src/app/components/atoms/loader/loader.component.html b/frontend/src/app/components/atoms/loader/loader.component.html
@@ -0,0 +1 @@
+<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
@@ -0,0 +1,42 @@
+.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);
+    }
+  }
diff --git a/frontend/src/app/components/atoms/loader/loader.component.spec.ts b/frontend/src/app/components/atoms/loader/loader.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/atoms/loader/loader.component.ts b/frontend/src/app/components/atoms/loader/loader.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrl: './loader.component.scss'
+})
+export class LoaderComponent {
+
+}
diff --git a/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html b/frontend/src/app/components/organisms/challenge-dialog/challenge-dialog.component.html
@@ -3,7 +3,7 @@
     <div class="square">&nbsp;</div>
     <div class="dialog-header">
       <h3>Training {{ num }}</h3>
-      <button class="done-button" (click)="triggerEvent()">Fertig</button>
+      <button class="done-button" (click)="triggerEvent()">Done</button>
     </div>
     <div class="training-infos">
       <ul>

diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.html b/frontend/src/app/components/organisms/loginform/loginform.component.html
@@ -1,7 +1,20 @@
-<div class="login-container">
-    <app-inputfield [labeltext]="'Username'" [typetext]="'text'" [placeholder]="'Enter Username'"></app-inputfield>
-    <app-inputfield [labeltext]="'Password'" [typetext]=" passwordFieldType" [placeholder]="'Enter Password'"></app-inputfield>
-    <p class="toggle-password"><a class="eyeimg" (click)="toggleType()" ><img class="img" [src]="img"></a></p>
-    <button class="button">Login In</button>
-    <p class="create-account">Don´t have an account? <br> <br> <a href="../sign/">Sign on for free?</a></p>
-</div>
+
+    <div class="login">
+
+		<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>
+                <div class="password">
+                    <app-inputfield [labeltext]="'Password'" [typetext]=" passwordFieldType" [placeholder]="'Enter Password'"> </app-inputfield>
+                    <span class="eyeimg" (click)="toggleType()" ><img class="img" [src]="img"></span>
+                </div>
+			</div>
+
+            <button (click)="login()" class="button">Login</button>
+            <p class="create-account">Don´t have an account? <a href="../auth/signup/">Sign on for free?</a></p>
+		</div>
+
+
+	</div>
+
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.scss b/frontend/src/app/components/organisms/loginform/loginform.component.scss
@@ -1,58 +1,93 @@
-.login-container
-{
-    display: flex;
-    flex-direction: column;
-    width: 300px;
-    background-color: var(--black-2);
-    padding: 30px;
-    border-radius: 12px;
-
-    .button
-    {
-        width: 200px;
-        align-self: center;
-        margin-top: 20px;
-        height: 40px;
-        background-color: var(--green);
-        border: none;
-        border-radius: 12px;
-        font-weight: bold;
+p.create-account {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-top: 20px;
+
+  a {
+    font-weight: bold;
+    color: var(--white);
+    text-decoration: none;
+    margin-top: 20px;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.eyeimg {
+  justify-content: center;
+  align-self: center;
+  margin-right: 8px;
+
+  .img {
+    height: 15px;
+    width: 15px;
+  }
+}
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  .center {
+    position: absolute;
+    top: calc(50% - 10%);
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width: 65%;
+    z-index: 5;
+    -webkit-transition: all 0.3s ease;
+    background-color: var(--background-black);
+    padding: 15px;
+    border-radius: 16px;
+    margin-top: 14%;
+
+    .form-title {
+      color: var(--white);
+      font-size: 1.7em;
+      text-align: center;
+      margin-top: 30px;
     }
 
-    p.create-account{
-        font-size: 12px;
-        text-align: center;
-        margin-top: 50px;
-
-        a{
-            font-weight: bold;
-            color: var(--white);
-            text-decoration: none;
-            margin-top: 20px;
-        }
-        a:hover{
-            text-decoration: underline;
-        }
+    .form-holder {
+      border-radius: 15px;
+      background-color: #fff;
+      border: 1px solid #eee;
+      overflow: hidden;
+      margin-top: 50px;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transition: all 0.3s ease;
     }
 
-    p.toggle-password{
-        margin-left: 10px;
-        margin-bottom: 0;
-        font-size: 12px;
-        display: flex;
-        justify-content: space-between;
-
-        img{
-            filter: invert(100%);
-            width: 16px;
-            height: auto;
-        }
-
-        .eyeimg:hover {
-            transform: scale(1.1); /* Vergrößere das Bild um 10% */
-            transition: transform 0.3s ease; /* Füge eine Transition hinzu */
-          }
+    .button {
+      background-color: var(--green);
+      color: var(--font);
+      border: 0;
+      font-weight: bolder;
+      border-radius: 15px;
+      display: block;
+      margin: 15px auto;
+      margin-top: 10px;
+      padding: 15px 45px;
+      width: 100%;
+      font-size: 13px;
+      cursor: pointer;
+      opacity: 1;
+      visibility: visible;
+      -webkit-transition: all 0.3s ease;
+
+      &:hover {
+        transition: all 0.1s ease;
+        background-color: var(--white);
+        color: var(--font);
+      }
     }
-
-}
+  }
+
+  .password {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/frontend/src/app/components/organisms/loginform/loginform.component.ts b/frontend/src/app/components/organisms/loginform/loginform.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-loginform',
@@ -10,11 +11,22 @@ export class LoginformComponent {
   img: string = '../../../assets/ausblenden.png';
   showPassword: boolean = false;
 
+  constructor( private router: Router) {
+
+    this.router = router;
+  }
+
   toggleType() {
     this.showPassword = !this.showPassword;
     this.passwordFieldType = this.showPassword ? 'text' : 'password';
     this.img = this.showPassword
       ? '../../../assets/ausblenden.png'
       : '../../../assets/aussicht.png';
   }
+
+  login()
+  {
+    this.router.navigate(['/main']);
+  }
+
 }