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 TenantRegisterPage() {
email: '',
phone: '',
whatsapp: '',
phone2: '',
nationalNumber: '',
password: '',
confirmPassword: '',
@ -83,6 +84,7 @@ export default function TenantRegisterPage() {
else if (formData.password.length < 6) newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
if (!formData.whatsapp) newErrors.whatsapp = 'رقم الواتساب مطلوب';
if (!formData.phone2 || formData.phone2.length !== 7) newErrors.phone2 = 'رقم الهاتف يجب أن يكون 7 أرقام';
if (!formData.nationalNumber) newErrors.nationalNumber = 'الرقم الوطني مطلوب';
if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
@ -130,6 +132,7 @@ export default function TenantRegisterPage() {
email: formData.email,
phoneNumber: formData.phone,
whatsAppNumber: formData.whatsapp,
phone: formData.phone2,
nationalNumber: formData.nationalNumber,
password: formData.password,
customerType: formData.customerType,
@ -358,6 +361,20 @@ export default function TenantRegisterPage() {
{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-blue-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-blue-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">