Skip to content

Commit

Permalink
feat(ui): made slight UI changes to the login page as per design requ…
Browse files Browse the repository at this point in the history
…ests (#17255)
  • Loading branch information
asalem1 authored Mar 16, 2020
1 parent 622a38c commit ab1081a
Show file tree
Hide file tree
Showing 7 changed files with 1,692 additions and 31 deletions.
1,641 changes: 1,641 additions & 0 deletions ui/assets/images/influxLogoBg.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@
"webpack-merge": "^4.2.1"
},
"dependencies": {
"@influxdata/clockface": "2.0.1",
"@influxdata/clockface": "2.0.2",
"@influxdata/flux-lsp-browser": "0.3.1",
"@influxdata/flux-parser": "^0.3.0",
"@influxdata/giraffe": "0.17.6",
Expand Down
17 changes: 14 additions & 3 deletions ui/src/onboarding/components/LoginForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,14 @@ import {
ComponentColor,
ComponentSize,
ComponentStatus,
FontWeight,
Form,
Grid,
Heading,
HeadingElement,
Input,
InputType,
Typeface,
VisibilityInput,
} from '@influxdata/clockface'

Expand Down Expand Up @@ -87,12 +91,19 @@ export const LoginForm: FC<Props> = ({
</Grid.Column>
</Grid.Row>
</Grid>
<a onClick={handleForgotPasswordClick} className="login--forgot-password">
<Heading
element={HeadingElement.H5}
type={Typeface.Rubik}
weight={FontWeight.Regular}
onClick={handleForgotPasswordClick}
className="login--forgot-password"
selectable={true}
>
Forgot Password?
</a>
</Heading>
<Button
className="create-account--button"
text="Login"
text="Log In"
color={ComponentColor.Primary}
size={ComponentSize.Large}
type={ButtonType.Submit}
Expand Down
20 changes: 4 additions & 16 deletions ui/src/onboarding/containers/LoginPage.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
.clockface--app-wrapper.sign-up--page {
background-image: linear-gradient(
47deg,
rgba(19, 0, 45, 0) 65%,
rgba(191, 47, 229, 0.4) 100%
);
background-color: #13002d;
background-image: url('../../assets/images/influxLogoBg.svg');
}

.create-account--button {
Expand Down Expand Up @@ -40,11 +35,8 @@

.login--forgot-password {
color: $c-pool;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 13px;
line-height: 15px;
text-align: left;
cursor: pointer;
}

Expand All @@ -70,16 +62,11 @@
}

.sign-up--login-container {
padding: $ix-marg-b;
padding: 24px;
text-align: center;
color: $g20-white;
}

.sign-up--login-text {
font-size: 16px;
margin-bottom: 0;
}

.sign-up--page-contents {
.cf-page-contents--padding {
height: 100vh;
Expand All @@ -97,6 +84,7 @@
z-index: 0;
background: transparent !important;
z-index: 100;
text-align: center;
}

@media screen and (min-width: $cf-grid--breakpoint-md) {
Expand Down
11 changes: 11 additions & 0 deletions ui/src/onboarding/containers/LoginPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,14 @@ import {
Columns,
FlexBox,
FlexDirection,
FontWeight,
Grid,
Heading,
HeadingElement,
JustifyContent,
Page,
Panel,
Typeface,
} from '@influxdata/clockface'

// Components
Expand All @@ -26,6 +30,13 @@ export const LoginPage: FC = () => (
className="sign-up--page-contents"
>
<Panel className="sign-up--panel">
<Heading
element={HeadingElement.H2}
type={Typeface.Rubik}
weight={FontWeight.Regular}
>
Create your Free InfluxDB Cloud Account
</Heading>
<FlexBox
direction={FlexDirection.Column}
stretchToFitHeight={true}
Expand Down
24 changes: 17 additions & 7 deletions ui/src/onboarding/containers/LoginPageContents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -60,7 +64,7 @@ interface State {
}

class LoginPageContents extends PureComponent<DispatchProps> {
private auth0?: typeof WebAuth
private auth0: typeof WebAuth

state: State = {
activeTab: ActiveTab.Login,
Expand All @@ -80,7 +84,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
public async componentDidMount() {
try {
const config = await getAuth0Config()
this.auth0 = auth0js.WebAuth({
this.auth0 = new auth0js.WebAuth({
domain: config.domain,
clientID: config.clientID,
redirectUri: config.redirectURL,
Expand Down Expand Up @@ -118,8 +122,14 @@ class LoginPageContents extends PureComponent<DispatchProps> {
className="sign-up--form"
>
<div className="sign-up--login-container">
<h2>Create your Free InfluxDB Cloud Account</h2>
<p className="sign-up--login-text">No credit card required</p>
<Heading
element={HeadingElement.H5}
type={Typeface.Rubik}
weight={FontWeight.Regular}
className="sign-up--subheader"
>
No credit card required
</Heading>
</div>
<Panel className="sign-up--form-panel">
<Panel.Header size={ComponentSize.Large}>
Expand Down Expand Up @@ -170,13 +180,13 @@ class LoginPageContents extends PureComponent<DispatchProps> {
color={ComponentColor.Default}
>
<SelectGroup.Option
titleText="Login"
titleText="Log In"
value={ActiveTab.Login}
id="login-option"
active={loginTabActive}
onClick={this.handleTabChange}
>
Login
Log In
</SelectGroup.Option>
<SelectGroup.Option
titleText="Sign Up"
Expand Down Expand Up @@ -404,7 +414,7 @@ class LoginPageContents extends PureComponent<DispatchProps> {
const emailError = `An account with that email address already exists. Try logging in instead.`
this.setState({...errors, emailError})
} else {
const emailError = `We have been notified of an issue while creating your account. If this issue persists, please contact [email protected]`
const emailError = `We have been notified of an issue while accessing your account. If this issue persists, please contact [email protected]`
this.setState({...errors, emailError})
}
}
Expand Down
8 changes: 4 additions & 4 deletions ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1018,10 +1018,10 @@
debug "^3.1.0"
lodash.once "^4.1.1"

"@influxdata/[email protected].1":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-2.0.1.tgz#a7447d19849ef864dc6e086623e8ca971cdcf39b"
integrity sha512-9zbdCWeRLDOSut7jllvS70iWHizKDha1ph7m6Zj7WLn0CiMbA8GGfwlKzrGI5TsFDvh8oT+SeNomYxLEjCj8JA==
"@influxdata/[email protected].2":
version "2.0.2"
resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-2.0.2.tgz#7dff9d99b984717bd540920fda15584e07a198d2"
integrity sha512-t5XmAEpjP9u5S+LeZ34k+Zm3iklpmWS5MfmSlUQ0lhfxxmpK7PHXsRYHvvXsw65h5tvj6Qdeks5ISwBxghxeWA==

"@influxdata/[email protected]":
version "0.3.1"
Expand Down

0 comments on commit ab1081a

Please sign in to comment.