My ReactJs Application has been freezing whenever I type into an input field. It was initially working smoothly, but then this issue occurred yesterday. I have changed onChange to on submit, but that also does not help. I could type one character, and the application will freeze. I deleted the built pages, like profile update, profile delete, profile verification, admin update, and admin delete, which require the user to type into an input field and leave the login page. However, that also does not help. I will provide the frontend code for login. Please let me know if seeing the other page’s code requiring input will help investigate further. Any help is appreciated!
import React, { useState, useEffect } from 'react';
import './Login.css';
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Entry Checks
import checkUsername from '../../Functions/EntryCheck/checkUsername';
import checkPassword from '../../Functions/EntryCheck/checkPassword';
//Functions
import CheckLogin from '../../Functions/VerificationCheck/checkLogin';
//Repositories
import Axios from 'axios';
import { useNavigate, useLocation } from 'react-router-dom';
const Login = () => {
const navigate = useNavigate();
const location = useLocation();
const userLoggedIn = CheckLogin();
const [isLoading, setIsLoading] = useState(false);
const [username, setUsername] = useState(null);
const [password, setPassword] = useState(null);
const [statusMessage, setStatusMessage] = useState(null);
useEffect(()=> {
if (userLoggedIn) {
navigate('/');
}
}, [userLoggedIn]);
const login = async () => {
if (username === null || password === null){
return setStatusMessage("Username and password must be provided!");
}
else if(checkUsername(username) === false || checkPassword(password) === false){
return setStatusMessage("Account Does Not Exist or Password Is Incorrect!");
}
else {
setIsLoading(true);
}
const url = 'http://localhost:3001/user/*****';
await Axios.post(url, {
username: username,
password: password,
}).then((response) => {
setIsLoading(false);
if (response.data.loggedIn){
sessionStorage.setItem('catchingSoulsLoggedin', true);
sessionStorage.setItem('catchingSoulsUsername', response.data.username);
if (location.state == null) {
navigate('/');
}
else if (location.state.previousUrl != location.pathname){
navigate(location.state);
}
} else {
setStatusMessage(response.data.message);
}
});
}
return (
<>
<Header/>
<div className='page_container'>
<div className='login_form'>
<h1>Catching Souls</h1>
<input name='username' placeholder='Username' required="true" autoComplete="off" value={username} onChange={(e) => {setUsername(e.target.value) }} />
<input name='password' placeholder='Password' type='password' required="true" autoComplete="off" value={password} onChange={(e) => {setPassword(e.target.value) }} />
{isLoading && <button className='loginButton' disabled>Loading...</button>}
{!isLoading && <button className='loginButton' type='submit' onClick={login}>Login</button>}
{isLoading ? <></> : <h2><a href='/Register'>Register?</a> or <a href='/ForgotPassword'>Reset Password?</a></h2>}
</div>
{isLoading ? <></> : <h2>{statusMessage}</h2>}
</div>
<Footer/>
</>
);
}
export default Login;
UPDATE
Adding code for verification page:
import React, { useState, useEffect } from 'react';
import './AdminToolsVerification.css';
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Functions
import GetUserProps from '../../Functions/VerificationCheck/getUserProps';
//Entry Checks
import checkPassword from '../../Functions/EntryCheck/checkPassword'
//Repositories
import Axios from 'axios';
import { useNavigate, useParams } from 'react-router-dom';
const AdminToolsVerification = () => {
const navigate = useNavigate();
const {AccountUsername} = useParams();
const [foundAdminAccount, setFoundAdminAccount] = useState(false);
const [loggedInUserData, setLoggedInUserData] = useState(GetUserProps(true, AccountUsername));
const [password, setPassword] = useState(null);
const [confirmPassword, setConfirmPassword] = useState(null);
const [statusMessage, setStatusMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [firstName, setFirstName] = useState(null);
const [lastName, setLastName] = useState(null);
useEffect(() => {
setIsLoading(true);
locateUnverifiedAccount();
setIsLoading(false);
}, []);
const locateUnverifiedAccount = async () => {
const url = 'http://localhost:3001/admin/****************';
await Axios.post(url, {AccountUsername : {AccountUsername}})
.then((response) => {
setFoundAdminAccount(response.data.foundAdminAccount);
if (response.data.foundAdminAccount){
loggedInUserData.then(res => setFirstName(res.data[0].accountFirstName))
loggedInUserData.then(res => setLastName(res.data[0].accountLastName));
}
})
.catch((error) => {
console.log(error);
})
}
const submitForm = () => {
if (password == null || confirmPassword == null){
return setStatusMessage("All fields with "*" be filled in!");
}
else if (password !== confirmPassword){
return setStatusMessage("Password and confirm password does not match!");
}
else if (checkPassword(password) == false){
return setStatusMessage("Password Is Not Acceptable");
}
setIsLoading(true);
const url = 'http://localhost:3001/admin/**********';
Axios.post(url, {
AccountUsername : {AccountUsername},
password : password,
})
.then((response) => {
if (response.data.message){
setIsLoading(false);
setStatusMessage(response.data.message);
}
else {
navigate('/Login');
}
})
.catch((error) => {
setIsLoading(false);
console(error);
});
};
return (
<>
<Header/>
<div className='page_container'>
<div className='adminToolsVerification_form'>
{foundAdminAccount ?
<>
<h1>Hello {firstName} {lastName},</h1>
<p>Please enter a password to verify your account.</p>
<input className='password' placeholder='Enter A Password' type='password' required autoComplete="off" onChange={(e) => {setPassword(e.target.value); }} />
<input className='confirmPassword' placeholder='Confirm Password' type='password' required autoComplete="off" onChange={(e) => {setConfirmPassword(e.target.value); }} />
{isLoading && <button className='registerButton' disabled>Loading...</button>}
{!isLoading && <button className='registerButton' type='submit' onClick={submitForm}>Register</button>}
</>
:
<>
<h1 style={{color: 'crimson'}}>Not Verified!</h1>
<p>Your account is already verified <br/> or <br/> You are not a registered admin.</p>
<p>Contact an admin by emailing <a href="mailto:[email protected]">[email protected]</a></p>
</>
}
</div>
{isLoading ? <></> : <h2>{statusMessage}</h2>}
</div>
<Footer/>
</>
);
}
export default AdminToolsVerification;
