1
1
import React , { Component } from 'react' ;
2
2
import { Link as RouterLink } from 'react-router-dom' ;
3
- import { Formik , Form , withFormik } from 'formik' ;
3
+ import { Formik , Form } from 'formik' ;
4
4
import * as Yup from 'yup' ;
5
5
6
6
import {
@@ -64,10 +64,11 @@ class SignIn extends Component {
64
64
* This should send an API request to identify the user.
65
65
*
66
66
* @param {string } username
67
+ * @param {object } form
67
68
*
68
69
* @return {undefined }
69
70
*/
70
- identify = async ( username = null ) => {
71
+ identify = async ( username = null , form = { } ) => {
71
72
this . setState ( { loading : true } ) ;
72
73
73
74
try {
@@ -96,9 +97,10 @@ class SignIn extends Component {
96
97
}
97
98
98
99
const { errors } = error . response . data ;
99
- const { setErrors } = this . props ;
100
100
101
- setErrors ( errors ) ;
101
+ if ( errors ) {
102
+ form . setErrors ( errors ) ;
103
+ }
102
104
103
105
this . setState ( { loading : false } ) ;
104
106
}
@@ -109,10 +111,11 @@ class SignIn extends Component {
109
111
* Reload if authenticated.
110
112
*
111
113
* @param {object } values
114
+ * @param {object } form
112
115
*
113
116
* @return {undefined }
114
117
*/
115
- signin = async values => {
118
+ signin = async ( values , form = { } ) => {
116
119
this . setState ( { loading : true } ) ;
117
120
118
121
try {
@@ -138,9 +141,10 @@ class SignIn extends Component {
138
141
}
139
142
140
143
const { errors } = error . response . data ;
141
- const { setErrors } = this . props ;
142
144
143
- setErrors ( errors ) ;
145
+ if ( errors ) {
146
+ form . setErrors ( errors ) ;
147
+ }
144
148
145
149
this . setState ( { loading : false } ) ;
146
150
}
@@ -149,21 +153,24 @@ class SignIn extends Component {
149
153
/**
150
154
* Event listener that is triggered when the sign in form is submitted.
151
155
*
156
+ * @param {object } event
157
+ * @param {object } form
158
+ *
152
159
* @return {undefined }
153
160
*/
154
- handleSigninSubmit = async ( values , { setSubmitting } ) => {
155
- setSubmitting ( false ) ;
161
+ handleSigninSubmit = async ( values , form ) => {
162
+ form . setSubmitting ( false ) ;
156
163
157
164
try {
158
165
const { identified } = this . state ;
159
166
160
167
if ( ! identified ) {
161
- await this . identify ( values . username ) ;
168
+ await this . identify ( values . username , form ) ;
162
169
163
170
return ;
164
171
}
165
172
166
- await this . signin ( values ) ;
173
+ await this . signin ( values , form ) ;
167
174
} catch ( error ) {
168
175
this . setState ( {
169
176
loading : false ,
@@ -242,7 +249,7 @@ class SignIn extends Component {
242
249
} ) }
243
250
>
244
251
{ ( { values, handleChange, errors, isSubmitting } ) => (
245
- < Form >
252
+ < Form autoComplete = "off" >
246
253
< Grid container direction = "column" >
247
254
{ ! identified ? (
248
255
< >
@@ -395,6 +402,4 @@ const styles = theme => ({
395
402
} ,
396
403
} ) ;
397
404
398
- const Styled = withStyles ( styles ) ( SignIn ) ;
399
-
400
- export default withFormik ( { } ) ( Styled ) ;
405
+ export default withStyles ( styles ) ( SignIn ) ;
0 commit comments