From ef208585647d86354267cd1dfcf2d678230bf878 Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sun, 28 Apr 2024 18:53:41 +0200 Subject: [PATCH] responsive, google auth & added footer component --- .../login/footer/footer.component.html | 1 + .../login/footer/footer.component.scss | 0 .../login/footer/footer.component.spec.ts | 23 ++++++ .../login/footer/footer.component.ts | 12 +++ src/app/components/login/login.component.html | 10 +++ src/app/components/login/login.component.scss | 46 ++++++++++-- src/app/components/login/login.component.ts | 7 +- src/app/services/login.service.ts | 26 ++++++- .../buttons/form-btn/form-btn.component.html | 4 + .../buttons/form-btn/form-btn.component.scss | 73 +++++++++++++++++-- src/assets/img/login/google.svg | 6 ++ 11 files changed, 192 insertions(+), 16 deletions(-) create mode 100644 src/app/components/login/footer/footer.component.html create mode 100644 src/app/components/login/footer/footer.component.scss create mode 100644 src/app/components/login/footer/footer.component.spec.ts create mode 100644 src/app/components/login/footer/footer.component.ts create mode 100644 src/assets/img/login/google.svg diff --git a/src/app/components/login/footer/footer.component.html b/src/app/components/login/footer/footer.component.html new file mode 100644 index 0000000..28c0d7d --- /dev/null +++ b/src/app/components/login/footer/footer.component.html @@ -0,0 +1 @@ +

footer works!

diff --git a/src/app/components/login/footer/footer.component.scss b/src/app/components/login/footer/footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/login/footer/footer.component.spec.ts b/src/app/components/login/footer/footer.component.spec.ts new file mode 100644 index 0000000..4647de8 --- /dev/null +++ b/src/app/components/login/footer/footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/login/footer/footer.component.ts b/src/app/components/login/footer/footer.component.ts new file mode 100644 index 0000000..515bda6 --- /dev/null +++ b/src/app/components/login/footer/footer.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-footer', + standalone: true, + imports: [], + templateUrl: './footer.component.html', + styleUrl: './footer.component.scss' +}) +export class FooterComponent { + +} diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 3a890b8..6ca8c17 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -59,6 +59,15 @@ } +
+ +
+ diff --git a/src/app/components/login/login.component.scss b/src/app/components/login/login.component.scss index 2891bcc..841bce9 100644 --- a/src/app/components/login/login.component.scss +++ b/src/app/components/login/login.component.scss @@ -1,6 +1,4 @@ section { - width: 100vw; - height: 100vh; } .logo { @@ -56,11 +54,11 @@ section { right: 50%; transform: translate(50%, -50%); width: 422px; - height: 397px; + height: fit-content; background: var(--white); box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.05); border-radius: 30px; - padding: 48px 115px; + padding: 48px 96px; p { font-size: 61px; font-weight: 700; @@ -107,10 +105,12 @@ section { .error-msg { height: 24px; padding: 6px; + width: 120%; + text-align: center; p { color: var(--red); - font-size: 12px; - font-weight: 400; + font-size: 12px !important; + font-weight: 400 !important; } } @@ -119,3 +119,37 @@ section { justify-content: end; padding: 12px 0; } + +/*------------- RESPONSIVE -------------*/ + +@media screen and (max-width: 650px) { + .content { + width: 322px; + height: fit-content; + padding: 24px 48px; + p { + font-size: 47px; + } + } +} + +@media screen and (max-width: 450px) { + .content { + width: 252px; + height: fit-content; + padding: 12px 24px; + p { + font-size: 36px; + } + } + + .input-fields { + width: 80%; + } + + .error-msg { + p { + font-size: 10px !important; + } + } +} diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts index 186d213..02c8e43 100644 --- a/src/app/components/login/login.component.ts +++ b/src/app/components/login/login.component.ts @@ -6,11 +6,12 @@ import { FirebaseService } from '../../services/firebase.service'; import { Router } from '@angular/router'; import { LoginService } from '../../services/login.service'; import { SharedService } from '../../services/shared.service'; +import { FooterComponent } from './footer/footer.component'; @Component({ selector: 'app-login', standalone: true, - imports: [FormsModule, CommonModule, FormBtnComponent], + imports: [FormsModule, CommonModule, FormBtnComponent, FooterComponent], templateUrl: './login.component.html', styleUrl: './login.component.scss', }) @@ -40,4 +41,8 @@ export class LoginComponent { this.loginData.password = 'guest@guestaccount.com'; this.onSubmit({ submitted: true, form: { valid: true } } as NgForm); } + + googleLogin() { + this.loginSerivce.googleLogin(); + } } diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts index a303755..61785f1 100644 --- a/src/app/services/login.service.ts +++ b/src/app/services/login.service.ts @@ -1,5 +1,10 @@ import { Injectable, inject } from '@angular/core'; -import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'; +import { + getAuth, + signInWithEmailAndPassword, + signInWithPopup, + GoogleAuthProvider, +} from 'firebase/auth'; import { FirebaseService } from './firebase.service'; import { Firestore } from '@angular/fire/firestore'; import { SharedService } from './shared.service'; @@ -36,6 +41,25 @@ export class LoginService { }); } + googleLogin() { + const auth = getAuth(); + const provider = new GoogleAuthProvider(); + + signInWithPopup(auth, provider) + .then((result) => { + const user = result.user; + console.log( + 'Google User: ', + user.displayName, + user.email, + user.photoURL + ); + }) + .catch((error) => { + console.error('Google login error:', error); + }); + } + getUserIdInLocalStorage(userId: string) { localStorage.setItem('currentUser', JSON.stringify(userId)); } diff --git a/src/app/shared/components/buttons/form-btn/form-btn.component.html b/src/app/shared/components/buttons/form-btn/form-btn.component.html index bdb8702..6ee291c 100644 --- a/src/app/shared/components/buttons/form-btn/form-btn.component.html +++ b/src/app/shared/components/buttons/form-btn/form-btn.component.html @@ -1,4 +1,7 @@
+ @if (class == "btn-google") { +
+ }
+ + + + +