авторизация

src/App.css

@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

src/App.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import {In} from './components/sign-in/sign-in';
+import Up from './components/sign-up/sign-up';
+import User from './components/user/user';
+import ReactDOM from 'react-dom';
+import {
+  Link,
+  BrowserRouter,
+  Route,
+  Switch,
+  withRouter,
+
+} from "react-router-dom";
+
+class App extends Component {
+  render() {
+
+    return (
+      <div>
+
+      <Route  path = "/home" component={In}/>
+      <Route  path = "/sign-up" component={Up}/>
+      <Route  path = "/user" component={User}/>
+      </div>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/actions.js

@@ -0,0 +1,6 @@
+export const incrementCounter = (payload) => {
+  return {
+    type: 'INCREMENT',
+    payload,
+  };
+};

src/components/sign-in/sign-in.css

@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+#first {
+    height: 100px;
+    width: 100%;
+    border: 4px solid black;
+}
+#signIn {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}
+#logo {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}
+#up {
+    width: 50%;
+    border: 4px solid black;
+    margin-top: 100px;
+    padding: 20px;
+}
+#signUp {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}

src/components/sign-in/sign-in.js

@@ -0,0 +1,132 @@
+import React, {Component} from 'react';
+import {
+  Link,
+  BrowserRouter,
+  Route,
+  Switch,
+  withRouter,
+  browserHistory
+} from "react-router-dom";
+import {connect} from 'react-redux';
+import './sign-in.css'
+import {incrementCounter} from '../../actions';
+
+
+let url3 = 'https://flatearth-api.herokuapp.com/api/v1/auth/login'
+let url =  'https://flatearth-api.herokuapp.com/api/v1/auth/secret/'
+
+var user1 = {
+  user:"", 
+  password:""
+}
+
+
+class Inn extends Component{
+  state = {
+	    userS: '',
+	    passwordS: '',
+	    status: []
+  	};
+
+  inputChangeUser = (event)=> {
+    this.setState({
+    userS: event.target.value,
+    });
+  } 
+  inputChangePassword = (event)=> {
+    this.setState({
+    passwordS: event.target.value,
+    });
+  } 
+ addToUser =()=>{
+    const {emailS,userS,passwordS} = this.state;
+
+    user1.user = userS
+    user1.password = passwordS
+    fetch( url3 , {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(user1)
+        }).then(user => {
+            return user.json()
+        }).then(status => {
+        	this.setState({status})
+
+              fetch( url , {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+             'Authorization': `Bearer ${status.message.token}`
+            },
+
+        }).then(user => {
+            return user.json()
+        }).then(secret => {
+          this.setState({secret})
+           const {incrementCounter}=this.props;
+          //incrementCounter(status.message.token)
+          incrementCounter( secret.message)
+        });
+
+        });
+
+  }
+
+  render(){
+  	const {userS,passwordS,status} = this.state;
+
+
+    return(
+		<div>
+	          <div id="first">
+		            <center>
+		            <div id="signUp"><Link to ='/sign-up' exact>Sign-Up</Link></div>
+		            <div id="logo"><img src="" alt="logo" /></div>
+		            </center>
+	          </div>
+	          <center>
+		           <div id="second">
+			            <center>
+			              	<h3>well come flat earch</h3>
+			              	<hr />
+
+				              	<b>Username <input type="text" 
+				              		value={userS}
+				              		onChange={this.inputChangeUser}
+				              	/></b><br />
+				              	<b>Password <input type="text" 
+				              		value={passwordS}
+				              		onChange={this.inputChangePassword}
+				             	 /></b>
+				              	<div id="sigIn">
+				                	<Link to ='/user' exact><button onClick={this.addToUser}>Войти</button></Link>
+				                	<p><input type="checkbox" />запомнить</p>
+					            </div>
+
+			            </center>
+		            </div>
+	          </center>
+       </div> 
+       )
+  }
+}
+
+
+const mapStateToProps = (state) => {
+  console.log(state)
+  return {
+    counter: state.counter,
+    redux: 'is a power'
+  };
+};
+
+const mapDispatchToProps = {
+  incrementCounter,
+
+};
+
+export const In = connect(mapStateToProps, mapDispatchToProps)(Inn);
+
+

src/components/sign-up/sign-up.css

@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+#second {
+    width: 50%;
+    border: 4px solid black;
+    margin-top: 100px;
+}
+#signIn {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}
+#logo {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}
+#up {
+    width: 50%;
+    border: 4px solid black;
+    margin-top: 100px;
+    padding: 20px;
+}
+#signUp {
+    float: right;
+    margin: 20px;
+    padding: 20px;
+}

src/components/sign-up/sign-up.js

@@ -0,0 +1,104 @@
+import React, {Component} from 'react';
+import {
+  Link,
+  BrowserRouter,
+  Route,
+  Switch,
+  withRouter,
+
+} from "react-router-dom";
+import './sign-up.css'
+
+var user1 = {
+  email:"", 
+  user:"", 
+  password:""
+}
+let url2 = 'https://flatearth-api.herokuapp.com/api/v1/auth/signup'
+class Up extends Component{
+   constructor(props){
+    super(props);
+    this.state = {
+    emailS: '',
+    userS: '',
+    passwordS: '',
+  };
+  }
+
+
+  inputChangeEmail = (event)=> {
+    this.setState({
+    emailS: event.target.value,
+    });
+  } 
+  inputChangeUser = (event)=> {
+    this.setState({
+    userS: event.target.value,
+    });
+  } 
+  inputChangePassword = (event)=> {
+    this.setState({
+    passwordS: event.target.value,
+    });
+  } 
+
+  addToUser =()=>{
+    const {emailS,userS,passwordS} = this.state;
+
+    user1.email = emailS
+    user1.user = userS
+    user1.password = passwordS
+    fetch( url2 , {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(user1)
+        }).then(user => {
+            return user.json()
+        }).then(us => {
+            console.log(us);
+        });
+    console.log(user1);
+  }
+
+
+
+
+  render(){
+    const {emailS,userS,passwordS} = this.state;
+
+
+    return(
+			<div>
+        <div id="first">
+          <center>
+            <div id="signIn"><Link to ='/home' exact>Sign-In</Link></div>
+            <div id="logo"><img src alt="logo" /></div>
+          </center>
+        </div>
+        <center>
+          <div id="up">
+            <b>email</b><br />
+            <input type="text" 
+              value={emailS}
+              onChange={this.inputChangeEmail}
+            /><br />
+            <b>name</b><br />
+            <input type="text"
+              value={userS}
+              onChange={this.inputChangeUser}
+             /><br />
+            <b>password</b><br />
+            <input type="text" 
+              value={passwordS}
+              onChange={this.inputChangePassword}
+            /><br />
+            <button onClick={this.addToUser}>зарегистрировать</button>
+          </div>
+        </center>
+      </div>
+       )
+  }
+}
+export default Up;