definma-ui/src/app/login/login.component.html

<div class="login-wrapper">
  <h2>Please log in</h2>


  <form #loginForm="ngForm">
    <rb-form-input name="username" label="username" appValidate="username" required [(ngModel)]="username"
                   #usernameInput="ngModel">
      <ng-template rbFormValidationMessage="failure">{{usernameInput.errors.failure}}</ng-template>
    </rb-form-input>
    <rb-form-input *ngIf="!passreset" type="password" name="password" label="password" appValidate="password" required
                   [(ngModel)]="password" #passwordInput="ngModel">
      <ng-template rbFormValidationMessage="failure">{{passwordInput.errors.failure}}</ng-template>
    </rb-form-input>
    <rb-form-input *ngIf="passreset" type="email" name="email" label="email" email required [(ngModel)]="email"
                   #emailInput="ngModel">
      <ng-template rbFormValidationMessage="failure">{{emailInput.errors.failure}}</ng-template>
    </rb-form-input>
    <a href="#" class="forgot-pass" (click)="passreset = !passreset">Forgot password</a>
    <button class="rb-btn rb-primary login-button" (click)="login()" type="submit" [disabled]="!loginForm.form.valid">
      {{passreset ? 'Send' : 'Login'}}
    </button>
    <div class="message">{{message}}</div>
  </form>
</div>