Add Phone field (7 digits) to both registration forms
All checks were successful
Build frontend / build (push) Successful in 36s

Maps to API 'Phone' field, validated to exactly 7 digits
This commit is contained in:
Claw AI
2026-03-28 15:41:18 +00:00
parent 0621f51676
commit f7fa3c723d
2 changed files with 33 additions and 0 deletions

View File

@ -29,6 +29,7 @@ export default function OwnerRegisterPage() {
email: '',
phone: '',
whatsapp: '',
phone2: '',
nationalNumber: '',
password: '',
confirmPassword: '',
@ -130,6 +131,7 @@ export default function OwnerRegisterPage() {
email: formData.email,
phoneNumber: formData.phone || '',
whatsAppNumber: formData.whatsapp,
phone: formData.phone2,
nationalNumber: formData.nationalNumber,
password: formData.password,
ownerType: formData.ownerType,
@ -360,6 +362,20 @@ export default function OwnerRegisterPage() {
{errors.whatsapp && <p className="text-red-500 text-sm mt-1">{errors.whatsapp}</p>}
</motion.div>
<motion.div variants={fadeInUp}>
<label className="block text-sm font-medium text-gray-300 mb-2">رقم الهاتف (7 أرقام) <span className="text-red-500">*</span></label>
<div className="relative group">
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<Phone className={`w-5 h-5 ${errors.phone2 ? 'text-red-500' : 'text-gray-400 group-focus-within:text-amber-500'}`} />
</div>
<input type="tel" value={formData.phone2}
onChange={(e) => { setFormData({...formData, phone2: e.target.value}); setErrors({...errors, phone2: null}); }}
className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone2 ? 'border-red-500' : 'border-gray-700'}`}
placeholder="أدخل رقم الهاتف" maxLength={7} />
</div>
{errors.phone2 && <p className="text-red-500 text-sm mt-1">{errors.phone2}</p>}
</motion.div>
<motion.div variants={fadeInUp}>
<label className="block text-sm font-medium text-gray-300 mb-2">الرقم الوطني <span className="text-red-500">*</span></label>
<div className="relative group">