From 1c1ba8822037cce7bfa8a7e0c03ad5ca0025ab92 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:00:35 +0200
Subject: [PATCH] fix(dasbhoard): Revert keybound form for public pages (#9710)

**What**
- We recently changed all forms to require Cmd/Ctrl + Enter to submit, this makes sense for our forms within modals, but not so much for our public pages such as the login page.
- This PR removes the need to hold Cmd or Ctrl when trying to submit the forms on the login page, reset password page, and register page.
- Also fixes some incorrect styling on the reset password and register pages.
---
 .../dashboard/src/routes/invite/invite.tsx    | 12 ++--
 .../dashboard/src/routes/login/login.tsx      |  5 +-
 .../routes/reset-password/reset-password.tsx  | 67 +++++++++++--------
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/packages/admin/dashboard/src/routes/invite/invite.tsx b/packages/admin/dashboard/src/routes/invite/invite.tsx
index 6baf549e87..5535a0ae56 100644
--- a/packages/admin/dashboard/src/routes/invite/invite.tsx
+++ b/packages/admin/dashboard/src/routes/invite/invite.tsx
@@ -10,7 +10,6 @@ import { Link, useSearchParams } from "react-router-dom"
 import * as z from "zod"
 import { Form } from "../../components/common/form"
 import AvatarBox from "../../components/common/logo-box/avatar-box"
-import { KeyboundForm } from "../../components/utilities/keybound-form"
 import { useSignUpWithEmailPass } from "../../hooks/api/auth"
 import { useAcceptInvite } from "../../hooks/api/invites"
 import { isFetchError } from "../../lib/is-fetch-error"
@@ -140,7 +139,7 @@ const LoginLink = () => {
       <Link
         key="login-link"
         to="/login"
-        className="text-ui-fg-interactive txt-small !text-ui-fg-base transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover font-medium outline-none"
+        className="txt-small text-ui-fg-base transition-fg hover:text-ui-fg-base-hover focus-visible:text-ui-fg-base-hover font-medium outline-none"
       >
         {t("invite.backToLogin")}
       </Link>
@@ -251,10 +250,7 @@ const CreateView = ({
         </Text>
       </div>
       <Form {...form}>
-        <KeyboundForm
-          onSubmit={handleSubmit}
-          className="flex w-full flex-col gap-y-6"
-        >
+        <form onSubmit={handleSubmit} className="flex w-full flex-col gap-y-6">
           <div className="flex flex-col gap-y-2">
             <Form.Field
               control={form.control}
@@ -373,7 +369,7 @@ const CreateView = ({
           >
             {t("invite.createAccount")}
           </Button>
-        </KeyboundForm>
+        </form>
       </Form>
       <LoginLink />
     </div>
@@ -400,7 +396,7 @@ const SuccessView = () => {
       <Link
         key="login-link"
         to="/login"
-        className="text-ui-fg-interactive txt-small !text-ui-fg-base transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover mt-3 font-medium outline-none"
+        className="txt-small text-ui-fg-base transition-fg hover:text-ui-fg-base-hover focus-visible:text-ui-fg-base-hover mt-3 font-medium outline-none"
       >
         {t("invite.backToLogin")}
       </Link>
diff --git a/packages/admin/dashboard/src/routes/login/login.tsx b/packages/admin/dashboard/src/routes/login/login.tsx
index c3b8867742..497ed117d2 100644
--- a/packages/admin/dashboard/src/routes/login/login.tsx
+++ b/packages/admin/dashboard/src/routes/login/login.tsx
@@ -7,7 +7,6 @@ import * as z from "zod"
 
 import { Form } from "../../components/common/form"
 import AvatarBox from "../../components/common/logo-box/avatar-box"
-import { KeyboundForm } from "../../components/utilities/keybound-form"
 import { useDashboardExtension } from "../../extensions"
 import { useSignInWithEmailPass } from "../../hooks/api"
 import { isFetchError } from "../../lib/is-fetch-error"
@@ -86,7 +85,7 @@ export const Login = () => {
             return <Component key={i} />
           })}
           <Form {...form}>
-            <KeyboundForm
+            <form
               onSubmit={handleSubmit}
               className="flex w-full flex-col gap-y-6"
             >
@@ -149,7 +148,7 @@ export const Login = () => {
               <Button className="w-full" type="submit" isLoading={isPending}>
                 {t("actions.continueWithEmail")}
               </Button>
-            </KeyboundForm>
+            </form>
           </Form>
           {getWidgets("login.after").map((Component, i) => {
             return <Component key={i} />
diff --git a/packages/admin/dashboard/src/routes/reset-password/reset-password.tsx b/packages/admin/dashboard/src/routes/reset-password/reset-password.tsx
index 9e56e27b70..773cfd7e59 100644
--- a/packages/admin/dashboard/src/routes/reset-password/reset-password.tsx
+++ b/packages/admin/dashboard/src/routes/reset-password/reset-password.tsx
@@ -10,7 +10,6 @@ import { decodeToken } from "react-jwt"
 import { Form } from "../../components/common/form"
 import { LogoBox } from "../../components/common/logo-box"
 import { i18n } from "../../components/utilities/i18n"
-import { KeyboundForm } from "../../components/utilities/keybound-form"
 import {
   useResetPasswordForEmailPass,
   useUpdateProviderForEmailPass,
@@ -118,19 +117,26 @@ const ChooseNewPassword = ({ token }: { token: string }) => {
   const { mutateAsync, isPending } = useUpdateProviderForEmailPass()
 
   const handleSubmit = form.handleSubmit(async ({ password }) => {
-    try {
-      await mutateAsync({
+    if (!invite) {
+      return
+    }
+
+    await mutateAsync(
+      {
         email: invite.entity_id,
         password,
-      })
-
-      form.setValue("password", "")
-      form.setValue("repeat_password", "")
-
-      setShowAlert(true)
-    } catch (error) {
-      toast.error(error.message)
-    }
+      },
+      {
+        onSuccess: () => {
+          form.setValue("password", "")
+          form.setValue("repeat_password", "")
+          setShowAlert(true)
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
   })
 
   if (!isValidResetPasswordToken) {
@@ -138,8 +144,8 @@ const ChooseNewPassword = ({ token }: { token: string }) => {
   }
 
   return (
-    <div className="bg-ui-bg-base flex min-h-dvh w-dvw items-center justify-center">
-      <div className="m-4 flex w-full max-w-[300px] flex-col items-center">
+    <div className="bg-ui-bg-subtle flex min-h-dvh w-dvw items-center justify-center">
+      <div className="m-4 flex w-full max-w-[280px] flex-col items-center">
         <LogoBox className="mb-4" />
         <div className="mb-6 flex flex-col items-center">
           <Heading>{t("resetPassword.resetPassword")}</Heading>
@@ -149,7 +155,7 @@ const ChooseNewPassword = ({ token }: { token: string }) => {
         </div>
         <div className="flex w-full flex-col gap-y-3">
           <Form {...form}>
-            <KeyboundForm
+            <form
               onSubmit={handleSubmit}
               className="flex w-full flex-col gap-y-6"
             >
@@ -209,7 +215,7 @@ const ChooseNewPassword = ({ token }: { token: string }) => {
                   {t("resetPassword.resetPassword")}
                 </Button>
               )}
-            </KeyboundForm>
+            </form>
           </Form>
         </div>
         <span className="txt-small my-6">
@@ -219,7 +225,7 @@ const ChooseNewPassword = ({ token }: { token: string }) => {
               <Link
                 key="login-link"
                 to="/login"
-                className="text-ui-fg-interactive transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover outline-none"
+                className="text-ui-fg-base transition-fg hover:text-ui-fg-base-hover focus-visible:text-ui-fg-base-hover outline-none"
               />,
             ]}
           />
@@ -246,15 +252,20 @@ export const ResetPassword = () => {
   const { mutateAsync, isPending } = useResetPasswordForEmailPass()
 
   const handleSubmit = form.handleSubmit(async ({ email }) => {
-    try {
-      await mutateAsync({
+    await mutateAsync(
+      {
         email,
-      })
-      form.setValue("email", "")
-      setShowAlert(true)
-    } catch (error) {
-      toast.error(error.message)
-    }
+      },
+      {
+        onSuccess: () => {
+          form.setValue("email", "")
+          setShowAlert(true)
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
   })
 
   if (token) {
@@ -273,7 +284,7 @@ export const ResetPassword = () => {
         </div>
         <div className="flex w-full flex-col gap-y-3">
           <Form {...form}>
-            <KeyboundForm
+            <form
               onSubmit={handleSubmit}
               className="flex w-full flex-col gap-y-6"
             >
@@ -310,7 +321,7 @@ export const ResetPassword = () => {
               <Button className="w-full" type="submit" isLoading={isPending}>
                 {t("resetPassword.sendResetInstructions")}
               </Button>
-            </KeyboundForm>
+            </form>
           </Form>
         </div>
         <span className="txt-small my-6">
@@ -320,7 +331,7 @@ export const ResetPassword = () => {
               <Link
                 key="login-link"
                 to="/login"
-                className="text-ui-fg-interactive transition-fg hover:text-ui-fg-interactive-hover focus-visible:text-ui-fg-interactive-hover outline-none"
+                className="text-ui-fg-base transition-fg hover:text-ui-fg-base-hover focus-visible:text-ui-fg-base-hover outline-none"
               />,
             ]}
           />