Login Form - Copy this Angular, Tailwind Component to your project
<!DOCTYPE html> <html lang="pt BR"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Oliveira Representações Login</title> </head> <body> <div class="login container"> <section class="title logo"> <img src="logo.svg"> <h1>Oliveira Representações</h1> </section> <form [formGroup]="loginForm" (ngSubmit)="onLogin()"> <div> <mat form field appearance="outline" class="form field"> <mat label>E mail</mat label> <input matInput type="email" id="username" formControlName="username" placeholder="Digite seu e mail" /> <div *ngIf="f['username'].invalid && (f['username'].dirty || f['username'].touched)"> <small *ngIf="f['username'].errors?.['required']">Email é obrigatório.</small> <small *ngIf="f['username'].errors?.['email']">Formato de e mail inválido.</small> </div> </mat form field> </div> <div> <mat form field appearance="outline" class="form field"> <mat label>Senha</mat label> <input matInput type="password" id="password" formControlName="password" placeholder="Digite sua senha" /> <div *ngIf="f['password'].invalid && (f['password'].dirty || f['password'].touched)"> <small *ngIf="f['password'].errors?.['required']">Senha é obrigatória.</small> <small *ngIf="f['password'].errors?.['minlength']"> A senha deve ter pelo menos 6 caracteres. </small> </div> </mat form field> </div> <div *ngIf="!logando"> <button mat fab extended type="submit" class="login button" [disabled]="loginForm.invalid"><mat icon>login</mat icon>Entrar</button> </div> <div class="spinner" *ngIf="logando"> <mat spinner class="mat spinner" diameter="35"></mat spinner> </div> <div class="errorOnLogin" *ngIf="errorOnLogin && !logando"> <h5>{{ errorMessage }}</h5> </div> </form> </div> </body> </html>
