پروژه چت فراوین: هفته اول ری‌اکت صفحه لاگین و ثبت نام

مقدمات

برای انجام پروژه ابتدا این ریپازیتوری را Fork کنید سپس پوشه template را کپی کنید و آن را به نام و نام‌خانوادگی خود تغییر دهید. مثلا AliFarjad‌ پوشه کار شما می شود. برای اجرای اولیه دستورات زیر را به ترتیب در محیط ترمینال (power shell ویندوز یا خود vs code) اجرا نمایید.

  1. npm install
  2. npm run dev

دستور اول ماژول های مورد نیاز را نصب می کند و دستور دوم پروژه را در محیط محلی سیستم شما اجرا می کند و یک آدرس برای اجرا در مروگر به شما می دهد.

فرم لاگین

در این پروژه باید فرم لاگین و رجیستر (ورود و ثبت نام) ‌با UI یا ظاهری مانند تصویر زیر را پیاده سازی نمایید.

image

سناریوهای موجود مانند سناریوهای تعریف شده در سند تعریف پروژه بوت کمپ ری اکت فراوین می باشد.

https://docs.google.com/document/d/1wCyCf_wjd5xZ4b06qnFrbEg29AYGtQYyWJ0-Or-O6Xg/edit?usp=drivesdk

با این تفاوت که با ظاهری مانند عکس فوق و زبان انگلیسی. همچنین سناریوهای زیر اضافه شده است:

  1. برای بررسی صحیح بودن موبایل از regex موجود کتابخانه فراوین استفاده شود. farawin.mobileRegex (این نکته رعایت شود که اعداد فارسی به انگلیسی تبدیل شوند می توان از تابع farawin.toEnDigit برای این منظور استفاده نمود)
  2. استفاده از farawin.testLogin برای لاگین و farawin.testRegister برای ثبت نام (باید نام کاربری که همان موبایل هست به همراه پسورد به تابع ارسال نمایید.) خروجی این توابع Promise می باشند.
  3. با کلیک کاربر بر روی نوشته forgot password یک alert با این متن به کاربر نمایش داده شود:‌ این امکان هنوز پیاده سازی نشده است
  4. با کلیک بر روی sign up همین فرم تنها با تغییر متن ها به متن های مناسب برای رجیستر، افزودن یک input برای دریافت تکرار رمز ورود، همچنین تغییر sign up به sign in و عملکرد آن و دیگر موارد مورد نیاز برای رجیستر تبدیل به فرم رجیستر شود.

کد Css برای بک گراند دکمه لاگین: background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff)

آدرس تست نمونه اصلی:

https://colorlib.com/etc/lf/Login_v4/index.html