DON-752: Create login page

src/app/app-routing.ts

@@ -1,9 +1,25 @@
-import { Routes } from '@angular/router';
+import {Router, Routes} from '@angular/router';
 
 import { CampaignListResolver } from './campaign-list.resolver';
 import { CampaignResolver } from './campaign.resolver';
 import { CharityCampaignsResolver } from './charity-campaigns.resolver';
 import {campaignStatsResolver} from "./campaign-stats-resolver";
+import {LoginComponent} from "./login/login.component";
+import {environment} from "../environments/environment";
+import {inject} from "@angular/core";
+import {IdentityService} from "./identity.service";
+
+const redirectToHomeIfLoggedIn = () => {
+  const identityService = inject(IdentityService);
+  const router = inject(Router);
+
+  const isLoggedIn = identityService.probablyHaveLoggedInPerson();
+  if (! isLoggedIn) {
+    return true;
+  } else {
+    return router.parseUrl('/');
+  }
+};
 
 const routes: Routes = [
   {
@@ -136,4 +152,17 @@ const routes: Routes = [
   },
 ];
 
+if (environment.environmentId !== 'production') {
+  routes.unshift(
+    {
+      path: 'login',
+      pathMatch: 'full',
+      component: LoginComponent,
+      canActivate: [
+        redirectToHomeIfLoggedIn,
+      ],
+    },
+  );
+}
+
 export {routes};

src/app/login/login.component.cy.ts

@@ -0,0 +1,7 @@
+import { LoginComponent } from './login.component'
+
+describe('LoginComponent', () => {
+  it('should mount', () => {
+    cy.mount(LoginComponent)
+  })
+})

src/app/login/login.component.html

@@ -0,0 +1,83 @@
+<main>
+  <div class="my-account">
+    <biggive-page-section>
+
+      <re-captcha
+        #captcha
+        size="invisible"
+        errorMode="handled"
+        (resolved)="captchaReturn($event)"
+        (errored)="captchaError()"
+        siteKey="{{ recaptchaIdSiteKey }}"
+      ></re-captcha>
+
+      <div *ngIf="forgotPassword else logIn">
+
+        <h2 mat-dialog-title>Reset Password</h2>
+
+        <div *ngIf="!userAskedForResetLink">
+          <mat-dialog-content class="mat-typography">
+            <form [formGroup]="resetPasswordForm">
+              <mat-form-field class="b-w-100" color="primary">
+                <mat-label for="loginEmailAddress">Email address</mat-label>
+                <input matInput type="email" id="loginEmailAddress" formControlName="emailAddress" autocapitalize="off">
+              </mat-form-field>
+              <p class="b-rt-0">Please enter your email address.</p>
+            </form>
+          </mat-dialog-content>
+
+          <mat-dialog-actions align="end">
+            <button
+              id="reset-password-modal-submit"
+              mat-raised-button
+              [disabled]="!resetPasswordForm.valid || userAskedForResetLink"
+              (click)="resetPasswordClicked()"
+              color="primary"
+            >Reset Password</button>
+          </mat-dialog-actions>
+        </div>
+
+        <div *ngIf="userAskedForResetLink">
+          <mat-spinner *ngIf="resetPasswordSuccess === undefined" [diameter]="40" aria-label="Loading your details"></mat-spinner>
+          <p *ngIf="resetPasswordSuccess">Please check your email and click on the password reset link received.</p>
+          <p *ngIf="resetPasswordSuccess === false" class="error">Sorry, we encountered a problem. Please <a href="https://community.biggive.org/s/contact-us" target="_blank">contact us</a> for help.</p>
+        </div>
+      </div>
+
+      <ng-template #logIn>
+        <h2 mat-dialog-title>Donor Log in</h2>
+        <mat-dialog-content class="mat-typography">
+          <form [formGroup]="loginForm">
+            <mat-form-field class="b-w-100" color="primary">
+              <mat-label for="loginEmailAddress">Email address</mat-label>
+              <input matInput type="email" id="loginEmailAddress" formControlName="emailAddress" autocapitalize="off">
+            </mat-form-field>
+
+            <mat-form-field class="b-w-100" color="primary">
+              <mat-label for="loginPassword">Password</mat-label>
+              <input matInput type="password" id="loginPassword" formControlName="password">
+            </mat-form-field>
+
+            <p *ngIf="loginError" class="error" aria-live="assertive">
+              Login error: {{ loginError }}
+            </p>
+          </form>
+        </mat-dialog-content>
+
+        <mat-dialog-actions style="justify-content: space-between;">
+          <a (click)="forgotPasswordClicked()">Forgot Password?</a>
+          <div>
+            <button
+              id="login-modal-submit"
+              mat-raised-button
+              [disabled]="!loginForm.valid || loggingIn"
+              (click)="login()"
+              color="primary"
+            >Log in</button>
+          </div>
+        </mat-dialog-actions>
+      </ng-template>
+
+    </biggive-page-section>
+  </div>
+</main>

src/app/login/login.component.ts

@@ -0,0 +1,133 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ComponentsModule} from "@biggive/components-angular";
+import {MatButtonModule} from "@angular/material/button";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {RecaptchaComponent, RecaptchaModule} from "ng-recaptcha";
+import {Credentials} from "../credentials.model";
+import {IdentityService} from "../identity.service";
+import {environment} from "../../environments/environment";
+import {EMAIL_REGEXP} from "../validators/patterns";
+import {ActivatedRoute, Router} from "@angular/router";
+import {MatSnackBar, MatSnackBarModule} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [CommonModule, ComponentsModule, MatButtonModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule, ReactiveFormsModule, RecaptchaModule, MatSnackBarModule],
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent implements OnInit{
+  @ViewChild('captcha') captcha: RecaptchaComponent;
+  protected forgotPassword = false;
+  protected loggingIn = false;
+  protected loginError?: string;
+  loginForm: FormGroup;
+  protected userAskedForResetLink = false;
+  protected resetPasswordForm: FormGroup;
+  protected resetPasswordSuccess: boolean|undefined = undefined;
+  protected recaptchaIdSiteKey = environment.recaptchaIdentitySiteKey;
+  private targetUrl: URL = new URL(environment.donateGlobalUriPrefix);
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private identityService: IdentityService,
+    private activatedRoute: ActivatedRoute,
+  ) {
+  }
+
+  ngOnInit() {
+    this.loginForm = this.formBuilder.group({
+      emailAddress: [null, [
+        Validators.required,
+        Validators.pattern(EMAIL_REGEXP),
+      ]],
+      password: [null, [
+        Validators.required,
+        Validators.minLength(10),
+      ]],
+    });
+
+    this.resetPasswordForm = this.formBuilder.group({
+      emailAddress: [null, [
+        Validators.required,
+        Validators.pattern(EMAIL_REGEXP),
+      ]],
+    });
+
+    const redirectParam = this.activatedRoute.snapshot.queryParams.r as string|undefined;
+
+    // allowed chars in URL to redirect to: a-z, A-Z, 0-9, - _ /
+
+    if (redirectParam && ! redirectParam.match(/[^a-zA-Z0-9\-_\/]/)) {
+      this.targetUrl = new URL(environment.donateGlobalUriPrefix + '/' + redirectParam);
+    }
+  }
+
+  login(): void {
+    this.loggingIn = true; // todo - add visible indication of this to page, e.g. spinner and removal of button
+    this.captcha.reset();
+    this.captcha.execute();
+  }
+
+  forgotPasswordClicked(): void {
+    this.forgotPassword = true;
+  }
+
+  resetPasswordClicked(): void {
+    this.userAskedForResetLink = true;
+    this.captcha.reset();
+    this.captcha.execute();
+  }
+
+  captchaError() {
+    this.loginError = 'Captcha error – please try again';
+    this.loggingIn = false;
+  }
+
+  captchaReturn(captchaResponse: string): void {
+    if (captchaResponse === null) {
+      // We had a code but now don't, e.g. after expiry at 1 minute. In this case
+      // the trigger wasn't a login click so do nothing. A repeat login attempt will
+      // re-execute the captcha in `login()`.
+      return;
+    }
+
+    if (this.loggingIn) {
+      const credentials: Credentials = {
+        captcha_code: captchaResponse,
+        email_address: this.loginForm.value.emailAddress,
+        raw_password: this.loginForm.value.password,
+      };
+
+      this.identityService.login(credentials).subscribe({
+        next: (response: { id: string, jwt: string }) => {
+          // todo - see if we can make login do `saveJWT` internally and delete it here?
+          this.identityService.saveJWT(response.id, response.jwt);
+          // assign window.location rather than the more angular-proper way of
+          // this.router.navigateByUrl('/') because we need to force the main menu to be updated
+          // to show that we're now logged in.
+
+          window.location.href = this.targetUrl.href;
+        },
+        error: (error) => {
+          this.captcha.reset();
+          const errorDescription = error.error.error.description;
+          this.loginError = errorDescription || error.message || 'Unknown error';
+          this.loggingIn = false;
+      }});
+    }
+
+    else if (this.userAskedForResetLink) {
+      this.identityService.getResetPasswordToken(this.resetPasswordForm.value.emailAddress, captchaResponse).subscribe({
+        next: _ => this.resetPasswordSuccess = true,
+        error: _ => this.resetPasswordSuccess = false,
+      });
+    }
+  }
+}