Designing an Angular Social Login Button Presentation Component

Image by Mitchell Raman from Pixabay

Updated Version

Updated version of this article here:

Designing an Angular Social Login Button Presentation Component

Scenario

We want to create a Angular Material Google Social Login Button in a shared library that has a signIn event that we can listen to in order to trigger social authentication and we also want to reactively disable the button until terms of service have been accepted.

Approach

The button design looks like this. It is disabled by default, and can be enabled by assign an Observable<boolean> to the property isTOSAccepted$ that emits true when the button should be enabled.

import { Component, OnInit } from '@angular/core';
import { SVG } from '@fireflysemantics/assets'
import { Input } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Output } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Component({
    selector: 'fs-login-button',
    templateUrl: './login-button.component.html',
    styleUrls: ['./login-button.component.scss']
})
export class LoginButtonComponent implements OnInit {
    SVG_CONSTANTS = SVG
    constructor() { }
    @Output()
    signInEvent = new EventEmitter();
    click() { 
        this.signInEvent.emit()
    }
    @Input()
    public isTOSAccepted$: Observable<boolean> = of(false)
    ngOnInit(): void { }
}

The template:

<button [disabled]="!(isTOSAccepted$ | async)"
(click)="click()"
mat-button
style="padding: 1rem;">
<mat-icon
[svgIcon]="SVG_CONSTANTS.GOOGLE_LOGO.name"></mat-icon> &nbsp; &nbsp; Login With Google
</button>

Test

Within app.component.ts declare the following method:

signIn() {
    console.log("Sign In Clicked")
}

On app.component.tswe will create an Observable<boolean> instance that emits true as well:

isTOCAccepted$: Observable<boolean> = of(true)

Within the app.component.html template declare the button:

<fs-login-button 
    (signInEvent)="signIn()"
    [isTOSAccepted$]="isTOCAccepted$"></fs-login-button>

When the button is clicked it will log Signin Clicked.