From 0424d6e0722f17528674e3a9eee1f7068cc1519e Mon Sep 17 00:00:00 2001 From: Justin Hubert <135236159+Jstn2004@users.noreply.github.com> Date: Wed, 1 May 2024 12:46:35 +0200 Subject: [PATCH] login and sign in componten design completed (#151) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: upgrade login and sign up page * feat: loader hinzugefügt --- frontend/src/app/app-routing.module.ts | 7 +- frontend/src/app/app.module.ts | 4 + .../inputfield/inputfield.component.html | 6 +- .../inputfield/inputfield.component.scss | 31 ++-- .../atoms/loader/loader.component.html | 1 + .../atoms/loader/loader.component.scss | 42 ++++++ .../atoms/loader/loader.component.spec.ts | 23 +++ .../atoms/loader/loader.component.ts | 10 ++ .../challenge-dialog.component.html | 2 +- .../loginform/loginform.component.html | 27 +++- .../loginform/loginform.component.scss | 139 +++++++++++------- .../loginform/loginform.component.ts | 12 ++ .../signupform/signupform.component.html | 25 ++++ .../signupform/signupform.component.scss | 104 +++++++++++++ .../signupform/signupform.component.spec.ts | 23 +++ .../signupform/signupform.component.ts | 21 +++ .../statistic-header.component.html | 8 +- .../authenticationpage.component.html | 8 +- .../authenticationpage.component.scss | 14 +- .../pages/mainpage/mainpage.component.html | 2 + frontend/src/assets/logo/Logo_2_black.svg | 1 + frontend/src/assets/logo/Logo_2_white.svg | 1 + frontend/src/assets/logo/logo_1_white.svg | 2 +- 23 files changed, 421 insertions(+), 92 deletions(-) create mode 100644 frontend/src/app/components/atoms/loader/loader.component.html create mode 100644 frontend/src/app/components/atoms/loader/loader.component.scss create mode 100644 frontend/src/app/components/atoms/loader/loader.component.spec.ts create mode 100644 frontend/src/app/components/atoms/loader/loader.component.ts create mode 100644 frontend/src/app/components/organisms/signupform/signupform.component.html create mode 100644 frontend/src/app/components/organisms/signupform/signupform.component.scss create mode 100644 frontend/src/app/components/organisms/signupform/signupform.component.spec.ts create mode 100644 frontend/src/app/components/organisms/signupform/signupform.component.ts create mode 100644 frontend/src/assets/logo/Logo_2_black.svg create mode 100644 frontend/src/assets/logo/Logo_2_white.svg diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 84c7f75..dbfa6bd 100644 --- 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 index 4595522..88596c6 100644 --- 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 index 03123b7..ac5eb98 100644 --- a/frontend/src/app/components/atoms/inputfield/inputfield.component.html +++ b/frontend/src/app/components/atoms/inputfield/inputfield.component.html @@ -1,4 +1,2 @@ -
- - -
\ No newline at end of file + + \ No newline at end of file diff --git a/frontend/src/app/components/atoms/inputfield/inputfield.component.scss b/frontend/src/app/components/atoms/inputfield/inputfield.component.scss index 083cbf6..1772d31 100644 --- 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); } } \ No newline at end of file diff --git a/frontend/src/app/components/atoms/loader/loader.component.html b/frontend/src/app/components/atoms/loader/loader.component.html new file mode 100644 index 0000000..ab61891 --- /dev/null +++ b/frontend/src/app/components/atoms/loader/loader.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/app/components/atoms/loader/loader.component.scss b/frontend/src/app/components/atoms/loader/loader.component.scss new file mode 100644 index 0000000..3097992 --- /dev/null +++ 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); + } + } \ No newline at end of file diff --git a/frontend/src/app/components/atoms/loader/loader.component.spec.ts b/frontend/src/app/components/atoms/loader/loader.component.spec.ts new file mode 100644 index 0000000..f646753 --- /dev/null +++ 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; + + 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 new file mode 100644 index 0000000..27e2fcf --- /dev/null +++ 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 index fe7eb7d..83a353c 100644 --- 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 @@
 

Training {{ num }}

- +