
<div class="knk-mvp-overlay" (click)="close()"></div><a [routerLink]="['/', lang, 'discover']">
  <ng-svg-icon class="knk-mvp-logo" file="/public/images/logo.svg" name="mvp"></ng-svg-icon></a>
<div class="knk-mvp-wrapper">
  <div class="knk-mvp-wrapper__outside">
    <div class="knk-mvp-wrapper__inside">
      <div class="knk-mvp-card knk-mvp-card--login">
        <div class="knk-mvp-card__content">
          <form fxLayout="column" fxLayoutAlign="start stretch" fxFlex="1 1 100" #form="ngForm" (ngSubmit)="onSubmit(form)" name="loginForm" novalidate>
            <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px" fxFlex="1 1 auto">
              <ng-svg-icon class="knk-mvp-secure" file="/public/images/mvp.svg" name="secure"></ng-svg-icon>
              <div class="knk-mvp-title">Login</div>
            </div>
            <div fxLayout="column" fxLayoutAlign="center center" fxFlex="1 1 80px">
              <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(email) &amp;&amp; email?.errors">{{getErrorMessage(email, 'email')}}</div>
              <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(password) &amp;&amp; password?.errors">{{getErrorMessage(password, 'password')}}</div>
              <div class="knk-mvp-error" *ngIf="isLoginInvalid">{{errorMsg}}</div>
            </div>
            <div fxLayout="column" fxLayoutAlign="space-between center" fxFlex="1 1 auto">
              <div [style.width.%]="100">
                <div class="knk-mvp-field">
                  <div class="knk-mvp-field__model">
                    <input class="knk-input" knkEmail #email="ngModel" [(ngModel)]="user.email" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(email) &amp;&amp; email?.errors}" type="text" name="email" placeholder="Email" required>
                  </div>
                </div>
              </div>
              <div [style.width.%]="100">
                <div class="knk-mvp-field">
                  <div class="knk-mvp-field__model">
                    <input class="knk-input" #password="ngModel" #passwordModel [(ngModel)]="user.password" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(password) &amp;&amp; password?.errors}" type="password" name="password" placeholder="Password" required>
                    <ng-svg-icon class="knk-mvp-eye knk-mvp-field__ic" *ngIf="passwordModel.type === 'password'" [inputPassword2Text]="passwordModel" file="/public/images/mvp.svg" name="ic-invisible"></ng-svg-icon>
                    <ng-svg-icon class="knk-mvp-eye knk-mvp-field__ic" *ngIf="passwordModel.type === 'text'" [inputPassword2Text]="passwordModel" file="/public/images/mvp.svg" name="ic-visible"></ng-svg-icon>
                  </div>
                  <div [style.textAlign]="'right'"> <a [routerLink]="['/', lang, 'resetpassword']">Forgot password?</a></div>
                </div>
              </div>
              <div [style.width.%]="100" [style.marginTop.px]="10" [style.marginBottom.px]="10">
                <div class="knk-mvp-field">
                  <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded" [disabled]="!isFormValid(form)" [type]="'submit'">Start Knoksing</ng-button-distorted>
                </div>
              </div>
            </div>
            <div fxLayout="row" fxLayoutAlign="space-around center" fxFlex="1 1 auto">
              <div>Don’t have an account?&#160;<a [routerLink]="['/', lang, 'signup']">Sign-up</a></div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>