Update layout of sign in mfa page

studio/components/interfaces/SignIn/SignInMfaForm.tsx

@@ -4,7 +4,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { Button, Form, IconLock, Input } from 'ui'
+import { Button, Form, IconExternalLink, IconLock, Input } from 'ui'
 import { object, string } from 'yup'
 
 import Loading from 'components/ui/Loading'
@@ -119,23 +119,34 @@ const SignInMfaForm = () => {
                   }
                 />
 
-                <Button
-                  block
-                  form="sign-in-mfa-form"
-                  htmlType="submit"
-                  size="large"
-                  disabled={isLoading || isSuccess}
-                  loading={isLoading || isSuccess}
-                >
-                  {isLoading ? 'Verifying' : 'Verify'}
-                </Button>
-                {factors?.totp.length === 2 && (
+                <div className="flex items-center justify-between space-x-2">
+                  <Button
+                    block
+                    type="outline"
+                    size="large"
+                    disabled={isLoading || isSuccess}
+                    onClick={onClickLogout}
+                    className="opacity-80 hover:opacity-100 transition"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    block
+                    form="sign-in-mfa-form"
+                    htmlType="submit"
+                    size="large"
+                    disabled={isLoading || isSuccess}
+                    loading={isLoading || isSuccess}
+                  >
+                    {isLoading ? 'Verifying' : 'Verify'}
+                  </Button>
+                </div>
+                {/* {factors?.totp.length === 2 && (
                   <div className="text-sm flex flex-col items-center w-full gap-1">
                     <div>
                       <span className="text-scale-900">Having problems?</span>{' '}
                       <a
-                        className="text-white hover:border-b border-white"
-                        href="#"
+                        className="text hover:border-b border-white cursor-pointer"
                         onClick={() =>
                           setSelectedFactor(factors.totp.find((f) => f.id !== selectedFactor?.id)!)
                         }
@@ -144,30 +155,45 @@ const SignInMfaForm = () => {
                       }?`}</a>
                     </div>
                   </div>
-                )}
-              </div>
-              <div
-                onClick={onClickLogout}
-                className="mt-3 transition text-center text-sm text-scale-1000 hover:text-scale-1200 cursor-pointer"
-              >
-                Cancel sign in
+                )} */}
               </div>
             </>
           )}
         </Form>
       )}
 
-      <div className="self-center my-8 text-sm">
-        <span className="text-scale-1000">Unable to sign in?</span>{' '}
-        <Link passHref href="/support/new?subject=Unable+to+sign+in+via+MFA&category=Login_issues">
-          <a
-            target="_blank"
-            rel="noreferrer"
-            className="underline transition text-scale-1100 hover:text-scale-1200"
-          >
-            Reach out via support
-          </a>
-        </Link>
+      <div className="my-8">
+        <div className="text-sm">
+          <span className="text-scale-1000">Unable to sign in?</span>{' '}
+        </div>
+        <ul className="list-disc pl-6">
+          {factors?.totp.length === 2 && (
+            <li>
+              <a
+                className="text-sm text-scale-1100 hover:text-scale-1200 cursor-pointer"
+                onClick={() =>
+                  setSelectedFactor(factors.totp.find((f) => f.id !== selectedFactor?.id)!)
+                }
+              >{`Authenticate using ${
+                factors.totp.find((f) => f.id !== selectedFactor?.id)?.friendly_name
+              }?`}</a>
+            </li>
+          )}
+          <li>
+            <Link
+              passHref
+              href="/support/new?subject=Unable+to+sign+in+via+MFA&category=Login_issues"
+            >
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-sm transition text-scale-1100 hover:text-scale-1200"
+              >
+                Reach out to us via support
+              </a>
+            </Link>
+          </li>
+        </ul>
       </div>
     </>
   )