Add url param to preselect in connect frame (#1755)

* Add url param to preselect in connect frame

* Reset connecting state on failed connection

Author: OskarDamkjaer

src/browser/modules/Stream/Auth/ConnectForm.tsx

@@ -71,10 +71,11 @@ interface ConnectFormProps {
   SSOProviders: SSOProvider[]
   SSOLoading?: boolean
   onSSOProviderClicked: () => void
+  connecting: boolean
+  setIsConnecting: (c: boolean) => void
 }
 
 export default function ConnectForm(props: ConnectFormProps): JSX.Element {
-  const [connecting, setConnecting] = useState(false)
   const [scheme, setScheme] = useState(
     props.allowedSchemes ? `${getScheme(props.host)}://` : ''
   )
@@ -113,8 +114,8 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
 
   const onConnectClick = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    setConnecting(true)
-    props.onConnectClick(() => setConnecting(false))
+    props.setIsConnecting(true)
+    props.onConnectClick(() => props.setIsConnecting(false))
   }
 
   const hasSecureSchemes = ['neo4j+s', 'bolt+s'].every(scheme =>
@@ -268,7 +269,7 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
             </StyledSSOError>
           )}
 
-        {connecting
+        {props.connecting
           ? 'Connecting...'
           : props.authenticationMethod !== SSO && (
               <FormButton

src/browser/modules/Stream/Auth/ConnectionForm.tsx

@@ -80,8 +80,12 @@ export class ConnectionForm extends Component<any, ConnectionFormState> {
   constructor(props: any) {
     super(props)
     const connection = this.getConnection()
+
+    const { searchParams } = new URL(window.location.href)
+    const searchParamAuthMethod = searchParams.get('preselectAuthMethod')
     const authenticationMethod =
-      (connection && connection.authenticationMethod) || NATIVE
+      searchParamAuthMethod ??
+      ((connection && connection.authenticationMethod) || NATIVE)
 
     const allowedSchemes = getAllowedSchemesForHost(
       connection.host,
@@ -94,13 +98,22 @@ export class ConnectionForm extends Component<any, ConnectionFormState> {
       host: generateBoltUrl(allowedSchemes, connection.host),
       authenticationMethod,
       isLoading: false,
+      connecting: false,
       passwordChangeNeeded: props.passwordChangeNeeded || false,
       forcePasswordChange: props.forcePasswordChange || false,
       successCallback: props.onSuccess || (() => {}),
       used: props.isConnected
     }
   }
 
+  componentDidMount() {
+    const { authenticationMethod } = this.state
+    if (authenticationMethod === NO_AUTH) {
+      this.connect(() => this.setState({ connecting: false }))
+      this.setState({ connecting: true })
+    }
+  }
+
   getConnection() {
     return this.props.discoveredData || this.props.frame.connectionData || {}
   }
@@ -395,6 +408,10 @@ export class ConnectionForm extends Component<any, ConnectionFormState> {
           onAuthenticationMethodChange={this.onAuthenticationMethodChange.bind(
             this
           )}
+          connecting={this.state.connecting}
+          setIsConnecting={(connecting: boolean) =>
+            this.setState({ connecting })
+          }
           host={host}
           SSOError={this.state.SSOError}
           SSOProviders={this.state.SSOProviders || []}