diff options
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/login/login.js | 24 | ||||
-rw-r--r-- | src/views/login/register.js | 20 |
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> |