Hey,
I wanna make a separate page for login using username and password, how can I do it?
without defining the username and password again, I’m using react.js.
Thank you
1 Like
what you mean by this?
1 Like
@cryptokid think he might mean like the browser remebers the password email. @Sadeem if thats it pretty sure thats just something that your browser (chrome or edge etc) handles.
No, this is my code, and i can write any username and it will log me in, which is not make sense, i need it to check from the data base.
The Code:
import { useMoralis, useMoralisCloudFunction } from "react-moralis";
function Login() {
const { login, isAuthenticated, authenticate, Moralis, user } = useMoralis();
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [identity, setIdentity] = useState();
const handlePasswordChange = (event) => setPassword(event.target.value);
const handleUsernameChange = (event) => setUsername(event.target.value);
const handleIdentityChange = (event) => setIdentity(event.target.value);
const loginUsingUsername = async () => {
login(username, password);
};
if (!isAuthenticated){
return(
<header style={ HeaderStyle }>
<div>
<Form>
<h1 className="main-title-Sign">Login</h1>
<Row className="mb-3">
<Col>
<Form.Group controlId="formGridEmail">
<Form.Label>Username</Form.Label>
<Form.Control className="inputForm" type="text"
value={username} onChange={handleUsernameChange} />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control className="inputForm" type="password"
value={password} onChange={handlePasswordChange}
/>
</Form.Group>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label >Identity</Form.Label>
<Form.Control className="inputForm" type="number"
value={identity} onChange={handleIdentityChange} />
</Form.Group>
</Col>
</Row>
</Form>
<Center>
<Link to="/Property">
<button size="lg" className="sub_btn" onClick={loginUsingUsername}>
Login
</button>
</Link>
</Center>
</div>
</header>
);
}
}
export default Login;
i hope that clear enough
you can see here how to format code on forum:
Thank you!
i modified, you can check now,
Can you explain what you mean by not defining username and password again?
as u see in the code, I define the username and password again, so anyone can log in by creating any username, I don’t want that ofc, I want to check the username and password from the DB if the username and password match the DB then the login success, if not it will show an error message, I create the page of the sign up you can check it below:
function SignUpPage() {
const { login, isAuthenticated, authenticate, Moralis, user } = useMoralis();
const loginUsingMetamask = () => {
authenticate();
};
const loginUsingUsername = async () => {
login(username, password);
};
const [username, setUsername] = useState();
const [password, setPassword] = useState();
const [email, setEmail] = useState();
const [firstname, setFirstname] = useState();
const [lastname, setLastname] = useState();
const [phoneNumber, setPhoneNumber] = useState();
const [identity, setIdentity] = useState();
const [city, setCity] = useState();
const [role, setRole] = useState();
/* Landlord and tenant choice*/
const handleEmailChange = (event) => setEmail(event.target.value);
const handlePasswordChange = (event) => setPassword(event.target.value);
const handleUsernameChange = (event) => setUsername(event.target.value);
const handleFirstnameChange = (event) => setFirstname(event.target.value);
const handleLastnameChange = (event) => setLastname(event.target.value);
const handlePhoneNumbeChange = (event) => setPhoneNumber(event.target.value);
const handleIdentityChange = (event) => setIdentity(event.target.value);
const handleCityeChange = (event) => setCity(event.target.value);
const handleroleChange = (event) => setRole(event.target.value);
const signupFunc = async () => {
console.log(username, password, email,firstname,lastname,phoneNumber,identity,city,role);
const user = new Moralis.User();
user.set("username", username);
user.set("password", password);
user.set("email", email);
user.set("firstname", firstname);
user.set("lastname", lastname);
user.set("phoneNumber", phoneNumber);
user.set("identity", identity);
user.set("city", city);
user.set("role", role);
try {
await user.signUp();
alert("succesfully Signed up");
// Hooray! Let them use the app now.
} catch (error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
};
// function handleSubmit(e) {
// e.preventDefault();
// (this).addClass('active');
// }
// $('.light-button-Sign').onClick(function(e) {
// e.preventDefault();
// $(this).addClass('active');
// ----- Authenticate page---------
// if (!isAuthenticated) {
return (
<header style={ HeaderStyle }>
<div>
<Form>
<h1 className="main-title-Sign">Sign Up</h1>
<Row className="mb-3">
<Form.Group as={Col} className="mb-3" controlId="formGridFN">
<Form.Label>First Name</Form.Label>
<Form.Control className="inputForm" value={firstname}
onChange={handleFirstnameChange}
required
/>
</Form.Group>
<Form.Group as={Col} className="mb-3" controlId="formGridLN">
<Form.Label>Last Name</Form.Label>
<Form.Control className="inputForm" value={lastname}
onChange={handleLastnameChange}
required
/>
</Form.Group></Row>
<Row className="mb-3">
<Col>
<Form.Group controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control className="inputForm" type="email" onChange={handleEmailChange}
value={email} required />
</Form.Group></Col>
<Col>
<Form.Group controlId="formGridEmail">
<Form.Label>Username</Form.Label>
<Form.Control className="inputForm" type="text" onChange={handleUsernameChange}
value={username} required />
</Form.Group>
</Col>
</Row>
<Row className="mb-3">
<Col>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label >Identity</Form.Label>
<Form.Control className="inputForm" type="number" onChange={handleIdentityChange}
value={identity} required />
</Form.Group></Col>
<Col>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control className="inputForm" type="password"
value={password}
onChange={handlePasswordChange} required/>
</Form.Group>
</Col></Row>
<Row className="mb-3">
<Col>
<Form.Group controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control className="inputForm" value={city}
onChange={handleCityeChange}
required
/>
</Form.Group></Col>
<Col>
<Form.Group controlId="formGridPN">
<Form.Label>Phone Number</Form.Label>
<PhoneInput className="inputForm"
Country="sa"
showDropdown={false}
placeholder="+966 555 555 55"
value={phoneNumber}
onChange={setPhoneNumber}
required
/>
</Form.Group></Col>
</Row>
<Center>
<br />
<ToggleButton type="checkbox" className="light-button-Sign" value="Landlord" onChange={handleroleChange} required>
Landlord
</ToggleButton>
<br></br>
<ToggleButton type="checkbox" className="light-button-Sign" value="Tenant" onChange={handleroleChange} required>
Tenant
</ToggleButton>
</Center>
</Form>
<Center>
<Link to="/Property">
<button size="lg" className="sub_btn" onClick={signupFunc}>
Sign Up
</button>
</Link>
</Center>
{/* <form>
<h1 className="main-title-Sign">Sign Up</h1>
<div className="formLeft">
<input
value={firstname}
onChange={handleFirstnameChange}
placeholder="First Name"
/>
<input
value={lastname}
onChange={handleLastnameChange}
placeholder="Last Name"
/>
<input
type="number"
value={identity}
onChange={handleIdentityChange}
placeholder="Identity"
/>
<input
value={city}
onChange={handleCityeChange}
placeholder="City"
/>
</div>
<div className="formRight">
<PhoneInput
defaultCountry="SA"
value={phoneNumber}
onChange={setPhoneNumber}
placeholder="phone Number"
/>
<input
value={email}
onChange={handleEmailChange}
placeholder="Email"
/>
<input
value={password}
onChange={handlePasswordChange}
placeholder="password"
type="password"
/>
<input
value={username}
onChange={handleUsernameChange}
placeholder="username"
size="sm"
/>
</div>
<Center>
<br />
<button className="dark-button" value="Landlord" onClick={handleroleChange}>
Landlord
</button>
<br></br>
<button className="light-button" c value="Tenant" onClick={handleroleChange}>
Tenant
</button>
</Center>
<Center>
<button className="dark-button" onClick={signupFunc}>
Sign Up
</button>
</Center>
<br />
</form> */}
</div>
</header>
);
}
1 Like
if you sign up with username an password it will create an entry in the db? so then if you login with a diff username and password using
const user = await Moralis.User.logIn("myname", "mypass");
does this not give an error for you becase no entry in the databas would match this?
yes, it will login, that is the problem ):
also can you please check the code above? I attached the login code and the signup
in your code above you define the login function but you never call it in your. you are only calling your sign up func in the jsx
sorry you do ive just checked the code snippet above too. one sec
yeah im not sure why this is logging in successfully. it shouldnt be able to if you call login from the useMoralis hook and no user with those credentials exists in the DB. its als hard to read your code in those snippets because of the indenting. i can do two things if you want to share your repo i can clone and have a look. or else. i suggets trying to restart your logic again following exactly this tutorial.
if you want to share your code on github ill gladly have a look
I have watched that video, he write the signup and login on the same page, but I separate the pages(signup page, login page) and call it in app.js, so the problem appeared, I will upload the code in GitHub so you can check it
1 Like
you can do it that if there is no valid entry for that username that is matching a password, it should return and error
yeah do upload your code and provide the link. I would suggest that if your doing it that way where your seperating the components that you have a base component say “Auth” that both the child login and signup components belong to. in the parent Auth component define you state hooks for email, password etc and pass them down as props to both the child login and signup compoennts. this way you will only have to define all of these once instead of declaring each twice in both the login and signup components. but do provide your github and ill clone it and have a look for you
2 Likes