use ts/forms

Co-authored-by: Miodec <jack@monkeytype.com>

Author: fehmer

frontend/.oxlintrc.json

@@ -21,7 +21,8 @@
       "rules": {
         "explicit-function-return-type": "off",
         "no-explicit-any": "off",
-        "no-unsafe-assignment": "off"
+        "no-unsafe-assignment": "off",
+        "no-empty-function": "off"
       }
     },
     {

frontend/__tests__/components/ui/ValidatedInput.spec.tsx

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
-    "@leonabcd123/modern-caps-lock": "2.2.2",
+    "@leonabcd123/modern-caps-lock": "3.0.4",
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/schemas": "workspace:*",
@@ -37,6 +37,7 @@
     "@tanstack/pacer-lite": "0.2.1",
     "@tanstack/query-db-collection": "1.0.27",
     "@tanstack/solid-db": "0.2.10",
+    "@tanstack/solid-form": "1.28.4",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",

frontend/package.json

@@ -91,3 +91,14 @@
     padding: 0;
   }
 }
+
+@layer utilities {
+  .autofill-fix:-webkit-autofill,
+  .autofill-fix:-webkit-autofill:hover,
+  .autofill-fix:-webkit-autofill:focus {
+    @apply border-none  font-(--font) caret-(--text-color) font-[inherit];
+    outline: 0.15em solid var(--main-color);
+    -webkit-text-fill-color: var(--text-color);
+    -webkit-box-shadow: 0 0 0 1000000px var(--sub-alt-color) inset;
+  }
+}

frontend/src/styles/tailwind.css

@@ -34,6 +34,15 @@ import {
 } from "./stores/notifications";
 import { createErrorMessage } from "./utils/misc";
 
+export type AuthResult =
+  | {
+      success: true;
+    }
+  | {
+      success: false;
+      message: string;
+    };
+
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
 
@@ -156,15 +165,7 @@ export async function signIn(
   email: string,
   password: string,
   rememberMe: boolean,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
@@ -182,15 +183,7 @@ export async function signIn(
 async function signInWithProvider(
   provider: AuthProvider,
   rememberMe: boolean,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }
@@ -203,27 +196,15 @@ async function signInWithProvider(
   return { success: true };
 }
 
-export async function signInWithGoogle(rememberMe: boolean): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+export async function signInWithGoogle(
+  rememberMe: boolean,
+): Promise<AuthResult> {
   return signInWithProvider(gmailProvider, rememberMe);
 }
 
-export async function signInWithGitHub(rememberMe: boolean): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+export async function signInWithGitHub(
+  rememberMe: boolean,
+): Promise<AuthResult> {
   return signInWithProvider(githubProvider, rememberMe);
 }
 
@@ -272,15 +253,7 @@ export async function signUp(
   name: string,
   email: string,
   password: string,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      message: string;
-    }
-> {
+): Promise<AuthResult> {
   if (!isAuthAvailable()) {
     return { success: false, message: "Authentication uninitialized" };
   }

frontend/src/ts/auth.tsx

@@ -14,13 +14,14 @@ type BaseProps = {
   balloon?: BalloonProps;
   "router-link"?: true;
   onClick?: () => void;
+  type?: HTMLButtonElement["type"];
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   dataset?: Record<string, string>;
   active?: boolean;
 };
 
-type ButtonProps = BaseProps & {
+export type ButtonProps = BaseProps & {
   type?: "button" | "submit" | "reset";
   href?: never;
   sameTarget?: true;
@@ -31,6 +32,7 @@ type AnchorProps = BaseProps & {
   href: string;
   // onClick?: never;
   disabled?: never;
+  type?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {

frontend/src/ts/components/common/Button.tsx

@@ -1,6 +1,5 @@
 import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
 import { JSXElement } from "solid-js";
-
 export function DevTools(): JSXElement {
   return <SolidQueryDevtools />;
 }