Skip to content

Commit 4938a51

Browse files
author
gondzo
committed
add form signup
1 parent 24726bb commit 4938a51

File tree

12 files changed

+639
-96
lines changed

12 files changed

+639
-96
lines changed

‎src/api/User.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ class UserApi {
4242

4343
register(name, email, password) {
4444
const url = `${this.basePath}/api/v1/register`;
45-
email = Math.floor((Math.random() * 100) + 1) + email;
4645
return reqwest({
4746
url,
4847
method: 'post',

‎src/components/Header/Header.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { PropTypes } from 'react';
22
import CSSModules from 'react-css-modules';
33
import { Link } from 'react-router';
4-
import LogInSignUpModalContainer from 'routes/Home/containers/LogInSignUpModalContainer';
4+
import LogInModalContainer from 'routes/Home/containers/LogInModalContainer';
5+
import SignupModalContainer from 'routes/Home/containers/SignupModalContainer';
56
import SearchInput from '../SearchInput';
67
import Dropdown from '../Dropdown';
78
import Notification from '../Notification';
@@ -62,7 +63,10 @@ export const Header = ({location, selectedCategory, categories, user, notificati
6263
</Dropdown>
6364
</li>),
6465
(<li key="login" styleName="login">
65-
<LogInSignUpModalContainer />
66+
<LogInModalContainer />
67+
</li>),
68+
(<li key="signup" styleName="login">
69+
<SignupModalContainer />
6670
</li>),
6771
]
6872
);

‎src/routes/Home/components/LogInSignUpModal/index.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/routes/Home/components/LogInSignUpModal/LogInSignUpModal.jsx renamed to ‎src/routes/Home/components/LoginModal/LoginModal.jsx

Lines changed: 8 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Modal from 'react-modal';
77
import Button from 'components/Button';
88
import Checkbox from 'components/Checkbox';
99
import TextField from 'components/TextField';
10-
import styles from './LogInSignUpModal.scss';
10+
import styles from './LogInModal.scss';
1111
const { DOM: { input } } = React;
1212

1313
import UserApi from 'api/User.js';
@@ -47,39 +47,29 @@ const FormField = ({label, error, touched, children}) => (
4747
</div>
4848
);
4949
/*
50-
* LogInSignUpModal
50+
* LogInModal
5151
*/
5252

53-
class LogInSignUpModal extends React.Component {
53+
class LogInModal extends React.Component {
5454
constructor() {
5555
super();
5656
this.state = {
57-
modalLoginIsOpen: false,
58-
modalSignupIsOpen: false,
57+
modalLoginIsOpen: false
5958
};
6059
}
6160

6261
openLoginModal() {
6362
this.setState({modalLoginIsOpen: true});
6463
}
65-
openSignupModal() {
66-
this.setState({modalSignupIsOpen: true});
67-
}
6864

6965
afterOpenLoginModal() {
7066
}
71-
afterOpenSignupModal() {
72-
}
7367

7468
closeLoginModal() {
7569
this.setState({modalLoginIsOpen: false});
7670
}
77-
closeSignupModal() {
78-
this.setState({modalSignupIsOpen: false});
79-
}
8071

8172
login(email, pass) {
82-
this.setState({modalSignupIsOpen: false});
8373
this.setState({modalLoginIsOpen: true});
8474
}
8575

@@ -95,27 +85,12 @@ class LogInSignUpModal extends React.Component {
9585
}, 100);
9686
}
9787

98-
handleSignup() {
99-
userApi.register('first', 'provider2@qq.com', '123456').then((authResult) => {
100-
console.log(authResult);
101-
browserHistory.push('/browse-provider');
102-
}).catch((err) => {
103-
console.log(err.responseText);
104-
});
105-
}
106-
107-
signUp() {
108-
this.setState({modalLoginIsOpen: false});
109-
this.setState({modalSignupIsOpen: true});
110-
}
111-
11288
render() {
11389
const { handleSubmit, pristine, reset, submitting, fields, handleLoggedIn, loggedUser, hasError, errorText } = this.props;
11490

11591
return (
11692
<div styleName="signin-modal">
11793
<div styleName="login-signup">
118-
<a href="javascript:" styleName="signup" onClick={this.openSignupModal.bind(this)}>Sign Up</a>
11994
<a href="javascript:" styleName="login" onClick={this.openLoginModal.bind(this)}>Login</a>
12095
</div>
12196
<Modal
@@ -188,73 +163,18 @@ class LogInSignUpModal extends React.Component {
188163
</Button>
189164
</div>
190165
<div styleName="dont-have">
191-
Don&#8217;t have an account? <a href="javascript:;" className="singup" onClick={this.signUp.bind(this)}>Sign Up</a>
166+
Don&#8217;t have an account? <a href="javascript:;" className="singup" >Sign Up</a>
192167
</div>
193168
</form>
194169
</Modal>
195170

196-
<Modal
197-
isOpen={this.state.modalSignupIsOpen}
198-
onAfterOpen={this.afterOpenSignupModal}
199-
onRequestClose={this.closeSignupModal.bind(this)}
200-
style={customStyles}
201-
shouldCloseOnOverlayClick
202-
contentLabel="Login Modal"
203-
>
204-
205-
<div styleName="modal-header">
206-
<div onClick={this.closeSignupModal.bind(this)} styleName="icon-close-modal" />
207-
<div styleName="title">Login to Your Account</div>
208-
</div>
209-
210-
<form styleName="login-form">
211-
<div styleName="login-with-fb">
212-
<a href="javascript:;">
213-
<i styleName="icon-facebook" />
214-
<span>Continue with Facebook</span>
215-
</a>
216-
</div>
217-
218-
<div styleName="login-with-gplus">
219-
<a href="javascript:;">
220-
<i styleName="icon-gplus" />
221-
<span>Continue with Google Plus</span>
222-
</a>
223-
</div>
224-
{/* login with end*/}
225-
<div styleName="or-border">
226-
<div styleName="left-line" />
227-
<div styleName="or">or</div>
228-
<div styleName="right-line" />
229-
</div>
230-
{/* or end*/}
231-
232-
<div styleName="signup-btn">
233-
<i styleName="icon-email" />
234-
235-
<Button color="black" className={styles.btnLogin} onClick={this.handleSignup.bind(this)}>
236-
Sign up with Email
237-
</Button>
238-
239-
</div>
240-
{/* signup-btn end*/}
241-
<div styleName="by-signup">
242-
By signing up, I agree to Drone Market’s
243-
<a href="javascript:;">terms of service</a>, <a href="javascript:;">privacy policy</a>,
244-
and <a href="javascript:;">disclaimer</a>.
245-
</div>
246-
{/* by-signup end*/}
247-
<div styleName="dont-have">
248-
Already have an account? <a href="javascript:;" className="singup" onClick={this.login.bind(this)}>Log In</a>
249-
</div>
250-
</form>
251-
</Modal>
171+
252172
</div>
253173
);
254174
}
255175
}
256176

257-
LogInSignUpModal.propTypes = {
177+
LogInModal.propTypes = {
258178
handleSubmit: PropTypes.func.isRequired,
259179
};
260180

@@ -274,4 +194,4 @@ const validate = (values) => {
274194
};
275195

276196

277-
export default reduxForm({ form: 'loginForm', fields, validate })(CSSModules(LogInSignUpModal, styles));
197+
export default reduxForm({ form: 'loginForm', fields, validate })(CSSModules(LogInModal, styles));

‎src/routes/Home/components/LogInSignUpModal/LogInSignUpModal.scss renamed to ‎src/routes/Home/components/LoginModal/LoginModal.scss

File renamed without changes.

‎src/routes/Home/components/LoginModal/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import LogInModal from './LogInModal';
2+
3+
export default LogInModal;

‎src/routes/Home/components/SignupModal/SignupModal.jsx

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import React, { PropTypes } from 'react';
2+
import CSSModules from 'react-css-modules';
3+
import { Link, browserHistory } from 'react-router';
4+
import { Field, reduxForm } from 'redux-form';
5+
import cn from 'classnames';
6+
import Modal from 'react-modal';
7+
import Button from 'components/Button';
8+
import Checkbox from 'components/Checkbox';
9+
import TextField from 'components/TextField';
10+
import styles from './SignupModal.scss';
11+
const { DOM: { input } } = React;
12+
13+
import UserApi from 'api/User.js';
14+
const config = require('../../../../config');
15+
const userApi = new UserApi(config.default.api.basePath);
16+
17+
/*
18+
* customStyles
19+
*/
20+
const customStyles = {
21+
overlay: {
22+
position: 'fixed',
23+
top: 0,
24+
left: 0,
25+
right: 0,
26+
bottom: 0,
27+
backgroundColor: 'rgba(9, 9, 9, 0.58)',
28+
zIndex: '9999',
29+
},
30+
content: {
31+
top: '50%',
32+
left: '50%',
33+
right: 'auto',
34+
bottom: 'auto',
35+
marginRight: '-50%',
36+
transform: 'translate(-50%, -50%)',
37+
padding: '0px',
38+
width: '417px',
39+
borderRadius: '10px',
40+
zIndex: '99999',
41+
},
42+
};
43+
const FormField = ({label, error, touched, children}) => (
44+
<div className={cn('form-field', {error: error && touched})}>
45+
{children}
46+
{error && touched && <div className="error-message">{error}</div>}
47+
</div>
48+
);
49+
/*
50+
* SignupModal
51+
*/
52+
53+
class SignupModal extends React.Component {
54+
constructor() {
55+
super();
56+
this.state = {
57+
modalSignupIsOpen: false
58+
};
59+
}
60+
61+
openSignupModal() {
62+
this.setState({modalSignupIsOpen: true});
63+
}
64+
65+
afterOpenSignupModal() {
66+
}
67+
68+
closeSignupModal() {
69+
this.setState({modalSignupIsOpen: false});
70+
}
71+
72+
signup(email, pass) {
73+
this.setState({modalSignupIsOpen: true});
74+
}
75+
76+
handleSignup(handleSigned, signedUser) {
77+
handleSigned();
78+
const _self = this;
79+
setTimeout(() => {
80+
handleSignup();
81+
if (signedUser) {
82+
_self.setState({modalSignupIsOpen: false});
83+
}
84+
}, 100);
85+
}
86+
87+
render() {
88+
const { handleSubmit, pristine, reset, submitting, fields, handleSigned, signedUser, hasError, errorText } = this.props;
89+
90+
return (
91+
<div styleName="signin-modal">
92+
<div styleName="login-signup">
93+
<a href="javascript:" styleName="login" onClick={this.openSignupModal.bind(this)}>Sign Up</a>
94+
</div>
95+
<Modal
96+
isOpen={this.state.modalSignupIsOpen}
97+
onAfterOpen={this.afterOpenModal}
98+
onRequestClose={this.closeSignupModal.bind(this)}
99+
style={customStyles}
100+
shouldCloseOnOverlayClick
101+
contentLabel="Signup Modal"
102+
>
103+
104+
<div styleName="modal-header">
105+
<div onClick={this.closeSignupModal.bind(this)} styleName="icon-close-modal" />
106+
<div styleName="title">Create new Account</div>
107+
</div>
108+
109+
<form styleName="login-form" onSubmit={handleSubmit}>
110+
<div styleName="login-with-fb">
111+
<a href="javascript:;">
112+
<i styleName="icon-facebook" />
113+
<span>Sign Up with Facebook</span>
114+
</a>
115+
</div>
116+
117+
<div styleName="login-with-gplus">
118+
<a href="javascript:;">
119+
<i styleName="icon-gplus" />
120+
<span>Sign Up with Google Plus</span>
121+
</a>
122+
</div>
123+
{/* login with end*/}
124+
<div styleName="or-border">
125+
<div styleName="left-line" />
126+
<div styleName="or">or</div>
127+
<div styleName="right-line" />
128+
</div>
129+
{/* or end*/}
130+
<div>
131+
{hasError && <span className="error-msg">{errorText.error}</span>}
132+
<div styleName="email-input">
133+
<FormField {...fields.email}>
134+
<TextField {...fields.email} login type="email" label="Email" />
135+
</FormField>
136+
</div>
137+
<div>
138+
<FormField {...fields.password}>
139+
<TextField {...fields.password} login type="password" label="Password" />
140+
</FormField>
141+
</div>
142+
</div>
143+
{/* input end*/}
144+
145+
<div styleName="login-btn">
146+
<Button
147+
type="submit" color="black"
148+
className={styles.btnLogin} onClick={(e) => this.handleSignup(handleSigned, signedUser)}
149+
>
150+
Sign Up
151+
</Button>
152+
</div>
153+
<div styleName="dont-have">
154+
Don&#8217;t have an account? <a href="javascript:;" className="singup" >Log In</a>
155+
</div>
156+
</form>
157+
</Modal>
158+
159+
160+
</div>
161+
);
162+
}
163+
}
164+
165+
SignupModal.propTypes = {
166+
handleSubmit: PropTypes.func.isRequired,
167+
};
168+
169+
const fields = ['email', 'password', 'emailUp', 'passwordUp'];
170+
171+
const validate = (values) => {
172+
const errors = {};
173+
if (!values.email) {
174+
errors.email = 'Email is required';
175+
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
176+
errors.email = 'Invalid email address';
177+
}
178+
if (!values.password) {
179+
errors.password = 'Password is required';
180+
}
181+
return errors;
182+
};
183+
184+
185+
export default reduxForm({ form: 'signupForm', fields, validate })(CSSModules(SignupModal, styles));

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy