feat(ui): login & sign-up page for IDPE

CHANGELOG.md

@@ -6,6 +6,7 @@
 1. [17095](https://github.com/influxdata/influxdb/pull/17095): Extend pkger dashboards with table view support
 1. [17114](https://github.com/influxdata/influxdb/pull/17114): Allow for retention to be provided to influx setup command as a duration
 1. [17138](https://github.com/influxdata/influxdb/pull/17138): Extend pkger export all capabilities to support filtering by lable name and resource type
+1. [17049](https://github.com/influxdata/influxdb/pull/17049): Added new login and sign-up screen that for cloud users that allows direct login from their region
 
 ### Bug Fixes
 
@@ -19,6 +20,7 @@
 1. [17113](https://github.com/influxdata/influxdb/pull/17113): Disabled group functionality for check query builder
 1. [17120](https://github.com/influxdata/influxdb/pull/17120): Fixed cell configuration error that was popping up when users create a dashboard and accessed the disk usage cell for the first time
 1. [17097](https://github.com/influxdata/influxdb/pull/17097): Listing all the default variables in the VariableTab of the script editor
+1. [17049](https://github.com/influxdata/influxdb/pull/17049): Fixed bug that was preventing the interval status on the dashboard header from refreshing on selections
 
 ## v2.0.0-beta.5 [2020-02-27]
 

ui/package.json

@@ -137,6 +137,7 @@
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "abortcontroller-polyfill": "^1.3.0",
+    "auth0-js": "^9.12.2",
     "axios": "^0.19.0",
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^4.0.2",
@@ -157,8 +158,8 @@
     "moment": "^2.13.0",
     "monaco-editor": "^0.19.2",
     "monaco-editor-textmate": "^2.2.1",
-    "monaco-languageclient": "^0.11.0",
     "monaco-editor-webpack-plugin": "^1.8.2",
+    "monaco-languageclient": "^0.11.0",
     "monaco-textmate": "^3.0.1",
     "normalizr": "^3.4.1",
     "onigasm": "^2.2.4",
@@ -181,6 +182,7 @@
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.8",
     "react-scrollbars-custom": "^4.0.0-alpha.8",
+    "react-spring": "^8.0.27",
     "react-virtualized": "^9.18.5",
     "redux": "^4.0.0",
     "redux-auth-wrapper": "^1.0.0",

ui/src/Logout.tsx

@@ -1,29 +1,32 @@
 // Libraries
-import {PureComponent} from 'react'
+import {FC, useEffect} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
+import auth0js from 'auth0-js'
 
 // APIs
 import {postSignout} from 'src/client'
+import {getAuth0Config} from 'src/authorizations/apis'
 
 // Constants
 import {CLOUD, CLOUD_URL, CLOUD_LOGOUT_PATH} from 'src/shared/constants'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
-type Props = WithRouterProps
-
-@ErrorHandling
-export class Logout extends PureComponent<Props> {
-  public componentDidMount() {
-    this.handleSignOut()
-  }
-
-  public render() {
-    return null
-  }
-
-  private handleSignOut = async () => {
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+const Logout: FC<WithRouterProps> = ({router}) => {
+  const handleSignOut = async () => {
+    if (CLOUD && isFlagEnabled('regionBasedLoginPage')) {
+      const config = await getAuth0Config()
+      const auth0 = new auth0js.WebAuth({
+        domain: config.domain,
+        clientID: config.clientID,
+      })
+      auth0.logout({})
+      return
+    }
     if (CLOUD) {
       window.location.href = `${CLOUD_URL}${CLOUD_LOGOUT_PATH}`
       return
@@ -34,9 +37,14 @@ export class Logout extends PureComponent<Props> {
         throw new Error(resp.data.message)
       }
 
-      this.props.router.push(`/signin`)
+      router.push(`/signin`)
     }
   }
+
+  useEffect(() => {
+    handleSignOut()
+  }, [])
+  return null
 }
 
-export default withRouter<Props>(Logout)
+export default ErrorHandling(withRouter<WithRouterProps>(Logout))

ui/src/Signin.tsx

@@ -19,6 +19,9 @@ import {CLOUD, CLOUD_SIGNIN_PATHNAME} from 'src/shared/constants'
 // Types
 import {RemoteDataState} from 'src/types'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 interface State {
   loading: RemoteDataState
 }
@@ -81,6 +84,11 @@ export class Signin extends PureComponent<Props, State> {
 
       clearInterval(this.intervalID)
 
+      if (CLOUD && isFlagEnabled('regionBasedLoginPage')) {
+        this.props.router.replace('/login')
+        return
+      }
+
       // TODO: add returnTo to CLOUD signin
       if (CLOUD) {
         window.location.pathname = CLOUD_SIGNIN_PATHNAME

ui/src/authorizations/apis/index.ts

@@ -1,5 +1,5 @@
 import AJAX from 'src/utils/ajax'
-import {Authorization} from 'src/types'
+import {Authorization, Auth0Config} from 'src/types'
 
 export const createAuthorization = async (
   authorization
@@ -17,3 +17,14 @@ export const createAuthorization = async (
     throw error
   }
 }
+
+export const getAuth0Config = async (): Promise<Auth0Config> => {
+  try {
+    const response = await fetch('/api/v2private/oauth/clientConfig')
+    const data = await response.json()
+    return data
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}

ui/src/clientLibraries/graphics/GithubLogo.tsx

@@ -0,0 +1,18 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GithubLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('github-logo', className)}
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <title>GitHub icon</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+)

ui/src/clientLibraries/graphics/GoogleLogo.tsx

@@ -0,0 +1,33 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GoogleLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('google-logo', className)}
+    x="0"
+    y="0"
+    viewBox="0 0 17.6 18"
+  >
+    <path
+      d="M15 15.8h-3v-2.3c1-.6 1.6-1.6 1.8-2.7H9V7.4h8.5c.1.6.2 1.2.2 1.8-.1 2.7-1 5.1-2.7 6.6z"
+      className="google-logo--blue"
+    />
+    <path
+      d="M9 18c-3.5 0-6.6-2-8-5v-2.3h3c.7 2.1 2.7 3.7 5 3.7 1.2 0 2.2-.3 3-.9l2.9 2.3C13.5 17.2 11.4 18 9 18z"
+      className="google-logo--green"
+    />
+    <path
+      d="M4 7.3c-.2.5-.3 1.1-.3 1.7 0 .6.1 1.2.3 1.7L1 13c-.6-1.2-1-2.6-1-4s.3-2.8 1-4h3v2.3z"
+      className="google-logo--yellow"
+    />
+    <path
+      d="M12.4 4.9C11.5 4 10.3 3.6 9 3.6c-2.3 0-4.3 1.6-5 3.7L1 5c1.4-3 4.5-5 8-5 2.4 0 4.5.9 6 2.3l-2.6 2.6z"
+      className="google-logo--red"
+    />
+  </svg>
+)

ui/src/clientLibraries/graphics/index.ts

@@ -0,0 +1,19 @@
+import CSharpLogo from 'src/clientLibraries/graphics/CSharpLogo'
+import {GithubLogo} from 'src/clientLibraries/graphics/GithubLogo'
+import GoLogo from 'src/clientLibraries/graphics/GoLogo'
+import {GoogleLogo} from 'src/clientLibraries/graphics/GoogleLogo'
+import JavaLogo from 'src/clientLibraries/graphics/JavaLogo'
+import JSLogo from 'src/clientLibraries/graphics/JSLogo'
+import PythonLogo from 'src/clientLibraries/graphics/PythonLogo'
+import RubyLogo from 'src/clientLibraries/graphics/RubyLogo'
+
+export {
+  CSharpLogo,
+  GithubLogo,
+  GoLogo,
+  GoogleLogo,
+  JavaLogo,
+  JSLogo,
+  PythonLogo,
+  RubyLogo,
+}

ui/src/index.tsx

@@ -20,6 +20,7 @@ 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 {LoginPage} from 'src/onboarding/containers/LoginPage'
 import Logout from 'src/Logout'
 import TaskPage from 'src/tasks/containers/TaskPage'
 import TasksPage from 'src/tasks/containers/TasksPage'
@@ -191,6 +192,7 @@ class Root extends PureComponent {
                   component={OnboardingWizardPage}
                 />
                 <Route component={UnauthenticatedApp}>
+                  <Route path="/login" component={LoginPage} />
                   <Route path="/signin" component={SigninPage} />
                   <Route path="/logout" component={Logout} />
                 </Route>

ui/src/onboarding/components/LoginForm.tsx

@@ -0,0 +1,104 @@
+// Libraries
+import React, {FC, useState, ChangeEvent} from 'react'
+import {
+  Button,
+  ButtonShape,
+  ButtonType,
+  Columns,
+  ComponentColor,
+  ComponentSize,
+  ComponentStatus,
+  Form,
+  Grid,
+  Input,
+  InputType,
+  VisibilityInput,
+} from '@influxdata/clockface'
+
+// Types
+import {FormFieldValidation} from 'src/types'
+
+interface Props {
+  buttonStatus: ComponentStatus
+  emailValidation: FormFieldValidation
+  email: string
+  passwordValidation: FormFieldValidation
+  password: string
+  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void
+  handleForgotPasswordClick: () => void
+}
+
+export const LoginForm: FC<Props> = ({
+  buttonStatus,
+  emailValidation,
+  email,
+  passwordValidation,
+  password,
+  handleInputChange,
+  handleForgotPasswordClick,
+}) => {
+  const [isVisible, toggleVisibility] = useState(false)
+  return (
+    <>
+      <Grid>
+        <Grid.Row className="sign-up--form-padded-row">
+          <Grid.Column widthXS={Columns.Twelve}>
+            <Form.Element
+              label="Work Email Address"
+              required={true}
+              errorMessage={emailValidation.errorMessage}
+            >
+              <Input
+                name="email"
+                value={email}
+                type={InputType.Email}
+                size={ComponentSize.Large}
+                status={
+                  emailValidation.hasError
+                    ? ComponentStatus.Error
+                    : ComponentStatus.Default
+                }
+                onChange={handleInputChange}
+              />
+            </Form.Element>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column widthXS={Columns.Twelve}>
+            <Form.Element
+              label="Password"
+              required={true}
+              errorMessage={passwordValidation.errorMessage}
+            >
+              <VisibilityInput
+                name="password"
+                value={password}
+                size={ComponentSize.Large}
+                onChange={handleInputChange}
+                visible={isVisible}
+                status={
+                  passwordValidation.hasError
+                    ? ComponentStatus.Error
+                    : ComponentStatus.Default
+                }
+                onToggleClick={() => toggleVisibility(!isVisible)}
+              />
+            </Form.Element>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+      <a onClick={handleForgotPasswordClick} className="login--forgot-password">
+        Forgot Password?
+      </a>
+      <Button
+        className="create-account--button"
+        text="Login"
+        color={ComponentColor.Primary}
+        size={ComponentSize.Large}
+        type={ButtonType.Submit}
+        status={buttonStatus}
+        shape={ButtonShape.StretchToFit}
+      />
+    </>
+  )
+}