From 40271f420da3ce524e5cb303031ab70bc11e1737 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 5 Feb 2021 13:01:55 +0100
Subject: [PATCH] Login: Improve tab navigation for input fields

Improves the tab indexes so that keyboard navigation goes: Email > Password > Sign in > Create account > Forgot password.

Also autofocuses the email field so that you can start typing right away.

Closes #2257.
---
 BTCPayServer/Views/Account/Login.cshtml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/BTCPayServer/Views/Account/Login.cshtml b/BTCPayServer/Views/Account/Login.cshtml
index 378427d11..1cd754c5d 100644
--- a/BTCPayServer/Views/Account/Login.cshtml
+++ b/BTCPayServer/Views/Account/Login.cshtml
@@ -8,7 +8,7 @@
 
 <div class="row justify-content-center mb-2">
     <div class="col text-center">
-        <a asp-controller="Home" asp-action="Index">
+        <a asp-controller="Home" asp-action="Index" tabindex="-1">
             <img src="~/img/btcpay-logo.svg" alt="BTCPay Server" class="mb-4" height="70" asp-append-version="true"/>
         </a>
 
@@ -33,26 +33,26 @@
                         <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                         <div class="form-group">
                             <label asp-for="Email"></label>
-                            <input asp-for="Email" class="form-control" required />
+                            <input asp-for="Email" class="form-control" required tabindex="1" autofocus />
                             <span asp-validation-for="Email" class="text-danger"></span>
                         </div>
                         <div class="form-group">
                             <div class="d-flex justify-content-between">
                                 <label asp-for="Password"></label>
-                                <a asp-action="ForgotPassword">Forgot password?</a>
+                                <a asp-action="ForgotPassword" tabindex="5">Forgot password?</a>
                             </div>
-                            <input asp-for="Password" class="form-control" required />
+                            <input asp-for="Password" class="form-control" required tabindex="2" />
                             <span asp-validation-for="Password" class="text-danger"></span>
                         </div>
                         <div class="form-group mt-4">
-                            <button type="submit" class="btn btn-primary btn-block btn-lg" id="LoginButton">Sign in</button>
+                            <button type="submit" class="btn btn-primary btn-block btn-lg" id="LoginButton" tabindex="3">Sign in</button>
                         </div>
                     </fieldset>
                 </form>
                 @if (themeManager.ShowRegister)
                 {
                     <p class="text-center mt-2 mb-0">
-                        <a id="Register" style="font-size:1.15rem" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Create your account</a>
+                        <a id="Register" style="font-size:1.15rem" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" tabindex="4">Create your account</a>
                     </p>
                 }
             </div>