sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: plain. Idioma: Español.

Pantallas

Las pantallas de aquí son ejemplos para copiar, no componentes.

Iniciar sesión

Muestra una vía principal de entrada, con las demás debajo. No separes el registro del inicio de sesión: un solo botón que sirva para ambos es menos que explicar y menos que equivocar.

Un enlace en tu correo

Un campo y un botón. Nada que recordar y nada que robar. rastrillo lo hace de fábrica.

Escritorio Móvil Código

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

Después de enviar el enlace

Repite la dirección tal cual. Es la única oportunidad de detectar una errata antes de quedarse esperando un correo que nunca llegará.

Escritorio Móvil Código

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

Una clave de acceso

La vía más rápida para quien ya tiene una, y no hay nada que teclear. Ofrece también una segunda vía: la gente pierde dispositivos, y una clave de acceso que no funciona es una puerta cerrada.

Escritorio Móvil Código

<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 y los demás

Te damos los botones, dibujados como exige cada empresa. No te damos el inicio de sesión en sí: eso lo conectas tú al proveedor que uses.

Escritorio Móvil Código

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

Correo y contraseña

Si aun así usas contraseñas, mantén la misma disposición de una vía principal y pon la forma de restablecerla justo debajo del botón, en lugar de esconderla.

No recomendamos las contraseñas

La gente las reutiliza, se filtran, y a ti te toca el trabajo de guardarlas de forma segura. Usa un enlace por correo junto con una clave de acceso, o solo claves de acceso, o el inicio de sesión con una cuenta que la gente ya tiene. La pantalla de abajo está aquí porque algunos productos todavía la necesitan, no porque sea un buen valor por defecto.

Escritorio Móvil Código

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