registration.js 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import React from 'react'
  2. import { Field, reduxForm } from 'redux-form'
  3. import Authbuttons from './authButtons'
  4. import { regValidate } from '../../utils/regValidate'
  5. import { regRenderField } from '../../common/regRenderField'
  6. const RegistrForm = props => {
  7. const { handleSubmit, pristine, reset, postUsersData } = props
  8. const submit = (values) => {
  9. values.avatar = "https://site.com"
  10. values.isAdmin = 0
  11. values.description = "bad_boy"
  12. postUsersData(values)
  13. }
  14. return (
  15. <div className="formdiv">
  16. <div>
  17. <Authbuttons />
  18. <form onSubmit={handleSubmit(submit)} className="form">
  19. <div>
  20. <div>
  21. <Field
  22. name="login"
  23. component={regRenderField}
  24. type="text"
  25. placeholder="Логин"
  26. className="input"
  27. />
  28. </div>
  29. <div>
  30. <Field
  31. name="password"
  32. component={regRenderField}
  33. type="password"
  34. placeholder="Пароль"
  35. className="input"
  36. />
  37. </div>
  38. <div>
  39. <Field
  40. name="name"
  41. component={regRenderField}
  42. type="text"
  43. placeholder="Имя"
  44. className="input"
  45. />
  46. </div>
  47. <div>
  48. <Field
  49. name="phone"
  50. component={regRenderField}
  51. type="text"
  52. placeholder="+380XXXXXXXX"
  53. className="input"
  54. />
  55. </div>
  56. <div>
  57. <Field
  58. name="email"
  59. component={regRenderField}
  60. type="email"
  61. placeholder="email@example.com"
  62. className="input"
  63. />
  64. </div>
  65. </div>
  66. <div>
  67. <button type="submit"
  68. disabled={pristine}
  69. className="button"
  70. >
  71. Отправить
  72. </button>
  73. <button type="button"
  74. disabled={pristine}
  75. onClick={reset}
  76. className="button"
  77. >
  78. Очистить поля
  79. </button>
  80. </div>
  81. </form>
  82. </div>
  83. </div>
  84. )
  85. }
  86. export default reduxForm({ form: 'registrForm', validate: regValidate })(RegistrForm)