Refactor code structure for improved readability and maintainability

components/register/LogInPage.js

@@ -5,10 +5,13 @@ import { InputAdornment, Button, CircularProgress } from "@mui/material";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-toastify";
+import Altcha from "@/components/Altcha";
 
 function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) {
   const [error, setError] = useState({ valid: true, text: "" });
   const [loading, setLoading] = useState(false);
+  const [altcha, setAltcha] = useState("");
+  const [altchaKey, setAltchaKey] = useState(0); // remount widget برای challenge تازه بعد از خطا
 
   const handleChange = (val) => {
     const checkedNum = validatePhoneNumber(val);
@@ -24,7 +27,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
   const handleReq = async () => {
     setLoading(true);
     request
-      .sendCode(num, "", typeof window !== "undefined" ? window.location.hostname : "")
+      .sendCode(num, altcha, typeof window !== "undefined" ? window.location.hostname : "")
       .then((response) => {
         setLoading(false);
         if (response.uuid) {
@@ -36,6 +39,9 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
       })
       .catch(() => {
         setLoading(false);
+        // challenge یک‌بارمصرف است؛ بعد از خطا widget را برای challenge تازه ری‌مانت کن
+        setAltcha("");
+        setAltchaKey((k) => k + 1);
       });
   };
 
@@ -64,6 +70,7 @@ function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep })
           {error.text}
         </p>
       </div>
+      <Altcha key={altchaKey} onVerified={setAltcha} />
       <Button
         fullWidth
         variant="contained"