طراحی آزاد فرم ورود و عضویت

ویجت فرم ورود، ویجت فرم عضویت و ویجت فرم بازیابی رمز هرکدام یک چیدمان آماده و قفل هستند: فیلدها را خودشان بر اساس نوع احراز هویت می‌سازند و ترتیب، فاصله و ظاهرشان قابل تغییر نیست. فقط فونت، اندازه‌ها و چند رنگ تنظیم می‌شود.

در این راهنما همان فرم‌ها را از اجزای معمولی می‌سازیم: گروه، متن، عکس، فیلد متنی فرم و دکمه. نتیجه، صفحه‌ای است که می‌توانید لوگو بالایش بگذارید، فیلدها را کنار هم بچینید، دکمه را هرشکلی که می‌خواهید دربیاورید و پیام خطا را هرجا که می‌خواهید نشان دهید.

ویجت‌های قدیمی حذف نمی‌شوند

هر سه ویجت آماده سر جایشان می‌مانند و اپ‌های ساخته‌شده دست‌نخورده کار می‌کنند. اگر چیدمان آماده کافی است، همان را استفاده کنید.

این راهنما خواهرِ طراحی آزاد صفحه پروفایل کاربر است و دقیقاً همان الگو را دنبال می‌کند: متغیر برای خواندن، عملکرد برای نوشتن.

عملکردهایی که این کار را ممکن می‌کنند

عملکرد	کار
ورود به حساب کاربری	ورود با موبایل/ایمیل و رمز، همراه با جریان کد یکبارمصرف
عضویت	ساخت حساب تازه، همراه با جریان کپچا و کد تأیید
بازیابی رمز عبور	ارسال کد و باز کردن پنجره ثبت رمز جدید

هر سه در منوی عملکردها، زیر گروه حساب کاربری قرار دارند.

قاعده طلایی

پارامترهای این عملکردها نام متغیر می‌گیرند، نه مقدار ثابت. فیلد فرم را به یک متغیر وصل می‌کنید و دکمه همان متغیر را می‌فرستد. مقدار رمز هرگز داخل تنظیمات اپ ذخیره نمی‌شود.

نتیجه هر اجرا در sys.user.saveSuccess و پیام خطا در sys.user.saveError می‌نشیند — همان دو متغیری که عملکردهای پروفایل هم استفاده می‌کنند.

پیش‌نیازها

1. حساب کاربری در اپ فعال باشد و نوع احراز هویت انتخاب شده باشد.
2. صفحه‌های ورود، عضویت و بازیابی رمز در تنظیمات تعیین شده باشند.
3. با متغیرها و شرط‌ها آشنایی اولیه داشته باشید.

شروع سریع: بلوک‌های آماده

لازم نیست از صفر شروع کنید. در منوی افزودن ویجت، مسیر حساب کاربری ← بلوک‌های حساب کاربری سه بلوک آماده دارد:

• فرم ورود
• فرم عضویت
• فرم بازیابی رمز

هر بلوک شامل عنوان، فیلدهای متصل به متغیر، دکمه با عملکرد درست و متن خطای شرطی است؛ یعنی بلافاصله کار می‌کند و شما فقط ظاهرش را عوض می‌کنید.

این‌ها با بلوک‌های وردپرسی فرق دارند

بلوک‌های حساب کاربری وردپرس در مسیر جداگانه وردپرس ← بلوک‌های حساب کاربری قرار دارند و با sys.wordpress.* کار می‌کنند. برای حساب کاربری خود اپ از مسیر حساب کاربری استفاده کنید.

تبدیل ویجت موجود

اگر همین حالا یکی از سه ویجت قدیمی را در صفحه‌ای دارید:

1. در درخت صفحه، منوی «بیشتر» آن ویجت را باز کنید (یا روی ردیفش راست‌کلیک کنید).
2. گزینه تبدیل به ویجت‌های قابل ویرایش را بزنید.

بلوک معادل کنار ویجت ساخته می‌شود. ویجت اصلی حذف نمی‌شود؛ بعد از اطمینان از فرم تازه خودتان پاکش کنید.

گام ۱: ساخت فرم ورود

اگر می‌خواهید دستی بسازید:

1. یک گروه عمودی اضافه کنید.
2. یک متن با عنوان «ورود به حساب کاربری» بگذارید.
3. یک فیلد متنی فرم با برچسب «موبایل یا ایمیل» اضافه کنید و در بخش اتصال به متغیر، متغیر auth.username را انتخاب کنید. جهت اتصال را روی همگام‌سازی دوطرفه بگذارید.
4. یک فیلد متنی دیگر با برچسب «رمز عبور» اضافه کنید، نوعش را روی رمز عبور بگذارید و به متغیر auth.password وصل کنید.
5. یک دکمه با متن «ورود» اضافه کنید و روی رویداد کلیک آن، عملکرد ورود به حساب کاربری را با این پارامترها بگذارید:

پارامتر	مقدار
متغیر موبایل یا ایمیل	auth.username
متغیر رمز عبور	auth.password

گام ۲: نمایش خطا

یک ویجت متن با محتوای زیر اضافه کنید:

{{sys.user.saveError}}

رنگش را قرمز کنید و شرط نمایشش را «خالی نبودن sys.user.saveError» بگذارید.

این مرحله را رد نکنید

درست بودن شناسه، وجود کاربر، درستی رمز، مسدود بودن حساب و تکراری بودن حساب همگی فقط روی سرور بررسی می‌شوند. اگر sys.user.saveError را نمایش ندهید، کاربر هیچ‌وقت نمی‌فهمد چرا ورود انجام نشد.

گام ۳: فرم عضویت

