ارسم صفحة تسجيل الدخول بنفسك

الهدف

اجعل الطريق إلى بوابتك يشبه بقية موقعك: صفحة تسجيل الدخول، وصفحة إنشاء حساب، وصفحة هل نسيت كلمة المرور؟ رسمتها بنفسك، مع بقاء صفحتك الرئيسية وصفحة الأسعار مفتوحتين لكل من لم يسجّل الدخول بعد.

قبل أن تبدأ

• بوابة ضُبط فيها من يمكنه فتحها على من يسجّلون الدخول. انظر اطلب من الزوّار تسجيل الدخول.
• أن يكون من يدير تثبيت Parsware لديك قد أعدّ إرسال البريد الإلكتروني. فإنشاء حساب وإعادة ضبط كلمة المرور كلاهما يرسل رسالة.

١. ارسم الشاشات

في تطبيق الاستوديو الخاص ببوابتك ارسم ثلاث شاشات. سمّها بما شئت — هذه الأسماء أمثلة فقط:

الشاشة	ما عليها
Sign in	صندوق بريد، وصندوق كلمة مرور، وصندوق رمز (انظر أدناه)، وزرّ تسجيل الدخول
Create account	صندوق اسم، وصندوق بريد، وصندوق كلمة مرور، وزرّ إنشاء حساب
Forgot password	صندوق بريد وزرّ إرسال الرابط

حدّد كل صندوق واضبط يقبل: عنوان بريد إلكتروني للعنوان وكلمة مرور لكلمة المرور. صندوق كلمة المرور يُخفي ما يُكتب وفيه عين لإظهاره.

اربط كل صندوق بحقل حالة — state.email وstate.password — كما تفعل في أي نموذج.

٢. أعطِ كل زرّ معالجه

الزرّ	المعالج
تسجيل الدخول	signIn(getState("email"), getState("password"), getState("code"), "needsCode");
إنشاء حساب	signUp(getState("name"), getState("email"), getState("password"), "sent");
إرسال الرابط	requestPasswordReset(getState("email"), "sent");

تذهب كلمة المرور إلى المنصّة، تمامًا كما تذهب من صفحة تسجيل الدخول الخاصة بالمنصّة. لا تُرسل أبدًا إلى شيء يخصّك، ولا يستطيع شيء في صفحتك قراءة الجلسة التي تعود.

الوسيط الأخير هو اسم حقل حالة، وبه تعرف صفحتك ما الذي حدث:

• signUp وrequestPasswordReset يجعلانه true حين تُرسل الرسالة. ضع النموذج في حزمة قيمة Visible فيها !state.sent، ورسالة «راجع بريدك» في حزمة أخرى قيمة Visible فيها state.sent.
• signIn يجعله true حين يكون تسجيل الدخول بخطوتين مفعّلًا في الحساب. أعطِ صندوق الرمز Visible بقيمة state.needsCode: يكتب الزائر الأرقام الستة ويضغط تسجيل الدخول مرة أخرى.

لماذا لا ننتقل إلى شاشة «راجع بريدك»؟

السطر التالي في المعالج يُنفَّذ سواء نجح الاستدعاء أم لا، لذلك فإن navigate(...) بعد signUp كان سينتقل إليها حتى حين يُرفض العنوان. إظهار الرسالة من حقل الحالة يعني أنها لا تظهر إلا حين تكون الرسالة قد أُرسلت فعلًا.

إن رفضت المنصّة — كلمة مرور خاطئة، أو عنوان له حساب من قبل — يُخبَر الزائر بالسبب في رسالة، بلغته. لا تحتاج إلى رسم شيء لذلك.

٣. أخبر البوابة بها

1. افتح الحل، واختر البوابات، وافتح البوابة.
2. في شاشة تسجيل الدخول اختر Sign in.
3. في مفتوحة قبل تسجيل الدخول اختر الشاشات التي يراها أي شخص: صفحتك الرئيسية، وصفحة الأسعار، وCreate account وForgot password.
4. اضغط حفظ.

ماذا يرى الزائر

من لم يسجّل الدخول يستطيع قراءة كل شاشة مفتوحة. إن ذهب إلى أي شاشة أخرى — برابط أو إشارة مرجعية أو زرّ — يرى شاشة Sign in الخاصة بك، على عنوان تلك الشاشة. وحين يسجّل الدخول يصبح العنوان نفسه الشاشة التي طلبها.

