From cb155fd6784b0ca7f159714dbd316ad850ddd0c8 Mon Sep 17 00:00:00 2001 From: Noah Talerman Date: Tue, 24 Nov 2020 22:07:27 -0800 Subject: [PATCH 1/5] Intitial styles. Background color and logo update. --- frontend/components/App/App.jsx | 3 +- .../RegistrationForm/RegistrationForm.jsx | 12 ++--- .../forms/RegistrationForm/_styles.scss | 47 +++++-------------- .../Breadcrumbs/Breadcrumbs.jsx | 4 +- .../RegistrationPage/Breadcrumbs/_styles.scss | 10 ++-- .../RegistrationPage/RegistrationPage.jsx | 2 +- frontend/pages/RegistrationPage/_styles.scss | 2 +- frontend/styles/global/_global.scss | 6 +-- 8 files changed, 28 insertions(+), 58 deletions(-) diff --git a/frontend/components/App/App.jsx b/frontend/components/App/App.jsx index f1dd3e88e300..40e2ee220703 100644 --- a/frontend/components/App/App.jsx +++ b/frontend/components/App/App.jsx @@ -51,11 +51,10 @@ export class App extends Component { } render () { - const { children, showBackgroundImage } = this.props; + const { children } = this.props; const wrapperStyles = classnames( 'wrapper', - { 'wrapper--background': showBackgroundImage }, ); return ( diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index e8803cd748f1..922af37beebd 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -7,11 +7,11 @@ 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 pageHeaderText = { + 1: 'Setup user', + 2: 'Organization details', + 3: 'Set Fleet URL', + 4: 'Success', }; const baseClass = 'user-registration'; @@ -70,7 +70,7 @@ class RegistrationForm extends Component { renderHeader = () => { const { page } = this.props; - const headerText = PAGE_HEADER_TEXT[page]; + const headerText = pageHeaderText[page]; if (headerText) { return

{headerText}

; diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index d0472fcdac2b..217dd670f4c9 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -1,18 +1,17 @@ .user-registration { display: flex; - align-content: center; justify-content: center; + align-items: center; flex-grow: 1; + margin-top: 24px; &__container { @include size(500px 520px); - align-self: center; - border-radius: 4px; + border-radius: 10px; background-color: $core-light-blue-grey; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); box-sizing: border-box; padding: 25px 35px; - margin-top: -55px; &--complete { padding: 0; @@ -42,7 +41,7 @@ &--step1-complete { .user-registration__field-wrapper--admin { - left: -184px; + left: -220px; } .user-registration__field-wrapper--org { @@ -50,17 +49,17 @@ } .user-registration__field-wrapper--kolide { - left: calc(100% + 184px); + left: calc(100% + 220px); } } &--step2-complete { .user-registration__field-wrapper--admin { - left: calc(-50% - 184px); + left: calc(-50% - 220px); } .user-registration__field-wrapper--org { - left: -184px; + left: -220px; } .user-registration__field-wrapper--kolide { @@ -70,33 +69,18 @@ &--step3-complete { .user-registration__field-wrapper--admin { - left: calc(-100% - 184px); + left: calc(-100% - 220px); } .user-registration__field-wrapper--org { - left: calc(-50% - 184px); + left: calc(-50% - 220px); } .user-registration__field-wrapper--kolide { - left: -184px; + left: -220px; } } - &::before, - &::after { - background-image: linear-gradient(to right, $ui-medium-grey 50%, transparent 50%); - background-position: left top; - background-repeat: repeat-x; - background-size: 17px 2px; - position: absolute; - top: 100px; - left: 50%; - width: 50%; - height: 2px; - content: ''; - z-index: 1; - } - &::before { left: auto; right: 50%; @@ -107,13 +91,6 @@ display: none; } } - - &--step3-active, - &--step3-complete { - &::after { - display: none; - } - } } &__description { @@ -154,12 +131,12 @@ } &--org { - left: calc(100% + 184px); + left: calc(100% + 220px); top: -10px; } &--kolide { - left: calc(150% + 184px); + left: calc(150% + 220px); top: -8px; } diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx index 7fc359350657..53fe0d744f7e 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx +++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx @@ -43,8 +43,8 @@ class Breadcrumbs extends Component { return (
- - + +
); } diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index e552bca195b1..3b81515758b3 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -4,7 +4,7 @@ align-content: center; width: 665px; height: 125px; - margin: 0 auto; + margin: 38px auto 0 auto; @include breakpoint(tablet) { height: 75px; @@ -13,11 +13,9 @@ &__page { text-align: center; width: 145px; - font-size: 14px; + font-size: $small; font-weight: $regular; - line-height: 1.53; - letter-spacing: 0.5px; - color: $core-dark-blue-grey; + color: $white; position: relative; &::before { @@ -61,7 +59,7 @@ &--active { font-weight: $bold; - color: $core-dark-blue-grey; + color: $white; } &--1 { diff --git a/frontend/pages/RegistrationPage/RegistrationPage.jsx b/frontend/pages/RegistrationPage/RegistrationPage.jsx index bbea43d436b0..1a00fd09de4b 100644 --- a/frontend/pages/RegistrationPage/RegistrationPage.jsx +++ b/frontend/pages/RegistrationPage/RegistrationPage.jsx @@ -11,7 +11,7 @@ import { setup } from 'redux/nodes/auth/actions'; import { showBackgroundImage } from 'redux/nodes/app/actions'; import EnsureUnauthenticated from 'components/EnsureUnauthenticated'; -import fleetLogoText from '../../../assets/images/fleet-logo-text-black.svg'; +import fleetLogoText from '../../../assets/images/fleet-logo-text-white.svg'; export class RegistrationPage extends Component { static propTypes = { diff --git a/frontend/pages/RegistrationPage/_styles.scss b/frontend/pages/RegistrationPage/_styles.scss index 6857a4843a63..2dc9fbb165b5 100644 --- a/frontend/pages/RegistrationPage/_styles.scss +++ b/frontend/pages/RegistrationPage/_styles.scss @@ -8,7 +8,7 @@ &__logo { @include position(absolute, 15px null null 15px); - width: 200px; + width: 120px; @include breakpoint(tablet) { width: 125px; diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index a2a1c029dfdc..6b9192e3261b 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -47,13 +47,9 @@ a { } .wrapper { - background: $white; + background: $core-gradient; margin: 0; - &--background { - background: url('../assets/images/background.png') center center; - background-size: cover; - } } .body-wrap { From 98eb742abccd520b66b5410ff6bf6dcecccf8aac Mon Sep 17 00:00:00 2001 From: Noah Talerman Date: Mon, 30 Nov 2020 17:47:50 -0500 Subject: [PATCH 2/5] Wrap each section of the form with a container. Hard code header and description for each section of the form for now. --- cmd/fleet/serve.go | 2 +- .../AdminDetails/AdminDetails.jsx | 9 +- .../KolideDetails/KolideDetails.jsx | 2 +- .../OrgDetails/OrgDetails.jsx | 6 +- .../RegistrationForm/RegistrationForm.jsx | 33 +++-- .../forms/RegistrationForm/_styles.scss | 137 +++++++++--------- .../InputFieldWithIcon/InputFieldWithIcon.jsx | 7 +- .../fields/InputFieldWithIcon/_styles.scss | 36 ++--- .../RegistrationPage/Breadcrumbs/_styles.scss | 51 ++++--- 9 files changed, 151 insertions(+), 132 deletions(-) diff --git a/cmd/fleet/serve.go b/cmd/fleet/serve.go index ed38fbca38c9..4e04441275e5 100644 --- a/cmd/fleet/serve.go +++ b/cmd/fleet/serve.go @@ -232,7 +232,7 @@ the way that the Fleet server works. apiHandler = service.WithSetup(svc, logger, apiHandler) frontendHandler = service.RedirectLoginToSetup(svc, logger, frontendHandler, config.Server.URLPrefix) } else { - frontendHandler = service.RedirectSetupToLogin(svc, logger, frontendHandler, config.Server.URLPrefix) + // frontendHandler = service.RedirectSetupToLogin(svc, logger, frontendHandler, config.Server.URLPrefix) } } diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx index 68ba87e1c106..4e95bd7c7a5a 100644 --- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx +++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx @@ -43,7 +43,6 @@ class AdminDetails extends Component {
- ); diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx index 8ed0f91d7981..7d1fcbdb2ebb 100644 --- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx +++ b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx @@ -46,7 +46,7 @@ class KolideDetails extends Component { ref={(input) => { this.firstInput = input; }} /> - diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx index d62df60df763..b4249c2fe3fa 100644 --- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx +++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx @@ -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="Set a logo to use in the Fleet application. Should be an https URL to an image file (e.g. https://fleetdm.com/logo.png)." /> - ); diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index 922af37beebd..81c0d69b6c63 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -142,20 +142,31 @@ class RegistrationForm extends Component { const { formData } = this.state; const { isCurrentPage, onPageFormSubmit, renderContent } = 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`, @@ -175,14 +186,18 @@ class RegistrationForm extends Component { return (
-
- {renderContent()} - -
+
+
+

Setup user

+

Additional admins can be designated within the Fleet App

- +
+
+

Organization details

- +
+
+

Set Fleet URL

diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index 217dd670f4c9..c8f41e1c2c9d 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -6,12 +6,44 @@ margin-top: 24px; &__container { - @include size(500px 520px); + @include size(500px auto); + @include position(absolute, 49% 0 null null); + transition: left 300ms ease, opacity 300ms ease; border-radius: 10px; background-color: $core-light-blue-grey; - box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); box-sizing: border-box; - padding: 25px 35px; + padding: 40px; + z-index: 1; + + h2 { + font-size: $large; + font-weight: $regular; + padding: 0 0 16px 0; + margin: 0; + margin-bottom: 40px; + border-bottom: 1px solid $ui-borders; + } + + p { + font-size: $small; + margin: 0 0 8px 0; + } + + &--admin { + left: 0; + top: 0; + margin: auto; + } + + &--org { + left: calc(100% + 220px); + top: -10px; + } + + &--kolide { + left: calc(150% + 220px); + top: -8px; + } &--complete { padding: 0; @@ -19,8 +51,6 @@ .user-registration__title { font-size: 24px; font-weight: $bold; - line-height: 0.54; - letter-spacing: 0.9px; color: $core-dark-blue-grey; padding: 25px 35px; } @@ -28,8 +58,7 @@ } &__form { - @include position(absolute, 49% 0 null null); - transform: translateY(-85px); + transform: translateY(-130px); width: 100%; height: 470px; box-sizing: border-box; @@ -40,44 +69,56 @@ } &--step1-complete { - .user-registration__field-wrapper--admin { - left: -220px; + .user-registration__container--admin { + left: -600px; + opacity: 0; } - .user-registration__field-wrapper--org { - left: 50%; + .user-registration__container--org { + left: 0; + top: 0; + margin: auto; } - .user-registration__field-wrapper--kolide { + .user-registration__container--kolide { left: calc(100% + 220px); } } &--step2-complete { - .user-registration__field-wrapper--admin { - left: calc(-50% - 220px); + + .user-registration__container--admin { + left: calc(-50% - 600px); + opacity: 0; } - .user-registration__field-wrapper--org { - left: -220px; + .user-registration__container--org { + left: -600px; + opacity: 0; } - .user-registration__field-wrapper--kolide { - left: 50%; + .user-registration__container--kolide { + left: 0; + top: 0; + margin: auto; } } &--step3-complete { - .user-registration__field-wrapper--admin { - left: calc(-100% - 220px); + + .user-registration__container--admin { + left: calc(-100% - 600px); + opacity: 0; } - .user-registration__field-wrapper--org { - left: calc(-50% - 220px); + .user-registration__container--org { + left: calc(-50% - 600px); + opacity: 0; } - .user-registration__field-wrapper--kolide { - left: -220px; + .user-registration__container--kolide { + left: -600px; + opacity: 0; } } @@ -96,69 +137,33 @@ &__description { font-size: 14px; font-weight: $regular; - line-height: 1.43; - letter-spacing: 0.5px; color: $core-dark-blue-grey; } &__title { font-size: 18px; font-weight: $bold; - line-height: 0.72; - letter-spacing: 0.6px; color: $core-dark-blue-grey; margin: 0; padding: 0; } &__field-wrapper { - transition: left 300ms ease; - width: 430px; - min-height: 420px; - padding-bottom: 75px; - border-radius: 4px; background-color: $core-light-blue-grey; - box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3); - margin: 0 auto; - position: absolute; box-sizing: border-box; - margin-left: -215px; z-index: 2; - - &--admin { - left: 50%; - top: -25px; - } - - &--org { - left: calc(100% + 220px); - top: -10px; - } - - &--kolide { - left: calc(150% + 220px); - top: -8px; - } - - input { - background-color: transparent; - } + display: flex; + flex-direction: column; + align-items: center; .button { - bottom: 0; - top: auto; - position: absolute; - border-top-left-radius: 0; - border-top-right-radius: 0; - - &:active { - top: auto; - } + width: 160px; + margin-top: 40px; } .registration-fields { - padding: 0 35px 25px; box-sizing: border-box; + width: 100%; } } diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx index 53c11698cc38..2c5126c1d371 100644 --- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx +++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx @@ -22,12 +22,9 @@ class InputFieldWithIcon extends InputField { }; renderHeading = () => { - const { error, placeholder, value } = this.props; + const { error, placeholder } = this.props; - const labelClasses = classnames( - `${baseClass}__label`, - { [`${baseClass}__label--hidden`]: !value }, - ); + const labelClasses = classnames(`${baseClass}__label`); if (error) { return
{error}
; diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss index 0375fc1a68d2..57176a2d68c8 100644 --- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss +++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss @@ -1,5 +1,5 @@ .input-icon-field { - margin-top: 22px; + margin-top: 16px; position: relative; width: 100%; @@ -20,10 +20,11 @@ } &__input { - border: 2px; - border-bottom: 2px solid $core-blue; - padding: 0 30px 8px 0; - font-size: 20px; + border: 1px solid $ui-borders; + background-color: $ui-light-grey; + border-radius: 4px; + padding: 9px 30px 9px 16px; + font-size: $small; text-indent: 1px; position: relative; width: 100%; @@ -43,33 +44,24 @@ border-bottom-color: $alert; } - &--password { - letter-spacing: 7px; - } } &__label { - color: $core-blue; - font-size: $small; - text-transform: lowercase; - - &--hidden { - visibility: hidden; - } + font-size: $x-small; + font-weight: $bold; } &__errors { - color: $alert; - font-size: $small; - text-transform: lowercase; + font-size: $x-small; } &__hint { - font-size: 14px; + font-size: $x-small; + font-style: italic; font-weight: $regular; - line-height: 1.57; - letter-spacing: 1px; - color: $core-medium-blue-grey; + line-height: 20px; + display: inline-block; + margin-top: 8px; code { color: $core-blue; diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index 3b81515758b3..ddd3509bdc3e 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -12,7 +12,7 @@ &__page { text-align: center; - width: 145px; + width: 150px; font-size: $small; font-weight: $regular; color: $white; @@ -21,14 +21,11 @@ &::before { content: ''; position: absolute; - width: 235px; + width: 232px; height: 2px; - background-image: linear-gradient(to right, $ui-medium-grey 50%, transparent 50%); - background-position: left top; - background-repeat: repeat-x; - background-size: 17px 2px; + background-color: $core-blue; bottom: 43px; - left: 84px; + left: 87px; @include breakpoint(tablet) { bottom: 23px; @@ -38,7 +35,7 @@ &::after { @extend %kolidecon; @include size(24px); - background-color: $white; + background-color: transparent; display: block; border-radius: 50%; content: ''; @@ -64,18 +61,24 @@ &--1 { &::after { - border: solid 2px $success; + border: 2px solid $white; } &.registration-breadcrumbs__page--active { + + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $success; + background-color: transparent; + border: 2px solid $white; } } &.registration-breadcrumbs__page--complete { &::before { - background-image: linear-gradient(to right, $success 0%, $core-purple 100%); + background-color: $white; background-size: auto; z-index: 2; } @@ -83,7 +86,7 @@ &::after { @include size(28px); content: '\f035'; - color: $success; + color: $white; border: 0; } } @@ -91,26 +94,30 @@ &--2 { &::after { - border: solid 2px $core-purple; + border: solid 2px $core-blue; } &.registration-breadcrumbs__page--active { + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $core-purple; + background-color: transparent; + border: 2px solid $white; } } &.registration-breadcrumbs__page--complete { &::before { - background-image: linear-gradient(to right, $core-purple 0%, $core-blue 100%); - background-size: auto; + background: $white; z-index: 2; } &::after { @include size(28px); content: '\f035'; - color: $core-purple; + color: $white; border: 0; } } @@ -126,8 +133,14 @@ } &.registration-breadcrumbs__page--active { + + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $core-blue; + background-color: transparent; + border: 2px solid $white; } } @@ -135,7 +148,7 @@ &::after { @include size(28px); content: '\f035'; - color: $core-blue; + color: $white; border: 0; } } From 4c6a623ac2ba2a42b891b0b6c35d0d6b524e3ae4 Mon Sep 17 00:00:00 2001 From: Noah Talerman Date: Tue, 1 Dec 2020 13:05:59 -0500 Subject: [PATCH 3/5] Move ConfirmationPage to render within RegistrationForm. Style ConfirmationPage. --- cmd/fleet/serve.go | 2 +- frontend/components/App/App.jsx | 1 - .../ConfirmationPage/ConfirmationPage.jsx | 18 +++- .../ConfirmationPage/_styles.scss | 36 +++---- .../RegistrationForm/RegistrationForm.jsx | 93 ++++--------------- .../RegistrationForm.tests.jsx | 8 +- .../forms/RegistrationForm/_styles.scss | 44 +++++---- .../fields/InputFieldWithIcon/_styles.scss | 1 + frontend/layouts/CoreLayout/_styles.scss | 1 + .../RegistrationPage/Breadcrumbs/_styles.scss | 8 +- 10 files changed, 89 insertions(+), 123 deletions(-) diff --git a/cmd/fleet/serve.go b/cmd/fleet/serve.go index 4e04441275e5..ed38fbca38c9 100644 --- a/cmd/fleet/serve.go +++ b/cmd/fleet/serve.go @@ -232,7 +232,7 @@ the way that the Fleet server works. apiHandler = service.WithSetup(svc, logger, apiHandler) frontendHandler = service.RedirectLoginToSetup(svc, logger, frontendHandler, config.Server.URLPrefix) } else { - // frontendHandler = service.RedirectSetupToLogin(svc, logger, frontendHandler, config.Server.URLPrefix) + frontendHandler = service.RedirectSetupToLogin(svc, logger, frontendHandler, config.Server.URLPrefix) } } diff --git a/frontend/components/App/App.jsx b/frontend/components/App/App.jsx index 40e2ee220703..9d58b0262f52 100644 --- a/frontend/components/App/App.jsx +++ b/frontend/components/App/App.jsx @@ -13,7 +13,6 @@ export class App extends Component { static propTypes = { children: PropTypes.element, dispatch: PropTypes.func, - showBackgroundImage: PropTypes.bool, user: userInterface, }; diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx index c01a4751e466..ee3d6a38f135 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx @@ -4,7 +4,6 @@ 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'; @@ -12,10 +11,22 @@ 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; @@ -37,6 +48,7 @@ class ConfirmationPage extends Component { const { importOsqueryConfig } = this; const { className, + currentPage, handleSubmit, formData: { email, @@ -45,13 +57,13 @@ class ConfirmationPage extends Component { username, }, } = this.props; + const tabIndex = currentPage ? 1 : -1; const confirmRegClasses = classnames(className, baseClass); return (
- @@ -77,7 +89,7 @@ class ConfirmationPage extends Component { {importOsqueryConfig()} - diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss index 64ee9d7f517c..e460d4ab18ed 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss @@ -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 { @@ -27,13 +31,10 @@ 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 { @@ -41,27 +42,23 @@ } 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 { @@ -92,4 +89,9 @@ top: 0; } } + + .button { + width: 160px; + margin-top: 40px; + } } diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index 81c0d69b6c63..7a4985f4d428 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -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 pageHeaderText = { - 1: 'Setup user', - 2: 'Organization details', - 3: 'Set Fleet URL', - 4: 'Success', -}; - const baseClass = 'user-registration'; class RegistrationForm extends Component { @@ -68,79 +61,10 @@ class RegistrationForm extends Component { return false; } - renderHeader = () => { - const { page } = this.props; - const headerText = pageHeaderText[page]; - - if (headerText) { - return

{headerText}

; - } - - return false; - } - - renderDescription = () => { - const { page } = this.props; - - if (page === 1) { - return ( -
-

Additional admins can be designated within the Fleet App

-

Passwords must include 7 characters, at least 1 number (eg. 0-9) and at least 1 symbol (eg. ^&*#)

-
- ); - } - - if (page === 2) { - return ( -
-

Set your organization's name (eg. Kolide, Inc)

-

(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).

-
- ); - } - - if (page === 3) { - return ( -
-

Define the base URL of this Fleet instance.

-
- ); - } - - return false; - } - - renderContent = () => { - const { page } = this.props; - const { formData } = this.state; - const { - onSubmitConfirmation, - renderDescription, - renderHeader, - } = this; - - if (page === 4) { - return ( -
- {renderHeader()} - -
- ); - } - - return ( -
- {renderHeader()} - {renderDescription()} -
- ); - } - render () { const { page } = this.props; const { formData } = this.state; - const { isCurrentPage, onPageFormSubmit, renderContent } = this; + const { isCurrentPage, onPageFormSubmit, onSubmitConfirmation } = this; const adminDetailsContainerClass = classnames( `${baseClass}__container`, @@ -172,6 +96,16 @@ class RegistrationForm extends Component { `${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`, { @@ -181,6 +115,7 @@ 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, }, ); @@ -200,6 +135,10 @@ class RegistrationForm extends Component {

Set Fleet URL

+
+

Success

+ +
); diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx index 69607e20d1b0..d5e118036cb8 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx @@ -9,28 +9,28 @@ describe('RegistrationForm - component', () => { const form = mount(); expect(form.find('AdminDetails').length).toEqual(1); - expect(form.text()).toInclude('SET USERNAME & PASSWORD'); + expect(form.text()).toInclude('Setup user'); }); it('renders OrgDetails on the second page', () => { const form = mount(); expect(form.find('OrgDetails').length).toEqual(1); - expect(form.text()).toInclude('SET ORGANIZATION DETAILS'); + expect(form.text()).toInclude('Organization details'); }); it('renders KolideDetails on the third page', () => { const form = mount(); expect(form.find('KolideDetails').length).toEqual(1); - expect(form.text()).toInclude('SET KOLIDE WEB ADDRESS'); + expect(form.text()).toInclude('Set Fleet URL'); }); it('renders ConfirmationPage on the fourth page', () => { const form = mount(); expect(form.find('ConfirmationPage').length).toEqual(1); - expect(form.text()).toInclude('SUCCESS'); + expect(form.text()).toInclude('Success'); }); }); diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index c8f41e1c2c9d..b02c3d8c5e2b 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -1,7 +1,7 @@ .user-registration { display: flex; justify-content: center; - align-items: center; + align-items: stretch; flex-grow: 1; margin-top: 24px; @@ -14,11 +14,13 @@ box-sizing: border-box; padding: 40px; z-index: 1; + transform: translateY(-50%); h2 { font-size: $large; font-weight: $regular; - padding: 0 0 16px 0; + text-align: center; + padding: 0 0 16px; margin: 0; margin-bottom: 40px; border-bottom: 1px solid $ui-borders; @@ -26,12 +28,12 @@ p { font-size: $small; - margin: 0 0 8px 0; + margin: 0 0 8px; } &--admin { left: 0; - top: 0; + top: unquote('max(56%, 480px)'); margin: auto; } @@ -45,6 +47,11 @@ top: -8px; } + &--confirmation { + left: calc(200% + 220px); + top: -8px; + } + &--complete { padding: 0; @@ -58,11 +65,9 @@ } &__form { - transform: translateY(-130px); + display: flex; width: 100%; - height: 470px; box-sizing: border-box; - padding: 25px 0; @include breakpoint(tablet) { transform: translateY(-100px); @@ -76,13 +81,17 @@ .user-registration__container--org { left: 0; - top: 0; + top: unquote('max(56%, 480px)'); margin: auto; } .user-registration__container--kolide { left: calc(100% + 220px); } + + .user-registration__container--confirmation { + left: calc(150% + 220px); + } } &--step2-complete { @@ -99,9 +108,13 @@ .user-registration__container--kolide { left: 0; - top: 0; + top: unquote('max(56%, 480px)'); margin: auto; } + + .user-registration__container--confirmation { + left: calc(100% + 220px); + } } &--step3-complete { @@ -120,6 +133,12 @@ left: -600px; opacity: 0; } + + .user-registration__container--confirmation { + left: 0; + top: unquote('max(56%, 480px)'); + margin: auto; + } } &::before { @@ -167,11 +186,4 @@ } } - &__confirmation { - background-color: $core-light-blue-grey; - position: relative; - z-index: 2; - width: 500px; - height: 500px; - } } diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss index 57176a2d68c8..8ec61562fa72 100644 --- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss +++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss @@ -49,6 +49,7 @@ &__label { font-size: $x-small; font-weight: $bold; + margin-bottom: 2px; } &__errors { diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss index b8cc94e69a25..1fe46418bbdd 100644 --- a/frontend/layouts/CoreLayout/_styles.scss +++ b/frontend/layouts/CoreLayout/_styles.scss @@ -9,6 +9,7 @@ padding: 0 0 0 $pad-base; max-width: calc(100% - 217px); position: relative; + background-color: $white; &--small { max-width: calc(100% - 73px); diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index ddd3509bdc3e..ffbb90c50f41 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -2,9 +2,9 @@ display: flex; justify-content: space-between; align-content: center; - width: 665px; + width: 600px; height: 125px; - margin: 38px auto 0 auto; + margin: 38px auto 0; @include breakpoint(tablet) { height: 75px; @@ -21,7 +21,7 @@ &::before { content: ''; position: absolute; - width: 232px; + width: 200px; height: 2px; background-color: $core-blue; bottom: 43px; @@ -69,7 +69,7 @@ &::before { background: linear-gradient(to right, $white 50%, $core-blue 50%); } - + &::after { background-color: transparent; border: 2px solid $white; From 3bd64a52b9475e4c07c5e125e8e3b1aacf65fd3f Mon Sep 17 00:00:00 2001 From: Noah Talerman Date: Tue, 1 Dec 2020 14:29:02 -0500 Subject: [PATCH 4/5] Add toContain() in RegistrationForm tests. --- .../forms/RegistrationForm/RegistrationForm.tests.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx index 95ec7dc9e44c..03e66a580c76 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx @@ -8,28 +8,28 @@ describe('RegistrationForm - component', () => { const form = mount(); expect(form.find('AdminDetails').length).toEqual(1); - expect(form.text()).toInclude('Setup user'); + expect(form.text()).toContain('Setup user'); }); it('renders OrgDetails on the second page', () => { const form = mount(); expect(form.find('OrgDetails').length).toEqual(1); - expect(form.text()).toInclude('Organization details'); + expect(form.text()).toContain('Organization details'); }); it('renders KolideDetails on the third page', () => { const form = mount(); expect(form.find('KolideDetails').length).toEqual(1); - expect(form.text()).toInclude('Set Fleet URL'); + expect(form.text()).toContain('Set Fleet URL'); }); it('renders ConfirmationPage on the fourth page', () => { const form = mount(); expect(form.find('ConfirmationPage').length).toEqual(1); - expect(form.text()).toInclude('Success'); + expect(form.text()).toContain('Success'); }); }); From aaee5d257bdc270583799d65de7be0504a1ae484 Mon Sep 17 00:00:00 2001 From: Mike McNeil Date: Tue, 1 Dec 2020 22:50:02 -0600 Subject: [PATCH 5/5] add help text w/ recommendation about logo image dimensions and aspect ratio --- .../components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx index b4249c2fe3fa..12ec08111e22 100644 --- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx +++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx @@ -49,7 +49,7 @@ class OrgDetails extends Component { {...fields.org_logo_url} placeholder="Organization Logo URL (optional)" tabIndex={tabIndex} - hint="Set a logo to use in the Fleet application. Should be an https URL to an image file (e.g. https://fleetdm.com/logo.png)." + hint="Personalize Fleet with your brand. For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png." />
Administrator Configuration