شاشة رمز التحقق (OTP Verification Screen) — Roaya Payتم تصميم وتطوير شاشة التحقق برمز OTP لتطبيق Roaya Pay، لتكون الحلقة الأمنية الفاصلة بين التحقق من الهوية والسماح بتغيير كلمة المرور، مع تجربة مستخدم سلسة وواضحة تقود التاجر خطوة بخطوة دون أي تعقيد.🎨 مميزات التصميم
تصميم نظيف وبسيط يتوافق مع الهوية البصرية الكاملة لـ Roaya Pay بخلفية داكنة وألوان خضراء مميزة.
واجهة مريحة وبديهية تجعل عملية إدخال رمز التحقق سهلة وسريعة دون أي ارتباك.
تصميم متجاوب (Responsive) يعمل بشكل مثالي على مختلف أحجام الشاشات والأجهزة الذكية.
⚙️ عناصر الشاشة ووظائفها١. نص توجيهي (Instructional TextView)
تعرض الشاشة نصاً توجيهياً واضحاً في الأعلى:
"أدخل رمز التحقق — تم إرسال رمز التحقق إلى الرقم الذي يبدأ بـ (XX) وينتهي بـ (XX)"
مما يمنح التاجر تأكيداً فورياً بأن الرمز أُرسل على الرقم الصحيح، مع إخفاء جزء من الرقم للحفاظ على الخصوصية.٢. حقول إدخال الرمز (6 OTP Input Boxes)
ستة مربعات إدخال منفصلة وأنيقة، كل مربع يستقبل رقماً واحداً فقط، مع انتقال تلقائي (Auto Focus) من مربع لآخر عند الإدخال لتسريع العملية وتحسين تجربة المستخدم، كما يدعم اللصق التلقائي للرمز (Auto Paste) من رسائل SMS مباشرةً.٣. عداد إعادة الإرسال (Resend Timer — 60 ثانية)
يظهر عداد تنازلي من 60 ثانية يمنح المستخدم وقتاً كافياً لاستلام الرمز، مع تعطيل خيار إعادة الإرسال خلال هذه الفترة لمنع إرسال طلبات متكررة وحماية النظام من الإساءة.٤. زر التحقق (Verify Button)
زر واضح وبارز يُفعَّل عند اكتمال إدخال الرمز في المربعات الستة، وعند الضغط عليه يتم التحقق من الرمز وإرسال المستخدم مباشرةً إلى شاشة تغيير كلمة المرور، مع عرض حالة التحميل (Loading State) أثناء التحقق.٥. خيار إعادة الإرسال (Resend OTP)
بعد انتهاء عداد الـ 60 ثانية، يظهر نص قابل للضغط:
"لم أستلم رمزاً؟ إعادة الإرسال"
يقوم بإرسال رمز تحقق جديد على نفس الرقم المسجل فوراً، مع إعادة تشغيل العداد من جديد لضمان عدم تكرار الطلبات بشكل مفرط.🔒 الأمان وتجربة المستخدم
الرمز صالح لمدة محدودة فقط (OTP Expiry) لمنع إعادة استخدامه.
يتم إلغاء الرمز القديم تلقائياً عند طلب رمز جديد.
رسائل خطأ واضحة وودية في حال إدخال رمز غير صحيح أو منتهي الصلاحية.
الانتقال التلقائي لشاشة تغيير كلمة المرور فور التحقق الناجح دون أي خطوات إضافية.