Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Fleet setup styles #78

Merged
merged 7 commits into from
Dec 2, 2020
Merged

Update Fleet setup styles #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cb155fd
Intitial styles. Background color and logo update.
noahtalerman Nov 25, 2020
1c81baf
Merge branch 'master' of github.com:noahtalerman/fleet-1 into update-…
noahtalerman Nov 30, 2020
98eb742
Wrap each section of the form with a container. Hard code header and …
noahtalerman Nov 30, 2020
4c6a623
Move ConfirmationPage to render within RegistrationForm. Style Confir…
noahtalerman Dec 1, 2020
51a464e
Merge up from master
noahtalerman Dec 1, 2020
3bd64a5
Add toContain() in RegistrationForm tests.
noahtalerman Dec 1, 2020
aaee5d2
add help text w/ recommendation about logo image dimensions and aspec…
mikermcneil Dec 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions frontend/components/App/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export class App extends Component {
static propTypes = {
children: PropTypes.element,
dispatch: PropTypes.func,
showBackgroundImage: PropTypes.bool,
user: userInterface,
};

Expand Down Expand Up @@ -51,11 +50,10 @@ export class App extends Component {
}

render () {
const { children, showBackgroundImage } = this.props;
const { children } = this.props;

const wrapperStyles = classnames(
'wrapper',
{ 'wrapper--background': showBackgroundImage },
);

return (
Expand Down
9 changes: 3 additions & 6 deletions frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,35 +43,32 @@ class AdminDetails extends Component {
<div className="registration-fields">
<InputFieldWithIcon
{...fields.username}
iconName="username"
placeholder="Username"
tabIndex={tabIndex}
autofocus={currentPage}
ref={(input) => { this.firstInput = input; }}
/>
<InputFieldWithIcon
{...fields.password}
iconName="password"
placeholder="Password"
type="password"
tabIndex={tabIndex}
hint={['Must include 7 characters, at least 1 number (e.g. 0 - 9), and at least 1 symbol (e.g. &*#)']}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, this is definitely helpful.

/>
<InputFieldWithIcon
{...fields.password_confirmation}
iconName="password"
placeholder="Confirm Password"
type="password"
tabIndex={tabIndex}
/>
<InputFieldWithIcon
{...fields.email}
iconName="email"
placeholder="Email"
tabIndex={tabIndex}
/>
</div>
<Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
Submit
<Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
Next
</Button>
</form>
);
Expand Down
18 changes: 15 additions & 3 deletions frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,29 @@ import classnames from 'classnames';

import Button from 'components/buttons/Button';
import formDataInterface from 'interfaces/registration_form_data';
import Icon from 'components/icons/Icon';
import Checkbox from 'components/forms/fields/Checkbox';

const baseClass = 'confirm-user-reg';

class ConfirmationPage extends Component {
static propTypes = {
className: PropTypes.string,
currentPage: PropTypes.bool,
formData: formDataInterface,
handleSubmit: PropTypes.func,
};

componentDidUpdate(prevProps) {
if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) {
// Component has a transition duration of 300ms set in
// RegistrationForm/_styles.scss. We need to wait 300ms before
// calling .focus() to preserve smooth transition.
setTimeout(() => {
this.firstInput.input.focus();
}, 300);
}
}

importOsqueryConfig = () => {
const disableImport = true;

Expand All @@ -37,6 +48,7 @@ class ConfirmationPage extends Component {
const { importOsqueryConfig } = this;
const {
className,
currentPage,
handleSubmit,
formData: {
email,
Expand All @@ -45,13 +57,13 @@ class ConfirmationPage extends Component {
username,
},
} = this.props;
const tabIndex = currentPage ? 1 : -1;

const confirmRegClasses = classnames(className, baseClass);

return (
<form onSubmit={handleSubmit} className={confirmRegClasses}>
<div className={`${baseClass}__wrapper`}>
<Icon name="success-check" className={`${baseClass}__icon`} />
<table className={`${baseClass}__table`}>
<caption>Administrator Configuration</caption>
<tbody>
Expand All @@ -77,7 +89,7 @@ class ConfirmationPage extends Component {
{importOsqueryConfig()}
</div>

<Button type="submit" variant="gradient" className={`${baseClass}__submit`} autofocus>
<Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand" autofocus>
Finish
</Button>
</form>
Expand Down
36 changes: 19 additions & 17 deletions frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.confirm-user-reg {
&__wrapper {
padding: 0 35px 25px;
display: flex;
flex-direction: column;
align-items: center;

h2 {
text-align: center;
}

&__icon {
Expand All @@ -27,41 +31,34 @@
width: 100%;

caption {
font-size: 18px;
font-size: $small;
font-weight: $bold;
line-height: 0.72;
letter-spacing: 0.6px;
color: $core-dark-blue-grey;
text-transform: uppercase;
padding-bottom: 20px;
margin-bottom: 24px;
text-align: left;
}

tr {
vertical-align: bottom;
}

th {
font-size: 14px;
font-size: $small;
font-weight: $bold;
line-height: 1.71;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
text-align: left;
padding-right: 108px;
}

td {
font-size: 14px;
font-size: $small;
font-weight: $regular;
line-height: 1.71;
letter-spacing: 0.5px;
color: $core-dark-blue-grey;
}
}

&__table-url {
@include ellipsis(90%);
@include ellipsis(100%);
font-family: 'SourceCodePro', $monospace;
vertical-align: bottom;
font-weight: 600;
}

&__import {
Expand Down Expand Up @@ -92,4 +89,9 @@
top: 0;
}
}

.button {
width: 160px;
margin-top: 40px;
}
}
2 changes: 1 addition & 1 deletion frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class KolideDetails extends Component {
ref={(input) => { this.firstInput = input; }}
/>
</div>
<Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
<Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
Submit
</Button>
</form>
Expand Down
6 changes: 3 additions & 3 deletions frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,11 @@ class OrgDetails extends Component {
{...fields.org_logo_url}
placeholder="Organization Logo URL (optional)"
tabIndex={tabIndex}
hint="must start with https://"
hint="Personalize Fleet with your brand. For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png."
/>
</div>
<Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
Submit
<Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
Next
</Button>
</form>
);
Expand Down
126 changes: 40 additions & 86 deletions frontend/components/forms/RegistrationForm/RegistrationForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,6 @@ import ConfirmationPage from 'components/forms/RegistrationForm/ConfirmationPage
import KolideDetails from 'components/forms/RegistrationForm/KolideDetails';
import OrgDetails from 'components/forms/RegistrationForm/OrgDetails';

const PAGE_HEADER_TEXT = {
1: 'SET USERNAME & PASSWORD',
2: 'SET ORGANIZATION DETAILS',
3: 'SET KOLIDE WEB ADDRESS',
4: 'SUCCESS',
};

const baseClass = 'user-registration';

class RegistrationForm extends Component {
Expand Down Expand Up @@ -68,99 +61,51 @@ class RegistrationForm extends Component {
return false;
}

renderHeader = () => {
const { page } = this.props;
const headerText = PAGE_HEADER_TEXT[page];

if (headerText) {
return <h2 className={`${baseClass}__title`}>{headerText}</h2>;
}

return false;
}

renderDescription = () => {
const { page } = this.props;

if (page === 1) {
return (
<div className={`${baseClass}__description`}>
<p>Additional admins can be designated within the Fleet App</p>
<p>Passwords must include 7 characters, at least 1 number (eg. 0-9) and at least 1 symbol (eg. ^&*#)</p>
</div>
);
}

if (page === 2) {
return (
<div className={`${baseClass}__description`}>
<p>Set your organization&apos;s name (eg. Kolide, Inc)</p>
<p>(Optional) Set an organization logo to use in the Fleet application. Should be an https URL to an image file (eg. https://kolide.co/logo.png).</p>
</div>
);
}

if (page === 3) {
return (
<div className={`${baseClass}__description`}>
<p>Define the base URL of this Fleet instance.</p>
</div>
);
}

return false;
}

renderContent = () => {
const { page } = this.props;
const { formData } = this.state;
const {
onSubmitConfirmation,
renderDescription,
renderHeader,
} = this;

if (page === 4) {
return (
<div>
{renderHeader()}
<ConfirmationPage formData={formData} handleSubmit={onSubmitConfirmation} className={`${baseClass}__confirmation`} />
</div>
);
}

return (
<div>
{renderHeader()}
{renderDescription()}
</div>
);
}

render () {
const { page } = this.props;
const { formData } = this.state;
const { isCurrentPage, onPageFormSubmit, renderContent } = this;
const { isCurrentPage, onPageFormSubmit, onSubmitConfirmation } = this;

const containerClass = classnames(`${baseClass}__container`, {
[`${baseClass}__container--complete`]: page > 3,
});
const adminDetailsContainerClass = classnames(
`${baseClass}__container`,
`${baseClass}__container--admin`,
);

const adminDetailsClass = classnames(
`${baseClass}__field-wrapper`,
`${baseClass}__field-wrapper--admin`,
);

const orgDetailsContainerClass = classnames(
`${baseClass}__container`,
`${baseClass}__container--org`,
);

const orgDetailsClass = classnames(
`${baseClass}__field-wrapper`,
`${baseClass}__field-wrapper--org`,
);

const kolideDetailsContainerClass = classnames(
`${baseClass}__container`,
`${baseClass}__container--kolide`,
);

const kolideDetailsClass = classnames(
`${baseClass}__field-wrapper`,
`${baseClass}__field-wrapper--kolide`,
);

const confirmationContainerClass = classnames(
`${baseClass}__container`,
`${baseClass}__container--confirmation`,
);

const confirmationClass = classnames(
`${baseClass}__field-wrapper`,
`${baseClass}__field-wrapper--confirmation`,
);

const formSectionClasses = classnames(
`${baseClass}__form`,
{
Expand All @@ -170,21 +115,30 @@ class RegistrationForm extends Component {
[`${baseClass}__form--step2-complete`]: page > 2,
[`${baseClass}__form--step3-active`]: page === 3,
[`${baseClass}__form--step3-complete`]: page > 3,
[`${baseClass}__form--step4-active`]: page === 4,
},
);

return (
<div className={baseClass}>
<div className={containerClass}>
{renderContent()}

<div className={formSectionClasses}>
<div className={formSectionClasses}>
<div className={adminDetailsContainerClass}>
<h2>Setup user</h2>
<p>Additional admins can be designated within the Fleet App</p>
<AdminDetails formData={formData} handleSubmit={onPageFormSubmit} className={adminDetailsClass} currentPage={isCurrentPage(1)} />

</div>
<div className={orgDetailsContainerClass}>
<h2>Organization details</h2>
<OrgDetails formData={formData} handleSubmit={onPageFormSubmit} className={orgDetailsClass} currentPage={isCurrentPage(2)} />

</div>
<div className={kolideDetailsContainerClass}>
<h2>Set Fleet URL</h2>
<KolideDetails formData={formData} handleSubmit={onPageFormSubmit} className={kolideDetailsClass} currentPage={isCurrentPage(3)} />
</div>
<div className={confirmationContainerClass}>
<h2>Success</h2>
<ConfirmationPage formData={formData} handleSubmit={onSubmitConfirmation} classNmae={confirmationClass} currentPage={isCurrentPage(4)} />
</div>
</div>
</div>
);
Expand Down
Loading