Login

login.page.html

<ion-content class="sign-in">
  <ion-grid>
    <ion-row>
      <ion-col size="12" text-center class="color-white">
        <h5>Loyalty</h5>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" class="color-white" text-center>
        <h6>Log in to your account</h6>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <form [formGroup]="form" novalidate>
          <ion-item class="background-transparent">
            <ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
          </ion-item>
          <ion-item class="background-transparent">
            <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
          </ion-item>
        </form>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12" text-center>
        <ion-button color="light" shape="round" class="width-85-percent" (click)="signIn()" text-capitalize>Log in
        </ion-button>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="6">
        <ion-fab horizontal="end">
          <ion-fab-button (click)="loginWithFacebook()" size="small" color="light">
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-col>
      <ion-col size="6">
        <ion-fab>
          <ion-fab-button (click)="loginWithGoogle()" size="small" color="light">
            <ion-icon name="logo-google"></ion-icon>
          </ion-fab-button>
        </ion-fab>
      </ion-col>
    </ion-row>
    <ion-row class="margin-top-50">
      <ion-col size="12" text-center class="color-white">
        <p class="font-size-12">Forgot your password?
          <ion-button fill="clear" no-margin class="color-white font-size-12 margin-top-minus-8 margin-left-minus-10"
            text-capitalize (click)="goToResetPassword()">Reset it
          </ion-button>
        </p>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="margin-top-150">
    <ion-row>
      <ion-col size="12" text-center class="color-white">
        <p>Don't have an account?
          <ion-button fill="clear" no-margin text-capitalize
            class="color-white margin-top-minus-10 margin-left-minus-10" (click)="goToSignUp()">Sign up</ion-button>
        </p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>