import React, { useEffect, useState } from “react”;
import Axios from “axios”;
import “…/App.css”;
export default function Registration() {
const [usernameReg, setUsernameReg] = useState("");
const [passwordReg, setPasswordReg] = useState("");
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loginStatus, setLoginStatus] = useState("");
Axios.defaults.withCredentials = true;
const register = () => {
Axios.post("http://localhost:3001/register", {
username: usernameReg,
password: passwordReg,
}).then((response) => {
console.log(response);
});
};
const login = () => {
Axios.post("http://localhost:3001/login", {
username: username,
password: password,
}).then((response) => {
if (response.data.message) {
setLoginStatus(response.data.message);
} else {
setLoginStatus(response.data[0].username);
}
});
};
useEffect(() => {
Axios.get("http://localhost:3001/login").then((response) => {
if (response.data.loggedIn == true) {
setLoginStatus(response.data.user[0].username);
}
});
}, );
return (
<div className="App">
<div className="registration">
<h1>Registration</h1>
<label>Username</label>
<input
type="text"
onChange={(e) => {
setUsernameReg(e.target.value);
}}
/>
<label>Password</label>
<input
type="text"
onChange={(e) => {
setPasswordReg(e.target.value);
}}
/>
<button onClick={register}> Register </button>
</div>
<div className="login">
<h1>Login</h1>
<input
type="text"
placeholder="Username..."
onChange={(e) => {
setUsername(e.target.value);
}}
/>
<input
type="password"
placeholder="Password..."
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<button onClick={login}> Login </button>
</div>
<h1>{loginStatus}</h1>
</div>
);
}
/////////////////////////////////////////
import React, { useEffect, useState } from “react”;
import Axios from “axios”;
import NormalUser from “…/components/NormalUser”;
import Mod from “…/components/Mod”;
import Admin from “…/components/Admin”;
export default function Main() {
const [role, setRole] = useState("");
Axios.defaults.withCredentials = true;
useEffect(() => {
Axios.get("http://localhost:3001/login").then((response) => {
if (response.data.loggedIn == true) {
setRole(response.data.user[0].role);
}
});
}, );
return (
<div>
{role == "visitor" && <NormalUser />}
{role == "mod" && <Mod />}
{role == "admin" && <Admin />}
</div>
);
}