fixed Login and finished Registration with server

This commit is contained in:
britea 2020-03-04 16:12:58 +01:00
parent a3b88a7d87
commit 879a22606d
6 changed files with 50 additions and 24 deletions

View file

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React from "react";
import { Switch, Route, Link, Redirect } from "react-router-dom"; import { Switch, Route, Redirect } from "react-router-dom";
import Home from "./views/Home"; import Home from "./views/Home";
import Dashboard from "./views/DashboardTest"; import Dashboard from "./views/DashboardTest";
import Signup from "./views/Signup"; import Signup from "./views/Signup";
@ -8,7 +8,7 @@ import Login from "./views/Login";
import { call } from './client_server'; import { call } from './client_server';
const ProtectedRoute = ({ component: Comp, loggedIn, logOut, path, ...rest }) => { /*const ProtectedRoute = ({ component: Comp, loggedIn, logOut, path, ...rest }) => {
return ( return (
<Route <Route
path={path} path={path}
@ -30,7 +30,7 @@ const ProtectedRoute = ({ component: Comp, loggedIn, logOut, path, ...rest }) =>
}} }}
/> />
); );
}; };*/
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
@ -55,10 +55,10 @@ class App extends React.Component {
} }
auth(data) { auth(data) {
call.login(data.params) return call.login(data.params)
.then(res => { .then(res => {
console.log(res); console.log(res);
if (res.data && res.status == 200) { if (res.data && res.status === 200) {
this.setState( this.setState(
{ {
user: data.params.user, user: data.params.user,
@ -97,7 +97,7 @@ class App extends React.Component {
</Route> </Route>
<Route path="/signup" exact component={Signup} /> <Route path="/signup" exact component={Signup} />
<Route path="/dashboard" > <Route path="/dashboard" >
{this.state.loggedIn ? <Dashboard logout={this.logout} /> : <Login auth={this.auth} />} {this.state.loggedIn ? <Dashboard logout={this.logout} /> : <Redirect to="/login" />}
</Route> </Route>
</Switch> </Switch>

View file

@ -11,4 +11,12 @@ export var call = {
console.error(err); console.error(err);
}); });
}, },
register: function(data, headers) {
return axios.post(config + 'register', data)
.then(res => {
return res;
}).catch(err => {
console.error(err);
});
},
}; };

View file

@ -1,12 +1,8 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Button } from 'semantic-ui-react'; import {Button } from 'semantic-ui-react';
import { Link } from "react-router-dom";
export default class Dashboard extends Component { export default class Dashboard extends Component {
constructor(props) {
super(props);
}
handleLogOut = (e) => { handleLogOut = (e) => {
console.log(this.props); console.log(this.props);

View file

@ -3,7 +3,6 @@ import React, { Component } from 'react';
import { import {
Button, Button,
Container, Container,
Divider,
Grid, Grid,
Header, Header,
Icon, Icon,

View file

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react'; import {Button, Form, Grid, Header, Image, Message, Icon, Checkbox, Input} from 'semantic-ui-react';
export default class Login extends Component { export default class Login extends Component {
constructor(props) { constructor(props) {
@ -15,13 +15,21 @@ export default class Login extends Component {
e.preventDefault(); e.preventDefault();
const params = { const params = {
username: this.state.user, "usernameOrEmail": this.state.user,
password: this.state.password, "password": this.state.password,
}; };
this.props.auth({ this.props.auth({
user: this.state.user, user: this.state.user,
params : params, params : params,
}).then(res => {
if (res === '400') {
console.log('error');
} else {
console.log("SUCCESS");
}
}).catch(err => {
console.log(err);
}); });
}; };

View file

@ -1,5 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react'; import {Button, Form, Grid, Header, Image, Icon, Input} from 'semantic-ui-react';
import { call } from '../client_server';
@ -7,17 +8,31 @@ export default class Signup extends Component{
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
logged : false, completeName: "",
completeName: '', username: "",
username: '',
email: "", email: "",
password : "" password : "",
}; };
} }
handleLogin = (e) => { handleRegistration = (e) => {
// TODO Login should be handled here e.preventDefault();
console.log(this.state); const params = {
"email": this.state.email,
"name": this.state.completeName,
"password": this.state.password,
"username": this.state.username,
};
call.register(params)
.then(res => {
if (res.data && res.status === 200) {
console.log(res.data);
}
}).catch(err => {
});
console.log(this.state);
}; };
onChangeHandler = (event) => { onChangeHandler = (event) => {
@ -86,7 +101,7 @@ export default class Signup extends Component{
minLength={6} minLength={6}
required required
/> />
<Button color='blue' fluid size='large' onClick={this.handleLogin}> <Button color='blue' fluid size='large' onClick={this.handleRegistration}>
Register Register
</Button> </Button>
</Form> </Form>