सामग्री पर जाएँ
मेनू
भाषा, अभी हिन्दी
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo डिज़ाइन सिस्टम

डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी

स्क्रीन

यहाँ की स्क्रीन कॉपी करने के लिए उदाहरण हैं, कॉम्पोनेंट नहीं।

साइन इन करना

अंदर आने का एक मुख्य रास्ता दिखाएँ, बाकी उसके नीचे। साइन-अप और साइन-इन को अलग न करें — एक ही बटन जो दोनों के लिए चले, समझाने में भी कम है और गलत होने में भी।

लिंक भेजे जाने के बाद

पता वापस दिखाएँ। ऐसे ईमेल का इंतज़ार करने से पहले, जो कभी आएगा ही नहीं, टाइपो पकड़ने का यही एकमात्र मौका है।

पूर्वावलोकन
<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>