дизайн-система rastrillo

Обзор всего, что даёт дизайн-система. Тема: day. Язык: Русский.

Экраны

Экраны здесь — примеры для копирования, а не компоненты.

Вход

Покажите один главный способ входа, остальные — под ним. Не разделяйте регистрацию и вход: одна кнопка на оба случая — меньше объяснять и меньше ломать.

Ссылка в письме

Одно поле и одна кнопка. Нечего запоминать и нечего красть. 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>

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>