From 609327a71b2803edde7c68d726596baf2e275a6e Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Wed, 9 Jan 2019 11:01:41 -0800
Subject: [PATCH 1/4] Add interval to sign in that checks for profile data

---
 ui/src/Signin.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx
index 3247bbbb6c..8b24657747 100644
--- a/ui/src/Signin.tsx
+++ b/ui/src/Signin.tsx
@@ -8,6 +8,7 @@ import {trySources} from 'src/onboarding/apis'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SigninPage from 'src/onboarding/containers/SigninPage'
 import Notifications from 'src/shared/components/notifications/Notifications'
+import {getMe} from 'src/shared/apis/v2/user'
 
 // Types
 import {RemoteDataState} from 'src/types'
@@ -21,8 +22,11 @@ interface Props {
   children: ReactElement<any>
 }
 
+const FETCH_WAIT = 60000
+
 @ErrorHandling
 export class Signin extends PureComponent<Props, State> {
+  private intervalID: NodeJS.Timer
   constructor(props: Props) {
     super(props)
 
@@ -36,6 +40,7 @@ export class Signin extends PureComponent<Props, State> {
     const isSourcesAllowed = await trySources()
     const isUserSignedIn = isSourcesAllowed
     this.setState({loading: RemoteDataState.Done, isUserSignedIn})
+    this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
   }
 
   public render() {
@@ -65,8 +70,18 @@ export class Signin extends PureComponent<Props, State> {
   }
 
   private handleSignInUser = () => {
+    this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
     this.setState({isUserSignedIn: true})
   }
+
+  private checkForLogin = async () => {
+    try {
+      await getMe()
+    } catch (error) {
+      clearInterval(this.intervalID)
+      this.setState({isUserSignedIn: false})
+    }
+  }
 }
 
 export default Signin

From 2e8a8c5c720b7580400c4f625e56830637aa5b8b Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Wed, 9 Jan 2019 11:13:39 -0800
Subject: [PATCH 2/4] Update Signin with router for redirect to login page

---
 ui/src/Signin.tsx | 12 ++++++++++--
 ui/src/index.tsx  |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx
index 8b24657747..f3111c9352 100644
--- a/ui/src/Signin.tsx
+++ b/ui/src/Signin.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {ReactElement, PureComponent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
 
 // APIs
 import {trySources} from 'src/onboarding/apis'
@@ -18,10 +19,12 @@ interface State {
   isUserSignedIn: boolean
 }
 
-interface Props {
+interface OwnProps {
   children: ReactElement<any>
 }
 
+type Props = OwnProps & WithRouterProps
+
 const FETCH_WAIT = 60000
 
 @ErrorHandling
@@ -41,6 +44,9 @@ export class Signin extends PureComponent<Props, State> {
     const isUserSignedIn = isSourcesAllowed
     this.setState({loading: RemoteDataState.Done, isUserSignedIn})
     this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
+    if (!isUserSignedIn) {
+      this.props.router.push('/signin')
+    }
   }
 
   public render() {
@@ -72,6 +78,7 @@ export class Signin extends PureComponent<Props, State> {
   private handleSignInUser = () => {
     this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
     this.setState({isUserSignedIn: true})
+    this.props.router.push('/dashboards')
   }
 
   private checkForLogin = async () => {
@@ -80,8 +87,9 @@ export class Signin extends PureComponent<Props, State> {
     } catch (error) {
       clearInterval(this.intervalID)
       this.setState({isUserSignedIn: false})
+      this.props.router.push('/signin')
     }
   }
 }
 
-export default Signin
+export default withRouter(Signin)
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 5c7f69b540..0af1d38ae8 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -19,6 +19,7 @@ import SetActiveSource from 'src/shared/containers/SetActiveSource'
 import GetOrganizations from 'src/shared/containers/GetOrganizations'
 import Setup from 'src/Setup'
 import Signin from 'src/Signin'
+import SigninPage from 'src/onboarding/containers/SigninPage'
 import Logout from 'src/Logout'
 import TaskPage from 'src/tasks/containers/TaskPage'
 import TasksPage from 'src/tasks/containers/TasksPage'
@@ -94,6 +95,7 @@ class Root extends PureComponent {
                     <Route component={App}>
                       <Route component={GetSources}>
                         <Route path="/" component={SetActiveSource}>
+                          <Route path="/signin" component={SigninPage} />
                           <IndexRedirect to="/dashboards" />
                           <Route
                             path="dashboards/:dashboardID"

From 3813ac7dc9c4fa4c059306c2d55f5472ce942ca1 Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Wed, 9 Jan 2019 13:47:47 -0800
Subject: [PATCH 3/4] Add Context so the handler is passed as props in the
 signinpage component

Co-authoerd-by: Delmer Reed <delmer814@gmail.com>
---
 ui/src/Signin.tsx                           |  24 ++--
 ui/src/index.tsx                            |   2 +-
 ui/src/onboarding/components/SigninForm.tsx | 132 ++++++++++++++++++
 ui/src/onboarding/containers/SigninPage.tsx | 146 +++-----------------
 ui/src/utils/auth.tsx                       |   7 +
 5 files changed, 167 insertions(+), 144 deletions(-)
 create mode 100644 ui/src/onboarding/components/SigninForm.tsx
 create mode 100644 ui/src/utils/auth.tsx

diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx
index f3111c9352..3fde313ea5 100644
--- a/ui/src/Signin.tsx
+++ b/ui/src/Signin.tsx
@@ -7,10 +7,11 @@ import {trySources} from 'src/onboarding/apis'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import SigninPage from 'src/onboarding/containers/SigninPage'
-import Notifications from 'src/shared/components/notifications/Notifications'
 import {getMe} from 'src/shared/apis/v2/user'
 
+// Utils
+import {AuthContext} from 'src/utils/auth'
+
 // Types
 import {RemoteDataState} from 'src/types'
 
@@ -43,28 +44,21 @@ export class Signin extends PureComponent<Props, State> {
     const isSourcesAllowed = await trySources()
     const isUserSignedIn = isSourcesAllowed
     this.setState({loading: RemoteDataState.Done, isUserSignedIn})
-    this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
     if (!isUserSignedIn) {
       this.props.router.push('/signin')
     }
   }
 
   public render() {
-    const {isUserSignedIn} = this.state
-
     if (this.isLoading) {
       return <div className="page-spinner" />
     }
-    if (!isUserSignedIn) {
-      return (
-        <div className="chronograf-root">
-          <Notifications inPresentationMode={true} />
-          <SigninPage onSignInUser={this.handleSignInUser} />
-        </div>
-      )
-    } else {
-      return this.props.children && React.cloneElement(this.props.children)
-    }
+
+    return (
+      <AuthContext.Provider value={{onSignInUser: this.handleSignInUser}}>
+        {this.props.children && React.cloneElement(this.props.children)}
+      </AuthContext.Provider>
+    )
   }
 
   private get isLoading(): boolean {
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 0af1d38ae8..5a9d9c3085 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -90,12 +90,12 @@ class Root extends PureComponent {
                 component={OnboardingWizardPage}
               />
               <Route component={Signin}>
+                <Route path="/signin" component={SigninPage} />
                 <Route component={GetMe}>
                   <Route component={GetOrganizations}>
                     <Route component={App}>
                       <Route component={GetSources}>
                         <Route path="/" component={SetActiveSource}>
-                          <Route path="/signin" component={SigninPage} />
                           <IndexRedirect to="/dashboards" />
                           <Route
                             path="dashboards/:dashboardID"
diff --git a/ui/src/onboarding/components/SigninForm.tsx b/ui/src/onboarding/components/SigninForm.tsx
new file mode 100644
index 0000000000..0fa90d8e4e
--- /dev/null
+++ b/ui/src/onboarding/components/SigninForm.tsx
@@ -0,0 +1,132 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+import {connect} from 'react-redux'
+import _, {get} from 'lodash'
+
+// Components
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  Input,
+  InputType,
+  Form,
+  Grid,
+  Columns,
+  ButtonType,
+} from 'src/clockface'
+
+// APIs
+import {signin} from 'src/onboarding/apis'
+
+// Actions
+import {notify as notifyAction} from 'src/shared/actions/notifications'
+
+// Constants
+import * as copy from 'src/shared/copy/notifications'
+
+// Types
+import {Links} from 'src/types/v2/links'
+import {Notification, NotificationFunc} from 'src/types'
+
+export interface Props {
+  links: Links
+  notify: (message: Notification | NotificationFunc) => void
+  onSignInUser: () => void
+}
+
+interface State {
+  username: string
+  password: string
+}
+
+@ErrorHandling
+class SigninForm extends PureComponent<Props, State> {
+  public state: State = {
+    username: '',
+    password: '',
+  }
+
+  public render() {
+    const {username, password} = this.state
+    return (
+      <Form onSubmit={this.handleSignIn}>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <Form.Element label="Username">
+                <Input
+                  value={username}
+                  onChange={this.handleUsername}
+                  size={ComponentSize.Medium}
+                  autoFocus={true}
+                />
+              </Form.Element>
+            </Grid.Column>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <Form.Element label="Password">
+                <Input
+                  value={password}
+                  onChange={this.handlePassword}
+                  size={ComponentSize.Medium}
+                  type={InputType.Password}
+                />
+              </Form.Element>
+            </Grid.Column>
+            <Grid.Column widthXS={Columns.Twelve}>
+              <Form.Footer>
+                <Button
+                  color={ComponentColor.Primary}
+                  text="Sign In"
+                  size={ComponentSize.Medium}
+                  type={ButtonType.Submit}
+                />
+              </Form.Footer>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Form>
+    )
+  }
+
+  private handleUsername = (e: ChangeEvent<HTMLInputElement>): void => {
+    const username = e.target.value
+    this.setState({username})
+  }
+  private handlePassword = (e: ChangeEvent<HTMLInputElement>): void => {
+    const password = e.target.value
+    this.setState({password})
+  }
+
+  private handleSignIn = async (): Promise<void> => {
+    const {notify, onSignInUser} = this.props
+    const {username, password} = this.state
+    try {
+      await signin({username, password})
+      onSignInUser()
+    } catch (error) {
+      const message = get(error, 'data.msg', '')
+
+      if (!message) {
+        return notify(copy.SigninError)
+      }
+
+      notify({...copy.SigninError, message})
+    }
+  }
+}
+
+const mstp = ({links}) => ({
+  links,
+})
+
+const mdtp = {
+  notify: notifyAction,
+}
+
+export default connect(
+  mstp,
+  mdtp
+)(SigninForm)
diff --git a/ui/src/onboarding/containers/SigninPage.tsx b/ui/src/onboarding/containers/SigninPage.tsx
index 1aad0e8d00..f6a57fb703 100644
--- a/ui/src/onboarding/containers/SigninPage.tsx
+++ b/ui/src/onboarding/containers/SigninPage.tsx
@@ -1,142 +1,32 @@
 // Libraries
-import React, {PureComponent, ChangeEvent} from 'react'
-import {connect} from 'react-redux'
-import _, {get} from 'lodash'
+import React, {PureComponent} from 'react'
+import _ from 'lodash'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import SplashPage from 'src/shared/components/splash_page/SplashPage'
+import SigninForm from 'src/onboarding/components/SigninForm'
 
-import {
-  Button,
-  ComponentColor,
-  ComponentSize,
-  Input,
-  InputType,
-  Form,
-  Grid,
-  Columns,
-  ButtonType,
-} from 'src/clockface'
-
-// APIs
-import {signin} from 'src/onboarding/apis'
-
-// Actions
-import {notify as notifyAction} from 'src/shared/actions/notifications'
-
-// Constants
-import * as copy from 'src/shared/copy/notifications'
-
-// Types
-import {Links} from 'src/types/v2/links'
-import {Notification, NotificationFunc} from 'src/types'
-
-export interface Props {
-  links: Links
-  notify: (message: Notification | NotificationFunc) => void
-  onSignInUser: () => void
-}
-
-interface State {
-  username: string
-  password: string
-}
+// Utils
+import {AuthContext} from 'src/utils/auth'
 
 @ErrorHandling
-class SigninPage extends PureComponent<Props, State> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      username: '',
-      password: '',
-    }
-  }
-
+class SigninPage extends PureComponent<{}> {
   public render() {
-    const {username, password} = this.state
     return (
-      <SplashPage panelWidthPixels={300}>
-        <SplashPage.Panel>
-          <SplashPage.Logo />
-          <SplashPage.Header title="InfluxData" />
-          <Form onSubmit={this.handleSignIn}>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column widthXS={Columns.Twelve}>
-                  <Form.Element label="Username">
-                    <Input
-                      value={username}
-                      onChange={this.handleUsername}
-                      size={ComponentSize.Medium}
-                      autoFocus={true}
-                    />
-                  </Form.Element>
-                </Grid.Column>
-                <Grid.Column widthXS={Columns.Twelve}>
-                  <Form.Element label="Password">
-                    <Input
-                      value={password}
-                      onChange={this.handlePassword}
-                      size={ComponentSize.Medium}
-                      type={InputType.Password}
-                    />
-                  </Form.Element>
-                </Grid.Column>
-                <Grid.Column widthXS={Columns.Twelve}>
-                  <Form.Footer>
-                    <Button
-                      color={ComponentColor.Primary}
-                      text="Sign In"
-                      size={ComponentSize.Medium}
-                      type={ButtonType.Submit}
-                    />
-                  </Form.Footer>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Form>
-        </SplashPage.Panel>
-      </SplashPage>
+      <AuthContext.Consumer>
+        {({onSignInUser}) => (
+          <SplashPage panelWidthPixels={300}>
+            <SplashPage.Panel>
+              <SplashPage.Logo />
+              <SplashPage.Header title="InfluxData" />
+              <SigninForm onSignInUser={onSignInUser} />
+            </SplashPage.Panel>
+          </SplashPage>
+        )}
+      </AuthContext.Consumer>
     )
   }
-
-  private handleUsername = (e: ChangeEvent<HTMLInputElement>): void => {
-    const username = e.target.value
-    this.setState({username})
-  }
-  private handlePassword = (e: ChangeEvent<HTMLInputElement>): void => {
-    const password = e.target.value
-    this.setState({password})
-  }
-
-  private handleSignIn = async (): Promise<void> => {
-    const {notify, onSignInUser} = this.props
-    const {username, password} = this.state
-    try {
-      await signin({username, password})
-      onSignInUser()
-    } catch (error) {
-      const message = get(error, 'data.msg', '')
-
-      if (!message) {
-        return notify(copy.SigninError)
-      }
-
-      notify({...copy.SigninError, message})
-    }
-  }
 }
 
-const mstp = ({links}) => ({
-  links,
-})
-
-const mdtp = {
-  notify: notifyAction,
-}
-
-export default connect(
-  mstp,
-  mdtp
-)(SigninPage)
+export default SigninPage
diff --git a/ui/src/utils/auth.tsx b/ui/src/utils/auth.tsx
new file mode 100644
index 0000000000..0364c43d6c
--- /dev/null
+++ b/ui/src/utils/auth.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface SigninProps {
+  onSignInUser: () => void
+}
+
+export const AuthContext = React.createContext<SigninProps>(null)

From 5b20852b408b5d9baa9bcc4a4f56f5a01862393b Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Wed, 9 Jan 2019 14:22:41 -0800
Subject: [PATCH 4/4] Update index that wraps signin instead of signinpage

---
 ui/src/Signin.tsx                           | 21 +++++++--------------
 ui/src/index.tsx                            |  2 +-
 ui/src/onboarding/components/SigninForm.tsx | 13 ++++++++-----
 ui/src/onboarding/containers/SigninPage.tsx | 21 +++++++--------------
 ui/src/utils/auth.tsx                       |  7 -------
 5 files changed, 23 insertions(+), 41 deletions(-)
 delete mode 100644 ui/src/utils/auth.tsx

diff --git a/ui/src/Signin.tsx b/ui/src/Signin.tsx
index 3fde313ea5..91558ce562 100644
--- a/ui/src/Signin.tsx
+++ b/ui/src/Signin.tsx
@@ -9,9 +9,6 @@ import {trySources} from 'src/onboarding/apis'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {getMe} from 'src/shared/apis/v2/user'
 
-// Utils
-import {AuthContext} from 'src/utils/auth'
-
 // Types
 import {RemoteDataState} from 'src/types'
 
@@ -44,21 +41,23 @@ export class Signin extends PureComponent<Props, State> {
     const isSourcesAllowed = await trySources()
     const isUserSignedIn = isSourcesAllowed
     this.setState({loading: RemoteDataState.Done, isUserSignedIn})
+    this.checkForLogin()
+    this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
     if (!isUserSignedIn) {
       this.props.router.push('/signin')
     }
   }
 
+  public componentWillUnmount() {
+    clearInterval(this.intervalID)
+  }
+
   public render() {
     if (this.isLoading) {
       return <div className="page-spinner" />
     }
 
-    return (
-      <AuthContext.Provider value={{onSignInUser: this.handleSignInUser}}>
-        {this.props.children && React.cloneElement(this.props.children)}
-      </AuthContext.Provider>
-    )
+    return this.props.children && React.cloneElement(this.props.children)
   }
 
   private get isLoading(): boolean {
@@ -69,12 +68,6 @@ export class Signin extends PureComponent<Props, State> {
     )
   }
 
-  private handleSignInUser = () => {
-    this.intervalID = setInterval(this.checkForLogin, FETCH_WAIT)
-    this.setState({isUserSignedIn: true})
-    this.props.router.push('/dashboards')
-  }
-
   private checkForLogin = async () => {
     try {
       await getMe()
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 5a9d9c3085..7a09882d4e 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -89,8 +89,8 @@ class Root extends PureComponent {
                 path="/onboarding/:stepID/:substepID"
                 component={OnboardingWizardPage}
               />
+              <Route path="/signin" component={SigninPage} />
               <Route component={Signin}>
-                <Route path="/signin" component={SigninPage} />
                 <Route component={GetMe}>
                   <Route component={GetOrganizations}>
                     <Route component={App}>
diff --git a/ui/src/onboarding/components/SigninForm.tsx b/ui/src/onboarding/components/SigninForm.tsx
index 0fa90d8e4e..ac1a6223b1 100644
--- a/ui/src/onboarding/components/SigninForm.tsx
+++ b/ui/src/onboarding/components/SigninForm.tsx
@@ -1,5 +1,6 @@
 // Libraries
 import React, {PureComponent, ChangeEvent} from 'react'
+import {withRouter, WithRouterProps} from 'react-router'
 import {connect} from 'react-redux'
 import _, {get} from 'lodash'
 
@@ -31,10 +32,9 @@ import * as copy from 'src/shared/copy/notifications'
 import {Links} from 'src/types/v2/links'
 import {Notification, NotificationFunc} from 'src/types'
 
-export interface Props {
+export interface OwnProps {
   links: Links
   notify: (message: Notification | NotificationFunc) => void
-  onSignInUser: () => void
 }
 
 interface State {
@@ -42,6 +42,8 @@ interface State {
   password: string
 }
 
+type Props = OwnProps & WithRouterProps
+
 @ErrorHandling
 class SigninForm extends PureComponent<Props, State> {
   public state: State = {
@@ -101,11 +103,12 @@ class SigninForm extends PureComponent<Props, State> {
   }
 
   private handleSignIn = async (): Promise<void> => {
-    const {notify, onSignInUser} = this.props
+    const {notify, router} = this.props
     const {username, password} = this.state
+
     try {
       await signin({username, password})
-      onSignInUser()
+      router.push('/dashboards')
     } catch (error) {
       const message = get(error, 'data.msg', '')
 
@@ -129,4 +132,4 @@ const mdtp = {
 export default connect(
   mstp,
   mdtp
-)(SigninForm)
+)(withRouter(SigninForm))
diff --git a/ui/src/onboarding/containers/SigninPage.tsx b/ui/src/onboarding/containers/SigninPage.tsx
index f6a57fb703..e2c57fb1fb 100644
--- a/ui/src/onboarding/containers/SigninPage.tsx
+++ b/ui/src/onboarding/containers/SigninPage.tsx
@@ -7,24 +7,17 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import SplashPage from 'src/shared/components/splash_page/SplashPage'
 import SigninForm from 'src/onboarding/components/SigninForm'
 
-// Utils
-import {AuthContext} from 'src/utils/auth'
-
 @ErrorHandling
 class SigninPage extends PureComponent<{}> {
   public render() {
     return (
-      <AuthContext.Consumer>
-        {({onSignInUser}) => (
-          <SplashPage panelWidthPixels={300}>
-            <SplashPage.Panel>
-              <SplashPage.Logo />
-              <SplashPage.Header title="InfluxData" />
-              <SigninForm onSignInUser={onSignInUser} />
-            </SplashPage.Panel>
-          </SplashPage>
-        )}
-      </AuthContext.Consumer>
+      <SplashPage panelWidthPixels={300}>
+        <SplashPage.Panel>
+          <SplashPage.Logo />
+          <SplashPage.Header title="InfluxData" />
+          <SigninForm />
+        </SplashPage.Panel>
+      </SplashPage>
     )
   }
 }
diff --git a/ui/src/utils/auth.tsx b/ui/src/utils/auth.tsx
deleted file mode 100644
index 0364c43d6c..0000000000
--- a/ui/src/utils/auth.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-export interface SigninProps {
-  onSignInUser: () => void
-}
-
-export const AuthContext = React.createContext<SigninProps>(null)