Facebook login with Capacitor community plugin

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-community-facebook-login')
     implementation "androidx.legacy:legacy-support-v4:1.0.0"
     implementation "androidx.exifinterface:exifinterface:1.2.0"
 }

android/app/src/main/AndroidManifest.xml

@@ -31,6 +31,25 @@
 
         </activity>
 
+
+        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
+    
+        <activity
+        android:name="com.facebook.FacebookActivity"
+        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
+        android:label="@string/app_name" />
+    
+        <activity
+            android:name="com.facebook.CustomTabActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="@string/fb_login_protocol_scheme" />
+            </intent-filter>
+        </activity>
+
         <provider
             android:name="androidx.core.content.FileProvider"
             android:authorities="${applicationId}.fileprovider"

android/app/src/main/assets/capacitor.config.json

@@ -4,6 +4,7 @@
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "www",
+  "linuxAndroidStudioPath": "/home/kj1352/android-studio/android-studio/bin/studio.sh",
   "plugins": {
     "SplashScreen": {
       "launchShowDuration": 0

android/app/src/main/java/com/app/pbks/MainActivity.java

@@ -16,6 +16,7 @@ public class MainActivity extends BridgeActivity {
     this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
       // Additional plugins you've installed go here
       // Ex: add(TotallyAwesomePlugin.class);
+      add(com.getcapacitor.community.facebooklogin.FacebookLogin.class);
     }});
   }
 }

android/app/src/main/res/values/strings.xml

@@ -4,4 +4,6 @@
     <string name="title_activity_main">Punjab Kings</string>
     <string name="package_name">com.app.pbks</string>
     <string name="custom_url_scheme">com.app.pbks</string>
+    <string name="facebook_app_id">424301804669465</string>
+    <string name="fb_login_protocol_scheme">fb424301804669465</string>
 </resources>

android/capacitor.settings.gradle

@@ -1,3 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-community-facebook-login'
+project(':capacitor-community-facebook-login').projectDir = new File('../node_modules/@capacitor-community/facebook-login/android')

package-lock.json

@@ -158,6 +158,76 @@
         }
       }
     },
+    "@angular-devkit/core": {
+      "version": "11.2.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.2.9.tgz",
+      "integrity": "sha512-TqihgUEKjX4C1hSd8RgUyCwuezFRdput9Ctcq8c4VgOcseEnXq3BkCSJbXtUh4Fln8WPxM7WHM8HClcWya/41g==",
+      "dev": true,
+      "requires": {
+        "ajv": "6.12.6",
+        "fast-json-stable-stringify": "2.1.0",
+        "magic-string": "0.25.7",
+        "rxjs": "6.6.3",
+        "source-map": "0.7.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "rxjs": {
+          "version": "6.6.3",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+          "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "@angular-devkit/schematics": {
+      "version": "11.2.9",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-11.2.9.tgz",
+      "integrity": "sha512-NqcBMK9ZbfXykj+2/cSlZcLVmbep/N+yYb+dUSfvRup3rW3uYSpMMJAnys3ro0m7TnUrI7h7t0UTgX8oxjlCow==",
+      "dev": true,
+      "requires": {
+        "@angular-devkit/core": "11.2.9",
+        "ora": "5.3.0",
+        "rxjs": "6.6.3"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "6.6.3",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+          "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.0.8.tgz",
@@ -1480,6 +1550,14 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@capacitor-community/facebook-login": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@capacitor-community/facebook-login/-/facebook-login-2.0.0.tgz",
+      "integrity": "sha512-C/RxXAbhxGB+OQS+x543wwgP7/ItODAnvvOdAcNaHnYmd+OvaHa8WzyNoqDQ3jct2IOqdGMRtb+eVfXA1CeUhw==",
+      "requires": {
+        "@capacitor/core": "^2.0.0"
+      }
+    },
     "@capacitor/android": {
       "version": "2.4.7",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-2.4.7.tgz",
@@ -8010,6 +8088,12 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true
+    },
     "is-what": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
@@ -8686,6 +8770,67 @@
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
       "dev": true
     },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "log4js": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.3.0.tgz",
@@ -9918,6 +10063,73 @@
         }
       }
     },
