SHARE
TWEET

Untitled

a guest Mar 23rd, 2019 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import '../stylesheets/SignForms.css';
  3. import {Link, NavLink, Redirect } from 'react-router-dom';
  4. import Routing from '../authRoutes'
  5. import image from "../image2.jpg";
  6. const axios = require('axios');
  7.  
  8. class SignInForm extends Component {
  9.     constructor() {
  10.         super();
  11.  
  12.         this.state = {
  13.             email: '',
  14.             password: '',
  15.             loggedIn:false
  16.         };
  17.  
  18.         this.handleChange = this.handleChange.bind(this);
  19.         this.handleSubmit = this.handleSubmit.bind(this);
  20.     }
  21.  
  22.     handleChange(e) {
  23.         let target = e.target;
  24.         let value = target.type === 'checkbox' ? target.checked : target.value;
  25.         let name = target.name;
  26.  
  27.         this.setState({
  28.             [name]: value
  29.         });
  30.  
  31.     }
  32.  
  33.     handleSubmit(e) {
  34.         e.preventDefault();
  35.  
  36.         console.log('The form was submitted with the following data:');
  37.         console.log(this.state);
  38.  
  39.         axios.post('http://localhost:9000/api/users/auth',{},{
  40.             auth:{
  41.                 username:this.state.email, password:this.state.password
  42.             }
  43.         }).then(response=> {
  44.             console.log(response);
  45.             sessionStorage.setItem('token',response.data.token)
  46.             this.setState({loggedIn:true})
  47.             console.log(this.state)
  48.  
  49.         })
  50.             .catch(error=>{
  51.                 alert("Wrong username or password!");
  52.                 console.log(error);
  53.             });
  54.  
  55.  
  56.     }
  57.  
  58.     render() {
  59.         if(this.state.loggedIn)
  60.         {
  61.             console.log('Przekierowanie.')
  62.            return <Redirect to='/menu'/>
  63.         }
  64.         return (
  65.  
  66.             <div className="SignInContainer">
  67.                 <div className="App__Aside">
  68.                     {/*<img src={image} alt="logo" />*/}
  69.  
  70.                 </div>
  71.                 <div className="App__Form">
  72.                 <div className="PageSwitcher">
  73.                 <NavLink to="/sign-in" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
  74.                 <NavLink exact to="/" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
  75.                 </div>
  76.  
  77.                 <div className="FormTitle">
  78.                 <NavLink to="/sign-in" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
  79.                 </div>
  80.  
  81.  
  82.  
  83.  
  84.             <div className="FormCenter">
  85.                 <form onSubmit={this.handleSubmit} className="FormFields">
  86.                     <div className="FormField">
  87.                         <label className="FormField__Label" htmlFor="email">E-Mail Address</label>
  88.                         <input type="email" id="email" className="FormField__Input" placeholder="Enter your email" name="email" value={this.state.email} onChange={this.handleChange} />
  89.                     </div>
  90.  
  91.                     <div className="FormField">
  92.                         <label className="FormField__Label" htmlFor="password">Password</label>
  93.                         <input type="password" id="password" className="FormField__Input" placeholder="Enter your password" name="password" value={this.state.password} onChange={this.handleChange} />
  94.                     </div>
  95.  
  96.                     <div className="FormField">
  97.                         <button className="FormField__Button mr-20">Sign In</button> <Link to="/" className="FormField__Link">Create an account</Link>
  98.                     </div>
  99.                 </form>
  100.             </div>
  101.             </div>
  102.             </div>
  103.         );
  104.     }
  105. }
  106.  
  107. export default SignInForm;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top