<ion-content padding class="theme_background">
    <ion-card>
        <form [formGroup]="loginForm">
            <ion-list>
                <div class="logo_div">
                    <img src="assets/imgs/logo.png">
                </div>
                <ion-item>
                    <ion-input formControlName="username" type="text" placeholder="{{'common.User_Credential' | translate}}"></ion-input>

                </ion-item>
                <div class="alert error" *ngIf="loginForm.controls.username.invalid && (loginForm.get('username').dirty || loginForm.get('username').touched)">
                   {{'common.Invalid_Credential' | translate}}
                </div>
                <div class="clear"></div>

                <ion-item>
                    <ion-input formControlName="password" type="password" placeholder="{{'common.Password' | translate}}"></ion-input>
                </ion-item>
                <div class="alert error" *ngIf="loginForm.controls.password.invalid && (loginForm.get('password').dirty || loginForm.get('password').touched)">
                    {{'common.Minimum_6_characters_required' | translate}}
                </div>
                <div class="clear"></div>
            </ion-list>
        </form>
        <button ion-button class="login_btn" (click)="login()" [disabled]="loginForm.invalid">{{'common.Login' | translate}}</button>
    </ion-card>
    <br>
    <p (click)="signup()"> {{'common.Are_you_new_to_VMig?' | translate}}<strong> {{'common.Click_here' | translate}}</strong></p>
    <p (click)="forgot()">{{'common.Forgot_Password?' | translate}}</p>
</ion-content>