;
+
+ 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 @@