Что я хочу знать, так это то, как я могу скрыть ввод текстовых полей входа в систему после того, как пользователь вошел в систему. Это единственное веб-приложение, поэтому у меня нет никаких маршрутов или чего-то в этом роде.
Мой логин:
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);
}
});
};
<div className = "gpt3__navbar-sign">
<p>
<div className = "formField">
<input
type = "text"
className = "loginInputField"
placeholder = "E-Mail"
onChange = {(e) => {
setUsername(e.target.value);
}}
/>
<input
type = {passwordShown ? "text" : "password"}
className = "loginInputField"
placeholder = "Password"
onChange = {(e) => {
setPassword(e.target.value);
}}
/>
</div>
</p>
<div className = "gpt3__navbar-sign">
{!loginStatus ? (
<button onClick = {login} className = "formFieldButton">Einloggen</button>
) : (
<button onClick = {logoutUser} color = "inherit">
Logout
</button>
)}
</div>
</div>
заранее спасибо
Вы можете сделать то же самое, что и для кнопки:
<div className = "gpt3__navbar-sign">
<p>
<div className = "formField">
{!loginStatus &&
<>
<input
type = "text"
className = "loginInputField"
placeholder = "E-Mail"
onChange = {(e) => {
setUsername(e.target.value);
}}
/>
<input
type = {passwordShown ? "text" : "password"}
className = "loginInputField"
placeholder = "Password"
onChange = {(e) => {
setPassword(e.target.value);
}}
/>
</>}
</div>
</p>
<div className = "gpt3__navbar-sign">
{!loginStatus ? (
<button onClick = {login} className = "formFieldButton">Einloggen</button>
) : (
<button onClick = {logoutUser} color = "inherit">
Logout
</button>
)}
</div>
</div>