login

login.html

<div class="session">
  <div class="session-content">
    <div class="session-wrapper">
      <mat-card>
        <mat-card-title class="text-xs-center pb-1">Faça login para continuar</mat-card-title>
        <mat-card-content>
          <form [formGroup]="form">
            <div fxLayout="column" fxLayoutAlign="space-around">
              <div class="pb-1 mat-error">Migramos o portal para uma nova plataforma. Caso seja a primeira fez que esteja logando, por favor, <a [routerLink]="['/sessao/resetar-senha']" class="bold">redefina a sua senha</a>.</div>
              <div class="pb-1 mat-error" *ngIf="error">{{ error }}</div>
              <div class="pb-1">
                <mat-form-field class="full-width" appearance="outline" label="Email">
                  <input
                    matInput
                    placeholder="Email"
                    required
                    formControlName="uname"
                    [errorStateMatcher]="matcher"
                  />
                  <mat-icon matSuffix color="primary">email</mat-icon>
                  <mat-error *ngIf="isFieldRequired('uname')">
                    Por favor, informe seu usuário/email
                  </mat-error>
                  <mat-error *ngIf="isEmailValid('uname')">
                    Por favor, informe um email válido
                  </mat-error>
                </mat-form-field>
              </div>
              <div class="pb-1">
                <mat-form-field class="full-width" appearance="outline" label="Senha">
                  <input
                    matInput
                    type="password"
                    placeholder="Senha"
                    required
                    #pass
                    formControlName="password"
                    [errorStateMatcher]="matcher"
                  />
                  <mat-icon matSuffix color="primary">lock</mat-icon>
                  <mat-hint align="end" aria-live="polite"> {{ pass.value.length }} / 25 </mat-hint>
                  <mat-error *ngIf="isFieldRequired('password')">
                    Por favor, informe sua senha
                  </mat-error>
                  <mat-error *ngIf="form.get('password').hasError('minlength')">
                    A senha deve ter pelo menos 6 caracteres
                  </mat-error>
                  <mat-error *ngIf="form.get('password').hasError('maxlength')">
                    A senha não deve exceder 25 caracteres
                  </mat-error>
                </mat-form-field>
              </div>
              <button mat-raised-button color="primary" class="bold" (click)="onSubmit()">
                Login
              </button>
            </div>
            <div class="pt-1 pb-1 text-xs-center">
              <a [routerLink]="['/sessao/resetar-senha']" class="bold">Esqueceu a senha?</a
              >&nbsp;&nbsp;&nbsp;&nbsp;
              <a [routerLink]="['/sessao/criar-conta']" class="bold"
                >Crie uma conta gratuitamente</a
              >
            </div>
          </form>
          <mat-divider></mat-divider>
          <app-auth-providers (onError)="onError($event)" style="padding-top: 15px"></app-auth-providers>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

login.scss

// Flexbox Mixins
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox

.session {
  position: relative;
  // z-index: 4000;
  min-height: 100vh;
  @include flexbox;
  @include flex-direction(column);
}

.session-content {
  padding: 10px $gutter;
  @include flexbox;
  @include align-items(center);
  @include justify-content(center);
  @include flex(1 0 auto);
  @include flex-direction(column);
  min-height: 100%;
}

.session-wrapper {
  @include flex(none);
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}