Skip to content

Instantly share code, notes, and snippets.

@gabrielEloy
Created Aug 19, 2021
Embed
What would you like to do?
import "./Auth.css";
import React, { useState } from "react";
import Parse from "parse";
import { useHistory } from 'react-router-dom'
const Auth = () => {
const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");
const [isRegistering, setIsRegistering] = useState(false);
const history = useHistory();
const handleLogin = () => {
const user = new Parse.User();
user.set('username', userName);
user.set('password', password);
user.logIn().then((user) => {
history.push('/')
}).catch(err => {
alert(err.message);
});
};
const handleRegister = () => {
const user = new Parse.User();
user.set('username', userName);
user.set('password', password);
user.signUp().then(() => {
handleLogin();
}).catch(err => alert(err.message));
};
const handleSubmit = (e) => {
e.preventDefault();
if (isRegistering) {
handleRegister();
return;
}
handleLogin();
};
const toggleIsRegistering = () => setIsRegistering(!isRegistering);
const [toggleRegisterText, authActiontext] = isRegistering
? ["use an existing account", "Register"]
: ["Create an account", "Login"];
return (
<div className="auth-container">
<h1>Auth</h1>
<form className="auth-form" onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={userName}
onChange={(e) => setUserName(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<span onClick={toggleIsRegistering}>{toggleRegisterText}</span>
<button type="submit">{authActiontext}</button>
</form>
</div>
);
};
export default Auth;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment