aboutsummaryrefslogtreecommitdiff
path: root/src/views
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-12-21 19:46:48 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-12-21 19:46:48 +0530
commit8b7ed89595eff7d7fb53f61846bc2f4d6552dabb (patch)
tree2f4d90b9b254edd79cc907c62456b3a2b5719d58 /src/views
parent5d2f49c1332c78b124af33aebbfba93b7b5d9546 (diff)
fixed form not submitting when enter is pressed
Diffstat (limited to 'src/views')
-rw-r--r--src/views/login/login.js24
-rw-r--r--src/views/login/register.js20
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>