cami
b03523cb8d
All the errormessages use now the component ErrorMessage as it will be easier like this
82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
import React from "react";
|
|
import { useState } from "react/cjs/react.development";
|
|
import "../../App.css";
|
|
import Footer from "../../Footer";
|
|
import InputField from "../InputField";
|
|
import SubmitField from "../SubmitField";
|
|
import "../Input.css";
|
|
import ErrorMessage from "../ErrorMessage";
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const [message, setMessage] = useState("");
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
const [isStatusOk, setIsStatusOk] = useState("");
|
|
|
|
const onSubmitClick = (e) => {
|
|
e.preventDefault();
|
|
let opts = {
|
|
username: username,
|
|
password: password,
|
|
};
|
|
fetch("/api/register", {
|
|
method: "post",
|
|
body: JSON.stringify(opts),
|
|
}).then((response) => {
|
|
if (response.status === 409) {
|
|
/*
|
|
then is needed twice to get rid of the javascript Promise thing
|
|
*/
|
|
setIsStatusOk(false);
|
|
response.json().then((resp2) => {
|
|
setErrorMessage(resp2.message);
|
|
});
|
|
} else if (response.status === 200) {
|
|
response.json().then((resp) => {
|
|
setMessage(resp.message);
|
|
});
|
|
setIsStatusOk(true);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleUsernameChange = (e) => {
|
|
setUsername(e.target.value);
|
|
};
|
|
|
|
const handlePasswordChange = (e) => {
|
|
setPassword(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="sitePage">
|
|
<h1>Registrierung</h1>
|
|
<form>
|
|
<InputField
|
|
LabelName="Benutzername"
|
|
InputType="text"
|
|
onChange={handleUsernameChange}
|
|
InputName="username"
|
|
/>
|
|
{!isStatusOk && <ErrorMessage message={errorMessage} />}
|
|
<InputField
|
|
LabelName="Passwort"
|
|
InputType="password"
|
|
onChange={handlePasswordChange}
|
|
InputName="password"
|
|
/>
|
|
<br />
|
|
<SubmitField onClick={onSubmitClick} LabelName="Registrieren" />
|
|
</form>
|
|
|
|
{isStatusOk && <p>{message}</p>}
|
|
</div>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|