<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <a class="btn btn-gh" href="/api/public/login/google">Sign in with Google <i class="fa fa-google"></i></a>
    </div>
    <div class="col-sm-6">
      <a class="btn btn-fb" href="/api/public/login/facebook">Sign in with Facebook <i class="fa fa-facebook"></i></a>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-5">
      <hr>
    </div>
    <div class="col-sm-2 text-center">OR</div>
    <div class="col-sm-5">
      <hr>
    </div>
  </div>
  <div class="row" *ngIf="errorCode == '401'">
    <div  class="alert alert-info col-sm-12" role="alert">
      {{errorMsg}}
    </div>
  </div>
      <form class="example-form">


        <div class="row">
          <div class="col-12">
            <mat-form-field class="example-full-width">
              <input matInput placeholder="Username" [formControl]="usernameFormControl"
                     [errorStateMatcher]="matcher">
              <mat-hint>Choose your display username</mat-hint>
              <mat-error *ngIf="usernameFormControl.hasError('required')">
                Username is <strong>required</strong>
              </mat-error>
            </mat-form-field>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <mat-form-field class="example-full-width">
              <input type="password" minlength="5" matInput placeholder="Password" [formControl]="passwordFormControl"
                     [errorStateMatcher]="matcher">
              <mat-hint>Choose your password</mat-hint>
              <mat-error *ngIf="passwordFormControl.hasError('minlength')">
                Password must be at least <strong>6</strong> characters
              </mat-error>
              <mat-error *ngIf="passwordFormControl.hasError('required')">
                Password is <strong>required</strong>
              </mat-error>
            </mat-form-field>
          </div>
        </div>
        <div class="row" style="margin-top: 20px;">
        <div class="col-sm-12">
          <button (click)="login()" class="btn btn-primary btn-block" style="background: #3e9a9d" >LOGIN</button>
        </div>
        </div>
      </form>


        <!--<div class="form-group" [ngClass]="{'has-danger': errorMsg !== ''}">
          <label>User name</label>
          <input [(ngModel)]="model.username" minlength="6" #username="ngModel" type="text" aria-invalid="true" [ngClass]="{'is-invalid':username.touched && username.invalid}" placeholder="Username" name="username" class="form-control form-control-danger" required>
          <div class="invalid-feedback" *ngIf="username.invalid && (username.touched || username.dirty)"><div *ngIf="username?.errors.required">Username is required</div> <div *ngIf="username?.errors.minlength">Username must be at least 6 characters</div></div>

        </div>
        <div class="form-group" [ngClass]="{'has-danger': errorMsg != ''}">
          <label>Password</label>
          <input id="password" [(ngModel)]="model.password" minlength="6" #password="ngModel" type="password" [ngClass]="{'is-invalid':password.touched && password.invalid}" name="password" placeholder="Password" class="form-control form-control-danger" required>
          <div class="invalid-feedback" *ngIf="password.invalid && (password.touched || password.dirty)">
            <div *ngIf="password?.errors.required">Password is required</div>
            <div *ngIf="password?.errors.minlength">Password must be at least 6 characters</div>
          </div>
        </div>

        <div class="row">
          <div class="col-sm-12">
            <button (click)="login()" class="btn btn-primary btn-block" [disabled]="formLogin.form.invalid">LOGIN</button>
          </div>
        </div>-->


    </div>