+    "ora": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz",
+      "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==",
+      "dev": true,
+      "requires": {
+        "bl": "^4.0.3",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^4.0.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "~10.0.0",
     "@angular/router": "~10.0.0",
     "@angular/service-worker": "~10.0.0",
+    "@capacitor-community/facebook-login": "^2.0.0",
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "2.4.7",
     "@ionic-native/core": "^5.0.0",
@@ -51,6 +52,8 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular-devkit/core": "^11.2.9",
+    "@angular-devkit/schematics": "^11.2.9",
     "@angular/cli": "~10.0.5",
     "@angular/compiler": "~10.0.0",
     "@angular/compiler-cli": "~10.0.0",
@@ -95,8 +98,7 @@
       },
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-androidx": {},
-      "cordova-plugin-androidx-adapter": {},
-      "cordova-plugin-camera-preview": {}
+      "cordova-plugin-androidx-adapter": {}
     },
     "platforms": [
       "android"

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

@@ -0,0 +1,20 @@
+<section class="social-login" [ngClass]="{'active' : !user }">
+    <section class="login-box">
+        <button (click)="login()"> Login with <ion-icon name="logo-facebook"></ion-icon> </button>
+    </section>
+</section>
+
+
+<section class="social-login" [ngClass]="{'active' : showLogout && user }">
+    <section class="login-box">
+        <button (click)="logout()"> 
+            Logout from "{{ user.name }}"?
+            <ion-icon name="logo-facebook"></ion-icon>
+        </button>
+    </section>
+</section>
+
+<section class="profile" *ngIf="user" (click)="showLogout = true">
+    <img [src]="user.picture.data.url" alt="profile-image">
+    <p> {{ user.name }} </p>
+</section>

src/app/components/facebook-login/facebook-login.component.scss

@@ -0,0 +1,75 @@
+@import '../../colors';
+
+.social-login {
+    width: 100%;
+    height: calc(100vh - 50px);
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: rgba(black, 0.5);
+    z-index: 2;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &.active {
+        pointer-events: all;
+        opacity: 1;
+    }
+
+    .login-box {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        box-shadow: 0px 0px 5px $brand-blue;
+        border-top-left-radius: 40px;
+        border-top-right-radius: 40px;
+        background-color: darken($brand-blue, 10%);
+        padding: 20px;
+
+        button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 50px;
+            font-size: 1rem;
+            color: darken($blue-grey, 20%);
+            font-weight: 500;
+            background-color: lighten($light-grey, 45%);
+            width: 100%;
+            border-radius: 30px;
+
+            ion-icon {
+                color: darken($brand-blue, 10%);
+                margin-left: 10px;
+                width: 30px;
+                height: 30px;
+            }
+        }
+    }
+}
+
+.profile {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    
+    img {
+        width: 40px;
+        height: 40px;
+        display: block;
+        border-radius: 50%;
+        object-fit: cover;
+        margin: 0 auto;
+        background-color: rgba($blue-grey, 0.6);
+    }
+
+    p {
+        text-align: center;
+        font-size: 12px;
+        color: $blue-grey;
+        margin-top: 5px;
+        letter-spacing: 0.5px;
+    }
+}

