chore(ui): updated login page styling to match Quartz (#17600)

influxdata · Apr 3, 2020 · d2ea7c3 · d2ea7c3
1 parent 53a13e5
commit d2ea7c3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git a/ui/src/onboarding/containers/LoginPage.scss b/ui/src/onboarding/containers/LoginPage.scss
@@ -1,12 +1,3 @@
-.clockface--app-wrapper.sign-up--page {
-  .cf-funnel-page {
-    background-image: url('../../assets/images/influxLogoBg.svg');
-    background-position: center;
-    background-repeat: none;
-    background-size: cover;
-  }
-}
-
 .create-account--button {
   margin: 15px 0;
 }
@@ -39,7 +30,7 @@
 }
 
 .heading--margins {
-  margin-bottom: $ix-marg-c;
+  margin: $ix-marg-c 0;
 }
 
 .login--forgot-password {

diff --git a/ui/src/onboarding/containers/LoginPage.tsx b/ui/src/onboarding/containers/LoginPage.tsx
@@ -16,14 +16,15 @@ import LoginPageContents from 'src/onboarding/containers/LoginPageContents'
 
 export const LoginPage: FC = () => (
   <ErrorBoundary>
-    <AppWrapper className="sign-up--page">
+    <AppWrapper>
       <FunnelPage
+        enableGraphic={true}
         logo={<InfluxDBCloudLogo cloud={true} className="login-page--logo" />}
       >
         <Heading
-          element={HeadingElement.H2}
+          element={HeadingElement.H1}
           type={Typeface.Rubik}
-          weight={FontWeight.Regular}
+          weight={FontWeight.Light}
           className="heading--margins"
         >
           Create your Free InfluxDB Cloud Account

diff --git a/ui/src/onboarding/containers/LoginPageContents.tsx b/ui/src/onboarding/containers/LoginPageContents.tsx
@@ -8,11 +8,15 @@ import {
   ComponentStatus,
   FlexBox,
   FlexDirection,
+  FontWeight,
   Grid,
+  Heading,
+  HeadingElement,
   JustifyContent,
   Method,
   Panel,
   SelectGroup,
+  Typeface,
 } from '@influxdata/clockface'
 import auth0js, {WebAuth} from 'auth0-js'
 
@@ -88,6 +92,10 @@ class LoginPageContents extends PureComponent<DispatchProps> {
       })
     } catch (error) {
       console.error(error)
+      // TODO: uncomment after demo day
+      // redirect to universal login page if there's an error
+      // window.location.href =
+      // 'https://auth.a.influxcloud.net/'
       throw error
     }
   }
@@ -122,7 +130,14 @@ class LoginPageContents extends PureComponent<DispatchProps> {
             size={ComponentSize.Large}
             justifyContent={JustifyContent.Center}
           >
-            <h3 className="cf-funnel-page--panel-title">Continue with</h3>
+            <Heading
+              element={HeadingElement.H5}
+              type={Typeface.Rubik}
+              weight={FontWeight.Regular}
+              className="heading--margins"
+            >
+              Continue with
+            </Heading>
           </Panel.Header>
           <Panel.Body size={ComponentSize.Large}>
             <Grid>
@@ -153,7 +168,14 @@ class LoginPageContents extends PureComponent<DispatchProps> {
                 </FlexBox>
               </Grid.Row>
             </Grid>
-            <h5 className="cf-funnel-page--panel-title">OR</h5>
+            <Heading
+              element={HeadingElement.H5}
+              type={Typeface.Rubik}
+              weight={FontWeight.Regular}
+              className="heading--margins"
+            >
+              OR
+            </Heading>
             <FlexBox
               stretchToFitWidth={true}
               direction={FlexDirection.Row}
@@ -393,7 +415,10 @@ class LoginPageContents extends PureComponent<DispatchProps> {
         ...errors,
         emailError: 'Please enter a valid email address',
       })
-    } else if (auth0Err.code === 'user_exists') {
+    } else if (
+      auth0Err.code === 'access_denied' ||
+      auth0Err.code === 'user_exists'
+    ) {
       const emailError = `An account with that email address already exists. Try logging in instead.`
       this.setState({...errors, emailError})
     } else {
@@ -407,7 +432,19 @@ class LoginPageContents extends PureComponent<DispatchProps> {
   }
 
   private handleTabChange = (value: ActiveTab) => {
-    this.setState({activeTab: value})
+    this.setState({
+      activeTab: value,
+      confirmPassword: '',
+      confirmPasswordError: '',
+      email: '',
+      emailError: '',
+      firstName: '',
+      firstNameError: '',
+      lastName: '',
+      lastNameError: '',
+      password: '',
+      passwordError: '',
+    })
   }
 
   private handleSocialClick = (connection: Auth0Connection) => {

diff --git a/ui/src/shared/utils/pageTitles.ts b/ui/src/shared/utils/pageTitles.ts
@@ -1,10 +1,12 @@
 import {getOrg} from 'src/organizations/selectors'
 import {store} from 'src/index'
+import {CLOUD} from 'src/shared/constants'
 
 export const pageTitleSuffixer = (pageTitles: string[]): string => {
   const state = store.getState()
   const {name} = getOrg(state) || null
-  const titles = [...pageTitles, name, 'InfluxDB 2.0']
+  const title = CLOUD ? 'InfluxDB Cloud' : 'InfluxDB'
+  const titles = [...pageTitles, name, title]
 
   return titles.join(' | ')
 }