أحاول تحسين تدفق التسجيل عبر الهاتف المحمول لموقع https://physicswithethan.discourse.diy، حيث يُفضل أن يستخدم بعض المستخدمين المدعوين المصادقة الخارجية بدلاً من نموذج البريد الإلكتروني/كلمة المرور المحلي.
حاليًا، عند فتح /signup على الهاتف المحمول، يظهر ما يلي:
تسجيل بسيط
البريد الإلكتروني
اسم المستخدم
كلمة المرور
تسجيل
أو
لدي حساب في كلية نوتنغهام
لدي حساب في نوفا إديوكيشن ترست
المشكلة هي أن العديد من طلاب المدارس/الكليات قد يصلون مباشرة إلى /signup، على سبيل المثال عبر رمز استجابة سريعة (QR Code)، أو صفحة دعوة، أو رابط مشترك. وقد لا يتجهون طبيعيًا إلى /login أولاً.
وبالتالي، رغم توفر أزرار تسجيل الدخول الخارجية، فإن أول ما يراه المستخدم هو نموذج “التسجيل البسيط” المحلي. وفي هذه الحالة، لا يُعد هذا المسار المفضل. فالمسار المفضل هو أن يختار المستخدم الزر المؤسسي المناسب (مايكروسوفت/SSO).
ما أريده على الهاتف المحمول هو شيء أقرب إلى:
لدي حساب في كلية نوتنغهام
لدي حساب في نوفا إديوكيشن ترست
أو
تسجيل بسيط
البريد الإلكتروني
اسم المستخدم
كلمة المرور
تسجيل
أفهم أن هذه مشكلة تتعلق بالترتيب البصري بشكل أساسي، وقد يكون مكون السمة (theme component) هو المكان المناسب لمعالجتها.
هل يعتبر نهجًا صحيحًا مثل التالي؟
.signup-page .signup-body {
display: flex;
flex-direction: column;
}
.signup-page .login-right-side {
order: -3;
margin-bottom: 1rem;
}
.signup-page .login-or-separator {
order: -2;
margin: 1rem 0;
}
أسئلتي هي:
- هل توجد طريقة مدعومة عبر السمة/المكون لنقل أزرار المصادقة الخارجية فوق نموذج التسجيل المحلي على الهاتف المحمول؟
- هل المحددات (selectors) ذات الصلة مستقرة بدرجة كافية لاستخدامها في مكون السمة، أم توجد طريقة أفضل لاستهدافها عبر كلاس أو خطاف (hook)؟
- هل توجد طريقة أنظف لجعل مسار SSO هو المسار المفضل بصريًا في /signup، دون تعطيل التسجيل المحلي بالكامل؟
أنا مهتم بشكل خاص بحالة الهاتف المحمول، لأن أزرار المصادقة الخارجية قد تظهر بسهولة أسفل منطقة الظهور (below the fold)، بينما يبدو “التسجيل البسيط” وكأنه الإجراء الأساسي.