Merge pull request #23 from marbiano/auth-forms

Auth forms

components/auth/ForgotPassword.tsx

@@ -15,7 +15,9 @@ const ForgotPassword: FC<Props> = () => {
 
   const { setModalView, closeModal } = useUI()
 
-  const handleSignup = async () => {
+  const handleResetPassword = async (e: React.SyntheticEvent<EventTarget>) => {
+    e.preventDefault()
+
     if (!dirty && !disabled) {
       setDirty(true)
       handleValidation()
@@ -34,7 +36,10 @@ const ForgotPassword: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-80 flex flex-col justify-between p-3">
+    <form
+      onSubmit={handleResetPassword}
+      className="w-80 flex flex-col justify-between p-3"
+    >
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
@@ -47,7 +52,7 @@ const ForgotPassword: FC<Props> = () => {
         <div className="pt-2 w-full flex flex-col">
           <Button
             variant="slim"
-            onClick={() => handleSignup()}
+            type="submit"
             loading={loading}
             disabled={disabled}
           >
@@ -66,7 +71,7 @@ const ForgotPassword: FC<Props> = () => {
           </a>
         </span>
       </div>
-    </div>
+    </form>
   )
 }
 

components/auth/LoginView.tsx

@@ -18,7 +18,9 @@ const LoginView: FC<Props> = () => {
 
   const login = useLogin()
 
-  const handleLogin = async () => {
+  const handleLogin = async (e: React.SyntheticEvent<EventTarget>) => {
+    e.preventDefault()
+
     if (!dirty && !disabled) {
       setDirty(true)
       handleValidation()
@@ -54,7 +56,10 @@ const LoginView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-80 flex flex-col justify-between p-3">
+    <form
+      onSubmit={handleLogin}
+      className="w-80 flex flex-col justify-between p-3"
+    >
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
@@ -75,7 +80,7 @@ const LoginView: FC<Props> = () => {
 
         <Button
           variant="slim"
-          onClick={() => handleLogin()}
+          type="submit"
           loading={loading}
           disabled={disabled}
         >
@@ -92,7 +97,7 @@ const LoginView: FC<Props> = () => {
           </a>
         </div>
       </div>
-    </div>
+    </form>
   )
 }
 

components/auth/SignUpView.tsx

@@ -21,7 +21,9 @@ const SignUpView: FC<Props> = () => {
   const signup = useSignup()
   const { setModalView, closeModal } = useUI()
 
-  const handleSignup = async () => {
+  const handleSignup = async (e: React.SyntheticEvent<EventTarget>) => {
+    e.preventDefault()
+
     if (!dirty && !disabled) {
       setDirty(true)
       handleValidation()
@@ -59,7 +61,10 @@ const SignUpView: FC<Props> = () => {
   }, [handleValidation])
 
   return (
-    <div className="w-80 flex flex-col justify-between p-3">
+    <form
+      onSubmit={handleSignup}
+      className="w-80 flex flex-col justify-between p-3"
+    >
       <div className="flex justify-center pb-12 ">
         <Logo width="64px" height="64px" />
       </div>
@@ -83,7 +88,7 @@ const SignUpView: FC<Props> = () => {
         <div className="pt-2 w-full flex flex-col">
           <Button
             variant="slim"
-            onClick={() => handleSignup()}
+            type="submit"
             loading={loading}
             disabled={disabled}
           >
@@ -102,7 +107,7 @@ const SignUpView: FC<Props> = () => {
           </a>
         </span>
       </div>
-    </div>
+    </form>
   )
 }