ngx-auth-firebaseui documentation
  1. Components
  2. AuthProvidersComponent

File

src/module/components/providers/auth.providers.component.ts

Metadata

selector ngx-auth-firebaseui-providers
styleUrls auth.providers.component.scss
templateUrl auth.providers.component.html

Index

Properties
Inputs
Outputs

Constructor

constructor(authProcess: AuthProcessService)
Defined in src/module/components/providers/auth.providers.component.ts:35
Parameters :
Name Type Optional
authProcess AuthProcessService No

Inputs

layout
Type : string
Default value : Layout.ROW
Defined in src/module/components/providers/auth.providers.component.ts:28
providers
Type : AuthProvider[] | AuthProvider
Default value : AuthProvider.ALL
Defined in src/module/components/providers/auth.providers.component.ts:29
theme
Type : Theme
Defined in src/module/components/providers/auth.providers.component.ts:27

Outputs

onError
Type : any
Defined in src/module/components/providers/auth.providers.component.ts:32
onSuccess
Type : any
Defined in src/module/components/providers/auth.providers.component.ts:31

Properties

Public authProcess
Type : AuthProcessService
Defined in src/module/components/providers/auth.providers.component.ts:37
authProvider
Default value : AuthProvider
Defined in src/module/components/providers/auth.providers.component.ts:35
themes
Default value : Theme
Defined in src/module/components/providers/auth.providers.component.ts:34
 
import {Component, Input, Output} from '@angular/core';
import {AuthProcessService, AuthProvider} from '../../services/auth-process.service';
import {NgxAuthFirebaseuiAnimations} from '../../animations';

export enum Theme {
  DEFAULT = 'default',
  CLASSIC = 'classic',
  STROKED = 'stroked',
  FAB = 'fab',
  MINI_FAB = 'mini-fab',
  RAISED = 'raised',
}

export enum Layout {
  ROW = 'row',
  COLUMN = 'column'
}

@Component({
  selector: 'ngx-auth-firebaseui-providers',
  templateUrl: 'auth.providers.component.html',
  styleUrls: ['auth.providers.component.scss'],
  animations: NgxAuthFirebaseuiAnimations
})
export class AuthProvidersComponent {

  @Input() theme: Theme; // theme: string = Theme.DEFAULT;
  @Input() layout: string = Layout.ROW;
  @Input() providers: AuthProvider[] | AuthProvider = AuthProvider.ALL; //  google, facebook, twitter, github, microsoft, yahoo

  @Output() onSuccess: any;
  @Output() onError: any;

  themes = Theme;
  authProvider = AuthProvider;

  constructor(public authProcess: AuthProcessService) {
    this.onSuccess = authProcess.onSuccessEmitter;
    this.onError = authProcess.onErrorEmitter;
  }

}

