Skip to content

Instantly share code, notes, and snippets.

@loiane loiane/login.html
Created Sep 24, 2019

Embed
What would you like to do?
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
>&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>
// 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
You can’t perform that action at this time.