impr(dev): add quick login button to frontend dev modal

!nuf

Author: Miodec

frontend/src/html/popups.html

@@ -8,6 +8,7 @@
   <div class="modal">
     <div class="title">Dev options</div>
     <button class="generateData">generate data</button>
+    <button class="quickLogin">quick login</button>
     <button class="toggleMediaQueryDebug">toggle media query debug</button>
     <button class="showTestNotifications">show test notifications</button>
     <button class="showRealWordsInput">show real words input</button>

frontend/src/ts/constants/env-config.ts

@@ -3,6 +3,8 @@ type Config = {
   isDevelopment: boolean;
   clientVersion: string;
   recaptchaSiteKey: string;
+  quickLoginEmail: string | undefined;
+  quickLoginPassword: string | undefined;
 };
 
 //@ts-expect-error these get replaced by vite
@@ -13,10 +15,16 @@ const isDevelopment = IS_DEVELOPMENT;
 const clientVersion = CLIENT_VERSION;
 // @ts-expect-error
 const recaptchaSiteKey = RECAPTCHA_SITE_KEY;
+// @ts-expect-error
+const quickLoginEmail = QUICK_LOGIN_EMAIL;
+// @ts-expect-error
+const quickLoginPassword = QUICK_LOGIN_PASSWORD;
 
 export const envConfig: Config = {
   backendUrl,
   isDevelopment,
   clientVersion,
   recaptchaSiteKey,
+  quickLoginEmail,
+  quickLoginPassword,
 };

frontend/src/ts/controllers/account-controller.ts

@@ -276,7 +276,7 @@ if (Auth && ConnectionState.get()) {
   });
 }
 
-async function signIn(): Promise<void> {
+export async function signIn(email: string, password: string): Promise<void> {
   if (Auth === undefined) {
     Notifications.add("Authentication uninitialized", -1);
     return;
@@ -292,8 +292,6 @@ async function signIn(): Promise<void> {
   LoginPage.showPreloader();
   LoginPage.disableInputs();
   LoginPage.disableSignUpButton();
-  const email = ($(".pageLogin .login input")[0] as HTMLInputElement).value;
-  const password = ($(".pageLogin .login input")[1] as HTMLInputElement).value;
 
   if (email === "" || password === "") {
     Notifications.add("Please fill in all fields", 0);
@@ -627,7 +625,11 @@ async function signUp(): Promise<void> {
 
 $(".pageLogin .login form").on("submit", (e) => {
   e.preventDefault();
-  void signIn();
+  const email =
+    ($(".pageLogin .login input")[0] as HTMLInputElement).value ?? "";
+  const password =
+    ($(".pageLogin .login input")[1] as HTMLInputElement).value ?? "";
+  void signIn(email, password);
 });
 
 $(".pageLogin .login button.signInWithGoogle").on("click", () => {

frontend/src/ts/modals/dev-options.ts

@@ -3,6 +3,7 @@ import AnimatedModal from "../utils/animated-modal";
 import { showPopup } from "./simple-modals";
 import * as Notifications from "../elements/notifications";
 import { setMediaQueryDebugLevel } from "../ui";
+import { signIn } from "../controllers/account-controller";
 
 let mediaQueryDebugLevel = 0;
 
@@ -47,6 +48,20 @@ async function setup(modalEl: HTMLElement): Promise<void> {
       $("#wordsInput").css("opacity", "1");
       void modal.hide();
     });
+  modalEl.querySelector(".quickLogin")?.addEventListener("click", () => {
+    if (
+      envConfig.quickLoginEmail === undefined ||
+      envConfig.quickLoginPassword === undefined
+    ) {
+      Notifications.add(
+        "Quick login credentials not set. Add QUICK_LOGIN_EMAIL and QUICK_LOGIN_PASSWORD to your frontend .env file.",
+        -1
+      );
+      return;
+    }
+    void signIn(envConfig.quickLoginEmail, envConfig.quickLoginPassword);
+    void modal.hide();
+  });
 }
 
 const modal = new AnimatedModal({

frontend/vite.config.dev.js

@@ -37,6 +37,8 @@ export default {
     RECAPTCHA_SITE_KEY: JSON.stringify(
       "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
     ),
+    QUICK_LOGIN_EMAIL: JSON.stringify(process.env.QUICK_LOGIN_EMAIL),
+    QUICK_LOGIN_PASSWORD: JSON.stringify(process.env.QUICK_LOGIN_PASSWORD),
   },
   build: {
     outDir: "../dist",