responsive, google auth & added footer component

src/app/components/login/footer/footer.component.html

@@ -0,0 +1 @@
+<p>footer works!</p>

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<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

src/app/components/login/login.component.html

@@ -59,6 +59,15 @@
           }
         </div>
       </div>
+      <div class="google-button">
+        <app-form-btn
+          [class]="'btn-google'"
+          [type]="'button'"
+          [value]="'Sign in with Google'"
+          [disabled]="sharedService.isBtnDisabled"
+          (click)="googleLogin()"
+        ></app-form-btn>
+      </div>
       <div class="form-buttons">
         <app-form-btn
           [class]="'btn-login'"
@@ -82,4 +91,5 @@
       </div>
     </div>
   </form>
+  <app-footer></app-footer>
 </section>

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-size: 12px !important;
-    font-weight: 400;
+    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;
+    }
+  }
+}

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();
+  }
 }

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));
   }

src/app/shared/components/buttons/form-btn/form-btn.component.html

@@ -1,4 +1,7 @@
 <div class="input-container">
+  @if (class == "btn-google") {
+  <div class="google-image"></div>
+  }
   <input
     class="{{ class }}"
     type="{{ type }}"
@@ -7,6 +10,7 @@
     [style.padding-right.px]="
       img == 'check' && !disabled ? '44' : img !== '' && !disabled ? '36' : ''
     "
+    [style.padding-left.px]="class == 'btn-google' ? '52' : ''"
   />
   <div
     class="background-image"

src/app/shared/components/buttons/form-btn/form-btn.component.scss

@@ -115,6 +115,32 @@
   }
 }
 
+.btn-google {
+  width: fit-content;
+  padding: 12px 18px;
+  margin: 12px;
+  border-radius: 10px;
+  background-color: var(--light-gray);
+  border: 1px solid var(--black);
+  font-size: 23px;
+  font-weight: 700;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover:not(:disabled) {
+    color: var(--light-blue);
+    border-color: var(--light-blue);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+  &:not(:disabled) {
+    background-color: var(--white) !important;
+    color: var(--black);
+  }
+  &:hover {
+    cursor: default;
+  }
+}
+
 .input-container {
   position: relative;
   display: inline-block;
@@ -133,12 +159,51 @@
   transition: filter 125ms ease-in-out;
 }
 
+.input-container .google-image {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 12px;
+  pointer-events: none;
+  background-image: url(./../../../../../assets/img/login/google.svg);
+  background-size: auto 38px;
+  background-repeat: no-repeat;
+  background-position: left 12px center;
+  transition: filter 125ms ease-in-out;
+}
+
 .input-container:hover .background-image {
   filter: var(--filter);
 }
 
 /*------------- RESPONSIVE -------------*/
 
+@media screen and (max-width: 650px) {
+  .input-container .google-image {
+    background-size: auto 24px;
+    background-position: left 15px center;
+  }
+
+  .btn-login,
+  .btn-guest-login,
+  .btn-google {
+    font-size: 21px;
+    font-weight: 700;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .btn-login,
+  .btn-guest-login,
+  .btn-google {
+    padding: 8px 12px;
+    margin: 6px;
+    font-size: 18px;
+    font-weight: 700;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .btn-submit,
   .btn-clear,
@@ -148,12 +213,4 @@
     font-size: 18px;
     font-weight: 400;
   }
-
-  .btn-login,
-  .btn-guest-login {
-    padding: 8px 12px;
-    margin: 6px;
-    font-size: 18px;
-    font-weight: 700;
-  }
 }

src/assets/img/login/google.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.5255 15.899H33.2501V15.8333H19.0001V22.1666H27.9483C26.6428 25.8534 23.135 28.5 19.0001 28.5C13.7537 28.5 9.50008 24.2463 9.50008 19C9.50008 13.7536 13.7537 9.49996 19.0001 9.49996C21.4218 9.49996 23.625 10.4135 25.3025 11.9058L29.781 7.42738C26.9532 4.79192 23.1706 3.16663 19.0001 3.16663C10.2561 3.16663 3.16675 10.256 3.16675 19C3.16675 27.7439 10.2561 34.8333 19.0001 34.8333C27.744 34.8333 34.8334 27.7439 34.8334 19C34.8334 17.9383 34.7242 16.902 34.5255 15.899Z" fill="#FFC107"/>
+<path d="M4.99219 11.6303L10.1942 15.4454C11.6018 11.9605 15.0107 9.49996 18.9999 9.49996C21.4216 9.49996 23.6249 10.4135 25.3024 11.9058L29.7809 7.42738C26.953 4.79192 23.1704 3.16663 18.9999 3.16663C12.9184 3.16663 7.64427 6.60008 4.99219 11.6303Z" fill="#FF3D00"/>
+<path d="M18.9999 34.8334C23.0897 34.8334 26.8058 33.2683 29.6154 30.7231L24.715 26.5763C23.1253 27.7804 21.1493 28.5001 18.9999 28.5001C14.8817 28.5001 11.3849 25.8741 10.0675 22.2095L4.9043 26.1876C7.52471 31.3152 12.8463 34.8334 18.9999 34.8334Z" fill="#4CAF50"/>
+<path d="M34.5254 15.8991H33.25V15.8334H19V22.1667H27.9482C27.3212 23.9377 26.182 25.4648 24.7127 26.5771L24.715 26.5755L29.6155 30.7222C29.2687 31.0373 34.8333 26.9167 34.8333 19C34.8333 17.9384 34.7241 16.9021 34.5254 15.8991Z" fill="#1976D2"/>
+</svg>