Validation fixed in lottery auth form

components/lottery/auth/LotteryAuthForm.tsx

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
-import { Queries } from "@/api/queries";
+import { Queries } from '@/api/queries';
-import { useState, FormEvent } from "react";
+import { useState, FormEvent } from 'react';
-import { useRouter } from "next/navigation";
+import { useRouter } from 'next/navigation';
-import { useLotteryAuth } from "@/store/useLotteryAuth";
+import { useLotteryAuth } from '@/store/useLotteryAuth';
 
 const LotteryAuthForm = () => {
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState('');
-  const [code, setCode] = useState("");
+  const [code, setCode] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
   const setAuth = useLotteryAuth((state) => state.setAuth);
 
   const validatePhone = (value: string) => {
-    const phoneRegex = /^99363\d{6}$/;
+    const phoneRegex = /^993\d{8}$/;
     return phoneRegex.test(value);
   };
 
@@ -28,12 +28,12 @@ const LotteryAuthForm = () => {
     setError(null);
 
     if (!validatePhone(phone)) {
-      setError("Telefon belgisi nädogry formatda");
+      setError('Telefon belgisi nädogry');
       return;
     }
 
     if (!validateCode(code)) {
-      setError("Kod nädogry formatda");
+      setError('Açar nädogry');
       return;
     }
 
@@ -42,19 +42,19 @@ const LotteryAuthForm = () => {
     try {
       const response = await Queries.authenticateLottery(phone, code);
       setAuth(response, phone, code);
-      router.replace("/lottery");
+      router.replace('/lottery');
     } catch (err) {
-      console.error("Authentication error:", err);
+      console.error('Authentication error:', err);
-      setError("Telefon belgisi ýa-da kod nädogry");
+      setError('Telefon belgisi ýa-da açar nädogry');
     } finally {
       setIsLoading(false);
     }
   };
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value.replace(/\D/g, ""); // Remove non-digits
+    const value = e.target.value.replace(/\D/g, ''); // Remove non-digits
     if (value.length <= 11) {
-      // Limit to 11 digits (99363 + 6 digits)
+      // Limit to 11 digits (993 + 8 digits)
       setPhone(value);
     }
   };
@@ -70,13 +70,15 @@ const LotteryAuthForm = () => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="bg-lightSurfaceContainer rounded-[24px] md:p-[40px] sm:p-[24px] p-[16px] w-[530px] flex flex-col gap-[24px]"
+      className="bg-lightSurfaceContainer rounded-[24px] md:p-[40px] sm:p-[24px] p-[16px] w-[530px] flex flex-col gap-[24px]">
-    >
       <h1 className="md:text-display3 sm:text-[32px] text-[24px] font-[500] md:leading-display3">
         Lotereýa giriş
       </h1>
       <div className="flex flex-col gap-[16px]">
         <div className="flex flex-col gap-[8px]">
+          <label htmlFor="phone" className="font-base-medium text-lightOnSurface cursor-pointer">
+            Telefon
+          </label>
           <input
             type="tel"
             value={phone}
@@ -84,9 +86,14 @@ const LotteryAuthForm = () => {
             className="px-[16px] py-[12px] bg-lightPrimaryContainer rounded-[12px] outline-none text-lightOnSurfaceVariant text-textSmall leading-textSmall"
             placeholder="99363XXXXXX"
             required
+            id="phone"
           />
         </div>
         <div className="flex flex-col gap-[8px]">
+          <label htmlFor="code" className="font-base-medium text-lightOnSurface cursor-pointer">
+            Açar
+          </label>
+
           <input
             type="text"
             value={code}
@@ -94,20 +101,16 @@ const LotteryAuthForm = () => {
             className="px-[16px] py-[12px] bg-lightPrimaryContainer rounded-[12px] outline-none text-lightOnSurfaceVariant text-textSmall leading-textSmall"
             placeholder="5-0105639808"
             required
+            id="code"
           />
         </div>
-        {error && (
+        {error && <p className="text-lightError text-textSmall leading-textSmall">{error}</p>}
-          <p className="text-lightError text-textSmall leading-textSmall">
-            {error}
-          </p>
-        )}
       </div>
       <button
         type="submit"
         disabled={isLoading || !phone || !code}
-        className="sm:text-textLarge sm:leading-textLarge text-[16px] leading-[24px] sm:py-[12px] py-[8px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary disabled:opacity-50"
+        className="sm:text-textLarge sm:leading-textLarge text-[16px] leading-[24px] sm:py-[12px] py-[8px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary disabled:opacity-50">
-      >
+        {isLoading ? 'Ýüklenilýär...' : 'Giriş'}
-        {isLoading ? "Ýüklenilýär..." : "Giriş"}
       </button>
     </form>
   );