Files
protekauto-frontend/src/components/auth/UserRegistration.tsx
2025-06-26 06:59:59 +03:00

105 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useState } from 'react'
import { useMutation } from '@apollo/client'
import { REGISTER_NEW_CLIENT } from '@/lib/graphql'
import type { VerificationResponse } from '@/types/auth'
interface UserRegistrationProps {
phone: string
sessionId: string
onSuccess: (data: VerificationResponse) => void
onError: (error: string) => void
}
const UserRegistration: React.FC<UserRegistrationProps> = ({
phone,
sessionId,
onSuccess,
onError
}) => {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [isLoading, setIsLoading] = useState(false)
const [registerClient] = useMutation<{ registerNewClient: VerificationResponse }>(REGISTER_NEW_CLIENT)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
if (!firstName.trim()) {
onError('Введите имя')
return
}
if (!lastName.trim()) {
onError('Введите фамилию')
return
}
setIsLoading(true)
try {
const fullName = `${firstName.trim()} ${lastName.trim()}`
const { data } = await registerClient({
variables: {
phone,
name: fullName,
sessionId
}
})
if (data?.registerNewClient) {
onSuccess(data.registerNewClient)
}
} catch (error) {
onError('Не удалось зарегистрировать пользователя')
} finally {
setIsLoading(false)
}
}
return (
<div className="flex flex-col gap-5 w-full">
<form onSubmit={handleSubmit} className="flex flex-col gap-5 w-full">
<div className="flex gap-5 items-end w-full max-md:flex-col max-md:gap-4 max-sm:gap-3">
{/* Имя */}
<div className="flex flex-col gap-3 max-w-[360px] w-full">
<label className="text-2xl leading-8 text-gray-950 mb-2 font-normal font-[Onest,sans-serif]">Введите имя</label>
<input
type="text"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
placeholder="Иван"
className="max-w-[360px] w-full h-[62px] px-6 py-4 text-[18px] leading-[1.4] font-normal font-[Onest,sans-serif] text-neutral-500 bg-white border border-stone-300 rounded focus:outline-none"
disabled={isLoading}
required
/>
</div>
{/* Фамилия */}
<div className="flex flex-col gap-3 max-w-[360px] w-full">
<label className="text-2xl leading-8 text-gray-950 mb-2 font-normal font-[Onest,sans-serif]">Фамилию</label>
<input
type="text"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
placeholder="Иванов"
className="max-w-[360px] w-full h-[62px] px-6 py-4 text-[18px] leading-[1.4] font-normal font-[Onest,sans-serif] text-neutral-500 bg-white border border-stone-300 rounded focus:outline-none"
disabled={isLoading}
required
/>
</div>
{/* Кнопка */}
<button
type="submit"
disabled={isLoading || !firstName.trim() || !lastName.trim()}
className="flex items-center justify-center flex-shrink-0 bg-red-600 rounded-xl px-8 py-5 text-lg font-medium leading-5 text-white disabled:opacity-50 disabled:cursor-not-allowed h-[70px] max-sm:px-6 max-sm:py-4"
style={{
color: 'white'
}}
aria-label="Сохранить"
tabIndex={0}
>
{isLoading ? 'Сохраняем...' : 'Сохранить'}
{/* <img src="/images/Arrow_right.svg" alt="" className="ml-2 w-6 h-6" /> */}
</button>
</div>
</form>
</div>
)
}
export default UserRegistration