From 2aa07670a5107a3a83f98ffc6184b4f8fa23c1d0 Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Sun, 16 Feb 2020 12:52:49 +0100 Subject: [PATCH] fix(demo): improved the new demo app --- .../providers/auth.providers.component.html | 2 + .../providers/auth.providers.component.scss | 6 +- src/app/app.component.html | 303 +++++++++++++++++- src/app/app.component.scss | 9 + src/app/app.component.ts | 73 ++++- src/app/app.module.ts | 21 +- .../angular-material-extensions-logo.svg | 1 + src/assets/md/e1/html.md | 6 + src/assets/md/e1/ts.md | 19 ++ src/assets/md/e2/html.md | 3 + src/assets/md/e3/html.md | 3 + src/assets/md/e4/html.md | 3 + src/assets/md/e5/hml2.md | 7 + src/assets/md/e5/html.md | 3 + src/assets/md/e5/html1.md | 3 + src/assets/md/e5/ts.md | 14 + src/assets/md/e6/html.md | 3 + 17 files changed, 451 insertions(+), 28 deletions(-) create mode 100755 src/assets/angular-material-extensions-logo.svg create mode 100644 src/assets/md/e1/html.md create mode 100644 src/assets/md/e1/ts.md create mode 100644 src/assets/md/e2/html.md create mode 100644 src/assets/md/e3/html.md create mode 100644 src/assets/md/e4/html.md create mode 100644 src/assets/md/e5/hml2.md create mode 100644 src/assets/md/e5/html.md create mode 100644 src/assets/md/e5/html1.md create mode 100644 src/assets/md/e5/ts.md create mode 100644 src/assets/md/e6/html.md diff --git a/projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.html b/projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.html index afc0d75e..66cd36b7 100755 --- a/projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.html +++ b/projects/ngx-auth-firebaseui/src/lib/components/providers/auth.providers.component.html @@ -13,6 +13,7 @@ Google + + + + + + + + + HTML + + + + + TS + + + + + + + - - - - - - - + + + + + + + + ngx-auth-firebaseui-user + + + + + + + + + + HTML + + + + + TS + + + + + + + + + + + +
+ +
+ + ngx-auth-firebaseui-register + + + + + + + + + + HTML + + + + + TS + + + + + + + + + +
+
+ + ngx-auth-firebaseui-login + + + + + + + + + + HTML + + + + + TS + + + + + + + + + +
+
+ +
+ +
+ + ngx-auth-firebaseui-providers - row + + + + + + + + + + HTML + + + + + TS + + + + + + + + +
+ + +
+ + ngx-auth-firebaseui-providers - column + + + + + + + + + + HTML + + + + + TS + + + + + + + + + +
+
+ +
+ +
+ + ngx-auth-firebaseui-providers - themes + + + + + + + + + + HTML + + + + + TS + + + + + + + + + + + + +
+
+

For more info, please read the official readme - see the links above GITHUB - DOCS - NPM

diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29b..23b17a01 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,9 @@ +.mat-card{ + margin-bottom: 2rem; +} + +.stand-alone-providers { + ngx-auth-firebaseui-providers:not(:last-child) { + margin-bottom: 2rem !important; + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ce63250f..19fba1b6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,18 +1,79 @@ -import {Component} from '@angular/core'; +import {Component, OnDestroy} from '@angular/core'; +import {AuthProvider, Theme} from 'ngx-auth-firebaseui'; +import {Subscription} from 'rxjs'; +import {MatSnackBar} from '@angular/material/snack-bar'; +import {Router} from '@angular/router'; +import {AngularFireAuth} from '@angular/fire/auth'; +import {MatTabChangeEvent} from '@angular/material/tabs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnDestroy { + title = 'ngx-auth-firebaseui'; - printUser($event: any) { - console.log('print user', $event); + viewSourceOfNgxAuthFirebaseuiComponent: boolean; + viewSourceOfNgxAuthFirebaseuiLoginComponent: boolean; + viewSourceOfNgxAuthFirebaseuiRegisterComponent: boolean; + viewSourceOfTheUserComponent: boolean; + viewSourceOfTheProvidersComponentRow: boolean; + viewSourceOfTheProvidersComponentColumn: boolean; + viewSourceOfTheProvidersComponentThemes: boolean; + + snackbarSubscription: Subscription; + + error: boolean; + public index: number; + private _color: string; + + providers = [AuthProvider.Facebook]; + themes = Theme; + + + constructor(public auth: AngularFireAuth, + public router: Router, + public snackbar: MatSnackBar) { + } + + get color(): string { + return this.error ? 'warn' : 'primary'; + } + + printUser(event) { + console.log('onSuccess event ->', event); + this.error = false; + this.index = 2; + } + + printError(event) { + console.error('onError event --> ', event); + this.error = true; + + // this.snackbar.open(event.message, 'OK', {duration: 5000}); + } + + ngOnDestroy(): void { + if (this.snackbarSubscription) { + this.snackbarSubscription.unsubscribe(); + } + } + + onTabChange(event: MatTabChangeEvent) { + console.log('on tab change: ', event); + } + + onSignOut() { + console.log('Sign-out successful!'); + } + + onAccountDeleted() { + console.log('Account Delete successful!'); } - printError($event: any) { - console.error('print error', $event); + createAccount() { + console.log('create account has beeen requested'); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c8b8ca89..e5e29ae1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,9 +1,9 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {NgModule} from '@angular/core'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import {AppRoutingModule} from './app-routing.module'; +import {AppComponent} from './app.component'; +import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {FlexLayoutModule} from '@angular/flex-layout'; import {MatCardModule} from '@angular/material/card'; import {Angulartics2Module} from 'angulartics2'; @@ -16,6 +16,9 @@ import {FormsModule} from '@angular/forms'; import {MarkdownModule} from 'ngx-markdown'; import {FlipComponent, FlipSection} from './flip/flip.component'; import {MatButtonModule} from '@angular/material/button'; +import {MatTabsModule} from '@angular/material/tabs'; +import {MatIconModule} from '@angular/material/icon'; +import {MatToolbarModule} from '@angular/material/toolbar'; export const firebaseKey = { apiKey: 'AIzaSyASG7KxDO2z5AH9r0jlUmwiw68Ap8kG20c', @@ -66,9 +69,13 @@ export function createTranslateLoader(http: HttpClient) { FormsModule, FlexLayoutModule, MatCardModule, - MatButtonModule + MatButtonModule, + MatTabsModule, + MatIconModule, + MatToolbarModule ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { +} diff --git a/src/assets/angular-material-extensions-logo.svg b/src/assets/angular-material-extensions-logo.svg new file mode 100755 index 00000000..c4c7a74b --- /dev/null +++ b/src/assets/angular-material-extensions-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/md/e1/html.md b/src/assets/md/e1/html.md new file mode 100644 index 00000000..8f4b7d1d --- /dev/null +++ b/src/assets/md/e1/html.md @@ -0,0 +1,6 @@ +```html + + ` +``` diff --git a/src/assets/md/e1/ts.md b/src/assets/md/e1/ts.md new file mode 100644 index 00000000..49a74f05 --- /dev/null +++ b/src/assets/md/e1/ts.md @@ -0,0 +1,19 @@ +```typescript +import {Component} from '@angular/core'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent { + + printUser(event) { + console.log(event); + } + + printError(event) { + } + console.error(event); + } +``` diff --git a/src/assets/md/e2/html.md b/src/assets/md/e2/html.md new file mode 100644 index 00000000..d0e829db --- /dev/null +++ b/src/assets/md/e2/html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/src/assets/md/e3/html.md b/src/assets/md/e3/html.md new file mode 100644 index 00000000..0c4f88eb --- /dev/null +++ b/src/assets/md/e3/html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/src/assets/md/e4/html.md b/src/assets/md/e4/html.md new file mode 100644 index 00000000..f3cd5f58 --- /dev/null +++ b/src/assets/md/e4/html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/src/assets/md/e5/hml2.md b/src/assets/md/e5/hml2.md new file mode 100644 index 00000000..6a3f44a6 --- /dev/null +++ b/src/assets/md/e5/hml2.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/src/assets/md/e5/html.md b/src/assets/md/e5/html.md new file mode 100644 index 00000000..81b6dff4 --- /dev/null +++ b/src/assets/md/e5/html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/src/assets/md/e5/html1.md b/src/assets/md/e5/html1.md new file mode 100644 index 00000000..533e9632 --- /dev/null +++ b/src/assets/md/e5/html1.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/src/assets/md/e5/ts.md b/src/assets/md/e5/ts.md new file mode 100644 index 00000000..f3c7a826 --- /dev/null +++ b/src/assets/md/e5/ts.md @@ -0,0 +1,14 @@ +```typescript +import {Component} from '@angular/core'; + import {AuthProvider, Theme} from 'ngx-auth-firebaseui'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] + }) + export class AppComponent { + + themes = Theme; + } +``` diff --git a/src/assets/md/e6/html.md b/src/assets/md/e6/html.md new file mode 100644 index 00000000..4cb7f7eb --- /dev/null +++ b/src/assets/md/e6/html.md @@ -0,0 +1,3 @@ +```html + +```