@@ -41,7 +54,8 @@ export function ProfileSearchPage(): JSXElement {
class="inline-grid w-96 gap-2"
onSubmit={(e) => {
e.preventDefault();
- goToPage();
+ e.stopPropagation();
+ void form.handleSubmit();
}}
>
@@ -50,31 +64,38 @@ export function ProfileSearchPage(): JSXElement {
- setValid(result.success)}
- // fine unless we read a reactive state after the await
- // eslint-disable-next-line solid/reactivity
- isValid={async (name: string) => {
- try {
- const result = await queryClient.fetchQuery(
- getUserProfile(name),
- );
- setSelectedProfileName(name);
- return result !== null || "Unknown user";
- } catch (e) {
- return "Unknown user or error fetching.";
- }
+ {
+ try {
+ const result = await queryClient.fetchQuery(
+ getUserProfile(field.value),
+ );
+ return result !== null ? undefined : "Unknown user";
+ } catch (e) {
+ return "Unknown user";
+ }
+ },
}}
+ children={(field) => (
+
+ )}
/>
-
diff --git a/frontend/src/ts/components/ui/ValidatedInput.tsx b/frontend/src/ts/components/ui/ValidatedInput.tsx
deleted file mode 100644
index db8a720c7b47..000000000000
--- a/frontend/src/ts/components/ui/ValidatedInput.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import {
- splitProps,
- createEffect,
- JSXElement,
- on,
- onCleanup,
- onMount,
-} from "solid-js";
-
-import {
- ValidatedHtmlInputElement,
- ValidationOptions,
-} from "../../elements/input-validation";
-import { useRefWithUtils } from "../../hooks/useRefWithUtils";
-
-export function ValidatedInput
(
- props: ValidationOptions & {
- value?: string;
- placeholder?: string;
- class?: string;
- type?: string;
- autocomplete?: string;
- name?: string;
- onInput?: (value: T) => void;
- onFocus?: () => void;
- disabled?: boolean;
- revalidateOn?: () => unknown;
- },
-): JSXElement {
- // Refs are assigned by SolidJS via the ref attribute
- const [inputRef, inputEl] = useRefWithUtils();
-
- let validatedInput: ValidatedHtmlInputElement | undefined;
-
- createEffect(() => {
- validatedInput?.setValue(props.value ?? null);
- });
-
- onMount(() => {
- const element = inputEl();
- if (element === undefined) return;
-
- const [_, others] = splitProps(props, [
- "value",
- "class",
- "placeholder",
- "type",
- "autocomplete",
- "name",
- "onFocus",
- "revalidateOn",
- ]);
- validatedInput = new ValidatedHtmlInputElement(
- element,
- others as ValidationOptions,
- );
- validatedInput.setValue(props.value ?? null);
- });
-
- createEffect(
- on(
- () => props.revalidateOn?.(),
- () => {
- if (validatedInput && inputEl()?.getValue() !== "") {
- validatedInput.triggerValidation();
- }
- },
- { defer: true },
- ),
- );
-
- onCleanup(() => {
- validatedInput?.destroy();
- });
-
- return (
-
- props.onInput?.(e.target.value as T)}
- onFocus={() => props.onFocus?.()}
- />
-
- );
-}
diff --git a/frontend/src/ts/components/ui/form/Checkbox.tsx b/frontend/src/ts/components/ui/form/Checkbox.tsx
new file mode 100644
index 000000000000..c7c89a1f329a
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/Checkbox.tsx
@@ -0,0 +1,54 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, JSXElement } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { Fa } from "../../common/Fa";
+
+export function Checkbox(props: {
+ field: Accessor;
+ label?: string;
+ class?: string;
+ disabled?: boolean;
+}): JSXElement {
+ const checked = () => props.field().state.value as boolean;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/ui/form/InputField.tsx b/frontend/src/ts/components/ui/form/InputField.tsx
new file mode 100644
index 000000000000..e2f5d03563c2
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/InputField.tsx
@@ -0,0 +1,45 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, JSXElement, Show } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { FieldIndicator } from "./FieldIndicator";
+
+export function InputField(props: {
+ field: Accessor;
+ placeholder?: string;
+ showIndicator?: true;
+ autocomplete?: string;
+ type?: string;
+ disabled?: boolean;
+ class?: string;
+ onFocus?: () => void;
+}): JSXElement {
+ return (
+
+ props.field().handleBlur()}
+ onInput={(e) => props.field().handleChange(e.target.value)}
+ disabled={props.disabled}
+ onFocus={() => props.onFocus?.()}
+ />
+
+
+
+
+ );
+}
diff --git a/frontend/src/ts/components/ui/form/SubmitButton.tsx b/frontend/src/ts/components/ui/form/SubmitButton.tsx
new file mode 100644
index 000000000000..bca2f98f2817
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/SubmitButton.tsx
@@ -0,0 +1,53 @@
+import { JSXElement, splitProps } from "solid-js";
+
+import { Button, ButtonProps } from "../../common/Button";
+
+type FormStateSlice = {
+ canSubmit: boolean;
+ isSubmitting: boolean;
+ isValid: boolean;
+ isDirty: boolean;
+};
+
+type SubscribableForm = {
+ Subscribe: (props: {
+ selector: (state: {
+ canSubmit: boolean;
+ isSubmitting: boolean;
+ isValid: boolean;
+ isDirty: boolean;
+ }) => FormStateSlice;
+ children: (state: () => FormStateSlice) => JSXElement;
+ }) => JSXElement;
+};
+
+export function SubmitButton(
+ props: {
+ form: SubscribableForm;
+ } & Omit,
+): JSXElement {
+ const [local, others] = splitProps(props, ["disabled"]);
+ return (
+ ({
+ canSubmit: state.canSubmit,
+ isSubmitting: state.isSubmitting,
+ isValid: state.isValid,
+ isDirty: state.isDirty,
+ })}
+ children={(state) => (
+
+ )}
+ />
+ );
+}
diff --git a/frontend/src/ts/components/ui/form/utils.ts b/frontend/src/ts/components/ui/form/utils.ts
new file mode 100644
index 000000000000..5f7cb828f2ae
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/utils.ts
@@ -0,0 +1,55 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { ZodSchema } from "zod";
+
+export type ValidationResult = { type: "error" | "warning"; message: string };
+export function fromSchema(
+ schema: ZodSchema,
+): (args: { value: T }) => undefined | string[] {
+ return ({ value }) => {
+ const result = schema.safeParse(value);
+ return result.success
+ ? undefined
+ : result.error.issues.map((it) => it.message);
+ };
+}
+
+export function handleResult(
+ field: AnyFieldApi,
+ results: ValidationResult[] | undefined,
+): undefined | string[] {
+ if (results === undefined || results.length === 0) return undefined;
+
+ const byType = Object.groupBy(results, (it) => it.type);
+
+ if ((byType.warning?.length ?? 0) > 0) {
+ field.setMeta((meta) => ({
+ ...meta,
+ hasWarning: true,
+ warnings: byType.warning?.map((it) => it.message),
+ }));
+ }
+ if ((byType.error?.length ?? 0) > 0) {
+ return byType.error?.map((it) => it.message);
+ }
+ return undefined;
+}
+
+type ValidatorCallback = (args: { value: T }) => string | undefined;
+
+export function allFieldsMandatory(): ValidatorCallback {
+ return ({ value }: { value: T }): string | undefined => {
+ const hasInvalid = Object.values(value).some(
+ (v) => v === undefined || v === "",
+ );
+
+ return hasInvalid ? "all fields are mandatory" : undefined;
+ };
+}
+
+export function fieldMandatory(message?: string): ValidatorCallback {
+ return ({ value }) => {
+ return value !== undefined && value !== ""
+ ? undefined
+ : (message ?? "mandatory");
+ };
+}
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index b9311ab84ee1..31428fbc0985 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -8,7 +8,6 @@ import {
import * as Settings from "../pages/settings";
import * as Account from "../pages/account";
import * as PageTest from "../pages/test";
-import { resetForm } from "../stores/login";
import * as PageLoading from "../pages/loading";
import * as Friends from "../pages/friends";
import * as Page404 from "../pages/404";
@@ -45,11 +44,7 @@ const pages = {
settings: Settings.page,
about: solidPage("about"),
account: Account.page,
- login: solidPage("login", {
- beforeShow: async () => {
- resetForm();
- },
- }),
+ login: solidPage("login"),
profile: solidPage("profile", {
beforeShow: async (options) => {
setSelectedProfileName(options.params?.["uidOrName"]);
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index 6b04e0197d29..95b2558ee7e2 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -21,7 +21,6 @@ import { resetIgnoreAuthCallback } from "../firebase";
import { ValidatedHtmlInputElement } from "../elements/input-validation";
import { UserNameSchema } from "@monkeytype/schemas/users";
import { remoteValidation } from "../utils/remote-validation";
-import { enableLoginPageInputs, hideLoginPageLoader } from "../stores/login";
let signedInUser: UserCredential | undefined = undefined;
@@ -62,8 +61,6 @@ async function hide(): Promise {
showNoticeNotification("Sign up process cancelled", {
durationMs: 5000,
});
- hideLoginPageLoader();
- enableLoginPageInputs();
if (getAdditionalUserInfo(signedInUser)?.isNewUser) {
await Ape.users.delete();
await signedInUser?.user.delete().catch(() => {
@@ -110,8 +107,6 @@ async function apply(): Promise {
await updateProfile(signedInUser.user, { displayName: name });
await sendEmailVerification(signedInUser.user);
showSuccessNotification("Account created");
- enableLoginPageInputs();
- hideLoginPageLoader();
await AccountController.loadUser(signedInUser.user);
signedInUser = undefined;
@@ -121,8 +116,6 @@ async function apply(): Promise {
} catch (e) {
console.log(e);
showErrorNotification("Failed to sign in with Google", { error: e });
- hideLoginPageLoader();
- enableLoginPageInputs();
if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) {
await Ape.users.delete();
await signedInUser?.user.delete().catch(() => {
diff --git a/frontend/src/ts/stores/login.ts b/frontend/src/ts/stores/login.ts
index 6732b7e8ba3d..1073132fc9f0 100644
--- a/frontend/src/ts/stores/login.ts
+++ b/frontend/src/ts/stores/login.ts
@@ -7,16 +7,3 @@ export const [
enableLoginPageInputs: (set) => set(true),
disableLoginPageInputs: (set) => set(false),
});
-
-export const [
- getLoginPageLoader,
- { showLoginPageLoader, hideLoginPageLoader },
-] = createSignalWithSetters(false)({
- showLoginPageLoader: (set) => set(true),
- hideLoginPageLoader: (set) => set(false),
-});
-
-export function resetForm(): void {
- hideLoginPageLoader();
- enableLoginPageInputs();
-}
diff --git a/frontend/src/ts/utils/remote-validation.ts b/frontend/src/ts/utils/remote-validation.ts
index 3aac4366e4b1..4e91b20dcec9 100644
--- a/frontend/src/ts/utils/remote-validation.ts
+++ b/frontend/src/ts/utils/remote-validation.ts
@@ -30,3 +30,39 @@ export function remoteValidation(
return handler;
};
}
+
+export function remoteValidationForm(
+ call: (
+ val: V,
+ ) => Promise<{ status: number; body: { data?: T; message: string } }>,
+ options?: {
+ check?: (data: T) => IsValidResponse;
+ on4xx?: IsValidResonseOrFunction;
+ on5xx?: IsValidResonseOrFunction;
+ },
+): (val: { value: V }) => Promise {
+ return async (val: { value: V }) => {
+ let validationResult;
+
+ const result = await call(val.value);
+ if (result.status <= 299) {
+ validationResult = options?.check?.(result.body.data as T) ?? undefined;
+ } else {
+ let handler: IsValidResonseOrFunction | undefined;
+ if (result.status <= 499) {
+ handler = options?.on4xx ?? ((message) => message);
+ } else {
+ handler =
+ options?.on5xx ?? "Server unavailable. Please try again later.";
+ }
+
+ if (typeof handler === "function") {
+ validationResult = handler(result.body.message);
+ } else {
+ validationResult = handler;
+ }
+ }
+
+ return validationResult === true ? undefined : validationResult;
+ };
+}
diff --git a/frontend/src/ts/utils/typo-list.ts b/frontend/src/ts/utils/typo-list.ts
index 897e45cc60f8..01d0578e254b 100644
--- a/frontend/src/ts/utils/typo-list.ts
+++ b/frontend/src/ts/utils/typo-list.ts
@@ -132,6 +132,7 @@ export default [
"icloud.ocm",
"icloud.om",
"icloud.cm",
+ "example.edu",
];
// source(from line 1 - 48): Generated using ChatGPT
// source(from line 48 - 127): https://github.com/gruns/typo
diff --git a/frontend/storybook/stories/Checkbox.stories.tsx b/frontend/storybook/stories/Checkbox.stories.tsx
new file mode 100644
index 000000000000..8b3603700ab4
--- /dev/null
+++ b/frontend/storybook/stories/Checkbox.stories.tsx
@@ -0,0 +1,64 @@
+import preview from "#.storybook/preview";
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, Component, createSignal } from "solid-js";
+
+import { Checkbox } from "../../src/ts/components/ui/form/Checkbox";
+
+function createFieldMock(options: { name?: string; value?: boolean }) {
+ const [value, setValue] = createSignal(options.value ?? false);
+ return {
+ name: options.name ?? "test",
+ get state() {
+ return { value: value() };
+ },
+ handleChange(v: boolean) {
+ setValue(v);
+ },
+ handleBlur() {},
+ } as unknown as AnyFieldApi;
+}
+
+const meta = preview.meta({
+ title: "UI/Form/Checkbox",
+ component: Checkbox as Component<{
+ field: Accessor;
+ label?: string;
+ disabled?: boolean;
+ }>,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ argTypes: {
+ label: { control: "text" },
+ disabled: { control: "boolean" },
+ },
+});
+
+export const Default = meta.story({
+ render: () => {
+ const unchecked = createFieldMock({});
+ const checked = createFieldMock({ value: true });
+ const checked2xl = createFieldMock({ value: true });
+ const disabledUnchecked = createFieldMock({});
+ const disabledChecked = createFieldMock({ value: true });
+ const withLabel = createFieldMock({ value: true });
+
+ return (
+
+
Unchecked
+
unchecked} />
+ Checked
+ checked} />
+ Checked 2xl
+ checked2xl} />
+ Disabled
+ disabledUnchecked} disabled={true} />
+ Disabled Checked
+ disabledChecked} disabled={true} />
+ With Label
+ withLabel} label="checkbox" />
+
-
-
-
-
- With schema (3-20 chars)
-
-
-
-