Skip to content

Commit 9ce537a

Browse files
dongcaidongcai
committed
using semantic redux form
1 parent 734bbf9 commit 9ce537a

File tree

7 files changed

+37
-85
lines changed

7 files changed

+37
-85
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
"react-router-config": "^1.0.0-beta.4",
179179
"react-router-dom": "^4.2.2",
180180
"react-router-redux": "^5.0.0-alpha.6",
181+
"react-semantic-redux-form": "^1.2.5",
181182
"recompose": "^0.26.0",
182183
"redial": "^0.5.0",
183184
"redux": "^3.6.0",

‎src/components/FacebookLogin/FacebookLogin.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3+
import { Button } from 'semantic-ui-react';
34

45
class FacebookLogin extends Component {
56
static propTypes = {
@@ -13,14 +14,12 @@ class FacebookLogin extends Component {
1314
language: PropTypes.string,
1415
textButton: PropTypes.string,
1516
typeButton: PropTypes.string,
16-
className: PropTypes.string,
1717
component: PropTypes.func.isRequired
1818
};
1919

2020
static defaultProps = {
2121
textButton: 'Login with Facebook',
2222
typeButton: 'button',
23-
className: '',
2423
scope: 'public_profile,email',
2524
xfbml: false,
2625
cookie: false,
@@ -85,16 +84,14 @@ class FacebookLogin extends Component {
8584
};
8685

8786
render() {
88-
const {
89-
className, textButton, typeButton, component: WrappedComponent
90-
} = this.props;
87+
const { textButton, typeButton, component: WrappedComponent } = this.props;
9188

9289
if (WrappedComponent) return <WrappedComponent facebookLogin={this.click} />;
9390

9491
return (
95-
<button className={className} onClick={this.click} type={typeButton}>
92+
<Button onClick={this.click} type={typeButton}>
9693
{textButton}
97-
</button>
94+
</Button>
9895
);
9996
}
10097
}

‎src/components/InfoBar/InfoBar.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ export default class InfoBar extends Component {
2424
return (
2525
<div className={styles.wrapper}>
2626
<Message info>
27-
This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
28-
<span className={styles.time}>{info && new Date(info.time).toString()}</span>
27+
<Message.Header>
28+
This is an info bar <strong>{info ? info.message : 'no info!'}</strong>
29+
</Message.Header>
30+
<p className={styles.time}>{info && new Date(info.time).toString()}</p>
2931
<Button onClick={load}>Reload from server</Button>
3032
</Message>
3133
</div>

‎src/components/LoginForm/LoginForm.js‎

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,9 @@
11
import React, { Component } from 'react';
2-
import { reduxForm, Field, propTypes, fieldPropTypes } from 'redux-form';
3-
import loginValidation from './loginValidation';
4-
5-
const Input = ({
6-
input, label, type, meta: { touched, error }
7-
}) => (
8-
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
9-
<label htmlFor={input.name} className="col-sm-2">
10-
{label}
11-
</label>
12-
<div className="col-sm-10">
13-
<input {...input} type={type} className="form-control" />
14-
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback" />}
15-
{error &&
16-
touched && (
17-
<div className="text-danger">
18-
<strong>{error}</strong>
19-
</div>
20-
)}
21-
</div>
22-
</div>
23-
);
2+
import { reduxForm, Field, propTypes } from 'redux-form';
3+
import { InputField } from 'react-semantic-redux-form';
4+
import { Form, Message } from 'semantic-ui-react';
245

25-
Input.propTypes = fieldPropTypes;
6+
import loginValidation from './loginValidation';
267

278
@reduxForm({
289
form: 'login',
@@ -37,18 +18,16 @@ export default class LoginForm extends Component {
3718
const { handleSubmit, error } = this.props;
3819

3920
return (
40-
<form className="form-horizontal" onSubmit={handleSubmit}>
41-
<Field name="email" type="text" component={Input} label="Email" />
42-
<Field name="password" type="password" component={Input} label="Password" />
21+
<Form onSubmit={handleSubmit}>
22+
<Field name="email" type="text" component={InputField} label="Email" />
23+
<Field name="password" type="password" component={InputField} label="Password" />
4324
{error && (
44-
<p className="text-danger">
45-
<strong>{error}</strong>
46-
</p>
25+
<Message negative>
26+
<p>{error}</p>
27+
</Message>
4728
)}
48-
<button className="btn btn-success" type="submit">
49-
<i className="fa fa-sign-in" /> Log In
50-
</button>
51-
</form>
29+
<Form.Button>Log In</Form.Button>
30+
</Form>
5231
);
5332
}
5433
}

‎src/components/RegisterForm/RegisterForm.js‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,9 @@
11
import React, { Component } from 'react';
2-
import { reduxForm, Field, propTypes, fieldPropTypes } from 'redux-form';
2+
import { reduxForm, Field, propTypes } from 'redux-form';
3+
import { InputField } from 'react-semantic-redux-form';
4+
import { Form, Message } from 'semantic-ui-react';
35
import registerValidation from './registerValidation';
46

5-
const Input = ({
6-
input, label, type, meta: { touched, error }
7-
}) => (
8-
<div className={`form-group ${error && touched ? 'has-error' : ''}`}>
9-
<label htmlFor={input.name} className="col-sm-2">
10-
{label}
11-
</label>
12-
<div className="col-sm-10">
13-
<input {...input} type={type} className="form-control" />
14-
{error && touched && <span className="glyphicon glyphicon-remove form-control-feedback" />}
15-
{error &&
16-
touched && (
17-
<div className="text-danger">
18-
<strong>{error}</strong>
19-
</div>
20-
)}
21-
</div>
22-
</div>
23-
);
24-
25-
Input.propTypes = fieldPropTypes;
26-
277
@reduxForm({
288
form: 'register',
299
validate: registerValidation
@@ -37,19 +17,17 @@ export default class RegisterForm extends Component {
3717
const { handleSubmit, error } = this.props;
3818

3919
return (
40-
<form className="form-horizontal" onSubmit={handleSubmit}>
41-
<Field name="email" type="text" component={Input} label="Email" />
42-
<Field name="password" type="password" component={Input} label="Password" />
43-
<Field name="password_confirmation" type="password" component={Input} label="Password confirmation" />
20+
<Form onSubmit={handleSubmit}>
21+
<Field name="email" type="text" component={InputField} label="Email" />
22+
<Field name="password" type="password" component={InputField} label="Password" />
23+
<Field name="password_confirmation" type="password" component={InputField} label="Password confirmation" />
4424
{error && (
45-
<p className="text-danger">
46-
<strong>{error}</strong>
47-
</p>
25+
<Message negative>
26+
<p>{error}</p>
27+
</Message>
4828
)}
49-
<button className="btn btn-success" type="submit">
50-
<i className="fa fa-sign-in" /> Register
51-
</button>
52-
</form>
29+
<Form.Button>Register</Form.Button>
30+
</Form>
5331
);
5432
}
5533
}

‎src/containers/App/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export default class App extends Component {
168168
<p>
169169
Have questions? Ask for help{' '}
170170
<a
171-
href="https://github.com/bertho-zero/react-redux-universal-hot-example/issues"
171+
href="https://github.com/dongcai/react-redux-semantic-ui/issues"
172172
target="_blank"
173173
rel="noopener noreferrer"
174174
>

‎src/containers/Login/Login.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
44
import Helmet from 'react-helmet';
5+
import { Button } from 'semantic-ui-react';
56
import LoginForm from 'components/LoginForm/LoginForm';
67
import FacebookLogin from 'components/FacebookLogin/FacebookLogin';
78
import * as authActions from 'redux/modules/auth';
@@ -58,11 +59,7 @@ export default class Login extends Component {
5859
});
5960
};
6061

61-
FacebookLoginButton = ({ facebookLogin }) => (
62-
<button className="btn btn-primary" onClick={facebookLogin}>
63-
Login with <i className="fa fa-facebook-f" />
64-
</button>
65-
);
62+
FacebookLoginButton = ({ facebookLogin }) => <Button onClick={facebookLogin}>Login with Facebook</Button>;
6663

6764
render() {
6865
const { user, logout } = this.props;
@@ -88,9 +85,7 @@ export default class Login extends Component {
8885
<p>You are currently logged in as {user.email}.</p>
8986

9087
<div>
91-
<button className="btn btn-danger" onClick={logout}>
92-
<i className="fa fa-sign-out" /> Log Out
93-
</button>
88+
<Button onClick={logout}>Log Out</Button>
9489
</div>
9590
</div>
9691
)}

0 commit comments

Comments
 (0)