fixed form not submitting when enter is pressed

2 files changed, 31 insertions, 13 deletions

diff --git a/src/views/login/login.js b/src/views/login/login.js
index 0283dc7..0cb3fae 100644
--- a/src/views/login/login.js
+++ b/src/views/login/login.js
@@ -18,7 +18,7 @@
 import './scss/login.scss';
 import { User, login } from '../../classes/user';
 
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEye } from '@fortawesome/free-solid-svg-icons'
@@ -28,6 +28,13 @@ const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
 
+  // read username from params and populate input box
+  const [urlParams] = useSearchParams();
+  useState(_ => {
+    const user = urlParams.get("user");
+    if (user && user !== "") setUser(prev => ({...prev, UserName: user}));
+  }, [urlParams]);
+
   const validate = () => {
     if (user.UserName.trim() === "") return false;
     if (user.Password.length < 8) return false;
@@ -39,7 +46,14 @@ const LoginPage = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    login(user, handleSuccess, handleError);
+    if (validate()) login(user, handleSuccess, handleError);
+  }
+
+  // for some reason pressing enter on the from clicks the /register link
+  const handleEnter = e => {
+    if (e.code === "Enter" || e.code === "NumpadEnter") {
+      handleSubmit(e);
+    }
   }
 
   const handleSuccess = (res) => {
@@ -57,7 +71,7 @@ const LoginPage = () => {
       <div className={"login-page"}>
         <h1>Welcome To OpenBills!</h1>
         <p>You are not logged in.</p>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} onKeyDown={handleEnter}>
           <label>
             Username:
             <input
@@ -86,9 +100,7 @@ const LoginPage = () => {
           </label>
           <hr/>
           <div className={"buttons"}>
-            <Link to="/register">
-              <button>Create Account</button>
-            </Link>
+            <button onClick={_ => navigate("/register")}>Create Account</button>
             <input type="submit" value="Log In" disabled={!validate()}/>
           </div>
         </form>
diff --git a/src/views/login/register.js b/src/views/login/register.js
index 1b1755b..69bb20b 100644
--- a/src/views/login/register.js
+++ b/src/views/login/register.js
@@ -20,13 +20,13 @@ import { User, validateEmail, validateUsername, validatePassword, saveUser } fro
 import { notificationConfig } from "./../../classes/notifications";
 
 import { Store } from "react-notifications-component";
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEye } from '@fortawesome/free-solid-svg-icons'
 
-
 const RegisterPage = () => {
+  const navigate = useNavigate();
   const [user, setUser] = useState(new User());
   const [showPassword, setShowPassword] = useState(false);
 
@@ -40,7 +40,14 @@ const RegisterPage = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    saveUser(user, handleSuccess, handleError);
+    if (validate()) saveUser(user, handleSuccess, handleError);
+  }
+
+  // for some reason pressing enter on the from clicks the /register link
+  const handleEnter = e => {
+    if (e.code === "Enter" || e.code === "NumpadEnter") {
+      handleSubmit(e);
+    }
   }
 
   const handleSuccess = () => {
@@ -49,6 +56,7 @@ const RegisterPage = () => {
       message: `Welcome to OpenBills, ${user.UserName}!`,
       ...notificationConfig("default")
     });
+    navigate(`/login?user=${user.UserName}`);
   }
 
   const handleError = err => {
@@ -63,7 +71,7 @@ const RegisterPage = () => {
     <div className={"register-page-wrapper"}>
       <div className={"register-page"}>
         <h1>Sign Up To OpenBills</h1>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} onKeyDown={handleEnter}>
           <label>
             Username:
             <input
@@ -101,9 +109,7 @@ const RegisterPage = () => {
           </label>
           <hr/>
           <div className={"buttons"}>
-            <Link to="/login">
-              <button>Log In Instead</button>
-            </Link>
+            <button onClick={_ => navigate("/login")}>Log In Instead</button>
             <input type="submit" value="Sign Up" disabled={!validate()}/>
           </div>
         </form>