login.component.html

login.component.html

<div class="m-login-title">
	<h5>Servyto</h5>
	<br>
	<h3>Log In</h3>
</div>

<m-auth-notice></m-auth-notice>

<form class="m-login-form m-form" name="login" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
	<div class="form-group">
		<mat-form-field>
			<mat-label>Username</mat-label>
			<input matInput name="username" type="text" placeholder="Username" autocomplete="off" [(ngModel)]="model.username"
			 #username="ngModel" required>
			<mat-error *ngIf="username.errors?.required">
				Username is required.
			</mat-error>
		</mat-form-field>
	</div>
	<div class="form-group">
		<mat-form-field>
			<mat-label>Password</mat-label>
			<input matInput minlength="4" type="password" name="password" placeholder="Password" autocomplete="off" [(ngModel)]="model.password"
			 #password="ngModel" required>
			<mat-error *ngIf="password.errors?.required">
				Password is required.
			</mat-error>
			<mat-error *ngIf="password.errors?.minlength">
				Password must be at least 4 characters long.
			</mat-error>
		</mat-form-field>
	</div>
</form>

<mat-grid-list cols="5" rowHeight="40px">
	<mat-grid-tile [colspan]="2">
		<span>Password dimenticata?</span>
	</mat-grid-tile>
	<mat-grid-tile [colspan]="2">
	</mat-grid-tile>
	<mat-grid-tile [colspan]="1">
		<m-spinner-button [options]="spinner" (click)="submit()">Login</m-spinner-button>
	</mat-grid-tile>
	<mat-grid-tile [colspan]="2" class="margin-top-minus-10">
		<a href="javascript:;" (click)="forgotPasswordPage($event)" class="m-link">
			<span>Clicca qui per recuperare</span>
		</a>
	</mat-grid-tile>
</mat-grid-list>