Commit 93c06fd0 authored by Dominik Petrovic's avatar Dominik Petrovic

Containerized login form

parent 65946a87
import React from 'react';
import { toJS } from '~/core/util/ToJs';
import { connect } from 'react-redux';
import {
selectUsername,
selectUserIsLoggingIn,
selectUserError,
} from './redux/selectors';
import { loginAction } from './redux/actions';
import LoginFormStyled from './components.styled/LoginForm.styled';
import LoginFormStyled from '../components.styled/LoginForm.styled';
export const str = 'Hello, I am a string!';
/* @tryLogin (Function) - Call with username and password to attempt a login.
@username (String) - Username of currently logged in user.
......@@ -18,7 +12,7 @@ const LoginForm = ({ tryLogin, username, isLoggingIn, error }) => {
event.preventDefault();
const username = event.target.username.value;
const password = event.target.password.value;
if (username && password && !isLoggingIn) {
if (username && password && !isLoggingIn && tryLogin) {
tryLogin(username, password);
}
};
......@@ -50,7 +44,7 @@ const LoginForm = ({ tryLogin, username, isLoggingIn, error }) => {
Login
</button>
{isLoggingIn && <p>Logging you in...</p>}
{error && <p>{error}</p>}
{error && <p>Error: {error}</p>}
</form>
</LoginFormStyled>
);
......@@ -59,23 +53,4 @@ const LoginForm = ({ tryLogin, username, isLoggingIn, error }) => {
}
};
// eslint-disable-next-line no-unused-vars
const mapStateToProps = (state, ownProps) => {
return {
username: selectUsername(state),
isLoggingIn: selectUserIsLoggingIn(state),
error: selectUserError(state),
};
};
const mapDispatchToProps = dispatch => {
return {
tryLogin: (username, password) => dispatch(loginAction(username, password)),
};
};
// The connect function is what feeds our custom props to the component from the map functions defined above.
export default connect(
mapStateToProps,
mapDispatchToProps
)(toJS(LoginForm));
export default LoginForm;
import { toJS } from '~/core/util/ToJs';
import { connect } from 'react-redux';
import {
selectUsername,
selectUserIsLoggingIn,
selectUserError,
} from '../redux/selectors';
import { loginAction } from '../redux/actions';
import LoginForm from '../components/LoginForm';
// eslint-disable-next-line no-unused-vars
const mapStateToProps = (state, ownProps) => {
return {
username: selectUsername(state),
isLoggingIn: selectUserIsLoggingIn(state),
error: selectUserError(state),
};
};
const mapDispatchToProps = dispatch => {
return {
tryLogin: (username, password) => dispatch(loginAction(username, password)),
};
};
// The connect function is what feeds our custom props to the component from the map functions defined above.
export default connect(
mapStateToProps,
mapDispatchToProps
)(toJS(LoginForm));
import React from 'react';
import LoginForm from '../components/LoginForm';
export default {
title: 'User',
// argTypes: {
// backgroundColor: { control: 'color' },
// },
};
const Template = args => <LoginForm {...args} />;
export const ContactDetailsStory = Template.bind({});
ContactDetailsStory.storyName = 'Login form';
ContactDetailsStory.args = {
username: '',
isLoggingIn: false,
error: '',
};
......@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
import MainLayout from '~/layouts/MainLayout';
import { Column, Row } from '~/features/grid';
//features
import LoginForm from '~/features/user/LoginForm';
//containers
import LoginFormContainer from '~/features/user/containers/LoginForm.container';
const LoginPage = () => {
return (
......@@ -16,7 +16,7 @@ const LoginPage = () => {
<h1>Login</h1>
</Column>
</Row>
<LoginForm />
<LoginFormContainer />
</MainLayout>
);
};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment