From 5478c135d1ab06ec717207c45517c30538d029fd Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Tue, 28 Sep 2021 11:43:15 +0100
Subject: [PATCH] Set tabIndex for forgot password & add loader (#807)

---
 pages/auth/login.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index fcf56c4d14..37b5c88204 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 
 import { ErrorCode, getSession } from "@lib/auth";
 
+import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
 
 const errorMessages: { [key: string]: string } = {
@@ -72,6 +73,13 @@ export default function Login({ csrfToken }) {
   return (
     <div className="min-h-screen bg-neutral-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <HeadSeo title="Login" description="Login" />
+
+      {isSubmitting && (
+        <div className="z-50 absolute w-full h-screen bg-gray-50 flex items-center">
+          <Loader />
+        </div>
+      )}
+
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
         <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
         <h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">
@@ -110,7 +118,9 @@ export default function Login({ csrfToken }) {
                 </div>
                 <div className="w-1/2 text-right">
                   <Link href="/auth/forgot-password">
-                    <a className="font-medium text-primary-600 text-sm">Forgot?</a>
+                    <a tabIndex={-1} className="font-medium text-primary-600 text-sm">
+                      Forgot?
+                    </a>
                   </Link>
                 </div>
               </div>