Commit 6077bee6 authored by Tamás Danis's avatar Tamás Danis

login/register

parent d78723c3
......@@ -27,7 +27,7 @@ class RegisterController extends Controller {
*
* @var string
*/
protected $redirectTo = '/home';
protected $redirectTo = '/login';
/**
* Create a new controller instance.
......@@ -41,7 +41,7 @@ class RegisterController extends Controller {
/**
* Get a validator for an incoming registration request.
*
* @param array $data
* @param array $data
*
* @return \Illuminate\Contracts\Validation\Validator
*/
......@@ -59,7 +59,7 @@ class RegisterController extends Controller {
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @param array $data
*
* @return \App\User
*/
......
......@@ -7,6 +7,7 @@ use Illuminate\Http\Request;
use App\User;
use JWTAuth;
use JWTAuthException;
use function MongoDB\BSON\toJSON;
class UserController extends Controller {
private function getToken( $email, $password ) {
......@@ -43,11 +44,14 @@ class UserController extends Controller {
'id' => $user->id,
'auth_token' => $user->auth_token,
'name' => $user->name,
'email' => $user->email
'email' => $user->email,
'first_name' => $user->first_name,
'last_name' => $user->last_name,
'max_limit' => $user->max_limit
]
];
} else {
$response = [ 'success' => false, 'data' => 'Record doesnt exists' ];
$response = [ 'success' => false, 'data' => 'User does not exists' ];
}
......@@ -58,9 +62,12 @@ class UserController extends Controller {
$payload = [
'password' => Hash::make( $request->password ),
'email' => $request->email,
'name' => $request->name,
'name' => $request->username,
'first_name' => $request->firstName,
'last_name' => $request->lastName,
'auth_token' => ''
];
// dd($payload);
$user = new User( $payload );
if ( $user->save() ) {
......@@ -87,7 +94,7 @@ class UserController extends Controller {
]
];
} else {
$response = [ 'success' => false, 'data' => 'Couldnt register user' ];
$response = [ 'success' => false, 'data' => 'Couldn\'t register user' ];
}
......
......@@ -17,11 +17,12 @@ class API {
* @return mixed
*/
public function handle( $request, Closure $next ) {
$response = $next( $request );
$response->header( 'Access-Control-Allow-Headers', 'Origin, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Auth-Token' );
$response->header( 'Access-Control-Allow-Origin', '*' );
return $next( $request )
->header( 'Access-Control-Allow-Methods', 'GET, POST, PUT' )
->header( 'Access-Control-Allow-Headers', 'Origin, Content-Type, Content-Range, Content-Disposition, Content-Description, X-Auth-Token' )
->header( 'Access-Control-Allow-Origin', '*' );
//add more headers here
return $response;
// return $response;
}
}
......@@ -19,15 +19,16 @@
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"moment": "^2.24.0",
"prop-types": "^15.7.2",
"react-redux": "^6.0.1",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"redux-form": "^8.2.0",
"redux-thunk": "^2.3.0",
"thunk": "0.0.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0"
"sass-loader": "^7.1.0",
"thunk": "0.0.1"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
......
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_ERROR = 'LOGIN_ERROR';
export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_ERROR = 'REGISTER_ERROR';
import * as types from './actionTypes';
import API from '../api/API';
export function login(loginData) {
return dispatch =>
API.login(loginData)
.then(data => {
if (data.success)
dispatch({ type: types.LOGIN_SUCCESS, user: data.data });
else throw new Error(data.data);
})
.catch(error => {
dispatch({ type: types.LOGIN_ERROR, data: error });
});
}
export function register(registerData) {
return dispatch =>
API.register(registerData)
.then(data => {
if (data.success)
dispatch({ type: types.REGISTER_SUCCESS, user: data.data });
else throw new Error(data.data);
})
.catch(error => {
dispatch({ type: types.REGISTER_ERROR, data: error });
});
}
import axios from 'axios';
const loginUrl = 'http://localhost:8000/api/user/login';
const registerUrl = 'http://localhost:8000/api/user/register';
class API {
static login(loginData) {
return new Promise(resolve => {
axios
.post(loginUrl, JSON.stringify(loginData))
.then(response => {
resolve(response.data);
})
.catch(error => {
resolve(error);
});
});
}
static register(registerData) {
return new Promise(resolve => {
axios
.post(registerUrl, JSON.stringify(registerData))
.then(response => {
resolve(response);
})
.catch(error => {
resolve(error);
});
});
}
}
export default API;
......@@ -3,22 +3,22 @@ import Header from './common/Header';
import Main from './Main';
class App extends Component {
// constructor(props) {
// super(props);
// this.state = {
// isLoggedIn: false,
// user: {}
// };
// }
// constructor(props) {
// super(props);
// this.state = {
// isLoggedIn: false,
// user: {}
// };
// }
render() {
return (
<>
<Header/>
<Main/>
</>
);
}
render() {
return (
<>
<Header />
<Main />
</>
);
}
}
export default App;
import React, { Component } from 'react';
class Dashboard extends Component {
render() {
return (
<h1>Dashboard</h1>
);
}
}
export default Dashboard;
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Login from './layouts/Login';
import Dashboard from './layouts/Dashboard';
import Auth from './layouts/Auth';
const Main = () => (
<Switch>
<Route exact path='/' component={Dashboard}/>
<Route exact path='/login' component={Login}/>
<Route exact path="/login" component={Auth}/>
<Route exact path="/register" component={Auth}/>
<Route path="/" component={Dashboard}/>
</Switch>
);
......
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { authNavItems, navItems } from '../../data/header';
const Header = props => {
const navLinks = props.auth.loggedIn ? navItems : authNavItems;
const Header = () => {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div className="container">
......@@ -13,13 +18,23 @@ const Header = () => {
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item"><NavLink exact to="/" className="nav-link">Main</NavLink></li>
<li className="nav-item"><NavLink to="/groups" className="nav-link">Groups</NavLink></li>
<li className="nav-item"><NavLink to="/settings" className="nav-link">Settings</NavLink></li>
{navLinks.map(item => <li className="nav-item" key={item.route}>
<NavLink exact to={item.route} className="nav-link">{item.title}</NavLink>
</li>)}
</ul>
</div>
</nav>
);
};
export default Header;
Header.propTypes = {
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => {
return {
auth: state.auth
};
};
export default connect(mapStateToProps)(Header);
import React from 'react';
import PropTypes from 'prop-types';
const ButtonField = ({ value, disabled }) => {
return (
<button
type="submit"
className="btn btn-primary"
disabled={disabled}
>
{value}
</button>);
};
ButtonField.propTypes = {
value: PropTypes.string.isRequired,
disabled: PropTypes.bool
};
ButtonField.defaultProps = {
disabled: false
};
export default ButtonField;
import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
const InputField = props => {
const { name, type, label } = props;
const { input, label, type, meta: { touched, error, warning }, } = props;
const isInvalid = touched && error ? 'is-invalid' : null;
return (
<div>
<label htmlFor={name}>{label}:<br/>
<Field
name={name}
id={name}
type={type}
component="input"
/>
</label>
<div className="form-group">
<label htmlFor={input.name}>{label}</label>
<input {...input} className={`form-control ${isInvalid}`} type={type}/>
{touched &&
((error && <div className="invalid-feedback">{error}</div>) ||
(warning && <span>{warning}</span>))}
</div>
);
};
InputField.propTypes = {
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
input: PropTypes.any.isRequired,
label: PropTypes.any.isRequired,
type: PropTypes.any.isRequired,
meta: PropTypes.any.isRequired
};
export default InputField;
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Login from './Auth/Login';
import Register from './Auth/Register';
const Auth = () => {
return (
<main className="login-register">
<div className="row margin-auto">
<div className="col-md-12" style={{ minWidth: '500px' }}>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
</Switch>
</div>
</div>
</main>
);
};
export default Auth;
import React from 'react';
import LoginForm from './Login/LoginForm';
const Login = () => {
return (
<>
<h1>Login</h1>
<LoginForm/>
</>
);
};
export default Login;
import React from 'react';
import { reduxForm, formValueSelector, Field } from 'redux-form';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import InputField from '../../../common/form/InputField';
import ButtonField from '../../../common/form/ButtonField';
import * as authActions from '../../../../actions/authActions';
import { email, minLength5, required } from '../../../../validation/validation';
const LoginForm = props => {
const { auth, actions, data, valid } = props;
const handleSubmit = e => {
e.preventDefault();
actions.login(data);
};
if (auth.loggedIn) return <Redirect to='/'/>;
return (
<form onSubmit={handleSubmit}>
{auth.hasError && <div className="alert alert-danger">{auth.error.message}</div>}
<Field
label="Email"
type="email"
name="email"
component={InputField}
validate={[required, email]}
/>
<Field
label="Password"
type="password"
name="password"
component={InputField}
validate={[required, minLength5]}
/>
<ButtonField value="Login" disabled={!valid}/>
</form>
);
};
LoginForm.propTypes = {
auth: PropTypes.object.isRequired,
actions: PropTypes.object.isRequired,
valid: PropTypes.bool.isRequired,
data: PropTypes.object
};
LoginForm.defaultProps = {
data: null
};
const selector = formValueSelector('loginForm');
const mapStateToProps = (state) => ({
auth: state.auth,
data: {
email: selector(state, 'email'),
password: selector(state, 'password')
}
});
const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators(authActions, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form: 'loginForm'
})(LoginForm));
import React from 'react';
import RegisterForm from './Register/RegisterForm';
const Register = () => {
return (
<>
<h1>Register</h1>
<RegisterForm/>
</>
);
};
export default Register;
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { formValueSelector, reduxForm, Field } from 'redux-form';
import { bindActionCreators } from 'redux';
import InputField from '../../../common/form/InputField';
import * as authActions from '../../../../actions/authActions';
import ButtonField from '../../../common/form/ButtonField';
import {
required,
minLength2,
maxLength15,
email,
passwordError,
minLength5
} from '../../../../validation/validation';
const RegisterForm = props => {
const { actions, data, valid } = props;
// console.log(props)
const handleSubmit = e => {
e.preventDefault();
console.log(data)
actions.register(data);
};
return (
<form onSubmit={handleSubmit}>
<Field
label="Username"
type="text"
name="username"
component={InputField}
validate={[required, minLength2, maxLength15]}
/>
<Field
label="First name"
type="text"
name="first_name"
component={InputField}
validate={[required, minLength2, maxLength15]}
/>
<Field
label="Last name"
type="text"
name="last_name"
component={InputField}
validate={[required, minLength2, maxLength15]}
/>
<Field
label="Email"
type="email"
name="email"
component={InputField}
validate={[required, email]}
/>
<Field
label="Password"
type="password"
name="password"
component={InputField}
validate={[required, minLength5]}
/>
<Field
label="Password again"
type="password"
name="re_password"
component={InputField}
validate={[required, minLength5, passwordError]}
/>
<ButtonField value="Register" disabled={!valid}/>
</form>
);
};
RegisterForm.propTypes = {
actions: PropTypes.object.isRequired,
data: PropTypes.object,
valid: PropTypes.bool.isRequired
};
RegisterForm.defaultProps = {
data: null
};
const selector = formValueSelector('registerForm');
const mapStateToProps = state => ({
auth: state.auth,
data: {
username: selector(state, 'username'),
firstName: selector(state, 'first_name'),
lastName: selector(state, 'last_name'),
email: selector(state, 'email'),
password: selector(state, 'password'),
rePassword: selector(state, 're_password')
}
});
const mapDispatchToProps = dispatch => {
return {
actions: bindActionCreators(authActions, dispatch)
};
};
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form: 'registerForm'
})(RegisterForm));
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import moment from 'moment';
import InputField from '../../common/form/InputField';
import { required, numeric } from '../../../validation/validation';
import ButtonField from '../../common/form/ButtonField';
const now = moment().format('YYYY-MM-DD');
const TransactionForm = (props) => {
const { valid } = props;
const handleSubmit = e => {
e.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-md-3">
<Field
label="Date"
type="date"
name="date"
component={InputField}
validate={[required]}
/>
</div>
<div className="col-md-5">
<Field
label="description"
type="text"
name="Description"
component={InputField}
validate={[required]}
/>
</div>
<div className="col-md-2">
<Field
label="price"
type="text"
name="Price"
component={InputField}
validate={[required, numeric]}
/>
</div>
<div className="col-md-2">
<ButtonField value="Save" disabled={!valid}/>
</div>
</div>
</form>
);
};
TransactionForm.propTypes = {
valid: PropTypes.bool.isRequired
};
const mapStateToProps = () => ({
initialValues: { date: now }
});
export default connect(mapStateToProps)(reduxForm({
form: 'transactionForm'
})(TransactionForm));
import React, { Component } from 'react';
import TransactionForm from './DashBoard/TransactionForm';
class Dashboard extends Component {
render() {
return (
<>
<main>