feat: add login

This commit is contained in:
PolishPigeon 2022-06-12 22:04:12 +02:00
parent 264c1d4209
commit 3cdd5ca8b4
3 changed files with 139 additions and 232 deletions

View File

@ -1,207 +1,16 @@
{
"posts": [
"users": [
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"mail": "this.state",
"login": "this.state",
"blogTitle": "this.state",
"password": "1",
"blogData": {
"title": "this.state",
"listOfItems": [],
"dateTime": "12/6/2022 @ 21:35:32"
},
"id": 1
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 2
},
{
"mail": "test@test",
"login": "test@test",
"blogTitle": "test@test",
"password": "test@test",
"id": 3
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 4
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 5
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 6
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 7
},
{
"mail": "test@test",
"login": "",
"blogTitle": "",
"password": "",
"id": 8
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 9
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 10
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 11
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 12
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 13
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 14
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 15
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 16
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 17
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 18
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 19
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 20
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 21
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 22
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 23
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 24
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 25
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 26
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 27
},
{
"mail": "",
"login": "",
"blogTitle": "",
"password": "",
"id": 28
},
{
"mail": "",
"login": "test@test",
"blogTitle": "",
"password": "",
"id": 29
}
]
}

View File

@ -2,21 +2,83 @@ import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import React from 'react';
export default function Login() {
export default class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
login: "",
password: "",
};
}
render () {
return (
<Form>
<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="formBasicEmail">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Enter Password" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
);
}
<Form>
<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="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.loginUser()}>
Submit
</Button>
</Form>
)
}
updateLogin(evt) {
const val = evt.target.value;
// ...
this.setState({
login: val
});
}
updatePassword(evt) {
const val = evt.target.value;
// ...
this.setState({
password: val
});
}
async loginUser() {
const fetchAddress = "http://localhost:8000/users/?login=" + this.state.login;
console.log(fetchAddress);
let response = await fetch(fetchAddress,
{
method: "GET",
headers: {
"Content-Type": "application/json"
},
mode: `cors`,
});
const allData = await response.json();
console.log(JSON.stringify(allData));
if(allData.length === 0)
{
alert("This login: \"" + this.state.login + "\" does not exist!");
return;
}
if(allData[0].password !== this.state.password)
{
alert("Wrong password!");
return;
}
}
}

View File

@ -14,15 +14,20 @@ export default class Register extends React.Component {
login: "",
blogTitle: "",
password: "",
blogData: {
"title": "",
"listOfItems":
[
],
"dateTime": "",
},
};
}
render() {
return (
<div>
<div>
{ this.state.mail }
</div>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
@ -94,28 +99,59 @@ export default class Register extends React.Component {
password: val
});
}
async registerUser() {
const fetchAddress = "http://localhost:8000/posts/?login=" + this.state.login;
const fetchAddress = "http://localhost:8000/users/?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);
console.log(allData);
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));
}
if(this.state.password === undefined || this.state.password === "")
{
alert("Password cannot be empty! ");
return;
}
const currentDate = new Date();
const dateTime = currentDate.getDate() + "/"
+ (currentDate.getMonth()+1) + "/"
+ currentDate.getFullYear() + " @ "
+ currentDate.getHours() + ":"
+ currentDate.getMinutes() + ":"
+ currentDate.getSeconds();
const blogData = {
"title": this.state.blogTitle,
"listOfItems":
[
],
"dateTime": dateTime,
};
this.state.blogData = blogData;
await fetch("http://localhost:8000/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(this.state),
redirect: 'manual',
}).then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
};
}
}