add loading

omegaup · Sep 25, 2024 · 52fafcf · 52fafcf
1 parent be75959
commit 52fafcf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/changePassword/index.tsx b/src/components/changePassword/index.tsx
@@ -9,6 +9,7 @@ export default function ChangePassword({
 }: IChangePasswordProps): JSX.Element {
   const [error, setError] = useState<Error | null>(null);
   const [passHasBeenChanged, setPassHasBeenChanged] = useState<boolean>(false);
+  const [loading, setLoading] = useState(false);
   return (
     <main className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <figure className="sm:mx-auto sm:w-full sm:max-w-sm">
@@ -35,6 +36,7 @@ export default function ChangePassword({
             onSubmit={async (ev) => {
               ev.preventDefault();
               setError(null);
+              setLoading(true);
               const data = new FormData(ev.currentTarget);
               const pass = data.get("password")?.toString();
               const passConfirm = data.get("confirmPassword")?.toString();
@@ -63,6 +65,7 @@ export default function ChangePassword({
                 }),
               });
               const req = await response.json();
+              setLoading(false);
               if (response.status !== 200) {
                 setError(new Error(req.message));
                 return;
@@ -110,7 +113,7 @@ export default function ChangePassword({
                 type="submit"
                 buttonType="primary"
                 className="w-full"
-                disabled={false}
+                disabled={loading}
               >
                 Cambiar contraseña
               </Button>

diff --git a/src/components/forgotPassword/index.tsx b/src/components/forgotPassword/index.tsx
@@ -4,6 +4,7 @@ import { SuccessAlert } from "../alert";
 
 export default function ForgotPassword(): JSX.Element {
   const [emailHasBeenSent, setEmailHasBeenSet] = useState<boolean>(false);
+  const [loading, setLoading] = useState(false);
   return (
     <main className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
       <figure className="sm:mx-auto sm:w-full sm:max-w-sm">
@@ -28,6 +29,7 @@ export default function ForgotPassword(): JSX.Element {
             method="POST"
             onSubmit={async (ev) => {
               ev.preventDefault();
+              setLoading(true);
               const data = new FormData(ev.currentTarget);
               const email = data.get("email")?.toString();
               await fetch("/api/user/resetPassword", {
@@ -40,6 +42,7 @@ export default function ForgotPassword(): JSX.Element {
                 }),
               });
               setEmailHasBeenSet(true);
+              setLoading(false);
             }}
           >
             <div>
@@ -65,7 +68,7 @@ export default function ForgotPassword(): JSX.Element {
                 type="submit"
                 buttonType="primary"
                 className="w-full"
-                disabled={false}
+                disabled={loading}
               >
                 Recuperar cuenta
               </Button>