SHARE
TWEET

Untitled

xapu Oct 31st, 2017 95 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import './App.css'
  3.  
  4. class App extends Component {
  5.   constructor () {
  6.     super()
  7.  
  8.     this.state = {
  9.       email: '',
  10.       confirmEmail: '',
  11.       userName: '',
  12.       password: '',
  13.       confirmPassword: '',
  14.       agreeWithTerms: false,
  15.       legitMail: false,
  16.       legitName: true,
  17.       legitPassword: true
  18.     }
  19.  
  20.     this.submitReg = () => {
  21.       let payload = this.state
  22.  
  23.       let data = new FormData()
  24.  
  25.       // data.append('json', JSON.stringify(payload))
  26.  
  27.       console.log(payload)
  28.  
  29.       fetch('http://localhost:5000/auth/signup', {
  30.         headers: { 'Content-Type': 'application/json' },
  31.         method: 'POST',
  32.         body: JSON.stringify(payload)
  33.       })
  34.         .then(r => {
  35.           return r.json()
  36.         })
  37.         .then(pr => {
  38.           console.log(pr)
  39.         })
  40.     }
  41.  
  42.     this.submiLog = () => {}
  43.  
  44.     this.promisfyState = newState => {
  45.       return new Promise(res => {
  46.         this.setState(newState, res)
  47.       })
  48.     }
  49.   }
  50.  
  51.   async componentDidUpdate () {
  52.     if (this.state.email !== '') {
  53.       if (this.state.email === this.state.confirmEmail) {
  54.         await this.promisfyState({ legitMail: true })
  55.       } else {
  56.         await this.promisfyState({ legitMail: false })
  57.       }
  58.     }
  59.   }
  60.  
  61.   shouldComponentUpdate (nextProps, nextState) {
  62.     if (this.state.email === nextState.email) {
  63.       return false
  64.     } else {
  65.       return true
  66.     }
  67.   }
  68.  
  69.   render () {
  70.     return (
  71.       <div className='App'>
  72.         {console.log(this.state.legitMail)}
  73.         <div style={{ display: 'inline-grid' }}>
  74.           {console.log(this.state)}
  75.           <h2>Sign Up</h2>
  76.           <label for='Email'>Email</label>
  77.           <div>
  78.             <input
  79.               style={{ width: '300px' }}
  80.               onChange={async e =>
  81.                 await this.promisfyState({ email: e.target.value })}
  82.               id='Email'
  83.               name='Email'
  84.               type='text'
  85.             />
  86.             <i
  87.               style={{
  88.                 display: this.state.legitMail ? '' : 'none',
  89.                 'margin-left': '-23px'
  90.               }}
  91.             >
  92.               ✅
  93.             </i>
  94.             <i
  95.               style={{
  96.                 display: this.state.legitMail ? 'none' : '',
  97.                 'margin-left': '-23px'
  98.               }}
  99.             >
  100.               ❌
  101.             </i>
  102.           </div>
  103.  
  104.           <div>
  105.             <label for='ConfirmEmail'>Confirm Email</label>
  106.             <input
  107.               style={{ width: '300px' }}
  108.               onChange={e => this.setState({ confirmEmail: e.target.value })}
  109.               id='ConfirmEmail'
  110.               name='ConfirmEmail'
  111.               type='text'
  112.             />
  113.             <i
  114.               style={{
  115.                 display: this.state.legitMail ? '' : 'none',
  116.                 'margin-left': '-23px'
  117.               }}
  118.             >
  119.               ✅
  120.             </i>
  121.             <i
  122.               style={{
  123.                 display: this.state.legitMail ? 'none' : '',
  124.                 'margin-left': '-23px'
  125.               }}
  126.             >
  127.               ❌
  128.             </i>
  129.           </div>
  130.  
  131.           {/* <label for='Email' class='floatLabel'>User Name</label>
  132.           <input
  133.             onChange={e => this.setState({ userName: e.target.value })}
  134.             id='Email'
  135.             name='Email'
  136.             type='text'
  137.           />
  138.  
  139.           <label for='password' class='floatLabel'>Password</label>
  140.           <input
  141.             onChange={e => this.setState({ password: e.target.value })}
  142.             id='password'
  143.             name='password'
  144.             type='password'
  145.           />
  146.           <span>Enter a password longer than 8 characters</span>
  147.  
  148.           <label for='confirm_password' class='floatLabel'>
  149.             Confirm Password
  150.           </label>
  151.           <input
  152.             onChange={e => this.setState({ confirmPassword: e.target.value })}
  153.             id='confirm_password'
  154.             name='confirm_password'
  155.             type='password'
  156.           />
  157.  
  158.           <div>
  159.             <input
  160.               onChange={() => {
  161.                 this.setState({
  162.                   agreeWithTerms: !this.state.agreeWithTerms
  163.                 })
  164.               }}
  165.               id='checkBox'
  166.               type='checkbox'
  167.             />
  168.             <label for='checkBox'>
  169.               I agree with the terms
  170.             </label>
  171.           </div>
  172.  
  173.           <input type='submit' value='Create My Account' id='submit' /> */}
  174.         </div>
  175.       </div>
  176.     )
  177.   }
  178. }
  179.  
  180. export default App
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