Improve mock login

src/ts/components/shared/sign-in-box/sign-in-box.pug

@@ -33,11 +33,13 @@
 				.sr-only Sign in using {{p.name}}
 
 	div(*ngIf="local")
-		.btn-group.dropdown(dropdown)
+		div(*ngIf="mocks === undefined")
+			fa-icon([icon]="spinnerIcon" [fixedWidth]="true" [spin]="true")
+			| Loading mock logins
+		.btn-group.dropdown(dropdown *ngIf="mocks !== undefined")
 			button.btn.btn-lg.btn-dark.dropdown-toggle(dropdownToggle)
 				| Mock login
 			.dropdown-menu(*dropdownMenu)
-				//- NOTE: change usernames to ids of accounts you want to use for testing
-				a.dropdown-item(href="/auth/local?password=x&username=57a3dc6f2f0019a161cdebf6" target="_self") Admin
-				a.dropdown-item(href="/auth/local?password=x&username=57ae2332a67f4dc52e123e14" target="_self") Test
-				a.dropdown-item(href="/auth/local?password=x&username=57ae2332a67f4dc52e123e15" target="_self") Other
+				a.dropdown-item(*ngFor="let a of mocks" [href]="'/auth/local?password=x&username=' + a[0]" target="_self") {{ a[1]}}
+				a.dropdown-item((click)="createNew()") Create new
+			

src/ts/components/shared/sign-in-box/sign-in-box.ts

@@ -1,7 +1,10 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit } from '@angular/core';
 import { signUpProviders, signInProviders, local } from '../../../client/data';
 import { emptyIcon, oauthIcons } from '../../../client/icons';
 import { OAuthProvider } from '../../../common/interfaces';
+import { HttpClient } from '@angular/common/http';
+import { noop } from 'rxjs';
+import { observableToPromise } from '../../../common/utils';
 
 export function getProviderIcon(id: string) {
 	return oauthIcons[id] || emptyIcon;
@@ -12,11 +15,31 @@ export function getProviderIcon(id: string) {
 	templateUrl: 'sign-in-box.pug',
 	styleUrls: ['sign-in-box.scss'],
 })
-export class SignInBox {
+export class SignInBox implements OnInit {
 	readonly signUpProviders = signUpProviders;
 	readonly signInProviders = signInProviders;
 	readonly local = local || DEVELOPMENT;
 	@Output() signIn = new EventEmitter<OAuthProvider>();
+	mocks?: string[][] = undefined;
+	constructor(private http: HttpClient) {}
+
+	async ngOnInit() {
+		observableToPromise(this.http.get<string[][]>('/auth/mocks', undefined))
+			.then(data => {
+				this.mocks = data;
+			})
+			.catch(noop)
+	}
+	async createNew() {
+		const name = prompt('Account name');
+		if (name) {
+			const data = await observableToPromise(this.http.post<string[]>('/auth/create-account', {name }));
+			if (!this.mocks) {
+				this.mocks = [];
+			}
+			this.mocks.push(data);
+		}
+	}
 	icon(id: string) {
 		return getProviderIcon(id);
 	}