Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Validation fixed in lottery auth form

This commit is contained in:
Kakabay 2025-01-08 18:34:28 +05:00
parent 74d1a5b5c3
commit 744786ef70
1 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/lottery/auth/LotteryAuthForm.tsx
View File

@ -1,20 +1,20 @@
"use client";
'use client';
import { Queries } from "@/api/queries";
import { useState, FormEvent } from "react";
import { useRouter } from "next/navigation";
import { useLotteryAuth } from "@/store/useLotteryAuth";
import { Queries } from '@/api/queries';
import { useState, FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { useLotteryAuth } from '@/store/useLotteryAuth';
const LotteryAuthForm = () => {
const [phone, setPhone] = useState("");
const [code, setCode] = useState("");
const [phone, setPhone] = 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);
setError("Telefon belgisi ýa-da kod nädogry");
console.error('Authentication error:', err);
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 && (
<p className="text-lightError text-textSmall leading-textSmall">
{error}
</p>
)}
{error && <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"
>
{isLoading ? "Ýüklenilýär..." : "Giriş"}
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ş'}
</button>
</form>
);