Las pantallas de inicio de sesión son el parcial signin que se incluye, mostrado en sus estados. Las dos últimas son ejemplos para copiar.
Cada ejemplo funciona de verdad, pero sus enlaces no llevan a ninguna parte.
signin signin-title live-head
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 campo y un botón. Nada que recordar y nada que robar. rastrillo lo hace de fábrica.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} El navegador recuerda cómo entró la última vez. Un toque envía la dirección recordada, que se vuelve a comprobar desde cero.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} La dirección está en el botón, así que no hay nada que teclear.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} 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.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Repite la dirección tal cual. Es la única oportunidad de detectar una errata antes de quedarse esperando un correo que nunca llegará.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Cuando la dirección no la envió este navegador, la página no la adivina.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Una línea dice que esta vez se envió un enlace. No adivina por qué.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} La página avanza sola, con un enlace por si no lo hace.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} El mensaje pertenece al campo, y ahí es donde empieza el foco.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} El botón cambia para enviar un enlace en su lugar, así nadie se queda atascado.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} 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.
<section rst-box >
<h1 >Iniciar sesión</h1 >
<div rst-signin-providers >
<form method ="post" action ="/auth/google" >
<button rst-btn ="block" type ="submit" >
<svg aria-hidden ="true" focusable ="false" width ="1.1em" height ="1.1em" viewBox ="0 0 48 48" ><path fill ="#EA4335" d ="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" /><path fill ="#4285F4" d ="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" /><path fill ="#FBBC05" d ="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" /><path fill ="#34A853" d ="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" /></svg >
Continuar con Google
</button >
</form >
<form method ="post" action ="/auth/apple" >
<button rst-btn ="block" type ="submit" >
<svg aria-hidden ="true" focusable ="false" width ="1.1em" height ="1.1em" viewBox ="0 0 24 24" ><path fill ="currentColor" d ="M12.15 6.9c-.95 0-2.42-1.08-3.96-1.04-2.04.03-3.91 1.18-4.96 3.01-2.12 3.68-.55 9.1 1.52 12.09 1.01 1.45 2.2 3.09 3.79 3.04 1.52-.07 2.09-.99 3.94-.99 1.83 0 2.35.99 3.96.95 1.64-.03 2.68-1.48 3.68-2.95 1.15-1.69 1.63-3.33 1.66-3.42-.04-.01-3.18-1.22-3.22-4.86-.03-3.04 2.48-4.49 2.6-4.56-1.43-2.09-3.63-2.32-4.39-2.38-2-.15-3.68 1.09-4.62 1.09zm3.38-3.07c.84-1.01 1.4-2.43 1.25-3.83-1.21.05-2.66.8-3.53 1.82-.78.9-1.46 2.34-1.27 3.71 1.34.1 2.71-.69 3.55-1.7z" /></svg >
Continuar con Apple
</button >
</form >
<a href ="/signin" >Usar tu correo electrónico</a >
</div >
</section >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.
rastrillo no trae esta pantalla. La gente reutiliza las contraseñas, 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. El marcado está aquí porque algunos productos todavía lo necesitan.
<section rst-box >
<h1 >Iniciar sesión</h1 >
<form rst-form method ="post" action ="/signin" >
<div rst-field >
<label rst-field-label for ="pw-email" >Correo electrónico</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" >Contraseña</label >
<input rst-input id ="pw-pass" name ="password" type ="password" autocomplete ="current-password" required >
</div >
<button rst-btn ="primary" type ="submit" >Continuar</button >
</form >
</section >