デザインシステムが提供するものの概要。テーマ: signal。言語: 日本語。
ここにあるのはコピーして使う例で、部品ではありません。
入り口はひとつを目立たせ、残りはその下に置きます。新規登録とサインインを分けないでください。両方に効くボタンひとつのほうが、説明も間違いも少なくなります。
入力欄ひとつとボタンひとつ。覚えるものも盗まれるものもありません。rastrillo は最初からこれに対応しています。
<section rst-box>
<h1>Sign in</h1>
<form rst-form method="post" action="/signin">
<div rst-field>
<label rst-field-label for="email">Email</label>
<input rst-input id="email" name="email" type="email" autocomplete="email" required>
</div>
<button rst-btn="primary" type="submit">Continue</button>
</form>
<p><a href="/signin/other">Other ways to sign in</a></p>
</section>入力されたアドレスをそのまま返して見せます。決して届かないメールを待ち始める前に、打ち間違いに気づける唯一の機会です。
<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>ボタンは各社の規定どおりに描いたものをお渡しします。サインインそのものは含みません。使うプロバイダーへの接続はご自身で行ってください。
<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>それでもパスワードを使うなら、入り口をひとつにする同じ配置のままにして、再設定への導線をボタンのすぐ下に置いてください。隠さないことです。
パスワードは使い回され、漏れ、そして安全に保管する仕事はあなたに回ってきます。メールのリンクとパスキーの組み合わせか、パスキーだけか、すでに持っているアカウントでのサインインを使ってください。下の画面がここにあるのは、まだ必要とする製品があるからで、既定として good だからではありません。
<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>