<div [ngSwitch]="theme" [@animateStagger]="{ value: '50' }">

  <!--default icon buttons-->
  <div *ngSwitchDefault
       [fxLayout]="layout"
       fxLayout.xs="column"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Google)">
      <mat-icon svgIcon="google-colored"></mat-icon>
      Google
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="facebook-filled"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      <mat-icon svgIcon="facebook"></mat-icon>
      Facebook
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="twitter-filled"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      <mat-icon svgIcon="twitter"></mat-icon>
      Twitter
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Github)">
      <mat-icon svgIcon="github"></mat-icon>
      GitHub
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      <mat-icon svgIcon="microsoft"></mat-icon>
      Microsoft
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      <mat-icon svgIcon="yahoo"></mat-icon>
      Yahoo
    </button>
  </div>

  <!--classic-->
  <div *ngSwitchCase="themes.CLASSIC"
       class="buttons-classic"
       [fxLayout]="layout"
       fxLayout.xs="column"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="google-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Google)">
      Google
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="facebook-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      Facebook
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="twitter-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      Twitter
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="github-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Github)">
      GitHub
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="microsoft-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      Microsoft
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-button
            class="yahoo-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      Yahoo
    </button>
  </div>

  <!--stroked-->
  <div *ngSwitchCase="themes.STROKED"
       class="buttons-classic"
       [fxLayout]="layout"
       fxLayout.xs="column"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="google-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Google)">
      Google
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="facebook-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      Facebook
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="twitter-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      Twitter
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="github-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Github)">
      GitHub
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="microsoft-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      Microsoft
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-stroked-button
            class="yahoo-classic"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      Yahoo
    </button>
  </div>

  <!--raised-->
  <div *ngSwitchCase="themes.RAISED"
       class="buttons-raised"
       [fxLayout]="layout"
       fxLayout.xs="column"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="google-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Google)">
      Google
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="facebook-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      Facebook
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="twitter-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      Twitter
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="github-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Github)">
      GitHub
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="microsoft-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      Microsoft
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-raised-button
            class="yahoo-raised"
            [ngClass.xs]="{'space-full-xs':true}"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      Yahoo
    </button>
  </div>

  <!--fab-->
  <div *ngSwitchCase="themes.FAB"
       class="buttons-raised"
       [fxLayout]="layout"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="google-raised"
            (click)="authProcess.signInWith(authProvider.Google)">
      <mat-icon svgIcon="google"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="facebook-raised"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      <mat-icon svgIcon="facebook"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="twitter-raised"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      <mat-icon svgIcon="twitter"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="github-raised"
            (click)="authProcess.signInWith(authProvider.Github)">
      <mat-icon svgIcon="github"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="microsoft"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      <mat-icon svgIcon="microsoft"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-fab
            class="yahoo-raised"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      <mat-icon svgIcon="yahoo"></mat-icon>
    </button>
  </div>

  <!--mini-fab-->
  <div *ngSwitchCase="themes.MINI_FAB"
       class="buttons-raised"
       [fxLayout]="layout"
       fxLayoutAlign.xs="center center"
       [fxLayoutAlign]="layout == 'row' ? 'space-around center' : 'stretch'">
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Google)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="google-raised"
            fxFlexAlign="center"
            (click)="authProcess.signInWith(authProvider.Google)">
      <mat-icon svgIcon="google"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Facebook)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="facebook-raised"
            (click)="authProcess.signInWith(authProvider.Facebook)">
      <mat-icon svgIcon="facebook"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Twitter)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="twitter-raised"
            (click)="authProcess.signInWith(authProvider.Twitter)">
      <mat-icon svgIcon="twitter" class="icon-white"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Github)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="github-raised"
            (click)="authProcess.signInWith(authProvider.Github)">
      <mat-icon svgIcon="github"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Microsoft)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="microsoft"
            (click)="authProcess.signInWith(authProvider.Microsoft)">
      <mat-icon svgIcon="microsoft"></mat-icon>
    </button>
    <button *ngIf="providers === authProvider.ALL || providers.includes(authProvider.Yahoo)"
            [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}"
            mat-mini-fab
            class="yahoo-raised"
            (click)="authProcess.signInWith(authProvider.Yahoo)">
      <mat-icon svgIcon="yahoo"></mat-icon>
    </button>
  </div>
</div>

auth.providers.component.scss 

$google: #db4437;
$facebook: #385899;
$twitter: #1da1f2;
$github: #000000;
$phone: #02bd7e;
$microsoft: #0078d4;
$microsoft_fab: #f8f9fa;
$yahoo: #720e9e;

:host {
  display: block;

  .mat-icon {
    vertical-align: inherit;
  }
}

.space-full-xs {
  width: 100%;
  margin: .4rem;
}

.facebook-filled {
  mat-icon {
    fill: $facebook;
  }
}

.twitter-filled {
  mat-icon {
    fill: $twitter;
  }
}

.buttons-raised {

  button {
    color: white !important;
  }

  .google-raised {
    background-color: $google;
  }

  .facebook-raised {
    background-color: $facebook;
  }

  .twitter-raised {
    background-color: $twitter;
  }

  .github-raised {
    background-color: $github;
  }

  .microsoft-raised {
    background-color: $microsoft;
  }

  .yahoo-raised {
    background-color: $yahoo;
  }

  .phone-raised {
    background-color: $phone;
  }
}

.buttons-classic {

  button.google-classic {
    color: $google !important;
  }

  .facebook-classic {
    color: $facebook !important;
  }

  .twitter-classic {
    color: $twitter !important;
  }

  .github-classic {
    color: $github !important;
  }

  .microsoft-classic {
    color: $microsoft !important;
  }

  .yahoo-classic {
    color: $yahoo !important;
  }

  .phone-classic {
    color: $phone;
  }
}

.icon-white {
  color: white;

  mat-icon {
    fill: white;
  }
}

button.microsoft {
  background: $microsoft_fab;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""