login
<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 | |
> | |
<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> |
// 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment