diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 208750f..f3cee5a 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -4,5 +4,6 @@ import { RegisterComponent } from './components/auth/register/register.component export const routes: Routes = [ { path: '', component: HomeComponent }, + { path: 'login', component: HomeComponent }, { path: 'register', component: HomeComponent }, ]; diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html new file mode 100644 index 0000000..15f4682 --- /dev/null +++ b/frontend/src/app/components/auth/login/login.component.html @@ -0,0 +1,67 @@ +
+
+
Log in
+ +
+
diff --git a/frontend/src/app/components/auth/login/login.component.scss b/frontend/src/app/components/auth/login/login.component.scss new file mode 100644 index 0000000..ceb7a7f --- /dev/null +++ b/frontend/src/app/components/auth/login/login.component.scss @@ -0,0 +1,91 @@ +@import "./../../../../assets/style/colors.scss"; + +section { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100vw; + height: 100vh; + text-align: center; + background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), + url(./../../../../assets/img/backgrounds/register.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.content { + width: 520px; + height: 492px; + padding: 43px 56px; + border-radius: 48px; + background-color: $white; + .headline { + font-size: 48px; + font-weight: 700; + color: $blue; + margin-bottom: 24px; + } + app-btn-large { + margin-top: 36px; + } +} + +.error-msg { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + padding: 6px; + width: 120%; + p { + color: $red; + font-size: 12px !important; + font-weight: 400 !important; + } + a { + color: $red; + text-decoration: underline; + cursor: pointer; + &:hover { + text-decoration: none; + } + } +} + +.login-form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + input { + width: 90%; + padding: 12px 18px; + margin: 8px 0; + box-sizing: border-box; + background: transparent; + color: $blue; + border: 1px solid $blue; + border-radius: 12px; + font-size: 18px; + font-weight: 400; + transition: background-color 250ms ease-in-out, color 250ms ease-in-out, + border-color 250ms ease-in-out; + &::placeholder { + color: rgba($blue, 0.6); + } + &:focus { + outline: none; + background-color: rgba($white, 0.1); + } + } + .error-border { + border: 1px solid red; + } +} diff --git a/frontend/src/app/components/auth/login/login.component.spec.ts b/frontend/src/app/components/auth/login/login.component.spec.ts new file mode 100644 index 0000000..1e19e5d --- /dev/null +++ b/frontend/src/app/components/auth/login/login.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/auth/login/login.component.ts b/frontend/src/app/components/auth/login/login.component.ts new file mode 100644 index 0000000..772b562 --- /dev/null +++ b/frontend/src/app/components/auth/login/login.component.ts @@ -0,0 +1,33 @@ +import { Component } from '@angular/core'; +import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component'; +import { FormsModule, NgForm } from '@angular/forms'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-login', + standalone: true, + imports: [BtnLargeComponent, FormsModule, RouterLink], + templateUrl: './login.component.html', + styleUrl: './login.component.scss', +}) +export class LoginComponent { + authData = { + mail: '', + password: '', + }; + + constructor() {} + + isUserEmailValid(emailValue: string) { + const emailRegex = /^[\w.%+-]+@[\w.-]+\.[a-zA-Z]{2,}$/; + return emailRegex.test(emailValue); + } + + onSubmit(ngForm: NgForm) { + if (ngForm.submitted && ngForm.form.valid) { + console.log(this.authData); + this.authData.mail = ''; + this.authData.password = ''; + } + } +} diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html index a5b9e7a..d923bb8 100644 --- a/frontend/src/app/components/auth/register/register.component.html +++ b/frontend/src/app/components/auth/register/register.component.html @@ -4,8 +4,8 @@
- @if (currentRoute === '') { - - } @if (currentRoute === 'register') { - - } + + + diff --git a/frontend/src/app/components/home/home.component.ts b/frontend/src/app/components/home/home.component.ts index 289efa7..a476914 100644 --- a/frontend/src/app/components/home/home.component.ts +++ b/frontend/src/app/components/home/home.component.ts @@ -4,11 +4,20 @@ import { FooterComponent } from './footer/footer.component'; import { AuthComponent } from '../auth/auth.component'; import { ActivatedRoute } from '@angular/router'; import { RegisterComponent } from '../auth/register/register.component'; +import { CommonModule } from '@angular/common'; +import { LoginComponent } from '../auth/login/login.component'; @Component({ selector: 'app-home', standalone: true, - imports: [HeaderComponent, FooterComponent, AuthComponent, RegisterComponent], + imports: [ + CommonModule, + HeaderComponent, + FooterComponent, + AuthComponent, + RegisterComponent, + LoginComponent, + ], templateUrl: './home.component.html', styleUrl: './home.component.scss', })