Cloud-CV/EvalAI

<div *ngIf="authService.isResetPassword">
  <div class="col s12 m6 offset-m3 left">
    <ul class="align-left">
      <li class="center">
        <span class="text-highlight">{{ authService.deliveredMsg }}</span>
      </li>
    </ul>
    <a [routerLink]="loginRoute" class="align-left">
      <button class="waves-effect waves-dark btn ev-btn-dark w-300" type="submit" value="Submit">Log In</button>
    </a>
  </div>
</div>
<div *ngIf="!authService.isResetPassword">
  <div class="col s12 m6 offset-m3 left">
    <ul class="left">
      <li class="ev-horiz-list">
        <a class="light-link" routerLinkActive="active-auth" (click)="authService.resetForm()"
          >Enter Your New Password</a
        >
      </li>
    </ul>
  </div>
  <div class="col s12 m6 offset-m3">
    <form
      name="resetconfirmForm"
      #resetconfirmform="ngForm"
      appComparePassword
      (ngSubmit)="resetPasswordConfirm(resetconfirmform.valid)"
      class="reset-password"
      novalidate
    >
      <div class="input-field align-left">
        <input
          type="{{ authService.canShowPassword ? 'text' : 'password' }}"
          id="new_password1"
          class="dark-autofill"
          name="password"
          #newpassword1="ngModel"
          (focusin)="isNewPassword1Focused = true"
          (focusout)="isNewPassword1Focused = authService.getUser['new_password1'] !== ''"
          (change)="isNewPassword1Focused = authService.getUser['new_password1'] !== ''"
          [(ngModel)]="authService.getUser['new_password1']"
          minlength="8"
          required
        />
        <span class="form-icon form-icon-dark" (click)="authService.togglePasswordVisibility()">
          <i *ngIf="!authService.canShowPassword" class="fa fa-eye pointer"></i>
          <i *ngIf="authService.canShowPassword" class="fa fa-eye-slash pointer"></i>
        </span>
        <label for="new_password1" [class.active]="isNewPassword1Focused">New Password (min 8 characters) *</label>
        <div
          class="wrn-msg text-highlight"
          *ngIf="newpassword1.invalid && (newpassword1.dirty || newpassword1.touched || resetconfirmform.submitted)"
        >
          <p *ngIf="newpassword1.errors.minlength">Password is less than 8 characters.</p>
          <p *ngIf="newpassword1.errors.required">Password is required.</p>
        </div>
      </div>
      <div class="input-field align-left">
        <input
          type="{{ authService.canShowConfirmPassword ? 'text' : 'password' }}"
          id="new_password2"
          class="dark-autofill"
          name="confirm_password"
          #newpassword2="ngModel"
          (focusin)="isNewPassword2Focused = true"
          (focusout)="isNewPassword2Focused = authService.getUser['new_password2'] !== ''"
          (change)="isNewPassword1Focused = authService.getUser['new_password2'] !== ''"
          [(ngModel)]="authService.getUser['new_password2']"
          minlength="8"
          required
        />
        <span class="form-icon form-icon-dark" (click)="authService.toggleConfirmPasswordVisibility()">
          <i *ngIf="!authService.canShowConfirmPassword" class="fa fa-eye pointer"></i>
          <i *ngIf="authService.canShowConfirmPassword" class="fa fa-eye-slash pointer"></i>
        </span>
        <label for="new_password2" [class.active]="isNewPassword2Focused">Confirm new password *</label>
        <div
          class="wrn-msg text-highlight"
          *ngIf="newpassword2.invalid && (newpassword2.dirty || newpassword2.touched || resetconfirmform.submitted)"
        >
          <p *ngIf="newpassword2.errors.minlength">Password is less than 8 characters.</p>
          <p *ngIf="newpassword2.errors.required">Password confirmation is required.</p>
        </div>
        <div
          class="wrn-msg text-highlight"
          *ngIf="
            resetconfirmform.errors !== null &&
            newpassword2.valid &&
            (newpassword2.dirty || newpassword2.touched || resetconfirmform.submitted)
          "
        >
          <p *ngIf="resetconfirmform.errors['passwordMismatch']">Passwords do not match</p>
        </div>
      </div>
      <div class="row">
        <br />
        <div class="col s6 align-left rm-gut">
          <button
            class="waves-effect waves-dark btn ev-btn-dark w-300 grad-btn grad-btn-dark"
            type="submit"
            value="Submit"
          >
            Submit
          </button>
        </div>
        <div class="col s6 align-right right rm-gut">
          <a [routerLink]="loginRoute" class="light-link fg-pass">Back to Log In</a>
        </div>
      </div>
      <div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left">{{ authService.FormError }}</div>
      <div>
        <p class="text-light-gray">
          <span class="text-med-black">Start with a new account </span
          ><a class="highlight-link" [routerLink]="signupRoute" (click)="authService.resetForm()"> Sign Up</a>
        </p>
      </div>
    </form>
  </div>
</div>