Clear error when user edit/clear username (#372)

cartridge-gg · Jun 18, 2024 · f14f88c · f14f88c
1 parent 8094610
commit f14f88c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/keychain/src/components/connect/Login.tsx b/packages/keychain/src/components/connect/Login.tsx
@@ -2,7 +2,6 @@ import { Field } from "@cartridge/ui";
 import { Button } from "@chakra-ui/react";
 import {
   Container,
-  FOOTER_MIN_HEIGHT,
   Footer,
   Content,
 } from "components/layout";
@@ -106,7 +105,6 @@ export function Login({
   return (
     <Container
       variant="connect"
-      overflowY={error ? "auto" : undefined}
       title={
         theme.id === "cartridge"
           ? "Play with Cartridge Controller"
@@ -122,7 +120,7 @@ export function Login({
       >
         {(props) => (
           <FormikForm style={{ width: "100%" }}>
-            <Content pb={error ? FOOTER_MIN_HEIGHT : undefined}>
+            <Content>
               <FormikField
                 name="username"
                 placeholder="Username"
@@ -131,13 +129,20 @@ export function Login({
                 {({ field, meta, form }) => (
                   <Field
                     {...field}
+                    onChange={(e) => {
+                      setError(undefined)
+                      field.onChange(e)
+                    }}
                     autoFocus
                     placeholder="Username"
                     touched={meta.touched}
                     error={meta.error}
                     isLoading={props.isValidating}
                     isDisabled={isLoading}
-                    onClear={() => form.setFieldValue(field.name, "")}
+                    onClear={() => {
+                      setError(undefined)
+                      form.setFieldValue(field.name, "")
+                    }}
                   />
                 )}
               </FormikField>

diff --git a/packages/keychain/src/components/connect/Signup.tsx b/packages/keychain/src/components/connect/Signup.tsx
@@ -20,6 +20,7 @@ import { useControllerTheme } from "hooks/theme";
 import { shortString } from "starknet";
 import { useConnection } from "hooks/connection";
 import { useDebounce } from "hooks/debounce";
+import { ErrorAlert } from "components/ErrorAlert";
 
 export function Signup({
   prefilledName = "",
@@ -124,8 +125,10 @@ function Form({ isSlot, onLogin, onSuccess }: SignupProps) {
       },
     },
   );
+  const [error, setError] = useState<Error>();
 
   const onSubmit = useCallback(() => {
+    setError(undefined);
     setIsRegistering(true);
 
     const searchParams = new URLSearchParams(window.location.search);
@@ -149,7 +152,7 @@ function Form({ isSlot, onLogin, onSuccess }: SignupProps) {
 
     doSignup(decodeURIComponent(username)).catch((e) => {
       setErrors({ username: e.message });
-    });
+    }).finally(() => setIsRegistering(false));
   }, [username, setErrors]);
 
   return (
@@ -163,7 +166,12 @@ function Form({ isSlot, onLogin, onSuccess }: SignupProps) {
               placeholder="Username"
               touched={meta.touched}
               error={meta.error || errors?.username}
+              onChange={(e) => {
+                setError(undefined)
+                field.onChange(e)
+              }}
               onClear={() => {
+                setError(undefined)
                 form.setFieldValue(field.name, "");
                 setErrors(undefined);
               }}
@@ -173,6 +181,10 @@ function Form({ isSlot, onLogin, onSuccess }: SignupProps) {
       </Content>
 
       <Footer isSlot={isSlot} createSession>
+        {error && (
+          <ErrorAlert title="Login failed" description={error.message} />
+        )}
+
         <Button
           colorScheme="colorful"
           isLoading={isRegistering}