src/app/components/facebook-login/facebook-login.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FacebookLoginComponent } from './facebook-login.component';
+
+describe('FacebookLoginComponent', () => {
+  let component: FacebookLoginComponent;
+  let fixture: ComponentFixture<FacebookLoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FacebookLoginComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FacebookLoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/facebook-login/facebook-login.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit } from '@angular/core';
+
+// For capacitor Facebook
+import { Platform } from '@ionic/angular';
+import { Plugins, registerWebPlugin } from '@capacitor/core';
+import { HttpClient } from '@angular/common/http';
+import { FacebookLoginPlugin } from '@capacitor-community/facebook-login';
+import { FacebookLogin } from '@capacitor-community/facebook-login';
+registerWebPlugin(FacebookLogin);
+
+@Component({
+  selector: 'app-facebook-login',
+  templateUrl: './facebook-login.component.html',
+  styleUrls: ['./facebook-login.component.scss'],
+})
+export class FacebookLoginComponent implements OnInit {
+
+    fbLogin: FacebookLoginPlugin;
+    user = null;
+    token = null;
+
+    showLogout: boolean = false;
+
+    constructor(
+        private platform: Platform,
+        private http: HttpClient
+    ) { }
+
+    ngOnInit() {
+        if (localStorage.getItem('FBUser') && localStorage.getItem('FBToken')) {
+            this.user = JSON.parse(localStorage.getItem('FBUser'));
+            this.token = localStorage.getItem('FBToken');
+        } else {
+            this.setupFbLogin();
+        }        
+    }
+
+    async setupFbLogin() {
+        if (this.platform.is('android') || this.platform.is('capacitor')) {            
+            // Use the native implementation inside a real app!
+            const { FacebookLogin } = Plugins;
+            this.fbLogin = FacebookLogin;
+        }
+    }
+
+    async login() {
+        const FACEBOOK_PERMISSIONS = ['email'];
+        const result = await this.fbLogin.login({ permissions: FACEBOOK_PERMISSIONS });
+     
+        if (result.accessToken && result.accessToken.userId) {
+            this.token = result.accessToken;
+            this.loadUserData();
+            
+            localStorage.setItem('FBToken', this.token);
+
+        } else if (result.accessToken && !result.accessToken.userId) {
+            // Web only gets the token but not the user ID
+            // Directly call get token to retrieve it now
+            this.getCurrentToken();
+        } else {
+            // Login failed
+            alert("Login Failed");
+        }
+    }
+
+    async getCurrentToken() {    
+        const result = await this.fbLogin.getCurrentAccessToken();
+        
+        if (result.accessToken) {
+            this.token = result.accessToken;
+            this.loadUserData();
+
+            localStorage.setItem('FBToken', this.token);
+        } else {
+            // Not logged in.
+        }
+    }
+        
+    async loadUserData() {
+        const url = `https://graph.facebook.com/${this.token.userId}?fields=id,name,picture.width(720),email&access_token=${this.token.token}`;
+        this.http.get(url).subscribe(res => {
+            this.user = res;
+            localStorage.setItem('FBUser', JSON.stringify(res));
+        }, err => {
+            alert("Falied to fetch user data");
+        });
+    }
+        
+    async logout() {
+        this.user = null;
+        this.token = null;
+        localStorage.removeItem('FBUser');
+        localStorage.removeItem('FBToken');
+    }
+
+}

src/app/fan-zone/fan-zone.module.ts

@@ -9,6 +9,7 @@ import { FanZonePageRoutingModule } from './fan-zone-routing.module';
 import { FanZonePage } from './fan-zone.page';
 
 import { PollsComponent } from '../components/polls/polls.component';
+import { FacebookLoginComponent } from '../components/facebook-login/facebook-login.component';
 
 @NgModule({
   imports: [
@@ -17,6 +18,6 @@ import { PollsComponent } from '../components/polls/polls.component';
     IonicModule,
     FanZonePageRoutingModule
   ],
-  declarations: [FanZonePage, PollsComponent]
+  declarations: [FanZonePage, PollsComponent, FacebookLoginComponent]
 })
 export class FanZonePageModule {}

src/app/fan-zone/fan-zone.page.html

@@ -1,20 +1,7 @@
 <ion-content>
-
-    <!-- <section class="social-login" [ngClass]="{'active' : showSocialLogin }">
-        
-        <section class="login-box">
-            <button (click)="doLogin()"> Login with <img src="assets/icons/google.png"> </button>
-        </section>
-
-    </section> -->
-
+    <app-facebook-login></app-facebook-login>
+    
     <div class="content-container">
-
-        <!-- <section class="profile" *ngIf="googleUserData.name">
-            <img [src]="googleUserData.profileImage" alt="profile-image">
-            <p> {{ googleUserData.name }} </p>
-        </section> -->
-
         <div class="common-heading-holder">
             <h2 class="main-header">
                 #FanZone

src/app/fan-zone/fan-zone.page.scss

@@ -251,79 +251,6 @@
     }
 }
 
