|
@@ -0,0 +1,173 @@
|
|
|
|
+import React, { Component } from 'react';
|
|
|
|
+
|
|
|
|
+import Input from './input';
|
|
|
|
+import Button from './button';
|
|
|
|
+
|
|
|
|
+class SignIn extends Component {
|
|
|
|
+ state = {
|
|
|
|
+ form: {
|
|
|
|
+ email: {
|
|
|
|
+ id: 1,
|
|
|
|
+ name: 'email',
|
|
|
|
+ type: 'email',
|
|
|
|
+ label: 'Email',
|
|
|
|
+ validation: {
|
|
|
|
+ required: true
|
|
|
|
+ },
|
|
|
|
+ fail: false,
|
|
|
|
+ touch: false,
|
|
|
|
+ value: ''
|
|
|
|
+ },
|
|
|
|
+ password: {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: 'password',
|
|
|
|
+ type: 'password',
|
|
|
|
+ label: 'Password',
|
|
|
|
+ validation: {
|
|
|
|
+ required: true,
|
|
|
|
+ minL: 6
|
|
|
|
+ },
|
|
|
|
+ fail: false,
|
|
|
|
+ touch: false,
|
|
|
|
+ value: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ validForm: false
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ componentDidMount(){
|
|
|
|
+ this.loadJS("https://apis.google.com/js/platform.js?onload=init");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ loadJS = src => {
|
|
|
|
+ const body = window.document.getElementsByTagName("body")[0];
|
|
|
|
+ const ref = body.getElementsByTagName("script")[0];
|
|
|
|
+
|
|
|
|
+ const script = window.document.createElement("script");
|
|
|
|
+ script.src = src;
|
|
|
|
+ script.async = true;
|
|
|
|
+ script.defer = true;
|
|
|
|
+ script.onload = () => {
|
|
|
|
+ window.gapi.load("auth2", () => {
|
|
|
|
+ console.log("success");
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ ref.parentNode.insertBefore(script, ref);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ googleAuth = () => {
|
|
|
|
+ const ga = window.gapi.auth2.init({
|
|
|
|
+ client_id: '1018884941403-cd6ilegbhitova86k4i7k89eqldpatfj.apps.googleusercontent.com'
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ ga.signIn().then(info => {
|
|
|
|
+ const { Zi } = info;
|
|
|
|
+ fetch("http://subdomain.entony.fs.a-level.com.ua/api/auth/google", {
|
|
|
|
+ method: "POST",
|
|
|
|
+ headers: {
|
|
|
|
+ "Content-Type": "application/json"
|
|
|
|
+ },
|
|
|
|
+ body: JSON.stringify({ access_token: Zi.access_token })
|
|
|
|
+ })
|
|
|
|
+ .then(res => res.json())
|
|
|
|
+ .then(res => console.log("res", res))
|
|
|
|
+ .catch(err => console.log(err.response));
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ instaAuth = () => {
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ validator = (rules,value) => {
|
|
|
|
+ const { required, minL } = rules;
|
|
|
|
+
|
|
|
|
+ let valid = true;
|
|
|
|
+ if(required){
|
|
|
|
+ valid = value.trim() === '' && valid;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if(minL){
|
|
|
|
+ valid = value.trim().length < minL && valid;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return valid
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ submit = e => {
|
|
|
|
+ e.preventDefault();
|
|
|
|
+
|
|
|
|
+ const values = Object.keys(this.state.form).reduce((prev,elem) => {
|
|
|
|
+ return {...prev, [elem]: this.state.form[elem].value };
|
|
|
|
+ }, {});
|
|
|
|
+
|
|
|
|
+ this.props.submitHandler(values);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ onChangeHandler = e => {
|
|
|
|
+ const { name, value } = e.target;
|
|
|
|
+
|
|
|
|
+ this.setState(prevState => {
|
|
|
|
+ const values = Object.keys(prevState.form).reduce((prev, elem) => {
|
|
|
|
+ if (elem === name) return prev.concat(value);
|
|
|
|
+ return prev.concat(prevState.form[elem].value);
|
|
|
|
+ },[]);
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ ...prevState,
|
|
|
|
+ form: {
|
|
|
|
+ ...prevState.form,
|
|
|
|
+ [name]: {
|
|
|
|
+ ...prevState.form[name],
|
|
|
|
+ value,
|
|
|
|
+ touch: true,
|
|
|
|
+ fail: this.validator(prevState.form[name].validation, value)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ validForm: values.some(value => value)
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ render() {
|
|
|
|
+ const { form, validForm } = this.state;
|
|
|
|
+ const { error } = this.props;
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <div className="auth__auth-box">
|
|
|
|
+ <form onSubmit={this.submit} className="auth__auth-form">
|
|
|
|
+ {Object.keys(form).map(input_name => {
|
|
|
|
+ return (
|
|
|
|
+ <Input
|
|
|
|
+ key={form[input_name].id}
|
|
|
|
+ id={form[input_name].id}
|
|
|
|
+ value={form[input_name].value}
|
|
|
|
+ name={form[input_name].name}
|
|
|
|
+ type={form[input_name].type}
|
|
|
|
+ fail={form[input_name].fail}
|
|
|
|
+ touch={form[input_name].touch}
|
|
|
|
+ label={form[input_name].label}
|
|
|
|
+ onChange={this.onChangeHandler}
|
|
|
|
+ />
|
|
|
|
+ );
|
|
|
|
+ })}
|
|
|
|
+ {error && <p className='auth__error-auth-text'>{error}</p>}
|
|
|
|
+ <div className="auth__control-box">
|
|
|
|
+ <Button className='auth__submit-btn'
|
|
|
|
+ disabled={!validForm}
|
|
|
|
+ type='submit'
|
|
|
|
+ text='Sign In'/>
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
+ <div className="auth__google-auth">
|
|
|
|
+ <Button
|
|
|
|
+ type="button"
|
|
|
|
+ text='Sign in with Google'
|
|
|
|
+ onClick={this.googleAuth}/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default SignIn;
|