From e887b0778ebdd0895ca1dc1ee1e2d8ffff844680 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 15 Apr 2021 18:06:59 +0530 Subject: [PATCH] Facebook login with Capacitor community plugin --- android/app/capacitor.build.gradle | 2 +- android/app/src/main/AndroidManifest.xml | 19 ++ .../app/src/main/assets/capacitor.config.json | 1 + .../main/java/com/app/pbks/MainActivity.java | 1 + android/app/src/main/res/values/strings.xml | 2 + android/capacitor.settings.gradle | 3 + package-lock.json | 212 ++++++++++++++++++ package.json | 6 +- .../facebook-login.component.html | 20 ++ .../facebook-login.component.scss | 75 +++++++ .../facebook-login.component.spec.ts | 24 ++ .../facebook-login.component.ts | 96 ++++++++ src/app/fan-zone/fan-zone.module.ts | 3 +- src/app/fan-zone/fan-zone.page.html | 17 +- src/app/fan-zone/fan-zone.page.scss | 73 ------ src/app/home/home.module.ts | 3 +- src/app/home/home.page.html | 11 +- src/app/home/home.page.ts | 4 +- src/app/live/live.module.ts | 3 +- src/app/live/live.page.html | 2 + 20 files changed, 473 insertions(+), 104 deletions(-) create mode 100644 src/app/components/facebook-login/facebook-login.component.html create mode 100644 src/app/components/facebook-login/facebook-login.component.scss create mode 100644 src/app/components/facebook-login/facebook-login.component.spec.ts create mode 100644 src/app/components/facebook-login/facebook-login.component.ts diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle index f4af3ff..e4bbb90 100644 --- a/android/app/capacitor.build.gradle +++ b/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" } diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index ba3ae43..5d754d0 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -31,6 +31,25 @@ + + + + + + + + + + + + + + >() {{ // Additional plugins you've installed go here // Ex: add(TotallyAwesomePlugin.class); + add(com.getcapacitor.community.facebooklogin.FacebookLogin.class); }}); } } diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml index 8d60693..d726beb 100644 --- a/android/app/src/main/res/values/strings.xml +++ b/android/app/src/main/res/values/strings.xml @@ -4,4 +4,6 @@ Punjab Kings com.app.pbks com.app.pbks + 424301804669465 + fb424301804669465 diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle index 9a5fa87..744c3e6 100644 --- a/android/capacitor.settings.gradle +++ b/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') diff --git a/package-lock.json b/package-lock.json index a5139fc..18ebe79 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5035687..d30b7a5 100644 --- a/package.json +++ b/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" diff --git a/src/app/components/facebook-login/facebook-login.component.html b/src/app/components/facebook-login/facebook-login.component.html new file mode 100644 index 0000000..508e478 --- /dev/null +++ b/src/app/components/facebook-login/facebook-login.component.html @@ -0,0 +1,20 @@ + + + + + +
+ profile-image +

{{ user.name }}

+
diff --git a/src/app/components/facebook-login/facebook-login.component.scss b/src/app/components/facebook-login/facebook-login.component.scss new file mode 100644 index 0000000..c344343 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/app/components/facebook-login/facebook-login.component.spec.ts b/src/app/components/facebook-login/facebook-login.component.spec.ts new file mode 100644 index 0000000..072cf1f --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/components/facebook-login/facebook-login.component.ts b/src/app/components/facebook-login/facebook-login.component.ts new file mode 100644 index 0000000..5faba4f --- /dev/null +++ b/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'); + } + +} diff --git a/src/app/fan-zone/fan-zone.module.ts b/src/app/fan-zone/fan-zone.module.ts index d1f5476..9116ae0 100644 --- a/src/app/fan-zone/fan-zone.module.ts +++ b/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 {} diff --git a/src/app/fan-zone/fan-zone.page.html b/src/app/fan-zone/fan-zone.page.html index b8e2ce5..3601889 100644 --- a/src/app/fan-zone/fan-zone.page.html +++ b/src/app/fan-zone/fan-zone.page.html @@ -1,20 +1,7 @@ - - - + +
- - -

#FanZone diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss index 04e8aba..87581c5 100644 --- a/src/app/fan-zone/fan-zone.page.scss +++ b/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; diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index aca3da5..8801ef3 100644 --- a/src/app/home/home.module.ts +++ b/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 {} diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index fdd875e..7130606 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -1,4 +1,7 @@ + + +

# Discover

@@ -14,7 +17,6 @@
-
@@ -114,11 +116,4 @@
- - - - 10 - - - diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index 59be16a..65a01a1 100644 --- a/src/app/home/home.page.ts +++ b/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') { diff --git a/src/app/live/live.module.ts b/src/app/live/live.module.ts index b6eb6a2..683a051 100644 --- a/src/app/live/live.module.ts +++ b/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 {} diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 4d610f1..a96853f 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -1,5 +1,7 @@ + +