-.social-login {
-    width: 100%;
-    height: calc(100vh - 50px);
-    position: fixed;
-    left: 0;
-    top: 0;
-    background-color: rgba(black, 0.5);
-    z-index: 2;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.3s;
-
-    &.active {
-        pointer-events: all;
-        opacity: 1;
-    }
-
-    .login-box {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        box-shadow: 0px 0px 5px $brand-blue;
-        border-top-left-radius: 40px;
-        border-top-right-radius: 40px;
-        background-color: darken($brand-blue, 10%);
-        padding: 20px;
-
-        button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 50px;
-            font-size: 1rem;
-            color: darken($blue-grey, 20%);
-            font-weight: 500;
-            background-color: lighten($light-grey, 45%);
-            width: 100%;
-            border-radius: 30px;
-
-            img {
-                margin-left: 10px;
-                width: 30px;
-                height: 30px;
-            }
-        }
-    }
-}
-
-.profile {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    
-    img {
-        width: 40px;
-        height: 40px;
-        display: block;
-        border-radius: 50%;
-        object-fit: contain;
-        margin: 0 auto;
-        background-color: rgba($blue-grey, 0.6);
-    }
-
-    p {
-        text-align: center;
-        font-size: 12px;
-        color: $blue-grey;
-        margin-top: 5px;
-        letter-spacing: 0.5px;
-    }
-}
-
 
 .poll-modal {
     position: fixed;

src/app/home/home.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { HomePageRoutingModule } from './home-routing.module';
 
 import { HomePage } from './home.page';
+import { FacebookLoginComponent } from '../components/facebook-login/facebook-login.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import { HomePage } from './home.page';
     IonicModule,
     HomePageRoutingModule
   ],
-  declarations: [HomePage]
+  declarations: [HomePage, FacebookLoginComponent]
 })
 export class HomePageModule {}

src/app/home/home.page.html

@@ -1,4 +1,7 @@
 <ion-content>
+
+    <app-facebook-login></app-facebook-login>
+
     <div class="content-container">
         <div class="common-heading-holder">
             <h2 class="main-header"> # Discover </h2>
@@ -14,7 +17,6 @@
         </div>
     
         <ion-slides  #slides [options]="slideOpts" *ngIf="selectedTab === 'news'">
-            
             <ion-slide *ngFor="let news of newsData">
                 <div class="image-holder">
                     <figure>
@@ -114,11 +116,4 @@
         </ion-slides>
     </div>
 
-    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showChat">
-        <ion-fab-button class="chat-button" (click)="presentChatModal()">
-            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
-            <ion-badge color="dark"> 10 </ion-badge>
-        </ion-fab-button>
-    </ion-fab>
-
 </ion-content>

src/app/home/home.page.ts

@@ -42,7 +42,7 @@ export class HomePage implements OnInit {
         private toastService: ToastService,
         private dom: DomSanitizer,
         private socialSharing: SocialSharing,
-        private platform: Platform
+        private platform: Platform,
     ) { }
 
     transformYourHtml(htmlTextWithStyle) {
@@ -92,7 +92,7 @@ export class HomePage implements OnInit {
             console.log(err);
             this.toastService.presentToastWithOptions("Failed to get Gallery data", "danger");
         });
-    }
+    }    
 
     ionViewDidEnter() {
         if (localStorage.isPartyChatOn === 'yes') {

src/app/live/live.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { LivePageRoutingModule } from './live-routing.module';
 
 import { LivePage } from './live.page';
+import { FacebookLoginComponent } from '../components/facebook-login/facebook-login.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,6 @@ import { LivePage } from './live.page';
     IonicModule,
     LivePageRoutingModule
   ],
-  declarations: [LivePage]
+  declarations: [LivePage, FacebookLoginComponent]
 })
 export class LivePageModule {}

src/app/live/live.page.html

@@ -1,5 +1,7 @@
 <ion-content>
 
+    <app-facebook-login></app-facebook-login>
+
     <div class="content-container">
 
         <div class="common-heading-holder">