همان ساختار گام ۱، با دو تفاوت:

• عملکرد دکمه، عضویت است.
• معمولاً یک فیلد «تکرار رمز عبور» هم دارید که به متغیر auth.rePassword وصل می‌شود.

بررسی تکرار رمز

عملکرد عضویت برابری رمز و تکرارش را نمی‌سنجد. روی دکمه عضویت یک شرط فعال بودن بگذارید:

بخش	مقدار
متغیر	auth.password
عملگر	برابر است با
مقدار	{{auth.rePassword}}

مقدار شرط الگوی {{...}} را می‌خواند، پس مقایسه دو متغیر با هم ممکن است. بلوک آماده «فرم عضویت» همین شرط را از قبل دارد.

گرفتن نام هنگام عضویت

اگر می‌خواهید نام کاربر را هم همان لحظه بگیرید، روی دکمه یک عملکرد چندگانه بگذارید:

1. عضویت
2. ذخیره نام و نام خانوادگی — با شرط sys.user.saveSuccess == true

همین الگو برای فیلدهای سفارشی هم کار می‌کند.

گام ۴: بازیابی رمز

یک فیلد «موبایل یا ایمیل» متصل به auth.username و یک دکمه با عملکرد بازیابی رمز عبور.

بقیه مراحل — ارسال کد، پنجره ورود کد و پنجره ثبت رمز جدید — خودکار انجام می‌شوند.

یادداشت

اگر نوع احراز هویت اپ «موبایل و رمز یکبارمصرف» است، کاربران اصلاً رمز ندارند. در این حالت لینک «رمز را فراموش کرده‌اید؟» را نشان ندهید.

گام ۵: جریان کد تأیید

بسته به تنظیمات حساب کاربری، سرور ممکن است کد تأیید یا کپچا بخواهد. پنجره‌های مربوطه خودکار باز می‌شوند و لازم نیست چیزی برایشان طراحی کنید.

نکته مهم درباره انصراف:

اتفاق	sys.user.saveSuccess	sys.user.saveError
ورود/عضویت موفق	true	خالی
خطای سرور	false	پیام سرور
کاربر پنجره کد را بست	بدون تغییر	بدون تغییر

به همین دلیل، پیام موفقیت را همیشه مشروط به sys.user.saveSuccess == true کنید، نه صرفاً به پایان یافتن عملکرد.

گام ۶: بعد از ورود موفق

پس از ورود یا عضویت موفق، نشست کاربر ذخیره می‌شود و همه متغیرهای sys.user.* مقدار می‌گیرند. معمولاً باید صفحه ورود را ببندید:

روی دکمه یک عملکرد چندگانه بگذارید:

1. ورود به حساب کاربری
2. بستن صفحه — با شرط sys.user.saveSuccess == true

یادداشت

بعد از عضویت موفق نیازی به اجرای «ورود به حساب کاربری» نیست؛ کاربر از قبل وارد شده است.

گام ۷: جابه‌جایی بین صفحه‌ها

برای لینک‌های «حساب ندارید؟ عضو شوید» و «رمز را فراموش کرده‌اید؟» از این عملکردها استفاده کنید:

• ورود به صفحه عضویت
• ورود به صفحه ورود
• ورود به صفحه بازیابی رمز

ساختار نهایی

صفحه ورود
└── گروه فرم (عمودی)
    ├── عکس لوگو
    ├── متن «ورود به حساب کاربری»
    ├── فیلد موبایل یا ایمیل   → auth.username (دوطرفه)
    ├── فیلد رمز عبور          → auth.password (دوطرفه)
    ├── دکمه «ورود»            → عملکرد چندگانه:
    │                             ۱) ورود به حساب کاربری
    │                             ۲) بستن صفحه (شرط: saveSuccess == true)
    ├── متن خطا               → {{sys.user.saveError}} (شرط: خالی نباشد)
    ├── دکمه «رمز را فراموش کرده‌اید؟» → ورود به صفحه بازیابی رمز
    └── دکمه «حساب ندارید؟»          → ورود به صفحه عضویت

چک‌لیست قبل از انتشار

• sys.user.saveError در هر سه فرم نمایش داده می‌شود.
• پیام‌های موفقیت مشروط به sys.user.saveSuccess == true هستند.
• فیلد رمز، نوع «رمز عبور» دارد تا متنش مخفی بماند.
• برابری «رمز» و «تکرار رمز» در فرم عضویت بررسی می‌شود.
• جریان کد تأیید روی دستگاه واقعی تست شده است.
• فرم با نوع احراز هویت اپ هماهنگ است (مثلاً در حالت رمز یکبارمصرف، فیلد رمز و لینک بازیابی نمایش داده نمی‌شوند).
• صفحه در اندازه‌های مختلف نمایشگر بررسی شده است.

اشتباهات رایج

• استفاده از بلوک وردپرسی به‌جای بلوک اپ: مسیر وردپرس ← بلوک‌های حساب کاربری با حساب وردپرس کار می‌کند؛ برای کاربر خود اپ از مسیر حساب کاربری ← بلوک‌های حساب کاربری استفاده کنید.
• مقدار به‌جای نام متغیر در پارامترهای عملکرد.
• نمایش ندادن خطا: فرم آزاد بدون sys.user.saveError عملاً بی‌استفاده است.
• بستن صفحه بدون شرط: اگر کاربر پنجره کد تأیید را ببندد، صفحه ورود هم بسته می‌شود در حالی که کاربر وارد نشده است.
• نمایش فیلد رمز در اپی که ورودش با رمز یکبارمصرف است: مقدار آن نادیده گرفته می‌شود و کاربر را گیج می‌کند.