@codementor/ui-kit
Version:
435 lines (386 loc) • 19.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _style = require('styled-jsx/style');
var _style2 = _interopRequireDefault(_style);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Layout = require('./Layout');
var _Layout2 = _interopRequireDefault(_Layout);
var _TextInput = require('../TextInput');
var _TextInput2 = _interopRequireDefault(_TextInput);
var _Button = require('../Button');
var _Button2 = _interopRequireDefault(_Button);
var _InfoBar = require('../InfoBar');
var _InfoBar2 = _interopRequireDefault(_InfoBar);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var CmVericalLogo = function CmVericalLogo(props) {
return _react2.default.createElement(
'svg',
props,
_react2.default.createElement(
'defs',
null,
_react2.default.createElement('path', {
id: 'CmVericalLogo_a',
d: 'M10.65 11.012H0V.044h10.65z'
}),
_react2.default.createElement('path', {
id: 'CmVericalLogo_c',
d: 'M.002 11.012h11.315V.044H.002z'
}),
_react2.default.createElement('path', {
id: 'CmVericalLogo_e',
d: 'M.298 11.012h11.315V.044H.298v10.968z'
}),
_react2.default.createElement('path', {
id: 'CmVericalLogo_g',
d: 'M.243 14.286h7.53V.158H.243v14.128z'
}),
_react2.default.createElement('path', {
id: 'CmVericalLogo_i',
d: 'M41.74.142H.15v28.04h41.59V.142z'
})
),
_react2.default.createElement(
'g',
{
fill: 'none',
fillRule: 'evenodd'
},
_react2.default.createElement(
'g',
{
transform: 'translate(0 38.846)'
},
_react2.default.createElement(
'mask',
{
id: 'CmVericalLogo_b',
fill: '#fff'
},
_react2.default.createElement('use', {
xlinkHref: '#CmVericalLogo_a'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M0 5.518c0-.724.127-1.419.382-2.083a5.174 5.174 0 0 1 1.108-1.75A5.238 5.238 0 0 1 3.272.486C3.976.192 4.778.044 5.678.044c1.22 0 2.248.259 3.08.775.832.517 1.456 1.19 1.873 2.023l-3.141.945c-.417-.67-1.027-1.006-1.833-1.006-.67 0-1.231.249-1.68.745-.45.496-.675 1.16-.675 1.992 0 .416.06.795.181 1.137.12.342.289.634.503.876.215.24.467.429.755.563.289.134.594.201.916.201.403 0 .772-.097 1.108-.292a1.87 1.87 0 0 0 .745-.754l3.14.966c-.389.818-1.01 1.489-1.862 2.012-.852.523-1.89.785-3.11.785-.887 0-1.681-.151-2.386-.453A5.468 5.468 0 0 1 1.5 9.352 5.092 5.092 0 0 1 .382 7.6 5.756 5.756 0 0 1 0 5.518',
mask: 'url(#CmVericalLogo_b)'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M14.677 44.384c0 .833.222 1.5.665 2.003.443.503 1.006.755 1.691.755.335 0 .644-.067.926-.202.282-.134.527-.322.735-.563.208-.242.372-.534.493-.876.121-.342.181-.714.181-1.117 0-.831-.22-1.499-.664-2.002-.443-.503-1-.754-1.671-.754a2.196 2.196 0 0 0-1.681.764 2.698 2.698 0 0 0-.494.876c-.12.342-.18.714-.18 1.116m2.355 5.474c-.9 0-1.701-.147-2.406-.443a5.233 5.233 0 0 1-1.782-1.197 5.058 5.058 0 0 1-1.097-1.75 5.9 5.9 0 0 1-.372-2.084c0-.724.123-1.418.372-2.082a5.058 5.058 0 0 1 1.097-1.751 5.361 5.361 0 0 1 1.782-1.208c.705-.301 1.507-.452 2.406-.452.9 0 1.698.15 2.396.452a5.385 5.385 0 0 1 1.772 1.208 5.19 5.19 0 0 1 1.107 1.75c.255.665.383 1.36.383 2.083a5.9 5.9 0 0 1-.373 2.083 5.048 5.048 0 0 1-1.097 1.751 5.235 5.235 0 0 1-1.782 1.197c-.705.296-1.507.443-2.406.443m12.483-2.716a2.29 2.29 0 0 0 1.268-.393 2.69 2.69 0 0 0 .947-1.077V43.46a2.909 2.909 0 0 0-.977-1.318c-.45-.343-.916-.514-1.4-.514a2 2 0 0 0-.956.232c-.288.154-.54.36-.755.614-.214.255-.379.55-.493.885a3.291 3.291 0 0 0-.171 1.067c0 .791.235 1.442.705 1.952s1.08.765 1.832.765m-.866 2.716a4.827 4.827 0 0 1-2.003-.412 4.655 4.655 0 0 1-1.58-1.157 5.458 5.458 0 0 1-1.037-1.741 6.18 6.18 0 0 1-.373-2.183c0-.765.113-1.483.342-2.154.229-.67.55-1.25.966-1.74.416-.49.91-.876 1.48-1.158a4.188 4.188 0 0 1 1.883-.422c.725 0 1.39.174 1.993.523.604.35 1.068.818 1.39 1.409v-5.856h3.221v11.068c0 .322.06.547.181.674.12.128.335.205.644.231v2.717a7.714 7.714 0 0 1-1.55.161c-1.128-.027-1.772-.476-1.933-1.348l-.06-.564c-.39.658-.9 1.147-1.53 1.47a4.41 4.41 0 0 1-2.034.482'
}),
_react2.default.createElement(
'g',
{
transform: 'translate(36.923 38.846)'
},
_react2.default.createElement(
'mask',
{
id: 'CmVericalLogo_d',
fill: '#fff'
},
_react2.default.createElement('use', {
xlinkHref: '#CmVericalLogo_c'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M7.915 4.532c-.068-.67-.31-1.2-.725-1.59-.417-.389-.933-.583-1.55-.583-.632 0-1.152.198-1.561.593-.41.396-.647.923-.715 1.58h4.55zm-2.235 6.48c-.886 0-1.681-.144-2.386-.433a5.293 5.293 0 0 1-1.792-1.177 5.032 5.032 0 0 1-1.118-1.72 5.543 5.543 0 0 1-.382-2.043c0-.765.127-1.486.382-2.163a5.238 5.238 0 0 1 1.108-1.782A5.17 5.17 0 0 1 3.273.487C3.978.192 4.78.044 5.68.044c.899 0 1.697.148 2.395.443a5.265 5.265 0 0 1 1.772 1.197 5.077 5.077 0 0 1 1.098 1.741c.248.657.372 1.349.372 2.073 0 .188-.007.372-.02.553a3.911 3.911 0 0 1-.06.473H3.424c.054.711.312 1.251.776 1.62.463.37.99.554 1.58.554.47 0 .923-.114 1.36-.343.435-.228.727-.536.875-.925l2.738.764c-.416.833-1.06 1.51-1.932 2.033-.873.523-1.92.785-3.141.785z',
mask: 'url(#CmVericalLogo_d)'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M66.401 49.657H63.18V43.72c0-.697-.124-1.203-.372-1.519a1.204 1.204 0 0 0-.997-.473c-.43 0-.849.175-1.258.523-.41.35-.708.799-.896 1.349v6.057h-3.221V43.72c0-.697-.125-1.203-.373-1.519a1.205 1.205 0 0 0-.997-.473c-.43 0-.849.171-1.258.514-.41.342-.708.794-.896 1.358v6.057h-3.22V39.092h2.898v1.771c.39-.644.92-1.134 1.59-1.47.672-.334 1.45-.502 2.336-.502.43 0 .812.054 1.148.161.335.107.62.255.856.443.234.188.429.405.583.653.155.249.265.514.333.795a4.018 4.018 0 0 1 1.57-1.519c.657-.355 1.41-.533 2.255-.533.67 0 1.211.124 1.621.372.409.248.728.57.956.966.228.396.38.829.453 1.298.074.47.111.926.111 1.368v6.762z'
}),
_react2.default.createElement(
'g',
{
transform: 'translate(67.593 38.846)'
},
_react2.default.createElement(
'mask',
{
id: 'CmVericalLogo_f',
fill: '#fff'
},
_react2.default.createElement('use', {
xlinkHref: '#CmVericalLogo_e'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M8.21 4.532c-.067-.67-.309-1.2-.725-1.59-.416-.389-.933-.583-1.55-.583-.631 0-1.151.198-1.56.593-.41.396-.648.923-.715 1.58h4.55zm-2.235 6.48c-.886 0-1.68-.144-2.386-.433a5.295 5.295 0 0 1-1.791-1.177A5.032 5.032 0 0 1 .68 7.682a5.543 5.543 0 0 1-.382-2.043c0-.765.127-1.486.382-2.163a5.238 5.238 0 0 1 1.108-1.782A5.17 5.17 0 0 1 3.569.487C4.274.192 5.076.044 5.975.044c.9 0 1.698.148 2.396.443a5.265 5.265 0 0 1 1.772 1.197 5.077 5.077 0 0 1 1.097 1.741c.248.657.373 1.349.373 2.073 0 .188-.007.372-.02.553a3.911 3.911 0 0 1-.06.473H3.72c.054.711.312 1.251.776 1.62.463.37.989.554 1.58.554.47 0 .923-.114 1.36-.343.435-.228.727-.536.875-.925l2.738.764c-.416.833-1.06 1.51-1.933 2.033-.873.523-1.92.785-3.14.785z',
mask: 'url(#CmVericalLogo_f)'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M90.863 49.657h-3.221V43.72c0-.697-.13-1.203-.393-1.519-.261-.315-.607-.473-1.037-.473-.228 0-.46.047-.694.14a2.58 2.58 0 0 0-.665.393c-.208.168-.4.366-.573.594-.175.229-.31.477-.403.745v6.057h-3.221V39.092h2.898v1.771c.39-.63.94-1.117 1.651-1.459.712-.342 1.53-.513 2.457-.513.684 0 1.238.124 1.661.372.423.248.748.57.977.966.227.396.379.829.452 1.298.075.47.111.926.111 1.368v6.762z'
}),
_react2.default.createElement(
'g',
{
transform: 'translate(92.01 35.573)'
},
_react2.default.createElement(
'mask',
{
id: 'CmVericalLogo_h',
fill: '#fff'
},
_react2.default.createElement('use', {
xlinkHref: '#CmVericalLogo_g'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M7.773 13.521c-.443.188-.946.362-1.51.523a6.28 6.28 0 0 1-1.732.242c-.402 0-.782-.05-1.137-.151a2.538 2.538 0 0 1-.937-.483 2.254 2.254 0 0 1-.634-.876c-.154-.362-.232-.798-.232-1.308V5.954H.243V3.52H1.59V.16h3.222v3.36h2.155v2.435H4.813v4.407c0 .35.09.601.272.755.182.154.406.231.675.231.228 0 .469-.04.724-.12.255-.08.484-.168.685-.262l.604 2.556z',
mask: 'url(#CmVericalLogo_h)'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M103.568 44.384c0 .833.222 1.5.665 2.003.442.503 1.006.755 1.69.755.336 0 .645-.067.927-.202a2.23 2.23 0 0 0 .734-.563c.209-.242.373-.534.494-.876.12-.342.18-.714.18-1.117 0-.831-.22-1.499-.663-2.002-.443-.503-1-.754-1.672-.754a2.196 2.196 0 0 0-1.68.764 2.698 2.698 0 0 0-.494.876c-.12.342-.181.714-.181 1.116m2.355 5.474c-.899 0-1.7-.147-2.405-.443a5.23 5.23 0 0 1-1.782-1.197 5.054 5.054 0 0 1-1.098-1.75 5.9 5.9 0 0 1-.372-2.084c0-.724.124-1.418.372-2.082a5.054 5.054 0 0 1 1.098-1.751 5.357 5.357 0 0 1 1.782-1.208c.704-.301 1.506-.452 2.405-.452.9 0 1.698.15 2.396.452a5.385 5.385 0 0 1 1.772 1.208 5.19 5.19 0 0 1 1.108 1.75 5.77 5.77 0 0 1 .382 2.083 5.9 5.9 0 0 1-.372 2.083 5.048 5.048 0 0 1-1.098 1.751 5.235 5.235 0 0 1-1.781 1.197c-.705.296-1.507.443-2.407.443m13.913-8.009c-.778.013-1.48.14-2.104.382-.625.242-1.084.604-1.38 1.087v6.34h-3.22V39.091h2.959v2.133c.376-.711.849-1.264 1.42-1.66.57-.396 1.177-.607 1.822-.634.268 0 .436.007.503.02v2.898zM53.27 19.362h-4.95a1.223 1.223 0 1 0 0 2.445h4.95a1.223 1.223 0 1 0 0-2.445m1.195-4.529h-6.116a1.223 1.223 0 1 0 0 2.445h6.116a1.223 1.223 0 1 0 0-2.445m10.253-2.377a3.669 3.669 0 1 0-3.67-3.667 3.669 3.669 0 0 0 3.67 3.667m7.176 7.789c-.546-3.391-2.411-6.129-4.845-7.215a4.755 4.755 0 0 1-2.331.608c-.846 0-1.64-.221-2.331-.608-2.434 1.087-4.3 3.824-4.845 7.215a1.77 1.77 0 0 0 1.741 2.06h10.87a1.77 1.77 0 0 0 1.74-2.06m-13.759-8.717c0-.676-.547-1.223-1.223-1.223H52.08l-.06-.003h-3.67a1.223 1.223 0 1 0 0 2.445h2.385c.02.001.04.003.061.003h6.116c.676 0 1.223-.547 1.223-1.222M48.349 8.22h1.223l.041-.002h7.296a1.223 1.223 0 1 0 0-2.445H48.96l-.04.002h-.571a1.223 1.223 0 1 0 0 2.445'
}),
_react2.default.createElement(
'g',
{
transform: 'translate(38.412 .156)'
},
_react2.default.createElement(
'mask',
{
id: 'CmVericalLogo_j',
fill: '#fff'
},
_react2.default.createElement('use', {
xlinkHref: '#CmVericalLogo_i'
})
),
_react2.default.createElement('path', {
fill: '#003648',
d: 'M23.47 25.737h-5.05a1.144 1.144 0 0 1-1.144-1.144H5.044V2.587h31.803v22.006H24.615c0 .632-.512 1.144-1.144 1.144zm18.27-1.144h-2.447V2.558A2.417 2.417 0 0 0 36.878.142H5.015a2.417 2.417 0 0 0-2.417 2.416v22.035H.151v1.673c0 1.058.859 1.916 1.917 1.916h37.754a1.917 1.917 0 0 0 1.917-1.916v-1.672z',
mask: 'url(#CmVericalLogo_j)'
})
)
)
);
};
CmVericalLogo.defaultProps = {
xmlns: 'http://www.w3.org/2000/svg',
xmlnsXlink: 'http://www.w3.org/1999/xlink',
width: '120',
height: '50',
viewBox: '0 0 120 50'
};
var EmailSignUp = function (_PureComponent) {
(0, _inherits3.default)(EmailSignUp, _PureComponent);
function EmailSignUp() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, EmailSignUp);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EmailSignUp.__proto__ || (0, _getPrototypeOf2.default)(EmailSignUp)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
name: '',
email: '',
password: '',
tosChecked: false
}, _this._onCheckTos = function (_ref2) {
var checked = _ref2.target.checked;
_this.setState({
tosChecked: checked
});
}, _this._onClickSubmit = function (e) {
if (!_this.form) {
_this._submit(e);
}
var ok = _this.form.checkValidity();
if (ok) {
_this._submit(e);
}
}, _this._handleInputChange = function (_ref3) {
var _ref3$target = _ref3.target,
name = _ref3$target.name,
value = _ref3$target.value;
_this.setState((0, _defineProperty3.default)({}, name, value));
}, _this._submit = function (e) {
var _this$state = _this.state,
name = _this$state.name,
password = _this$state.password,
email = _this$state.email,
tosChecked = _this$state.tosChecked;
var onSubmit = _this.props.onSubmit;
e.preventDefault();
if (tosChecked) {
onSubmit({ name: name, password: password, email: email });
}
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(EmailSignUp, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
errorMessage = _props.errorMessage,
goToEmailLogin = _props.goToEmailLogin,
isSending = _props.isSending,
emailInputLabel = _props.emailInputLabel,
renderHeader = _props.renderHeader;
var tosChecked = this.state.tosChecked;
var InputLabelProps = {
style: {
fontFamily: 'OpenSans, Sans-Serif',
fontSize: '16px',
lineHeight: '1.5',
color: '#999'
}
};
var InputProps = {
style: {
fontFamily: 'OpenSans, Sans-Serif',
fontSize: '16px',
lineHeight: '1.5',
color: '#333',
paddingTop: '7px'
}
};
return _react2.default.createElement(
_Layout2.default,
null,
renderHeader && typeof renderHeader === 'function' ? renderHeader() : _react2.default.createElement(CmVericalLogo, null),
!!errorMessage && _react2.default.createElement(
_InfoBar2.default,
{ type: 'error', margin: '12px 0 0' },
errorMessage
),
_react2.default.createElement(
'form',
{ onSubmit: this._submit, ref: function ref(f) {
_this2.form = f;
}, className: 'jsx-1500635145'
},
_react2.default.createElement(_TextInput2.default, {
autoFocus: true,
required: true,
type: 'text',
name: 'name',
label: 'Name',
margin: 'dense',
InputLabelProps: InputLabelProps,
inputProps: InputProps,
onChange: this._handleInputChange }),
_react2.default.createElement(_TextInput2.default, {
required: true,
type: 'email',
name: 'email',
label: emailInputLabel || 'Email',
margin: 'dense',
InputLabelProps: InputLabelProps,
inputProps: InputProps,
onChange: this._handleInputChange }),
_react2.default.createElement(_TextInput2.default, {
required: true,
type: 'password',
label: 'Password',
name: 'password',
margin: 'dense',
InputLabelProps: InputLabelProps,
inputProps: InputProps,
onChange: this._handleInputChange }),
_react2.default.createElement(
'div',
{
className: 'jsx-1500635145' + ' ' + 'email-signup__tos'
},
_react2.default.createElement('input', {
type: 'checkbox',
id: 'tos',
onChange: this._onCheckTos, className: 'jsx-1500635145'
}),
_react2.default.createElement(
'label',
{ htmlFor: 'tos', className: 'jsx-1500635145'
},
'By signing up, I agree to Codementor\'s ',
_react2.default.createElement(
'a',
{ href: '/terms', target: '_blank', className: 'jsx-1500635145'
},
'Terms of Service'
),
' and ',
_react2.default.createElement(
'a',
{ href: '/privacy', target: '_blank', className: 'jsx-1500635145'
},
'Privacy Policy'
),
'.'
)
),
_react2.default.createElement('input', { type: 'submit', className: 'jsx-1500635145' + ' ' + 'input-submit'
}),
_react2.default.createElement(
_Button2.default,
{
isLoading: isSending,
type: 'secondary',
disabled: !tosChecked,
onClick: this._onClickSubmit },
'sign up'
)
),
_react2.default.createElement(
'div',
{
className: 'jsx-1500635145' + ' ' + 'email-signup__footer'
},
'Already have an account? ',
_react2.default.createElement(
'a',
{ onClick: goToEmailLogin, className: 'jsx-1500635145'
},
'Log in'
)
),
_react2.default.createElement(_style2.default, {
styleId: '1500635145',
css: 'form.jsx-1500635145{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.input-submit.jsx-1500635145{display:none;}.email-signup__tos.jsx-1500635145{color:#666;line-height:1.5;text-align:left;padding:27px 0 24px;font-size:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}input.jsx-1500635145{margin-right:6px;}.email-signup__footer.jsx-1500635145{margin:12px 0;font-size:14px;color:#666;}.email-signup__footer.jsx-1500635145{margin-top:16px;font-size:14px;line-height:1.5;color:#666;}'
})
);
}
}]);
return EmailSignUp;
}(_react.PureComponent);
EmailSignUp.propTypes = {
onSubmit: _propTypes2.default.func.isRequired,
goToEmailLogin: _propTypes2.default.func.isRequired,
isSending: _propTypes2.default.bool,
errorMessage: _propTypes2.default.string,
emailInputLabel: _propTypes2.default.node,
renderHeader: _propTypes2.default.func
};
exports.default = EmailSignUp;