Merge pull request #980 from oskarhane/pw-change-retry

oskarhane · web-flow · commit 4ae2ecb35142 · 2019-11-08T13:26:14.000+01:00
Retry reconnection on pw-change
diff --git a/src/browser/modules/Frame/FrameSuccess.jsx b/src/browser/modules/Frame/FrameSuccess.jsx
@@ -20,7 +20,7 @@
 import React from 'react'
 const FrameSuccess = props => {
   if (!props || !props.message) return null
-  return <span style={{ color: 'green' }}>{props.message}</span>
+  return <span className='statusbar--success'>{props.message}</span>
 }
 
 export default FrameSuccess
diff --git a/src/browser/modules/Frame/styled.jsx b/src/browser/modules/Frame/styled.jsx
@@ -126,6 +126,12 @@ export const StyledFrameStatusbar = styled.div`
   display: flex;
   flex-direction: row;
   flex: none;
+  align-items: center;
+  padding-left: 10px;
+
+  .statusbar--success {
+    color: ${props => props.theme.success};
+  }
 `
 
 export const StyledFrameSidebar = styled.ul`
diff --git a/src/browser/modules/Stream/Auth/ChangePasswordForm.jsx b/src/browser/modules/Stream/Auth/ChangePasswordForm.jsx
@@ -85,8 +85,13 @@ export default class ChangePasswordForm extends Component {
   }
   render () {
     const indexStart = this.props.showExistingPasswordInput ? 1 : 0
+    const { isLoading } = this.props
+    const classNames = []
+    if (isLoading) {
+      classNames.push('isLoading')
+    }
     return (
-      <StyledConnectionForm>
+      <StyledConnectionForm className={classNames.join(' ')}>
         <InputEnterStepping
           steps={this.props.showExistingPasswordInput ? 3 : 2}
           submitAction={this.validateSame}
@@ -108,7 +113,8 @@ export default class ChangePasswordForm extends Component {
                         type: 'password',
                         onChange: this.onExistingPasswordChange,
                         value: this.state.password,
-                        ref: ref => setRefForIndex(0, ref)
+                        ref: ref => setRefForIndex(0, ref),
+                        disabled: isLoading
                       })}
                     />
                   </StyledConnectionFormEntry>
@@ -122,7 +128,8 @@ export default class ChangePasswordForm extends Component {
                       type: 'password',
                       onChange: this.onNewPasswordChange,
                       value: this.state.newPassword,
-                      ref: ref => setRefForIndex(indexStart, ref)
+                      ref: ref => setRefForIndex(indexStart, ref),
+                      disabled: isLoading
                     })}
                   />
                 </StyledConnectionFormEntry>
@@ -136,15 +143,20 @@ export default class ChangePasswordForm extends Component {
                       type: 'password',
                       onChange: this.onNewPasswordChange2,
                       value: this.state.newPassword2,
-                      ref: ref => setRefForIndex(indexStart + 1, ref)
+                      ref: ref => setRefForIndex(indexStart + 1, ref),
+                      disabled: isLoading
                     })}
                   />
                 </StyledConnectionFormEntry>
-                <FormButton
-                  data-testid='changePassword'
-                  label='Change password'
-                  {...getSubmitProps()}
-                />
+                <Render if={!isLoading}>
+                  <FormButton
+                    data-testid='changePassword'
+                    label='Change password'
+                    disabled={isLoading}
+                    {...getSubmitProps()}
+                  />
+                </Render>
+                <Render if={isLoading}>Please wait...</Render>
               </React.Fragment>
             )
           }}
diff --git a/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx b/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx
@@ -19,6 +19,7 @@
  */
 
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 import ConnectionForm from './ConnectionForm'
 import FrameTemplate from '../../Frame/FrameTemplate'
@@ -27,6 +28,7 @@ import Render from 'browser-components/Render'
 import { H3 } from 'browser-components/headers'
 import { Lead } from 'browser-components/Text'
 import { StyledConnectionAside } from './styled'
+import { getActiveConnection } from 'shared/modules/connections/connectionsDuck'
 
 export class ChangePasswordFrame extends Component {
   constructor (props) {
@@ -56,22 +58,25 @@ export class ChangePasswordFrame extends Component {
           <H3>Password change</H3>
           <Render if={!this.state.success}>
             <Lead>
-              Enter your current password and the new twice to change your
-              password.
+              {this.props.activeConnection
+                ? 'Enter your current password and the new twice to change your password.'
+                : 'Please connect to a database to change the password.'}
             </Lead>
           </Render>
           <Render if={this.state.success}>
             <Lead>Password change successful</Lead>
           </Render>
         </StyledConnectionAside>
 
-        <ConnectionForm
-          {...this.props}
-          error={this.error}
-          onSuccess={this.onSuccess}
-          forcePasswordChange
-          showExistingPasswordInput
-        />
+        <Render if={this.props.activeConnection}>
+          <ConnectionForm
+            {...this.props}
+            error={this.error}
+            onSuccess={this.onSuccess}
+            forcePasswordChange
+            showExistingPasswordInput
+          />
+        </Render>
       </React.Fragment>
     )
     return (
@@ -88,4 +93,14 @@ export class ChangePasswordFrame extends Component {
     )
   }
 }
-export default ChangePasswordFrame
+
+const mapStateToProps = state => {
+  return {
+    activeConnection: getActiveConnection(state)
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  () => ({})
+)(ChangePasswordFrame)
diff --git a/src/browser/modules/Stream/Auth/ConnectionForm.jsx b/src/browser/modules/Stream/Auth/ConnectionForm.jsx
@@ -26,7 +26,8 @@ import {
   getActiveConnection,
   setActiveConnection,
   updateConnection,
-  CONNECT
+  CONNECT,
+  VERIFY_CREDENTIALS
 } from 'shared/modules/connections/connectionsDuck'
 import { getInitCmd } from 'shared/modules/settings/settingsDuck'
 import { executeSystemCommand } from 'shared/modules/commands/commandsDuck'
@@ -49,6 +50,7 @@ export class ConnectionForm extends Component {
     this.state = {
       ...connection,
       isConnected: isConnected,
+      isLoading: false,
       passwordChangeNeeded: props.passwordChangeNeeded || false,
       forcePasswordChange: props.forcePasswordChange || false,
       successCallback: props.onSuccess || (() => {}),
@@ -57,24 +59,41 @@ export class ConnectionForm extends Component {
   }
   tryConnect = (password, doneFn) => {
     this.props.error({})
-    this.props.bus.self(CONNECT, { ...this.state, password }, res => {
-      doneFn(res)
-    })
+    this.props.bus.self(
+      VERIFY_CREDENTIALS,
+      { ...this.state, password },
+      res => {
+        doneFn(res)
+      }
+    )
   }
-  connect = (doneFn = () => {}) => {
+  connect = (
+    doneFn = () => {},
+    onError = null,
+    noResetConnectionOnFail = false
+  ) => {
     this.props.error({})
-    this.props.bus.self(CONNECT, this.state, res => {
-      doneFn()
-      if (res.success) {
-        this.saveAndStart()
-      } else {
-        if (res.error.code === 'Neo.ClientError.Security.CredentialsExpired') {
-          this.setState({ passwordChangeNeeded: true })
+    this.props.bus.self(
+      CONNECT,
+      { ...this.state, noResetConnectionOnFail },
+      res => {
+        doneFn()
+        if (res.success) {
+          this.saveAndStart()
         } else {
-          this.props.error(res.error)
+          if (
+            res.error.code === 'Neo.ClientError.Security.CredentialsExpired'
+          ) {
+            this.setState({ passwordChangeNeeded: true })
+          } else {
+            if (onError) {
+              return onError(res)
+            }
+            this.props.error(res.error)
+          }
         }
       }
-    })
+    )
   }
   onUsernameChange (event) {
     const username = event.target.value
@@ -98,10 +117,13 @@ export class ConnectionForm extends Component {
     this.props.error({})
   }
   onChangePassword ({ newPassword, error }) {
+    this.setState({ isLoading: true })
     if (error && error.code) {
+      this.setState({ isLoading: false })
       return this.props.error(error)
     }
     if (this.state.password === null) {
+      this.setState({ isLoading: false })
       return this.props.error({ message: 'Please set existing password' })
     }
     this.props.error({})
@@ -117,9 +139,38 @@ export class ConnectionForm extends Component {
       response => {
         if (response.success) {
           return this.setState({ password: newPassword }, () => {
-            this.connect()
+            let retries = 5
+            const retryFn = res => {
+              // New password not accepted yet, initiate retry
+              if (res.error.code === 'Neo.ClientError.Security.Unauthorized') {
+                retries--
+                if (retries > 0) {
+                  setTimeout(
+                    () =>
+                      this.connect(
+                        () => {
+                          this.setState({ isLoading: false })
+                        },
+                        retryFn,
+                        true
+                      ),
+                    200
+                  )
+                }
+              } else {
+                this.props.error(res.error)
+              }
+            }
+            this.connect(
+              () => {
+                this.setState({ isLoading: false })
+              },
+              retryFn,
+              true
+            )
           })
         }
+        this.setState({ isLoading: false })
         this.props.error(response.error)
       }
     )
@@ -160,7 +211,12 @@ export class ConnectionForm extends Component {
           showExistingPasswordInput={this.props.showExistingPasswordInput}
           onChangePasswordClick={this.onChangePassword.bind(this)}
           onChange={this.onChangePasswordChange.bind(this)}
-          tryConnect={this.tryConnect}
+          tryConnect={(password, doneFn) => {
+            this.setState({ isLoading: true }, () =>
+              this.tryConnect(password, doneFn)
+            )
+          }}
+          isLoading={this.state.isLoading}
         >
           {this.props.children}
         </ChangePasswordForm>
diff --git a/src/browser/modules/Stream/Auth/styled.jsx b/src/browser/modules/Stream/Auth/styled.jsx
@@ -24,6 +24,10 @@ import { StyledFrameAside } from '../../Frame/styled'
 
 export const StyledConnectionForm = styled.form`
   padding: 0 15px;
+
+  &.isLoading {
+    opacity: 0.5;
+  }
 `
 export const StyledConnectionAside = styled(StyledFrameAside)``
 export const StyledConnectionFormEntry = styled.div`
diff --git a/src/browser/modules/User/UserAdd.jsx b/src/browser/modules/User/UserAdd.jsx
diff --git a/src/shared/modules/connections/connectionsDuck.js b/src/shared/modules/connections/connectionsDuck.js
diff --git a/src/shared/rootEpic.js b/src/shared/rootEpic.js

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`import React from 'react'`
`21`	`21`	`const FrameSuccess = props => {`
`22`	`22`	`if (!props \|\| !props.message) return null`
`23`		`- return <span style={{ color: 'green' }}>{props.message}</span>`
	`23`	`+ return <span className='statusbar--success'>{props.message}</span>`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`export default FrameSuccess`