FACTS Info Login

login.html

<div fxLayout="row" fxLayoutAlign="center">
  <mat-card fxFlex="400px">
    <mat-card-header fxLayoutAlign="center">
      <mat-card-title>
        <div class="mat-subheading-2"><strong>Welcome to FACTS Info - PEPFAR Module</strong></div>
        <mat-card-subtitle *ngIf="loginPageMessage"><div [style.backgroundColor]="'yellow'" [innerHtml]="loginPageMessage"></div></mat-card-subtitle>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="loginForm" (ngSubmit)="login(loginForm)" fxLayout="column">
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
          <mat-icon>email</mat-icon>
          <mat-form-field fxFlex>
            <input matInput placeholder="E-mail" aria-label="E-mail" formControlName="email">
            <mat-error *ngIf="loginForm.get('email').hasError('required')">
              E-mail is required
            </mat-error>
            <mat-error *ngIf="loginForm.get('email').hasError('email')">
              E-mail is not valid
            </mat-error>
          </mat-form-field>
        </div>
        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
          <mat-icon matPrefix>vpn_key</mat-icon>
          <mat-form-field fxFlex>
            <input matInput placeholder="Password" aria-label="Password" [type]="hide ? 'password' : 'text'"
              formControlName="password">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
            <mat-hint *ngIf="loginForm.invalid">Minimum 12 characters</mat-hint>
            <mat-error *ngIf="loginForm.get('password').hasError('required')">
              Password is required
            </mat-error>
            <mat-error *ngIf="loginForm.get('password').hasError('minlength')">
              Password must be at least 12 characters long
            </mat-error>
            <mat-error *ngIf="loginForm.get('password').hasError('maxlength')">
              Password cannot be longer than 50 characters
            </mat-error>
            <mat-error *ngIf="loginForm.get('password').hasError('pattern')"
                    [innerHTML]=ValidationErrorMessage>
            </mat-error>
          </mat-form-field>
        </div>
        <div fxLayout="row" class="margin-top">
          <div class="flex-spacer"></div>
          <button mat-raised-button type="submit" color="primary" [disabled]="loginForm.invalid || !acceptedTerms">
            {{userLoggingIn ? '' : 'Login'}}
            <mat-progress-spinner mode="indeterminate" color="accent" [diameter]="30" *ngIf="userLoggingIn !== false"></mat-progress-spinner>
          </button>
        </div>
        <div fxLayout="row" class="margin-top">
          <div *ngIf="loginError" class="mat-caption error">{{loginError}}</div>
          <div *ngIf="!acceptedTerms" class="mat-caption error">You must accept the terms of use. <a [routerLink]=""
              (click)="showTerms()">Click this link to review and accept the terms of use.</a></div>
        </div>
      <div fxLayout="column" fxLayoutGap="10px">
        <a [routerLink]="" (click)="forgotPassword()">Forgot Password</a>
        <a *ngIf="showRegistration" [routerLink]="['/registration']" >Request Access</a>
        <a *ngIf="helpdeskUrl" [href]="helpdeskUrl" target="_blank">Get Support</a>
      </div>
     </form>

    </mat-card-content>
  </mat-card>
</div>

login.ts

this.authService.login(submittedForm.value.email, submittedForm.value.password).subscribe(
    authStatus => {
      if (authStatus.errorCode !== undefined && authStatus.errorCode === authError.NonPPEFARUser) {
        this.loginProblemDialog()
      } else if (authStatus.isAuthenticated) {
        const profile = this.resetStoreGetUserProfile()
        if (profile.IsPasswordTemporary) {
          this.uiValidPepfarUserMustChangePassword(profile)
        } else {
          this.welcomeToPepfar(profile, authStatus)
        }
      } else if (authStatus.authenticationError) {
        this.userAuthenticationError(authStatus)
      }
    },
    error => (this.loginError = error)
  )


export const PasswordValidationErrorMessage = `Your password ...<br><ul>
<li>Must be between 12 and 50 characters.</li>
<li>Must contain at least one of the special <br>characters !@#$%^?*{}</li>
<li>Cannot start or end with a number</li>
<li>Cannot contain a space or any of &"'</li></ul>`

/** Password validators */
export const PasswordValidation = [
    Validators.required,
    Validators.minLength(12),
    Validators.maxLength(50),
    Validators.pattern(
      `^(?![0-9].*$)(?!.* )(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?!.* )(?!.*&)(?!.*")(?!.*')[^ ]{10,}\\D$`
    ),
    patternValidator(/[=!#$%()*+,-./:;?@[\\\]^_`{|}~]/, {
      pattern: true,
    }),
  ]

@conjugatepriors ☝️ login HTML and TypeScript we use in several apps

@craigeddy Thank you for sending, but I don't think this is usable in its current form. Some specific points below.

• is the keyword "this" tagged to a specific component?
• There seem to be several functions called in login.ts that are not defined anywhere, for example this.welcomeToPepfar()
• Validators object is undefined in login.ts according to the typescript linter in VS Code
• Several missing links in the login.html file
• login.html doesn't define a script src

I have tested the form locally with login.html and login.ts in the same directory, and I get a page that loads but is unusable. Can you provide fixes to the above and a full implementation of the login page?