sistema de design do rastrillo

Uma visão geral de tudo o que o sistema de design oferece. Tema: signal. Idioma: Português.

Ecrãs

Os ecrãs aqui são exemplos para copiar, não componentes.

Iniciar sessão

Mostre uma via principal de entrada, com as outras por baixo. Não separe o registo do início de sessão: um botão que sirva para ambos é menos para explicar e menos para correr mal.

Uma ligação no seu email

Um campo e um botão. Nada para memorizar e nada para roubar. O rastrillo faz isto de origem.

Computador Telemóvel 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>

Depois de enviar a ligação

Repita o endereço tal como foi escrito. É a única oportunidade de detetar uma gralha antes de ficar à espera de um email que nunca chegará.

Computador Telemóvel 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>

Uma chave de acesso

A via mais rápida para quem já tem uma, e não há nada para escrever. Ofereça também uma segunda via: as pessoas perdem dispositivos, e uma chave de acesso que não funciona é uma porta trancada.

Computador Telemóvel 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 e os restantes

Damos-lhe os botões, desenhados como cada empresa exige. Não lhe damos o início de sessão em si: isso liga você ao fornecedor que usar.

Computador Telemóvel 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>

Email e palavra-passe

Se mesmo assim usar palavras-passe, mantenha a mesma disposição de uma via principal e coloque a forma de a repor logo por baixo do botão, em vez de a esconder.

Não recomendamos palavras-passe

As pessoas reutilizam-nas, elas vazam, e fica consigo o trabalho de as guardar em segurança. Use uma ligação por email mais uma chave de acesso, ou apenas chaves de acesso, ou o início de sessão com uma conta que as pessoas já têm. O ecrã abaixo está aqui porque alguns produtos ainda precisam dele, não porque seja um bom valor por omissão.

Computador Telemóvel 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>