fix(login): auto fill bug and focus

- Chrome autofill does not trigger a onChange event nor is it possible to access the value with js. This is a security feature. Also see: facebook/react#1159 onAnimationStart workaround was implemented. Refs: TOCDEV-710 Changelog: Fix Chrome autofill bug
tocco · Aug 5, 2019 · cb3b9b5 · cb3b9b5
1 parent 266b999
commit cb3b9b5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/login/src/components/LoginForm/LoginForm.js b/packages/login/src/components/LoginForm/LoginForm.js
@@ -17,17 +17,29 @@ import {
 import {Pages} from '../../types/Pages'
 
 export class LoginForm extends Component {
+  state = {
+    autoFill: false
+  }
+
   handleSubmit(e) {
     e.preventDefault()
     this.props.login(this.props.username, this.props.password)
   }
 
   handleUsernameChange(e) {
     this.props.setUsername(e.target.value)
+    this.setState({...this.state, autoFill: false})
   }
 
   handlePasswordChange(e) {
     this.props.setPassword(e.target.value)
+    this.setState({...this.state, autoFill: false})
+  }
+
+  handleAutoFill = e => {
+    if (e.animationName === 'onAutoFillStart') {
+      this.setState({...this.state, autoFill: true})
+    }
   }
 
   render() {
@@ -44,7 +56,7 @@ export class LoginForm extends Component {
         <form onSubmit={this.handleSubmit.bind(this)}>
 
           <StatedValue
-            hasValue={!!this.props.username}
+            hasValue={!!this.props.username || this.state.autoFill}
             id="login-username"
             label={this.msg('client.login.form.userPlaceholder')}
           >
@@ -57,12 +69,14 @@ export class LoginForm extends Component {
                 required
                 type="text"
                 value={this.props.username}
+                onAnimationStart={this.handleAutoFill}
+                onFocus={e => e.target.select()}
               />
             </StyledLoginFormInputWrapper>
           </StatedValue>
 
           <StatedValue
-            hasValue={!!this.props.password}
+            hasValue={!!this.props.password || this.state.autoFill}
             id="login-password"
             label={this.msg('client.login.form.passwordPlaceholder')}
           >
@@ -75,6 +89,8 @@ export class LoginForm extends Component {
                 required
                 type="password"
                 value={this.props.password}
+                onAnimationStart={this.handleAutoFill}
+                onFocus={e => e.target.select()}
               />
             </StyledLoginFormInputWrapper>
           </StatedValue>
@@ -91,7 +107,9 @@ export class LoginForm extends Component {
 
           <ButtonGroup look="raised">
             <Button
-              disabled={this.props.loginPending || this.props.username === '' || this.props.password === ''}
+              disabled={
+                !this.state.autoFill
+                && (this.props.loginPending || this.props.username === '' || this.props.password === '')}
               ink="primary"
               label={this.msg('client.login.form.button')}
               pending={this.props.loginPending}

diff --git a/packages/login/src/components/StyledLoginForm.js b/packages/login/src/components/StyledLoginForm.js
@@ -7,9 +7,17 @@ import {StyledButton} from 'tocco-ui/src/Button'
 import {StyledButtonGroup} from 'tocco-ui/src/ButtonGroup'
 
 export const StyledLoginFormInput = styled.input`
+  @keyframes onAutoFillStart { from {} }
+
   && {
-    ${StyledInputCss}
+    transition: background-color 50000s, color 50000s, filter 50000s;
+     &:-webkit-autofill {
+      animation-duration: 50000s;
+      animation-name: onAutoFillStart;
+     }
   }
+  
+  ${StyledInputCss}
 `
 
 export const StyledLoginFormInputWrapper = styled.div`