hệ thống thiết kế rastrillo

Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: plain. Ngôn ngữ: Tiếng Việt.

Màn hình

Các màn hình ở đây là ví dụ để sao chép, không phải thành phần.

Đăng nhập

Hãy nêu bật một lối vào chính, các lối khác đặt bên dưới. Đừng tách đăng ký khỏi đăng nhập — một nút dùng được cho cả hai thì ít phải giải thích và ít sai hơn.

Một liên kết trong email

Một ô nhập và một nút. Không có gì phải nhớ và không có gì để đánh cắp. rastrillo làm sẵn việc này.

Máy tính Điện thoại Mã

<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>

Sau khi gửi liên kết

Hiển thị lại đúng địa chỉ vừa nhập. Đó là cơ hội duy nhất để phát hiện lỗi gõ trước khi ngồi chờ một email không bao giờ tới.

Máy tính Điện thoại Mã

<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>

Một passkey

Cách vào nhanh nhất với người đã có, và không phải gõ gì cả. Hãy cung cấp thêm một cách thứ hai: người ta làm mất thiết bị, và một passkey không dùng được là một cánh cửa khoá.

Máy tính Điện thoại Mã

<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 và những cái khác

Chúng tôi cung cấp các nút, vẽ đúng theo yêu cầu của từng công ty. Chúng tôi không cung cấp phần đăng nhập — bạn tự nối nó tới nhà cung cấp mình dùng.

Máy tính Điện thoại Mã

<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>

Email và mật khẩu

Nếu bạn vẫn dùng mật khẩu, hãy giữ nguyên bố cục một lối vào chính, và đặt cách đặt lại mật khẩu ngay dưới nút, đừng giấu đi.

Chúng tôi không khuyến nghị mật khẩu

Người ta dùng lại mật khẩu, mật khẩu bị lộ, và việc lưu giữ chúng an toàn rơi vào tay bạn. Hãy dùng liên kết gửi qua email kèm passkey, hoặc chỉ passkey, hoặc đăng nhập bằng tài khoản người ta đã có. Màn hình bên dưới có mặt vì một số sản phẩm vẫn cần nó, không phải vì nó là lựa chọn mặc định tốt.

Máy tính Điện thoại Mã

<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>