13 files changed, 388 insertions, 96 deletions

diff --git a/overlays/spm/frontend/src/app/app-routing.module.ts b/overlays/spm/frontend/src/app/app-routing.module.ts
index 2da97cea..bffe8c4d 100644
--- a/overlays/spm/frontend/src/app/app-routing.module.ts
+++ b/overlays/spm/frontend/src/app/app-routing.module.ts
@@ -1,17 +1,14 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { SpmComponent } from './spm/spm.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
 
 const routes: Routes = [
-  { path: 'spm', component: SpmComponent },
+  { path: 'spm', loadChildren: () => import('./spm/spm.module').then(m => m.SpmModule) },
   { path: '', redirectTo: '/spm', pathMatch: 'full' },
-  { path: '**', component: PageNotFoundComponent }
+  { path: '**', loadChildren: () => import('./page-not-found/page-not-found.module').then(m => m.PageNotFoundModule) }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/overlays/spm/frontend/src/app/app.component.html b/overlays/spm/frontend/src/app/app.component.html
index f9b5b8fc..1a2f88b0 100644
--- a/overlays/spm/frontend/src/app/app.component.html
+++ b/overlays/spm/frontend/src/app/app.component.html
@@ -1,7 +1,21 @@
-<mat-toolbar color="primary">
-  <div>
-    <a mat-button routerLink="/spm" routerLinkActive="active">spm</a>
-  </div>
-</mat-toolbar>
-<!-- The routed views render in the <router-outlet> -->
-<router-outlet></router-outlet>
+<div gdAreas="nav | content" gdRows="min-content 1fr" style="min-height: 100vh">
+   <mat-toolbar color="primary" gdArea="nav" fxLayout="flex" fxLayoutGap="16px">
+     <div>
+       <span class="mono" [innerHTML]="apiDomain$ | async"></span>
+     </div>
+     <div>
+       <a mat-button routerLink="/spm" routerLinkActive="active">spm</a>
+     </div>
+   </mat-toolbar>
+   <!-- The routed views render in the <router-outlet> -->
+   <ng-template #router_loading_indicator>
+     <div gdArea="content" fxLayout="column" fxLayoutAlign="center stretch">
+       <div fxFlex="none" fxFlexAlign="center">
+         <mat-spinner></mat-spinner>
+       </div>
+     </div>
+   </ng-template>
+   <div class="content" gdArea="content" *ngIf="!(routerLoading$ | async); else router_loading_indicator">
+     <router-outlet></router-outlet>
+   </div>
+</div>
diff --git a/overlays/spm/frontend/src/app/app.component.sass b/overlays/spm/frontend/src/app/app.component.sass
index e69de29b..4732ea49 100644
--- a/overlays/spm/frontend/src/app/app.component.sass
+++ b/overlays/spm/frontend/src/app/app.component.sass
@@ -0,0 +1,2 @@
+.content
+  padding: 16px
diff --git a/overlays/spm/frontend/src/app/app.component.ts b/overlays/spm/frontend/src/app/app.component.ts
index 7c231203..11c0f772 100644
--- a/overlays/spm/frontend/src/app/app.component.ts
+++ b/overlays/spm/frontend/src/app/app.component.ts
@@ -1,6 +1,18 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { LocalStorage } from 'ngx-webstorage';
+import { BehaviorSubject, Subscription, Subject } from 'rxjs';
+import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
-import { ColorSchemeService } from './color-scheme.service';
+import { map, filter } from 'rxjs/operators';
+
+type ColorScheme = 'dark' | 'light';
+
+export interface DomainResponse {
+  domain: string;
+}
 
 @Component({
   selector: 'app-root',
@@ -8,14 +20,81 @@ import { ColorSchemeService } from './color-scheme.service';
   styleUrls: ['./app.component.sass']
 })
 export class AppComponent implements OnInit, OnDestroy {
+  private renderer: Renderer2;
+  colorSchemeMatcher: MediaQueryList;
+
   title = 'spm-frontend';
 
-  constructor(private colorSchemeService: ColorSchemeService) {}
+  public activeColorScheme$: BehaviorSubject<ColorScheme> = new BehaviorSubject<ColorScheme>('dark');
+
+  @LocalStorage('prefers-color-scheme')
+  public colorSchemeOverride?: ColorScheme;
+
+  colorSchemeSubscription?: Subscription;
+
+  router: Router;
+  public routerLoading$: Subject<boolean> = new Subject<boolean>();
+  routerEventSubscription?: Subscription;
+
+  http: HttpClient;
+  apiDomain$: Subject<string> = new Subject<string>();
+
+  constructor( rendererFactory: RendererFactory2,
+               mediaMatcher: MediaMatcher,
+               @Inject(DOCUMENT) private document: Document,
+               router: Router,
+               http: HttpClient,
+             ) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+    this.colorSchemeMatcher = mediaMatcher.matchMedia('(prefers-color-scheme: dark)');
+    this.document = document;
+
+    this.colorSchemeListener = this.colorSchemeListener.bind(this);
+    this.colorSchemeMatcher.addEventListener('change', this.colorSchemeListener);
+    this.activeColorScheme$.next(this.getColorScheme());
+
+    this.router = router;
+    this.http = http;
+  }
+
+  private colorSchemeListener(event: { matches: boolean; }) {
+    this.activeColorScheme$.next(this.getColorScheme(event));
+  }
+
+  private getColorScheme(event?: { matches: boolean; }): ColorScheme {
+    if (this.colorSchemeOverride) {
+      return this.colorSchemeOverride;
+    } else if (event) {
+      return event.matches ? 'dark' : 'light';
+    } else {
+      return this.colorSchemeMatcher.matches ? 'dark' : 'light';
+    }
+  }
+
+  updateColorScheme(scheme: ColorScheme) {
+    this.colorSchemeOverride = scheme;
+    this.activeColorScheme$.next(scheme);
+  }
 
   ngOnInit() {
-    this.colorSchemeService.init();
+    this.colorSchemeSubscription = this.activeColorScheme$.subscribe(scheme => { this.renderer.setAttribute(this.document.body, 'data-color-scheme', scheme); });
+
+    this.routerEventSubscription = this.router.events.pipe(
+      filter(event =>
+        event instanceof NavigationStart ||
+        event instanceof NavigationEnd ||
+        event instanceof NavigationCancel ||
+        event instanceof NavigationError
+            ),
+      map(event => event instanceof NavigationStart)
+    ).subscribe(this.routerLoading$);
+
+    this.http.get<DomainResponse>('/domain', { headers: new HttpHeaders({ 'Accept': 'application/json' }) }).pipe(map((resp: DomainResponse) => resp.domain)).subscribe(this.apiDomain$);
   }
   ngOnDestroy() {
-    this.colorSchemeService.destroy();
+    this.colorSchemeMatcher.removeEventListener('change', this.colorSchemeListener);
+
+    this.colorSchemeSubscription?.unsubscribe();
+    this.routerEventSubscription?.unsubscribe();
   }
 }
