This repository has been archived by the owner on Feb 26, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 366
/
AuthPageSignIn.jsx
77 lines (67 loc) · 2.26 KB
/
AuthPageSignIn.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { Meteor } from 'meteor/meteor';
import React from 'react';
import AuthPage from './AuthPage.jsx';
import { Link } from 'react-router';
export default class SignInPage extends React.Component {
constructor(props) {
super(props);
this.state = { errors: {} };
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(event) {
event.preventDefault();
const email = this.refs.email.value;
const password = this.refs.password.value;
const errors = {};
if (!email) {
errors.email = 'Email required';
}
if (!password) {
errors.password = 'Password required';
}
this.setState({ errors });
if (Object.keys(errors).length) {
return;
}
Meteor.loginWithPassword(email, password, err => {
if (err) {
this.setState({
errors: { none: err.reason },
});
}
this.context.router.push('/');
});
}
render() {
const { errors } = this.state;
const errorMessages = Object.keys(errors).map(key => errors[key]);
const errorClass = key => errors[key] && 'error';
const content = (
<div className="wrapper-auth">
<h1 className="title-auth">Sign In.</h1>
<p className="subtitle-auth" >Signing in allows you to view private lists</p>
<form onSubmit={this.onSubmit}>
<div className="list-errors">
{errorMessages.map(msg => (
<div className="list-item" key={msg}>{msg}</div>
))}
</div>
<div className={`input-symbol ${errorClass('email')}`}>
<input type="email" name="email" ref="email" placeholder="Your Email"/>
<span className="icon-email" title="Your Email"></span>
</div>
<div className={`input-symbol ${errorClass('password')}`}>
<input type="password" name="password" ref="password" placeholder="Password"/>
<span className="icon-lock" title="Password"></span>
</div>
<button type="submit" className="btn-primary">Sign in</button>
</form>
</div>
);
const link = <Link to="/join" className="link-auth-alt">Need an account? Join Now.</Link>;
return <AuthPage content={content} link={link}/>;
}
}
SignInPage.contextTypes = {
router: React.PropTypes.object,
};