feat(SignUpForm): Removed sign-up functionality since it's no longer relevant (#17841)

ui/package.json

@@ -183,7 +183,6 @@
     "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/onboarding/components/HelperText.tsx

@@ -0,0 +1,21 @@
+import React, {FC} from 'react'
+import {
+  FontWeight,
+  Heading,
+  HeadingElement,
+  Typeface,
+} from '@influxdata/clockface'
+
+const HelperText: FC = ({children}) => (
+  <Heading
+    element={HeadingElement.H6}
+    type={Typeface.Rubik}
+    weight={FontWeight.Regular}
+    className="helper-link-text"
+    selectable={true}
+  >
+    {children}
+  </Heading>
+)
+
+export default HelperText

ui/src/onboarding/components/LoginForm.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useState, ChangeEvent} from 'react'
+import React, {FC, useState, ChangeEvent, MouseEvent} from 'react'
 import {
   Button,
   ButtonShape,
@@ -8,20 +8,23 @@ import {
   ComponentColor,
   ComponentSize,
   ComponentStatus,
-  FontWeight,
+  FlexBox,
   Form,
   Grid,
-  Heading,
-  HeadingElement,
   Input,
   InputType,
-  Typeface,
   VisibilityInput,
+  FlexDirection,
+  JustifyContent,
 } from '@influxdata/clockface'
+import HelperText from 'src/onboarding/components/HelperText'
 
 // Types
 import {FormFieldValidation} from 'src/types'
 
+// Constants
+import {CLOUD_URL} from 'src/shared/constants'
+
 interface Props {
   buttonStatus: ComponentStatus
   emailValidation: FormFieldValidation
@@ -29,7 +32,7 @@ interface Props {
   passwordValidation: FormFieldValidation
   password: string
   handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void
-  handleForgotPasswordClick: () => void
+  handleForgotPasswordClick: (event: MouseEvent<HTMLAnchorElement>) => void
 }
 
 export const LoginForm: FC<Props> = ({
@@ -45,7 +48,7 @@ export const LoginForm: FC<Props> = ({
   return (
     <>
       <Grid>
-        <Grid.Row className="sign-up--form-padded-row">
+        <Grid.Row>
           <Grid.Column widthXS={Columns.Twelve}>
             <Form.Element
               label="Work Email Address"
@@ -91,16 +94,19 @@ export const LoginForm: FC<Props> = ({
           </Grid.Column>
         </Grid.Row>
       </Grid>
-      <Heading
-        element={HeadingElement.H6}
-        type={Typeface.Rubik}
-        weight={FontWeight.Regular}
-        onClick={handleForgotPasswordClick}
-        className="login--forgot-password"
-        selectable={true}
+      <FlexBox
+        direction={FlexDirection.Row}
+        justifyContent={JustifyContent.SpaceBetween}
       >
-        Forgot Password?
-      </Heading>
+        <HelperText>
+          <a href="" onClick={handleForgotPasswordClick}>
+            Forgot Password
+          </a>
+        </HelperText>
+        <HelperText>
+          <a href={CLOUD_URL}>Sign Up</a>
+        </HelperText>
+      </FlexBox>
       <Button
         className="create-account--button"
         text="Log In"

ui/src/onboarding/components/SignUpForm.tsx

@@ -1,173 +0,0 @@
-// 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
-  confirmPassword: string
-  confirmPasswordValidation: FormFieldValidation
-  email: string
-  emailValidation: FormFieldValidation
-  firstName: string
-  firstNameValidation: FormFieldValidation
-  lastName: string
-  lastNameValidation: FormFieldValidation
-  password: string
-  passwordValidation: FormFieldValidation
-  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void
-}
-
-export const SignUpForm: FC<Props> = ({
-  buttonStatus,
-  confirmPassword,
-  confirmPasswordValidation,
-  email,
-  emailValidation,
-  firstName,
-  firstNameValidation,
-  lastName,
-  lastNameValidation,
-  password,
-  passwordValidation,
-  handleInputChange,
-}) => {
-  const [isVisible, toggleVisibility] = useState(false)
-  return (
-    <>
-      <Grid>
-        <Grid.Row className="sign-up--form-padded-row">
-          <Grid.Column widthXS={Columns.Six}>
-            <Form.Element
-              label="First Name"
-              required={true}
-              errorMessage={firstNameValidation.errorMessage}
-            >
-              <Input
-                name="firstName"
-                value={firstName}
-                autoFocus={true}
-                size={ComponentSize.Large}
-                status={
-                  firstNameValidation.hasError
-                    ? ComponentStatus.Error
-                    : ComponentStatus.Default
-                }
-                onChange={handleInputChange}
-              />
-            </Form.Element>
-          </Grid.Column>
-          <Grid.Column widthXS={Columns.Six}>
-            <Form.Element
-              label="Last Name"
-              required={true}
-              errorMessage={lastNameValidation.errorMessage}
-            >
-              <Input
-                name="lastName"
-                value={lastName}
-                size={ComponentSize.Large}
-                status={
-                  lastNameValidation.hasError
-                    ? ComponentStatus.Error
-                    : ComponentStatus.Default
-                }
-                onChange={handleInputChange}
-              />
-            </Form.Element>
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.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.Column widthXS={Columns.Twelve}>
-            <Form.Element
-              label="Confirm Password"
-              required={true}
-              errorMessage={confirmPasswordValidation.errorMessage}
-            >
-              <VisibilityInput
-                name="confirmPassword"
-                value={confirmPassword}
-                size={ComponentSize.Large}
-                onChange={handleInputChange}
-                visible={isVisible}
-                status={
-                  confirmPasswordValidation.hasError
-                    ? ComponentStatus.Error
-                    : ComponentStatus.Default
-                }
-                onToggleClick={() => toggleVisibility(!isVisible)}
-              />
-            </Form.Element>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-      <Button
-        className="create-account--button"
-        text="Create Account"
-        color={ComponentColor.Primary}
-        size={ComponentSize.Large}
-        type={ButtonType.Submit}
-        status={buttonStatus}
-        shape={ButtonShape.StretchToFit}
-      />
-    </>
-  )
-}

ui/src/onboarding/containers/LoginPage.scss

@@ -33,13 +33,11 @@
   margin: $ix-marg-c 0;
 }
 
-.login--forgot-password {
-  color: $c-pool;
-  line-height: 15px;
-  text-align: left;
-  cursor: pointer;
-  margin-left: $ix-marg-b;
+.helper-link-text {
   font-size: 0.85em; // TODO(ariel): remove when clockface font resolves HeadingElement.H6 styling
+  a {
+    font-weight: 400;
+  }
 }
 
 .sign-up--form {
@@ -50,10 +48,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
-  .sign-up--form-padded-row {
-    padding-top: $ix-marg-d;
-  }
+  margin-top: $ix-marg-d;
 }
 
 .sign-up--form-panel {

ui/src/onboarding/containers/LoginPage.tsx

@@ -6,6 +6,7 @@ import {
   FunnelPage,
   Heading,
   HeadingElement,
+  InfluxColors,
   InfluxDBCloudLogo,
   Typeface,
 } from '@influxdata/clockface'
@@ -18,24 +19,19 @@ export const LoginPage: FC = () => (
   <ErrorBoundary>
     <AppWrapper>
       <FunnelPage
+        accentColorA={InfluxColors.Magenta}
+        accentColorB={InfluxColors.Amethyst}
+        backgroundColor={InfluxColors.DeepPurple}
         enableGraphic={true}
         logo={<InfluxDBCloudLogo cloud={true} className="login-page--logo" />}
       >
         <Heading
           element={HeadingElement.H1}
           type={Typeface.Rubik}
-          weight={FontWeight.Light}
-          className="heading--margins"
-        >
-          Create your Free InfluxDB Cloud Account
-        </Heading>
-        <Heading
-          element={HeadingElement.H5}
-          type={Typeface.Rubik}
           weight={FontWeight.Regular}
-          className="heading--margins"
+          className="cf-funnel-page--title"
         >
-          No credit card required
+          Log in to your InfluxDB Cloud Account
         </Heading>
         <LoginPageContents />
       </FunnelPage>

ui/src/onboarding/containers/LoginPageContents.tsx

@@ -3,7 +3,6 @@ import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
 import {connect} from 'react-redux'
 import {
   AlignItems,
-  ComponentColor,
   ComponentSize,
   ComponentStatus,
   FlexBox,
@@ -15,17 +14,14 @@ import {
   JustifyContent,
   Method,
   Panel,
-  SelectGroup,
   Typeface,
 } from '@influxdata/clockface'
 import auth0js, {WebAuth} from 'auth0-js'
 
 // Components
 import {LoginForm} from 'src/onboarding/components/LoginForm'
-import {SignUpForm} from 'src/onboarding/components/SignUpForm'
 import {SocialButton} from 'src/shared/components/SocialButton'
 import {GoogleLogo, GithubLogo} from 'src/clientLibraries/graphics'
-import {Transition, animated} from 'react-spring/renderprops'
 
 // Types
 import {Auth0Connection, FormFieldValidation} from 'src/types'
@@ -36,29 +32,18 @@ import {passwordResetSuccessfully} from 'src/shared/copy/notifications'
 import {getAuth0Config} from 'src/authorizations/apis'
 
 interface ErrorObject {
-  [key: string]: string | undefined
+  emailError?: string
+  passwordError?: string
 }
 
 interface DispatchProps {
   onNotify: typeof notify
 }
 
-enum ActiveTab {
-  SignUp = 'signup',
-  Login = 'login',
-}
-
 interface State {
-  activeTab: ActiveTab
   buttonStatus: ComponentStatus
-  confirmPassword: string
-  confirmPasswordError: string
   email: string
   emailError: string
-  firstName: string
-  firstNameError: string
-  lastName: string
-  lastNameError: string
   password: string
   passwordError: string
 }
@@ -67,16 +52,9 @@ class LoginPageContents extends PureComponent<DispatchProps> {
   private auth0: typeof WebAuth
 
   state: State = {
-    activeTab: ActiveTab.Login,
     buttonStatus: ComponentStatus.Default,
-    confirmPassword: '',
-    confirmPasswordError: '',
     email: '',
     emailError: '',
-    firstName: '',
-    firstNameError: '',
-    lastName: '',
-    lastNameError: '',
     password: '',
     passwordError: '',
   }
@@ -103,22 +81,13 @@ class LoginPageContents extends PureComponent<DispatchProps> {
 
   render() {
     const {
-      activeTab,
       buttonStatus,
-      confirmPassword,
-      confirmPasswordError,
       email,
       emailError,
-      firstName,
-      firstNameError,
-      lastName,
-      lastNameError,
       password,
       passwordError,
     } = this.state
 
-    const loginTabActive = activeTab === ActiveTab.Login
-
     return (
       <form
         action="/signup"
@@ -177,126 +146,15 @@ class LoginPageContents extends PureComponent<DispatchProps> {
             >
               OR
             </Heading>
-            <FlexBox
-              stretchToFitWidth={true}
-              direction={FlexDirection.Row}
-              justifyContent={JustifyContent.Center}
-            >
-              <SelectGroup
-                size={ComponentSize.Large}
-                color={ComponentColor.Default}
-              >
-                <SelectGroup.Option
-                  titleText="Log In"
-                  value={ActiveTab.Login}
-                  id="login-option"
-                  active={loginTabActive}
-                  onClick={this.handleTabChange}
-                >
-                  Log In
-                </SelectGroup.Option>
-                <SelectGroup.Option
-                  titleText="Sign Up"
-                  value={ActiveTab.SignUp}
-                  id="signup-option"
-                  active={!loginTabActive}
-                  onClick={this.handleTabChange}
-                >
-                  Sign Up
-                </SelectGroup.Option>
-              </SelectGroup>
-            </FlexBox>
-            <Transition
-              native
-              reset
-              unique
-              config={{
-                mass: 0.25,
-                precision: 1,
-                friction: 1,
-                clamp: true,
-              }}
-              items={loginTabActive}
-              from={{height: 0}}
-              enter={[
-                {
-                  position: 'relative',
-                  overflow: 'hidden',
-                  height: 'auto',
-                },
-              ]}
-              leave={{height: 0}}
-            >
-              {shouldShow =>
-                shouldShow &&
-                (props => (
-                  <animated.div style={props}>
-                    <LoginForm
-                      buttonStatus={buttonStatus}
-                      email={email}
-                      emailValidation={this.formFieldTypeFactory(emailError)}
-                      password={password}
-                      passwordValidation={this.formFieldTypeFactory(
-                        passwordError
-                      )}
-                      handleInputChange={this.handleInputChange}
-                      handleForgotPasswordClick={this.handleForgotPasswordClick}
-                    />
-                  </animated.div>
-                ))
-              }
-            </Transition>
-            <Transition
-              native
-              reset
-              unique
-              config={{
-                mass: 0.25,
-                precision: 1,
-                friction: 1,
-                clamp: true,
-              }}
-              items={loginTabActive === false}
-              from={{height: 0}}
-              enter={[
-                {
-                  position: 'relative',
-                  overflow: 'hidden',
-                  height: 'auto',
-                },
-              ]}
-              leave={{height: 0}}
-            >
-              {shouldShow =>
-                shouldShow &&
-                (props => (
-                  <animated.div style={props}>
-                    <SignUpForm
-                      buttonStatus={buttonStatus}
-                      confirmPassword={confirmPassword}
-                      confirmPasswordValidation={this.formFieldTypeFactory(
-                        confirmPasswordError
-                      )}
-                      email={email}
-                      emailValidation={this.formFieldTypeFactory(emailError)}
-                      firstName={firstName}
-                      firstNameValidation={this.formFieldTypeFactory(
-                        firstNameError
-                      )}
-                      lastName={lastName}
-                      lastNameValidation={this.formFieldTypeFactory(
-                        lastNameError
-                      )}
-                      password={password}
-                      passwordValidation={this.formFieldTypeFactory(
-                        passwordError
-                      )}
-                      handleInputChange={this.handleInputChange}
-                    />
-                  </animated.div>
-                ))
-              }
-            </Transition>
+            <LoginForm
+              buttonStatus={buttonStatus}
+              email={email}
+              emailValidation={this.formFieldTypeFactory(emailError)}
+              password={password}
+              passwordValidation={this.formFieldTypeFactory(passwordError)}
+              handleInputChange={this.handleInputChange}
+              handleForgotPasswordClick={this.handleForgotPasswordClick}
+            />
           </Panel.Body>
         </Panel>
       </form>
@@ -305,40 +163,17 @@ class LoginPageContents extends PureComponent<DispatchProps> {
 
   private get validateFieldValues(): {
     isValid: boolean
-    errors: {[fieldName: string]: string}
+    errors: ErrorObject
   } {
-    const {
-      activeTab,
-      firstName,
-      lastName,
-      email,
-      password,
-      confirmPassword,
-    } = this.state
+    const {email, password} = this.state
 
-    const passwordsMatch = confirmPassword === password
-
-    const firstNameError = firstName === '' ? 'First name is required' : ''
-    const lastNameError = lastName === '' ? 'Last name is required' : ''
     const emailError = email === '' ? 'Email is required' : ''
     const passwordError = password === '' ? 'Password is required' : ''
 
-    let confirmPasswordError = passwordsMatch
-      ? ''
-      : "The input passwords don't match"
-    if (confirmPassword === '') {
-      confirmPasswordError = 'Confirm password is required'
-    }
-
     const errors: ErrorObject = {
       emailError,
       passwordError,
     }
-    if (activeTab === ActiveTab.SignUp) {
-      errors.firstNameError = firstNameError
-      errors.lastNameError = lastNameError
-      errors.confirmPasswordError = confirmPasswordError
-    }
 
     const isValid = Object.values(errors).every(error => error === '')
 
@@ -354,13 +189,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
 
   private handleSubmit = (event: FormEvent) => {
     const {isValid, errors} = this.validateFieldValues
-    const {
-      email,
-      password,
-      firstName: given_name,
-      lastName: family_name,
-      activeTab,
-    } = this.state
+    const {email, password} = this.state
 
     event.preventDefault()
 
@@ -371,75 +200,32 @@ class LoginPageContents extends PureComponent<DispatchProps> {
 
     this.setState({buttonStatus: ComponentStatus.Loading})
 
-    if (activeTab === ActiveTab.Login) {
-      this.auth0.login(
-        {
-          realm: Auth0Connection.Authentication,
-          email,
-          password,
-        },
-        error => {
-          if (error) {
-            this.setState({buttonStatus: ComponentStatus.Default})
-            return this.displayErrorMessage(errors, error)
-          }
-        }
-      )
-      return
-    }
-
-    this.auth0.signup(
+    this.auth0.login(
       {
-        connection: Auth0Connection.Authentication,
+        realm: Auth0Connection.Authentication,
         email,
         password,
-        family_name,
-        given_name,
       },
       error => {
         if (error) {
-          this.displayErrorMessage(errors, error)
           this.setState({buttonStatus: ComponentStatus.Default})
-          return
+          return this.displayErrorMessage(errors, error)
         }
-        // log the user into Auth0
-        this.auth0.login(
-          {
-            realm: Auth0Connection.Authentication,
-            email,
-            password,
-          },
-          error => {
-            if (error) {
-              this.setState({buttonStatus: ComponentStatus.Default})
-              this.displayErrorMessage(errors, error)
-              return
-            }
-          }
-        )
       }
     )
+    return
   }
 
   private displayErrorMessage = (errors, auth0Err) => {
-    const {activeTab} = this.state
     // eslint-disable-next-line
     if (/error in email/.test(auth0Err.code)) {
       this.setState({
         ...errors,
         emailError: 'Please enter a valid email address',
       })
-    } else if (
-      auth0Err.code === 'access_denied' ||
-      auth0Err.code === 'user_exists'
-    ) {
-      if (activeTab === ActiveTab.Login) {
-        const emailError = `The email and password combination you submitted don't match. Please try again`
-        this.setState({...errors, emailError})
-      } else {
-        const emailError = `An account with that email address already exists.  Try logging in instead.`
-        this.setState({...errors, emailError})
-      }
+    } else if (auth0Err.code === 'access_denied') {
+      const emailError = `The email and password combination you submitted don't match. Please try again`
+      this.setState({...errors, emailError})
     } else {
       const emailError = `We have been notified of an issue while accessing your account. If this issue persists, please contact support@influxdata.com`
       this.setState({...errors, emailError})
@@ -450,29 +236,14 @@ class LoginPageContents extends PureComponent<DispatchProps> {
     this.setState({[event.target.name]: event.target.value})
   }
 
-  private handleTabChange = (value: ActiveTab) => {
-    this.setState({
-      activeTab: value,
-      confirmPassword: '',
-      confirmPasswordError: '',
-      email: '',
-      emailError: '',
-      firstName: '',
-      firstNameError: '',
-      lastName: '',
-      lastNameError: '',
-      password: '',
-      passwordError: '',
-    })
-  }
-
   private handleSocialClick = (connection: Auth0Connection) => {
     this.auth0.authorize({
       connection,
     })
   }
 
-  private handleForgotPasswordClick = () => {
+  private handleForgotPasswordClick = event => {
+    event.preventDefault()
     const {email} = this.state
     const {onNotify} = this.props
     if (!email) {

ui/src/types/auth.ts

@@ -10,6 +10,5 @@ export type Auth0Config = {
   clientID: string
   domain: string
   redirectURL: string
-  socialSignUpOn: boolean
   state: string
 }

ui/yarn.lock

@@ -915,13 +915,6 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.3.1":
-  version "7.8.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
-  integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
 "@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -9811,14 +9804,6 @@ react-scrollbars-custom@^4.0.0-alpha.8:
     cnbuilder "^1.0.8"
     react-draggable "^3.2.1"
 
-react-spring@^8.0.27:
-  version "8.0.27"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
-  integrity sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    prop-types "^15.5.8"
-
 react-test-renderer@^16.0.0-0:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.5.2.tgz#92e9d2c6f763b9821b2e0b22f994ee675068b5ae"