fixed Login and finished Registration with server
This commit is contained in:
parent
a3b88a7d87
commit
879a22606d
6 changed files with 50 additions and 24 deletions
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -3,7 +3,6 @@ import React, { Component } from 'react';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Container,
|
Container,
|
||||||
Divider,
|
|
||||||
Grid,
|
Grid,
|
||||||
Header,
|
Header,
|
||||||
Icon,
|
Icon,
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue