mirror of
https://github.com/kuhyx/WUT_Computer_Science.git
synced 2026-07-06 21:03:14 +02:00
feat: fetch data from json, block multiple login register
This commit is contained in:
parent
cd60cc258a
commit
2d599a2b8e
@ -1,170 +1,207 @@
|
|||||||
{
|
{
|
||||||
"posts": [
|
"posts": [
|
||||||
{
|
{
|
||||||
"title": "JSON SERVER",
|
"mail": "",
|
||||||
"author": "foo",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 1
|
"id": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "REACT",
|
"mail": "",
|
||||||
"author": "facebook",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 2
|
"id": 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "BOOTSTRAP",
|
"mail": "test@test",
|
||||||
"author": "css master",
|
"login": "test@test",
|
||||||
|
"blogTitle": "test@test",
|
||||||
|
"password": "test@test",
|
||||||
"id": 3
|
"id": 3
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "MEDIUM",
|
"mail": "",
|
||||||
"author": "medium",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 4
|
"id": 4
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "test",
|
"mail": "",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 5
|
"id": 5
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "test",
|
"mail": "",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 6
|
"id": 6
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "test",
|
"mail": "",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 7
|
"id": 7
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "test",
|
"mail": "test@test",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 8
|
"id": 8
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "test",
|
"mail": "",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 9
|
"id": 9
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 10
|
"id": 10
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 11
|
"id": 11
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 12
|
"id": 12
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 13
|
"id": 13
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 14
|
"id": 14
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 15
|
"id": 15
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 16
|
"id": 16
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 17
|
"id": 17
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 18
|
"id": 18
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 19
|
"id": 19
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 20
|
"id": 20
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 21
|
"id": 21
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 22
|
"id": 22
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 23
|
"id": 23
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 24
|
"id": 24
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 25
|
"id": 25
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 26
|
"id": 26
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "",
|
"mail": "",
|
||||||
"author": "",
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 27
|
"id": 27
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"mail": "",
|
||||||
|
"login": "",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 28
|
"id": 28
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
"mail": "",
|
||||||
|
"login": "test@test",
|
||||||
|
"blogTitle": "",
|
||||||
|
"password": "",
|
||||||
"id": 29
|
"id": 29
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 30
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 31
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 32
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 33
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 34
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "test",
|
|
||||||
"author": "test",
|
|
||||||
"id": 35
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "test",
|
|
||||||
"author": "test",
|
|
||||||
"id": 36
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "test@test",
|
|
||||||
"author": "test",
|
|
||||||
"id": 37
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -7,73 +7,115 @@ import React from 'react';
|
|||||||
export default class Register extends React.Component {
|
export default class Register extends React.Component {
|
||||||
|
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
inputValue: 'test'
|
mail: "",
|
||||||
};
|
login: "",
|
||||||
}
|
blogTitle: "",
|
||||||
|
password: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
{ this.state.inputValue }
|
{ this.state.mail }
|
||||||
</div>
|
|
||||||
<Form>
|
|
||||||
<Form.Group className="mb-3" controlId="formBasicEmail">
|
|
||||||
<Form.Label>Email address</Form.Label>
|
|
||||||
<Form.Control type="email" placeholder="Enter email"
|
|
||||||
value={this.state.inputValue}
|
|
||||||
onChange={evt => this.updateInputValue(evt)}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className="mb-3" controlId="formLogin">
|
|
||||||
<Form.Label>Login</Form.Label>
|
|
||||||
<Form.Control type="login" placeholder="Enter Login" />
|
|
||||||
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3" controlId="formBlogTitle">
|
|
||||||
<Form.Label>Blog Title</Form.Label>
|
|
||||||
<Form.Control type="blogTitle" placeholder="Enter Blog Title" />
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className="mb-3" controlId="formPassword">
|
|
||||||
<Form.Label>Password</Form.Label>
|
|
||||||
<Form.Control type="password" placeholder="Enter Password" />
|
|
||||||
</Form.Group>
|
|
||||||
<Button variant="primary" type="submit" onClick={() => this.registerUser()}>
|
|
||||||
Submit
|
|
||||||
</Button>
|
|
||||||
</Form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
<Form>
|
||||||
}
|
<Form.Group className="mb-3" controlId="formBasicEmail">
|
||||||
|
<Form.Label>Email address</Form.Label>
|
||||||
|
<Form.Control type="email" placeholder="Enter email"
|
||||||
|
value={this.state.mail}
|
||||||
|
onChange={evt => this.updateMail(evt)}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-3" controlId="formLogin">
|
||||||
|
<Form.Label>Login</Form.Label>
|
||||||
|
<Form.Control type="login" placeholder="Enter Login"
|
||||||
|
value={this.state.login}
|
||||||
|
onChange={evt => this.updateLogin(evt)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3" controlId="formBlogTitle">
|
||||||
|
<Form.Label>Blog Title</Form.Label>
|
||||||
|
<Form.Control type="blogTitle" placeholder="Enter Blog Title"
|
||||||
|
value={this.state.blogTitle}
|
||||||
|
onChange={evt => this.updateBlogTitle(evt)}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
|
||||||
|
<Form.Group className="mb-3" controlId="formPassword">
|
||||||
|
<Form.Label>Password</Form.Label>
|
||||||
|
<Form.Control type="password" placeholder="Enter Password"
|
||||||
|
value={this.state.password}
|
||||||
|
onChange={evt => this.updatePassword(evt)}
|
||||||
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
<Button variant="primary" type="submit" onClick={async () => this.registerUser()}>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
updateInputValue(evt) {
|
updateMail(evt) {
|
||||||
const val = evt.target.value;
|
const val = evt.target.value;
|
||||||
// ...
|
// ...
|
||||||
this.setState({
|
this.setState({
|
||||||
inputValue: val
|
mail: val
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
registerUser() {
|
updateLogin(evt) {
|
||||||
alert(this.state.inputValue);
|
const val = evt.target.value;
|
||||||
|
// ...
|
||||||
console.log("anything");
|
this.setState({
|
||||||
// console.log(this.state.inputValue);
|
login: val
|
||||||
const test = {
|
});
|
||||||
title: this.state.inputValue,
|
}
|
||||||
author: "test"
|
|
||||||
};
|
updateBlogTitle(evt) {
|
||||||
fetch("http://localhost:8000/posts", {
|
const val = evt.target.value;
|
||||||
method: "POST",
|
// ...
|
||||||
headers: {
|
this.setState({
|
||||||
"Content-Type": "application/json"
|
blogTitle: val
|
||||||
},
|
});
|
||||||
body: JSON.stringify(test)
|
}
|
||||||
}).then(data => console.log(data));
|
|
||||||
};
|
updatePassword(evt) {
|
||||||
|
const val = evt.target.value;
|
||||||
|
// ...
|
||||||
|
this.setState({
|
||||||
|
password: val
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async registerUser() {
|
||||||
|
const fetchAddress = "http://localhost:8000/posts/?login=" + this.state.login;
|
||||||
|
// console.log(this.state.inputValue);
|
||||||
|
const response = await fetch(fetchAddress,
|
||||||
|
{
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
const allData = await response.json();
|
||||||
|
console.log(allData.length);
|
||||||
|
if(allData.length !== 0)
|
||||||
|
{
|
||||||
|
alert("This login: \"" + this.state.login + "\" is already taken!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await fetch("http://localhost:8000/posts", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
},
|
||||||
|
body: JSON.stringify(this.state)
|
||||||
|
}).then(data => console.log(data));
|
||||||
|
|
||||||
|
};
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user