<div class="container"
	fxLayout="column"
	fxLayoutAlign="space-around center">
	<!-- Password Form -->
	<form [formGroup]="passwdFG"
		fxLayout="column">
		<mat-form-field>
			<mat-label>Ancien mot de passe</mat-label>
			<input matInput type="password" formControlName="old_passwd" class="form-control" name="old_passwd" placeholder="Ancien mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['old_passwd'].errors}">
			<mat-error class="myError" *ngIf="passwdFG.controls['old_passwd'].hasError('required')">L'ancien mot de passe est requis !</mat-error>
		</mat-form-field>
		<mat-form-field>
			<mat-label>Nouveau mot de passe</mat-label>
			<input matInput type="password" formControlName="new_passwd" class="form-control" name="new_password" placeholder="Nouveau mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['new_passwd'].errors}">
			<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('required')">Le nouveau mot de passe est requis !</mat-error>
			<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
		</mat-form-field>
		<mat-form-field>
			<mat-label>Confirmation</mat-label>
			<input matInput type="password" formControlName="confirmation" class="form-control" name="confirmation" placeholder="Confirmation" [ngClass]="{'is-invalid':submitted && passwdFG.controls['confirmation'].errors}">
			<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('required')">La confirmation du nouveau mot de passe est requis !</mat-error>
			<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
			<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('mismatch')">La confirmation doit correspondre au mot de passe</mat-error>
		</mat-form-field>
		<button mat-raised-button color="primary" [disabled]="isDisabled" (click)="onUpdate()">{{buttonText}}</button>
	</form>
</div>
