-
Notifications
You must be signed in to change notification settings - Fork 4
/
LoginForm.js
executable file
·129 lines (120 loc) · 4.38 KB
/
LoginForm.js
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { graphql } from 'react-apollo';
import { Box, Text, Anchor, Button } from 'grommet';
import { Form, PasswordInputField, EmailInputField, validators } from 'grommet-controls';
import { Facebook, Google, Linkedin, Github } from 'grommet-icons';
import connect from '../../redux';
import routerPush from '../Router';
import { addError } from '../../redux/notifications/actions';
import { signIn } from '../../redux/auth/actions';
import popupWindow from './openWindow';
import loginMutation from './graphql/Login.graphql';
class LoginForm extends Component {
// eslint-disable-next-line no-unused-vars
openOAutPopup = (provider) => {
const { regitrationLimited } = this.props;
if (regitrationLimited) {
this.cantRegister();
} else {
popupWindow(`${window.location.origin}/auth/${provider}`)
.then((data) => {
this.props.signIn(data);
routerPush({ route: 'profile' });
})
.catch(err => console.log('error', err));
}
};
cantRegister = () => {
this.props.addError('Registration is currently closed for new members');
}
getServerErrors(err) {
if (err.graphQLErrors || err.networkError) {
const message = err.graphQLErrors.length ?
err.graphQLErrors[0].message : err.networkError.result.errors[0].message;
this.props.addError(message);
}
}
onSubmitLogin = ({ email, password }) => {
this.props.mutate({
variables: { input: { username: email, password } },
})
.then((response) => {
if (response.data) {
this.props.signIn(response.data.login);
routerPush({ route: 'profile' });
}
})
.catch((err) => {
this.getServerErrors(err);
});
};
render() {
const { onSwitchNewAccount, onSwitchRecoverPassword, regitrationLimited } = this.props;
return (
<Box gap='small' overflow='auto'>
<Box direction='row'>
<Text color='dark-3' size='small'>
New user? Signup for a <Anchor label='free account' onClick={regitrationLimited ? this.cantRegister : onSwitchNewAccount} />
</Text>
</Box>
<Box pad={{ vertical: 'small' }}>
<Text margin='none'>Signup with one of your social accounts:</Text>
<Box direction='row' pad='small' justify='between'>
<Box size='small'>
<Anchor
icon={<Facebook color='plain' />}
label='Facebook'
onClick={() => this.openOAutPopup('facebook')}
/>
</Box>
<Box size='small'>
<Anchor
icon={<Github color='plain' />}
label='Github'
onClick={() => this.openOAutPopup('github')}
/>
</Box>
</Box>
<Box direction='row' pad='small' justify='between'>
<Box size='small'>
<Anchor
icon={<Linkedin color='plain' />}
label='LinkedIn'
onClick={() => this.openOAutPopup('linkedin')}
/>
</Box>
<Box size='small'>
<Anchor
icon={<Google color='plain' />}
label='Google'
onClick={() => this.openOAutPopup('google')}
/>
</Box>
</Box>
</Box>
<Box border='top' pad={{ vertical: 'small' }}>
<Text>Or with an email and password:</Text>
<Form onSubmit={this.onSubmitLogin} basis='medium'>
<EmailInputField label='Email' name='email' validation={[validators.required(), validators.email()]} />
<PasswordInputField
label='Password'
name='password'
validation={
[validators.required(), validators.minLength(5), validators.alphaNumeric()]
}
/>
<Box pad='small'>
<Button type='submit' label='Log in' />
</Box>
</Form>
</Box>
<Text size='small'>
<Anchor label='forgot password?' onClick={regitrationLimited ? this.cantRegister : onSwitchRecoverPassword} />
</Text>
</Box>
);
}
}
const mapDispatchToProps = dispatch => bindActionCreators({ addError, signIn }, dispatch);
export default graphql(loginMutation)(connect(null, mapDispatchToProps)(LoginForm));