لذلك يعمل رابط حسابك في شريطك العلوي للجميع: يُظهر تسجيل الدخول للغريب، والحساب لمن سجّل دخوله.

ومن يسجّل الدخول على شاشة Sign in نفسها ينتقل إلى شاشة البداية في بوابتك.

الشاشات خلف تسجيل الدخول لا تُرسل إلى الغرباء

الشاشة غير المفتوحة ليست مخفية في الصفحة — إنها لا تُرسل أصلًا إلى من لم يسجّل الدخول. ما يستلمه مكانها هو شاشة تسجيل الدخول الخاصة بك.

٤. ارسم أيضًا الصفحة التي يفتحها رابط إعادة التعيين (اختياري)

حين يطلب أحدهم رابط إعادة تعيين كلمة المرور، يفتح الرابط في الرسالة صفحة يختار فيها كلمة مرور جديدة. يمكنك رسم تلك الصفحة أيضًا.

1. ارسم شاشة — New password مثلًا — فيها صندوقا كلمة مرور مربوطان بـ state.password وstate.again، وزرّ ضبط كلمة المرور بهذا المعالج:

   if (getState("password") != getState("again")) {
     notifyError("The two passwords are different.");
   } else {
     resetPassword(getState("password"));
   }

2. في البوابة اخترها في شاشة كلمة المرور الجديدة. يظهر هذا الحقل بعد اختيار شاشة تسجيل الدخول، لأن شاشة تسجيل الدخول هي وجهة الزائر التالية.

لا ترى شاشتك سوى كلمة المرور. يحمل الرابط سرًّا من الرسالة. تنزعه المنصّة من العنوان قبل أن تظهر شاشتك، وتعيده بنفسها حين يستدعي زرّك resetPassword. لا يستطيع شيء في صفحتك قراءته.

حين تُضبط كلمة المرور يُسجَّل خروج الزائر من كل مكان، ويُنقل إلى شاشة Sign in الخاصة بك، ويُخبر بأن كلمة مروره ضُبطت. وإن فتح أحدهم New password دون أن يتبع رابطًا، يخبره الزر بأن يفتح الرابط في بريده.

لا حاجة لإضافة New password إلى مفتوحة قبل تسجيل الدخول. من يحمل رابط إعادة التعيين لم يسجّل الدخول بطبيعة الحال، لذلك تُعرض عليه الصفحة دائمًا.

٥. ارسم أيضًا الصفحة التي يفتحها رابط التأكيد (اختياري)

بعد أن ينشئ أحدهم حسابًا، يفتح الرابط في رسالة التأكيد صفحة تؤكّد عنوانه. يمكنك رسم تلك الصفحة أيضًا — فهي أول صفحة يراها العميل الجديد.

1. ارسم شاشة — Address confirmed مثلًا. لا شيء فيها للكتابة، لذلك أعطِ الشاشة نفسها معالج تحميل يؤكّد فورًا:

   confirmEmail("confirmed");

2. ضع سطر «جارٍ التحقق من الرابط…» بقيمة Visible هي !state.confirmed، ورسالة «تأكّد عنوانك» مع زرّ تسجيل الدخول في حزمة قيمة Visible فيها state.confirmed.

3. في البوابة اخترها في شاشة تأكيد العنوان.

لا ترى شاشتك سرّ الرابط أبدًا، تمامًا كما في صفحة كلمة المرور الجديدة. ورابط التأكيد يعمل مرة واحدة، لذلك مهما طلبت شاشتك، تؤكّد المنصّة مرة واحدة وتعطي كل طلب لاحق الجواب نفسه. وإن كان الرابط قد استُخدم أو انتهت صلاحيته، يُخبَر الزائر بذلك في رسالة.

اترك شاشة تأكيد العنوان فارغة لتبقى صفحة المنصّة نفسها؛ فهي تؤكّد العنوان وتعيد الزائر إلى شاشة Sign in الخاصة بك مع رسالة.

٦. عنوان لم يُؤكَّد بعد، وكلمة مرور جديدة (اختياري)

من لم يؤكّد عنوانه لا يستطيع تسجيل الدخول، ويُقال له ذلك. أعطِ signIn وسيطًا خامسًا — اسم حقل حالة — فيُضبط على true حين يكون هذا هو السبب:

signIn(getState("email"), getState("password"), getState("code"), "needsCode", "unconfirmed");

حين يُسمّى الحقل، لا تُظهر المنصّة رسالة من عندها لهذا الرفض — رسمك هو الرسالة، فارسم الكلمات كما ترسم الزر. ومن دونه يُقال ذلك للزائر في رسالة، كأي رفض آخر.

ارسم مكدّسًا بـ Visible يساوي state.unconfirmed يحمل زرّ إرسال رسالة التأكيد مرة أخرى:

resendConfirmation(getState("email"), "resent");

يضبط resendConfirmation الحقل الذي تسمّيه بعد الطلب، ويقول — مثل رابط إعادة التعيين — «إن كان هناك حساب ينتظر التأكيد»، لأن المنصة لا تقول إن كان موجودًا. وشاشة Resend confirmation فيها صندوق بريد وهذا الزر، مفتوحة قبل تسجيل الدخول، تخدم من لم يحاول تسجيل الدخول بعد.

يستطيع الزائر المسجَّل تغيير كلمة مروره على شاشة خلف طريق الدخول: كلمة المرور الحالية، والجديدة مرتين، و

changePassword(getState("current"), getState("password"));

قارن الجديدتين في المعالج أولًا. عند النجاح يُسجَّل خروج الزائر من كل مكان، وتأخذه البوابة إلى صفحة تسجيل الدخول التي رسمتها، مع رسالة تقول إن كلمة المرور ضُبطت.

ويستطيع الزائر المسجَّل تغيير اسمه وصورته أيضًا. في صفحة حسابه:

changeName(getState("name"), "renamed");   // "renamed" تصبح true بعد الحفظ
changePhoto();                             // يفتح منتقي الصور في الجهاز
removePhoto();

يفتح changePhoto() منتقي الصور الخاص بالزائر، ويصغّر الصورة في المتصفح ويحفظها؛ وإن ألغى فلا يحدث شيء. بعد ذلك يعرض user.name وuser.photo الجديدين في كل الشاشات. وحيث يكون user.photo فارغًا، ارسم صورة بديلة بدل صورة فارغة.

٧. أو ضع حزمة تسجيل الدخول بدل رسمها

الحل النموذجي portal-sign-in-kit فيه كل الشاشات أعلاه مرسومة مسبقًا، على شكل مكوّنات: بطاقة تسجيل الدخول، وبطاقة إنشاء الحساب، وبطاقة الحساب بالاسم والصورة، وتسجيل الدخول بخطوتين. يشارك تطبيقه مكوّناته، فبعد استيراده يجدها كل تطبيق في البيئة — في أي حل كان — تحت المكوّنات ← من تطبيقات أخرى.

النموذج الذي يضع هذه البطاقات لا يحتاج إلى استيراد الحزمة. فهو يحمل نسخته من كل بطاقة، ولهذا تجدها في مصمّمه مسبقًا. استورد الحزمة حين تريد وضع البطاقات في تطبيق من تطبيقاتك، أو تغييرها في مكان واحد.

ضع بطاقة على شاشة ووجّه خصائصها إلى حالة شاشتك — email إلى state.email، وsent إلى state.sent. تكتب البطاقة ما يُكتب وإجاباتها في تلك الحقول. سمِّ شاشاتك كما تتوقع البطاقات (Sign in، Create account، Forgot password، Resend confirmation، New password، Address confirmed، Account، Change password، Sign-in security) لتعمل الروابط بينها.

حين تتغيّر الحزمة، افتح تطبيقك في المصمّم: يخبرك أن نسخه حُدِّثت. احفظه لتحصل بوابتك على التغيير.

العينات portal-landing-page وportal-service-desk وportal-sign-in-and-accounts كلها تضع الحزمة بهذه الطريقة.

ما الذي لا تفعله

• لا تغيّر من يستطيع تسجيل الدخول. إنه الحساب نفسه، وقواعد كلمة المرور نفسها، وتسجيل الدخول بخطوتين نفسه كما في صفحة المنصّة.
• لا تعمل على بوابة يمكن للجميع فتحها. لا أحد هناك ليسجّل الدخول، لذلك ترفض البوابة شاشة تسجيل دخول فيها.

جرّبها

استورد الحل النموذجي portal-sign-in-kit ثم portal-landing-page. في صفحة الهبوط طريق الدخول كله وصفحة حساب خلفه، موضوعة من الحزمة، وصفحة How this sample works تشرحها خطوة بخطوة.

ذو صلة

• اطلب من الزوّار تسجيل الدخول
• دع الزوار يفعّلون تسجيل الدخول بخطوتين
• نشر تطبيق كبوابة