From 8b7ed89595eff7d7fb53f61846bc2f4d6552dabb Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Wed, 21 Dec 2022 19:46:48 +0530 Subject: fixed form not submitting when enter is pressed --- src/views/login/login.js | 24 ++++++++++++++++++------ src/views/login/register.js | 20 +++++++++++++------- 2 files changed, 31 insertions(+), 13 deletions(-) (limited to 'src') 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 = () => {

Welcome To OpenBills!

You are not logged in.

-
+
- - - +
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 = () => {

Sign Up To OpenBills

-
+
- - - +
-- cgit v1.2.3