open-learning-exchange/planet

<form (ngSubmit)="onSubmit()" class="login-form" [formGroup]="userForm">
  <mat-form-field class="full-width">
    <input matInput i18n-placeholder placeholder="Username" name="name" formControlName = "name" planetLowercase planetRestrictDiacritics autofocus/>
    <mat-error>
      <planet-form-error-messages [control]="userForm.controls.name"></planet-form-error-messages>
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width">
    <input matInput i18n-placeholder placeholder="Password" name="password" [type]="showPassword ? 'text' : 'password'" formControlName = "password"/>
    <button type="button" mat-icon-button matSuffix (click)="showPassword = !showPassword" tabindex="-1">
      <mat-icon>{{showPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
    </button>
    <mat-error>
      <planet-form-error-messages [control]="userForm.controls.password"></planet-form-error-messages>
    </mat-error>
  </mat-form-field>
  <mat-form-field class="full-width" *ngIf="createMode">
    <input matInput i18n-placeholder placeholder="Repeat Password" name="repeatPassword" [type]="showRepeatPassword ? 'text' : 'password'"  formControlName = "repeatPassword" />
    <button type="button" mat-icon-button matSuffix (click)="showRepeatPassword = !showRepeatPassword" tabindex="-1">
      <mat-icon>{{showRepeatPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
    </button>
    <mat-error>
      <planet-form-error-messages [control]="userForm.controls.repeatPassword"></planet-form-error-messages>
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary" [planetSubmit]="userForm.valid">
    <ng-container *ngIf="createMode; else signIn" i18n>Become a member</ng-container>
    <ng-template #signIn i18n>SIGN-IN</ng-template>
  </button>
  <a class="addUser" [routerLink]="createMode ? ['/login'] : ['newmember']">
    <ng-container *ngIf="createMode; else registerMember" i18n>Already have an account</ng-container>
    <ng-template #registerMember i18n>Become a member</ng-template>
  </a>
</form>