Angular Fire Auth Phone Login Template

phone-login.html

<div fxLayout="column" fxLayoutWrap fxLayoutAlign="" style="margin-top: 30px;background-color: #fff; border-radius: 5px;padding-left: 10px;padding-right: 10px;padding-top: 10px; padding-bottom: 10px;">
    <div fxFlex="100" *ngIf="!windowRef.confirmationResult">
        <form fxLayout="column" fxLayoutAlign="center center">
            <div fxFlex='100' style="width: 100%;">
                <mat-form-field class="mat-form-input" style="width:100%;">
                    <span matPrefix>+254 &nbsp;</span>
                    <input matInput placeholder="Phone number" type="number" required name="phone_number" [(ngModel)]="phoneNumber.phone_number">
                    <mat-icon matSuffix style="color:#ff4081;">phone</mat-icon>
                </mat-form-field>
            </div>
        </form>
    </div>
    <div fxFlex="100">
        <div id="recaptcha-container" style="width: 100%;"></div>
    </div>
    <div fxFlex="100" style="padding-top: 10px;" *ngIf="!windowRef.confirmationResult">
        <button [disabled]="!phoneNumber.phone_number" type="button" color="primary" mat-raised-button (click)="sendLoginCode()" style="width: 100%;">
            <span>Send SMS Code</span>
        </button>
    </div>
    <div fxFlex="100" style="padding-top: 15px;" *ngIf="windowRef.confirmationResult">
        <div fxLayout="row" fxLayoutWrap fxLayoutWrap fxLayoutAlign="center center">
            <div fxFlex="50">
                <mat-form-field class="mat-form-input" style="width:90%;">
                    <input matInput placeholder="Verification Code" type="text" required name="code" [(ngModel)]="verificationCode">
                </mat-form-field>
            </div>
            <div fxFlex="50" style="text-align: right;">
                <button [disabled]="!verificationCode" type="button" color="accent" mat-raised-button style="width: 90%;" (click)="verifyLoginCode()">
                    <span>Verify</span>
                </button>
            </div>
        </div>
    </div>
</div>