মূল বিষয়ে যান
মেনু
ভাষা, এখন বাংলা
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo ডিজাইন সিস্টেম

ডিজাইন সিস্টেম যা কিছু দেয়, তার সংক্ষিপ্ত পরিচয়। থিম: day। ভাষা: বাংলা

স্ক্রিন

এখানকার স্ক্রিনগুলি কপি করার মতো উদাহরণ, কম্পোনেন্ট নয়।

সাইন ইন

ভিতরে ঢোকার একটি প্রধান পথ দেখান, বাকিগুলি তার নিচে। সাইন-আপ আর সাইন-ইন আলাদা করবেন না — একটি বোতাম যা দুটোতেই চলে, তাতে ব্যাখ্যাও কম আর ভুলও কম।

লিঙ্ক পাঠানোর পরে

ঠিকানাটি হুবহু ফিরিয়ে দেখান। যে ইমেল কোনওদিন আসবে না তার জন্য অপেক্ষা করার আগে বানান ভুল ধরার এটিই একমাত্র সুযোগ।

প্রিভিউ
<section rst-box>
  <h1>Check your email</h1>
  <p>We sent a link to <bdi>grace@example.com</bdi>.</p>
  <p><a href="/signin">Use a different address</a></p>
</section>

একটি পাসকি

যাঁর একটি আছে তাঁর জন্য এটিই দ্রুততম পথ, টাইপ করার কিছু নেই। দ্বিতীয় একটি পথও রাখুন: মানুষ যন্ত্র হারায়, আর যে পাসকি কাজ করে না সেটি একটি তালাবদ্ধ দরজা।

প্রিভিউ
<section rst-box>
  <h1>Sign in</h1>
  <button rst-btn="primary" type="button">Use a passkey</button>
  <p><a href="/signin">Email me a link instead</a></p>
</section>

Google, Apple আর বাকিরা

আমরা বোতামগুলি দিই, প্রতিটি কোম্পানির নিয়ম মেনে আঁকা। সাইন-ইন নিজে আমরা দিই না — সেটি আপনি নিজের সরবরাহকারীর সঙ্গে জুড়ে নেন।

প্রিভিউ
<section rst-box>
  <h1>Sign in</h1>
  <form rst-form method="post" action="/auth/google"><button rst-btn type="submit">Continue with Google</button></form>
  <form rst-form method="post" action="/auth/apple"><button rst-btn type="submit">Continue with Apple</button></form>
  <p><a href="/signin">Email me a link instead</a></p>
</section>

ইমেল আর পাসওয়ার্ড

তবুও যদি পাসওয়ার্ড ব্যবহার করেন, একই এক-প্রধান-পথ বিন্যাসটিই রাখুন, আর রিসেট করার উপায়টি বোতামের ঠিক নিচে রাখুন, লুকিয়ে নয়।

আমরা পাসওয়ার্ড ব্যবহারের পরামর্শ দিই না

মানুষ একই পাসওয়ার্ড বারবার ব্যবহার করে, সেগুলি ফাঁস হয়, আর নিরাপদে রাখার দায়িত্বটা এসে পড়ে আপনার ঘাড়ে। ইমেলের লিঙ্কের সঙ্গে পাসকি ব্যবহার করুন, বা শুধু পাসকি, বা মানুষের আগে থেকেই থাকা অ্যাকাউন্ট দিয়ে সাইন-ইন। নিচের স্ক্রিনটি আছে কারণ কিছু পণ্যের এখনও এটি দরকার, ভালো ডিফল্ট বলে নয়।

প্রিভিউ
<section rst-box>
  <h1>Sign in</h1>
  <form rst-form method="post" action="/signin">
    <div rst-field>
      <label rst-field-label for="pw-email">Email</label>
      <input rst-input id="pw-email" name="email" type="email" autocomplete="email" required>
    </div>
    <div rst-field>
      <label rst-field-label for="pw-pass">Password</label>
      <input rst-input id="pw-pass" name="password" type="password" autocomplete="current-password" required>
    </div>
    <button rst-btn="primary" type="submit">Continue</button>
    <p><a href="/signin/reset">Forgotten your password?</a></p>
  </form>
</section>