cami
ea7be2283e
This will return an error message if the username is already registered. The user should choose another name
74 lines
1.8 KiB
JavaScript
74 lines
1.8 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"
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
const [message, setMessage] = useState("");
|
|
|
|
const onSubmitClick = (e) => {
|
|
e.preventDefault();
|
|
let opts = {
|
|
username: username,
|
|
password: password,
|
|
};
|
|
fetch("/api/register", {
|
|
method: "post",
|
|
body: JSON.stringify(opts),
|
|
}).then((response) => {
|
|
console.log(response)
|
|
if (response.status === 409) {
|
|
/*
|
|
then is needed twice to get rid of the javascript Promise thing
|
|
*/
|
|
response.json().then((resp2) => {
|
|
setMessage(resp2.message)
|
|
});
|
|
}
|
|
else if (response.status === 200) {
|
|
//TODO redirect to login #77 or #74
|
|
}
|
|
});
|
|
};
|
|
|
|
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"
|
|
/>
|
|
<p>{message}</p>
|
|
<InputField
|
|
LabelName="Passwort"
|
|
InputType="password"
|
|
onChange={handlePasswordChange}
|
|
InputName="password"
|
|
/>
|
|
<br />
|
|
<SubmitField onClick={onSubmitClick} LabelName="Einloggen" />
|
|
</form>
|
|
</div>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|