xapu

Untitled

Oct 31st, 2017
104
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. </i>
  93. <i
  94. style={{
  95. display: this.state.legitMail ? 'none' : '',
  96. 'margin-left': '-23px'
  97. }}
  98. >
  99. </i>
  100. </div>
  101.  
  102. <div>
  103. <label for='ConfirmEmail'>Confirm Email</label>
  104. <input
  105. style={{ width: '300px' }}
  106. onChange={e => this.setState({ confirmEmail: e.target.value })}
  107. id='ConfirmEmail'
  108. name='ConfirmEmail'
  109. type='text'
  110. />
  111. <i
  112. style={{
  113. display: this.state.legitMail ? '' : 'none',
  114. 'margin-left': '-23px'
  115. }}
  116. >
  117. </i>
  118. <i
  119. style={{
  120. display: this.state.legitMail ? 'none' : '',
  121. 'margin-left': '-23px'
  122. }}
  123. >
  124. </i>
  125. </div>
  126.  
  127. {/* <label for='Email' class='floatLabel'>User Name</label>
  128. <input
  129. onChange={e => this.setState({ userName: e.target.value })}
  130. id='Email'
  131. name='Email'
  132. type='text'
  133. />
  134.  
  135. <label for='password' class='floatLabel'>Password</label>
  136. <input
  137. onChange={e => this.setState({ password: e.target.value })}
  138. id='password'
  139. name='password'
  140. type='password'
  141. />
  142. <span>Enter a password longer than 8 characters</span>
  143.  
  144. <label for='confirm_password' class='floatLabel'>
  145. Confirm Password
  146. </label>
  147. <input
  148. onChange={e => this.setState({ confirmPassword: e.target.value })}
  149. id='confirm_password'
  150. name='confirm_password'
  151. type='password'
  152. />
  153.  
  154. <div>
  155. <input
  156. onChange={() => {
  157. this.setState({
  158. agreeWithTerms: !this.state.agreeWithTerms
  159. })
  160. }}
  161. id='checkBox'
  162. type='checkbox'
  163. />
  164. <label for='checkBox'>
  165. I agree with the terms
  166. </label>
  167. </div>
  168.  
  169. <input type='submit' value='Create My Account' id='submit' /> */}
  170. </div>
  171. </div>
  172. )
  173. }
  174. }
  175.  
  176. export default App
RAW Paste Data