डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: signal। भाषा: हिन्दी।
स्क्रीन
यहाँ की स्क्रीन कॉपी करने के लिए उदाहरण हैं, कॉम्पोनेंट नहीं।
साइन इन करना
अंदर आने का एक मुख्य रास्ता दिखाएँ, बाकी उसके नीचे। साइन-अप और साइन-इन को अलग न करें — एक ही बटन जो दोनों के लिए चले, समझाने में भी कम है और गलत होने में भी।
आपके ईमेल में एक लिंक
एक फ़ील्ड और एक बटन। याद रखने को कुछ नहीं, चुराने को भी कुछ नहीं। rastrillo यह पहले से करता है।
पता वापस दिखाएँ। ऐसे ईमेल का इंतज़ार करने से पहले, जो कभी आएगा ही नहीं, टाइपो पकड़ने का यही एकमात्र मौका है।
<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>
ईमेल और पासवर्ड
अगर आप पासवर्ड इस्तेमाल करते ही हैं, तो वही एक-मुख्य-रास्ता वाला ढाँचा रखें, और रीसेट करने का रास्ता बटन के ठीक नीचे रखें, छिपाएँ नहीं।
हम पासवर्ड की सलाह नहीं देते
लोग इन्हें दोबारा इस्तेमाल करते हैं, ये लीक होते हैं, और इन्हें सुरक्षित रखने का काम आपके सिर आ पड़ता है। ईमेल में भेजे लिंक के साथ पासकी का उपयोग करें, या अकेले पासकी, या ऐसे अकाउंट से साइन-इन जो लोगों के पास पहले से है। नीचे की स्क्रीन इसलिए है कि कुछ उत्पादों को अब भी इसकी ज़रूरत है, इसलिए नहीं कि यह एक अच्छा डिफ़ॉल्ट है।