diff --git a/overlays/spm/frontend/src/app/app.module.ts b/overlays/spm/frontend/src/app/app.module.ts
index 914f73a2..98e5106e 100644
--- a/overlays/spm/frontend/src/app/app.module.ts
+++ b/overlays/spm/frontend/src/app/app.module.ts
@@ -1,30 +1,30 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { NgxWebstorageModule } from 'ngx-webstorage';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { SpmComponent } from './spm/spm.component';
-import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatIconModule } from '@angular/material/icon';
 import { HttpClientModule } from "@angular/common/http";
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FlexLayoutModule } from "@angular/flex-layout";
 
 @NgModule({
   declarations: [
     AppComponent,
-    SpmComponent,
-    PageNotFoundComponent
   ],
   imports: [
     BrowserModule,
+    NgxWebstorageModule.forRoot(),
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatIconModule,
     HttpClientModule,
     MatToolbarModule,
-    MatButtonModule
+    MatButtonModule,
+    MatProgressSpinnerModule,
+    FlexLayoutModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/overlays/spm/frontend/src/app/color-scheme.service.ts b/overlays/spm/frontend/src/app/color-scheme.service.ts
deleted file mode 100644
index c56e9c23..00000000
--- a/overlays/spm/frontend/src/app/color-scheme.service.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { MediaMatcher } from '@angular/cdk/layout';
-import { LocalStorage } from 'ngx-webstorage';
-
-type ColorScheme = "dark" | "light";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ColorSchemeService {
-  private renderer: Renderer2;
-  matcher!: MediaQueryList;
-
-  @LocalStorage('prefers-color-scheme')
-  public colorSchemeOverride: ColorScheme;
-
-  public activeColorScheme: BehaviorSubject<ColorScheme> = new BehaviorSubject("light");
-
-  constructor(rendererFactory: RendererFactory2,
-              mediaMatcher: MediaMatcher
-             ) {
-    // Create new renderer from renderFactory, to make it possible to use renderer2 in a service
-    this.renderer = rendererFactory.createRenderer(null, null);
-    this.matcher = mediaMatcher.matchMedia('(prefers-color-scheme: dark)');
-
-    this._listener = this._listener.bind(this);
-  }
-
-  init() {
-    this.matcher.addEventListener('change', this._listener);
-    this.load();
-  }
-
-  _listener(event: { matches: any; }) {
-    this.activeColorScheme.next(event.matches ? 'dark' : 'light');
-  }
-
-  destroy() {
-    this.matcher.removeEventListener('change', this._listener);
-  }
-
-  _getColorScheme() {
-    if (this.colorSchemeOverride) {
-      this.colorSchemeOverride
-    } else {
-      this.matcher.matches ? 'dark' : 'light'
-    }
-  }
-
-  load() {
-    this.activeColorScheme.next(this._getColorScheme());
-  }
-
-  update(scheme: ColorScheme) {
-    this.colorSchemeOverride = scheme;
-    this.activeColorScheme.next(scheme);
-  }
-
-  currentActive() {
-    return this.colorScheme;
-  }
-}
diff --git a/overlays/spm/frontend/src/app/page-not-found/page-not-found.module.ts b/overlays/spm/frontend/src/app/page-not-found/page-not-found.module.ts
new file mode 100644
index 00000000..b9d8945c
--- /dev/null
+++ b/overlays/spm/frontend/src/app/page-not-found/page-not-found.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { PageNotFoundComponent } from './page-not-found.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [PageNotFoundComponent],
+  exports: [PageNotFoundComponent],
+  imports: [
+    RouterModule.forChild([{
+      path: '',
+      pathMatch: 'full',
+      component: PageNotFoundComponent
+    }]),
+  ]
+})
+export class PageNotFoundModule {}
diff --git a/overlays/spm/frontend/src/app/spm/spm.component.html b/overlays/spm/frontend/src/app/spm/spm.component.html
index d1339d95..5d0e625a 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.html
+++ b/overlays/spm/frontend/src/app/spm/spm.component.html
@@ -1,3 +1,33 @@
-<p>spm works!</p>
+<div id="mail-panel-container" fxLayout="row wrap" style="gap: 16px">
+  <ng-template ngFor [ngForOf]="spmMails$ | async | keyvalue: asIsOrder" let-entry>
+    <mat-card>
+      <mat-card-title class="mono" *ngIf="entry.value.state !== 'loading'">{{entry.value.local}}</mat-card-title>
+      <mat-card-subtitle class="mono" *ngIf="entry.value.state !== 'loading'">@{{entry.value.domain}}</mat-card-subtitle>
+      <mat-card-content *ngIf="entry.value.state === 'loading'">
+        <mat-spinner style="margin: auto"></mat-spinner>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="claim(entry.key)" [disabled]="entry.value.state === 'loaded' || entry.value.state === 'claiming' ? null : true">
+          <mat-icon aria-hidden="false" aria-label="Claim" svgIcon="check"></mat-icon>
+          <span *ngIf="entry.value.state !== 'claimed'">Claim</span>
+          <span *ngIf="entry.value.state === 'claimed'">Claimed</span>
+        </button>
+        <button mat-stroked-button color="warn" (click)="forget(entry.key)">
+          <mat-icon aria-hidden="false" aria-label="Forget" svgIcon="delete_forever"></mat-icon>
+          <span *ngIf="entry.value.state !== 'claimed'">Forget</span>
+          <span *ngIf="entry.value.state === 'claimed'">Hide</span>
+        </button>
+      </mat-card-actions>
+      <mat-card-footer *ngIf="entry.value.state === 'loaded' && entry.value.percent_expiration">
+        <mat-progress-bar mode="determinate" [value]="entry.value.percent_expiration"></mat-progress-bar>
+      </mat-card-footer>
+      <mat-card-footer *ngIf="entry.value.state === 'claiming'">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </mat-card-footer>
+    </mat-card>
+  </ng-template>
+</div>
 
-<mat-icon aria-hidden="false" aria-label="Thumbs up" svgIcon="thumb_up"></mat-icon>
+<button id="add-button" mat-fab color="accent" (click)="add()">
+  <mat-icon aria-hidden="false" aria-label="Add" svgIcon="add"></mat-icon>
+</button>
diff --git a/overlays/spm/frontend/src/app/spm/spm.component.sass b/overlays/spm/frontend/src/app/spm/spm.component.sass
index e69de29b..bda4dd4a 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.sass
+++ b/overlays/spm/frontend/src/app/spm/spm.component.sass
@@ -0,0 +1,13 @@
+#add-button
+  position: fixed
+  bottom: 16px
+  right: 16px
+
+#mail-panel-container
+  margin-bottom: 88px
+
+.mat-card
+  overflow: hidden
+
+.mat-card-footer
+  margin: -16px
diff --git a/overlays/spm/frontend/src/app/spm/spm.component.ts b/overlays/spm/frontend/src/app/spm/spm.component.ts
index 7d172052..f0655b55 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.ts
+++ b/overlays/spm/frontend/src/app/spm/spm.component.ts
@@ -1,24 +1,193 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
 import { DomSanitizer } from "@angular/platform-browser";
+import { BehaviorSubject, interval, Subscription, catchError, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
+
+import { v4 as uuidv4 } from 'uuid';
+import jwtDecode, { JwtPayload } from "jwt-decode";
+
+import { map, withLatestFrom } from 'rxjs/operators';
+
+export interface LoadingSpmMail {
+  state: "loading";
+}
+
+export interface LoadedSpmMail {
+  state: "loaded" | "claiming";
+  local: string;
+  domain: string;
+  jwt: string;
+  start?: Date;
+  expiration?: Date;
+  percent_expiration?: number;
+}
+
+export interface ExpiredSpmMail {
+  state: "expired";
+  local: string;
+  domain: string;
+}
+
+export interface ClaimedSpmMail {
+  state: "claimed";
+  local: string;
+  domain: string;
+}
+
+export interface SpmJwtUnregisteredPayload {
+  local: string;
+}
+
+type SpmJwtPayload = JwtPayload & SpmJwtUnregisteredPayload;
+
+export type SpmMail = LoadingSpmMail | LoadedSpmMail | ClaimedSpmMail | ExpiredSpmMail;
+
+function percentExpiration(start: Date, exp: Date, now?: Date) {
+  if (!now) {
+    now = new Date();
+  }
+
+  if (now < start) {
+    return 100;
+  } else if (exp < now) {
+    return 0;
+  } else {
+    const length = exp.getTime() - start.getTime();
+    const diff = exp.getTime() - now.getTime();
+    return 100 * (diff / length);
+  }
+}
+
+function updateSpmExpiration(value: SpmMail): SpmMail {
+  if (value.state === 'loaded') {
+    const percent_expiration = value.expiration && value.start ? percentExpiration(value.start, value.expiration) : undefined;
+    if (percent_expiration !== undefined && percent_expiration <= 0) {
+      return {state: "expired", local: value.local, domain: value.domain};
+    } else {
+      return {...value, percent_expiration: percent_expiration}
+    }
+  } else {
+    return value;
+  }
+}
 
 @Component({
   selector: 'app-spm',
   templateUrl: './spm.component.html',
   styleUrls: ['./spm.component.sass']
 })
-export class SpmComponent implements OnInit {
+export class SpmComponent implements OnInit, OnDestroy {
+  spmMails$: BehaviorSubject<Map<string, SpmMail>> = new BehaviorSubject(new Map());
+  http: HttpClient;
+
+  intervalSubscription?: Subscription;
 
   constructor(private matIconRegistry: MatIconRegistry,
-              private domSanitizer: DomSanitizer
+              private domSanitizer: DomSanitizer,
+              http: HttpClient,
              ) {
     this.matIconRegistry.addSvgIcon(
-      `thumb_up`,
-      this.domSanitizer.bypassSecurityTrustResourceUrl(`icons/thumb_up/baseline.svg`)
+      `add`,
+      this.domSanitizer.bypassSecurityTrustResourceUrl(`icons/add/baseline.svg`)
+    );
+    this.matIconRegistry.addSvgIcon(
+      `check`,
+      this.domSanitizer.bypassSecurityTrustResourceUrl(`icons/check/baseline.svg`)
+    );
+    this.matIconRegistry.addSvgIcon(
+      `delete_forever`,
+      this.domSanitizer.bypassSecurityTrustResourceUrl(`icons/delete_forever/baseline.svg`)
     );
+
+    this.http = http;
+  }
+
+  add() {
+    const ident = uuidv4();
+    const curr: Map<string, SpmMail> = this.spmMails$.getValue();
+    curr.set(ident, { state: 'loading' });
+    this.spmMails$.next(curr);
+    this.http.get('/spm/generate', { headers: new HttpHeaders({ 'Accept': 'text/plain' }), observe: 'body' as const, responseType: 'text' as const }).subscribe(payload => this.load(ident, payload))
+  }
+
+  load(k: string, encoded: string) {
+    const payload = jwtDecode<SpmJwtPayload>(encoded);
+    if (typeof payload.aud === 'string') {
+      const curr: Map<string, SpmMail> = this.spmMails$.getValue();
+      curr.set(k, {
+        state: 'loaded',
+        local: payload.local,
+        domain: payload.aud,
+        jwt: encoded,
+        expiration: payload.exp ? new Date(1000 * payload.exp) : undefined,
+        start: payload.nbf ? new Date(1000 * payload.nbf) : undefined,
+        percent_expiration: payload.exp && payload.nbf ? percentExpiration(new Date(1000 * payload.nbf), new Date(1000 * payload.exp)) : undefined
+      });
+      this.spmMails$.next(curr);
+    }
+  }
+
+  handleClaimError(k: string, error: HttpErrorResponse) {
+    this.setState(k, 'loaded');
+
+    return throwError(() => new Error('Claiming failed.'));
+  }
+
+  claim(k: string) {
+    const val = this.spmMails$.getValue().get(k);
+    if (!val || val.state !== 'loaded')
+      return;
+
+    this.setState(k, 'claiming');
+
+    this.http.post('/spm/claim', val.jwt, { observe: 'response' as const, headers: new HttpHeaders({ 'Content-Type': 'text/plain; charset=utf-8' }) }).pipe(catchError(error => this.handleClaimError(k, error))).subscribe(response => this.claimed(k, response))
   }
 
-  ngOnInit(): void {
+  setState(k: string, state: 'loaded' | 'claiming') {
+    const curr: Map<string, SpmMail> = this.spmMails$.getValue();
+    const val = curr.get(k);
+    if (!val || (val.state !== 'loaded' && val.state !== 'claiming'))
+      return;
+
+    curr.set(k, {...val, state: state});
+    this.spmMails$.next(curr);
+  }
+
+  claimed(k: string, response: HttpResponse<any>) {
+    if (response.status !== 204) {
+      this.setState(k, 'loaded');
+      return;
+    }
+
+    const curr: Map<string, SpmMail> = this.spmMails$.getValue();
+    const val = curr.get(k);
+    if (val && (val.state === 'claiming' || val.state === 'loaded')) {
+      curr.set(k, {state: "claimed", local: val.local, domain: val.domain});
+    }
+    this.spmMails$.next(curr);
   }
 
+  forget(k: string) {
+    const curr: Map<string, SpmMail> = this.spmMails$.getValue();
+    curr.delete(k);
+    this.spmMails$.next(curr);
+  }
+
+  stepSpmMails(curr: Map<string, SpmMail>) {
+    curr.forEach((value, key) => curr.set(key, updateSpmExpiration(value)));
+    this.spmMails$.next(curr);
+  }
+
+  ngOnInit() {
+    this.intervalSubscription = interval(1000).pipe(withLatestFrom(this.spmMails$)).subscribe(([_, mails]: [number, Map<string, SpmMail>]) => this.stepSpmMails(mails));
+  }
+
+  ngOnDestroy() {
+    this.intervalSubscription?.unsubscribe();
+  }
+
+  asIsOrder(a: any, b: any) {
+    return -1;
+  }
 }
diff --git a/overlays/spm/frontend/src/app/spm/spm.module.ts b/overlays/spm/frontend/src/app/spm/spm.module.ts
new file mode 100644
index 00000000..f51e6e98
--- /dev/null
+++ b/overlays/spm/frontend/src/app/spm/spm.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpmComponent } from './spm.component';
+import { RouterModule } from '@angular/router';
+
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { FlexLayoutModule } from "@angular/flex-layout";
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+@NgModule({
+  declarations: [SpmComponent],
+  exports: [SpmComponent],
+  imports: [
+    RouterModule.forChild([{
+      path: '',
+      pathMatch: 'full',
+      component: SpmComponent
+    }]),
+    MatIconModule,
+    MatButtonModule,
+    MatCardModule,
+    CommonModule,
+    FlexLayoutModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+  ]
+})
+export class SpmModule {}
diff --git a/overlays/spm/frontend/src/custom-theme.scss b/overlays/spm/frontend/src/custom-theme.scss
index 5c2d48aa..36369bd5 100644
--- a/overlays/spm/frontend/src/custom-theme.scss
+++ b/overlays/spm/frontend/src/custom-theme.scss
@@ -49,3 +49,5 @@ $spm-frontend-dark-theme: mat.define-dark-theme((
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.mono { font-family: "Source Sans Pro", monospace; }
diff --git a/overlays/spm/frontend/src/styles.sass b/overlays/spm/frontend/src/styles.sass
index 4f2cb82a..4ffe0b36 100644
--- a/overlays/spm/frontend/src/styles.sass
+++ b/overlays/spm/frontend/src/styles.sass
@@ -1,2 +1,3 @@
 /* You can add global styles to this file, and also import other style files */
 @import @fontsource/roboto
+@import @fontsource/source-sans-pro