Conv

web/packages/accounts/components/LoginContents.tsx

@@ -1,4 +1,4 @@
-import { Input, Stack, Typography } from "@mui/material";
+import { Input, Stack, TextField, Typography } from "@mui/material";
 import {
     AccountsPageFooter,
     AccountsPageTitle,
@@ -6,14 +6,14 @@ import {
 import { getSRPAttributes } from "ente-accounts/services/srp-remote";
 import { sendOTT } from "ente-accounts/services/user";
 import { LinkButton } from "ente-base/components/LinkButton";
+import { LoadingButton } from "ente-base/components/mui/LoadingButton";
 import { isMuseumHTTPError } from "ente-base/http";
 import log from "ente-base/log";
-import SingleInputForm, {
-    type SingleInputFormProps,
-} from "ente-shared/components/SingleInputForm";
 import { setData, setLSUser } from "ente-shared/storage/localStorage";
+import { useFormik } from "formik";
 import { t } from "i18next";
 import { useRouter } from "next/router";
+import React, { useCallback } from "react";
 
 interface LoginContentsProps {
     /** Called when the user clicks the signup option instead.  */
@@ -33,11 +33,8 @@ export const LoginContents: React.FC<LoginContentsProps> = ({
 }) => {
     const router = useRouter();
 
-    const loginUser: SingleInputFormProps["callback"] = async (
-        email,
-        setFieldError,
-    ) => {
-        try {
+    const loginUser = useCallback(
+        async (email: string, setFieldError: (message: string) => void) => {
             const srpAttributes = await getSRPAttributes(email);
             log.debug(() => ["srpAttributes", JSON.stringify(srpAttributes)]);
             if (!srpAttributes || srpAttributes.isEmailMFAEnabled) {
@@ -59,25 +56,58 @@ export const LoginContents: React.FC<LoginContentsProps> = ({
                 setData("srpAttributes", srpAttributes);
                 void router.push("/credentials");
             }
-        } catch (e) {
-            log.error("Login failed", e);
-            setFieldError(t("generic_error"));
-        }
-    };
+        },
+        [router],
+    );
+
+    const formik = useFormik({
+        initialValues: { value: "" },
+        onSubmit: async (values, { setFieldError }) => {
+            const value = values.value;
+            const setValueFieldError = (message: string) =>
+                setFieldError("value", message);
+
+            if (!value) {
+                setValueFieldError(t("required"));
+                return;
+            }
+            try {
+                await loginUser(value, setValueFieldError);
+            } catch (e) {
+                log.error("Failed to login", e);
+                setValueFieldError(t("generic_error"));
+            }
+        },
+    });
 
     return (
         <>
             <AccountsPageTitle>{t("login")}</AccountsPageTitle>
-            <SingleInputForm
-                callback={loginUser}
-                fieldType="email"
-                placeholder={t("enter_email")}
-                buttonText={t("login")}
-                autoComplete="username"
-                hiddenPostInput={
-                    <Input sx={{ display: "none" }} type="password" value="" />
-                }
-            />
+            <form onSubmit={formik.handleSubmit}>
+                <TextField
+                    name="value"
+                    value={formik.values.value}
+                    onChange={formik.handleChange}
+                    type="email"
+                    autoComplete="username"
+                    label={t("enter_email")}
+                    fullWidth
+                    margin="normal"
+                    disabled={formik.isSubmitting}
+                    error={!!formik.errors.value}
+                    // See: Note: [Use space as default TextField helperText]
+                    helperText={formik.errors.value ?? " "}
+                />
+                <Input sx={{ display: "none" }} type="password" value="" />
+                <LoadingButton
+                    fullWidth
+                    type="submit"
+                    loading={formik.isSubmitting}
+                    color="accent"
+                >
+                    {t("login")}
+                </LoadingButton>
+            </form>
             <AccountsPageFooter>
                 <Stack sx={{ gap: 3, textAlign: "center" }}>
                     <LinkButton onClick={onSignUp}>

web/packages/new/albums/components/UploaderNameInput.tsx

@@ -53,6 +53,7 @@ export const UploaderNameInput: React.FC<UploaderNameInput> = ({
             const setValueFieldError = (message: string) =>
                 setFieldError("value", message);
 
+            // TODO(RE): Reintroduce email validation after zod migration
             if (!value) {
                 setValueFieldError(t("required"));
                 return;