feat(containers): rewrite Login using redux-form

feat(containers): rewrite Login using redux-form

src/common/containers/Login/components/LoginForm.jsx

@@ -0,0 +1,99 @@
+// @flow
+import React, {Component} from 'react'
+import {
+	Form,
+	Message,
+	Button,
+	Label,
+	Input as InputComponent
+} from 'semantic-ui-react'
+import {connect} from 'react-redux'
+import {reduxForm, Field} from 'redux-form'
+import {LOGIN_AUTH} from 'actions/auth'
+import type {FormProps} from 'redux-form'
+
+type Props = {
+	login: (data: Object) => void,
+} & FormProps
+
+class LoginComponent extends Component<Props, State> {
+	render () {
+		/* By default we use https://github.com/erikras/redux-form
+			Probably, you'll need: https://github.com/ckshekhar73/react-semantic-redux-form/blob/master/src/index.js
+			(don't install, better copy sources to the project)
+		*/
+		const InputField = ({
+			input,
+			label,
+			labelText = null,
+			required,
+			meta: {touched, error},
+			...rest
+		}: any) => (
+			<Form.Field error={!!(touched && error)} required={required}>
+				<label htmlFor={rest.id || rest.name || ''}>{label}</label>
+				<InputComponent
+					label={labelText}
+					required={required}
+					{...input}
+					{...rest}
+				/>
+				{touched && error ? (
+					<Label basic color="red" pointing>
+						{error}
+					</Label>
+				) : null}
+			</Form.Field>
+		)
+
+		const fields = [
+			{
+				name: 'non_field_errors',
+				component ({meta: {error}}) {
+					return error ? (
+						<Message error>
+							<Message.Header>{'Login failed :('}</Message.Header>
+							<p>{error}</p>
+						</Message>
+					) : null
+				}
+			},
+			{
+				placeholder: 'Username',
+				name: 'username',
+				label: 'Username',
+				component: InputField
+			},
+			{
+				autoComplete: 'current-password',
+				placeholder: 'Password',
+				type: 'password',
+				name: 'password',
+				label: 'Password',
+				component: InputField
+			}
+		]
+		const {handleSubmit, login, invalid, submitting} = this.props
+		return (
+			<Form onSubmit={handleSubmit(login)} error={invalid}>
+				{fields.map((a, i) => <Field key={i} {...a} />)}
+				<div style={{textAlign: 'center'}}>
+					<Button content="Login" icon="sign in" loading={submitting} />
+				</div>
+			</Form>
+		)
+	}
+}
+
+const mapStateToProps = state => ({})
+
+const mapDispatchToProps = dispatch => ({
+	async login (data) {
+		const res = await dispatch(LOGIN_AUTH(data))
+		return res
+	}
+})
+
+export default reduxForm({form: 'LOGIN_FORM'})(
+	connect(mapStateToProps, mapDispatchToProps)(LoginComponent)
+)

src/common/containers/Login/index.jsx

@@ -1,36 +1,30 @@
 // @flow
 import React from 'react'
-import {connect} from 'react-redux'
-import {LOGIN_AUTH} from 'actions/auth'
-import LoginComponent from './components'
-import {getAuthState} from 'selectors'
-import type {GlobalState} from 'reducers'
-
-type Props = {
-	login: (data: Object) => void,
-	errors: Object
-}
+import LoginForm from './components/LoginForm'
+import {Helmet} from 'react-helmet'
+import {Grid} from 'semantic-ui-react'
 
 const Login = ({login, errors}: Props) => {
-	const props = {
-		login,
-		errors
-	}
-	return <LoginComponent {...props} />
+	return (
+		<Grid
+			verticalAlign="middle"
+			centered
+			columns={1}
+			textAlign="center"
+			relaxed
+			stretched
+			style={{flexGrow: 1}}
+		>
+			<Helmet>
+				<title>Suicrux:Login</title>
+			</Helmet>
+			<Grid.Row>
+				<Grid.Column tablet={10} mobile={16} computer={6}>
+					<LoginForm />
+				</Grid.Column>
+			</Grid.Row>
+		</Grid>
+	)
 }
 
-const mapStateToProps = (state: GlobalState) => {
-	const authState = getAuthState(state)
-	const {errors} = authState
-	return {
-		errors
-	}
-}
-
-const mapDispatchToProps = dispatch => ({
-	login (payload) {
-		dispatch(LOGIN_AUTH(payload))
-	}
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(Login)
+export default Login