Refactor Create Account form into a component

app/hub/Views/BrowserCreateAccountForm/BrowserCreateAccountForm.jsx

@@ -0,0 +1,235 @@
+/**
+ * Browser Create Account View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import ClassNames from 'classnames';
+import { NavLink } from 'react-router-dom';
+import { ToggleCheckbox } from '../../../shared-components';
+import BrowserLogInForm from '../BrowserLoginForm';
+
+const SIGN_IN = 'SIGN_IN';
+const FORGOT_PASSWORD = 'FORGOT_PASSWORD';
+const CREATE_ACCOUNT = 'CREATE_ACCOUNT';
+const promoString = `${t('hub_browser_send_me')} Ghostery ${t('hub_browser_updates_and_promotions')}`;
+
+/**
+ * A Functional React component for rendering the Browser Create Account View
+ * @return {JSX} JSX for rendering the Browser Create Account View of the Hub app
+ * @memberof HubComponents
+ */
+const BrowserCreateAccountForm = (props) => {
+	const {
+		email,
+		emailError,
+		confirmEmail,
+		confirmEmailError,
+		firstName,
+		lastName,
+		password,
+		confirmPassword,
+		passwordInvalidError,
+		passwordLengthError,
+		isUpdatesChecked,
+		isUpdatesNotCheckedError,
+		handleInputChange,
+		handleUpdatesCheckboxChange,
+		handleSubmit,
+	} = props;
+
+	const emailInputClassNames = ClassNames('BrowserCreateAccountForm__inputBox', {
+		error: emailError,
+	});
+	const confirmInputClassNames = ClassNames('BrowserCreateAccountForm__inputBox', {
+		error: confirmEmailError,
+	});
+	const updatesCheckboxInputLabelClassNames = ClassNames('BrowserCreateAccountForm__promoString clickable', {
+		error: isUpdatesNotCheckedError,
+	});
+	const passwordInputClassNames = ClassNames('BrowserCreateAccountForm__inputBox', {
+		error: passwordInvalidError || passwordLengthError,
+	});
+
+	return (
+		<form onSubmit={handleSubmit}>
+			<div className="BrowserCreateAccountForm--addPaddingTop row align-center-middle">
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-email" className="BrowserCreateAccountForm__inputLabel">
+						{t('email_colon')}
+					</label>
+					<input
+						id="create-account-email"
+						className={emailInputClassNames}
+						name="email"
+						type="text"
+						value={email}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+						placeholder="example@mail.com"
+					/>
+					{emailError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('please_enter_a_valid_email')}
+						</div>
+					)}
+				</div>
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-confirmEmail" className="BrowserCreateAccountForm__inputLabel">
+						{t('confirm_email_colon')}
+					</label>
+					<input
+						id="create-account-confirmEmail"
+						className={confirmInputClassNames}
+						name="confirmEmail"
+						type="text"
+						value={confirmEmail}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+					/>
+					{confirmEmailError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('your_email_do_not_match')}
+						</div>
+					)}
+				</div>
+			</div>
+			<div className="row align-center-middle">
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-firstName" className="BrowserCreateAccountForm__inputLabel">
+						{t('hub_create_account_label_first_name')}
+					</label>
+					<input
+						id="create-account-firstName"
+						className="BrowserCreateAccountForm__inputBox"
+						name="firstName"
+						type="text"
+						value={firstName}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+					/>
+				</div>
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-lastName" className="BrowserCreateAccountForm__inputLabel">
+						{t('hub_create_account_label_email_last_name')}
+					</label>
+					<input
+						id="create-account-lastName"
+						className="BrowserCreateAccountForm__inputBox"
+						name="lastName"
+						type="text"
+						value={lastName}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+					/>
+				</div>
+			</div>
+			<div className="row align-center-middle">
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-password" className="BrowserCreateAccountForm__inputLabel">
+						{t('password_colon')}
+					</label>
+					<input
+						id="create-account-password"
+						className={passwordInputClassNames}
+						name="password"
+						type="password"
+						value={password}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+					/>
+					{passwordInvalidError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('hub_create_account_label_password_invalid')}
+						</div>
+					)}
+					{passwordLengthError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('hub_create_account_label_password_invalid_length')}
+						</div>
+					)}
+				</div>
+				<div className="columns small-12 medium-5">
+					<label htmlFor="create-account-password" className="BrowserCreateAccountForm__inputLabel">
+						{t('confirm_password_colon')}
+					</label>
+					<input
+						id="create-account-password"
+						className={passwordInputClassNames}
+						name="confirm password"
+						type="password"
+						value={confirmPassword}
+						onChange={handleInputChange}
+						pattern=".{1,}"
+						autoComplete="off"
+					/>
+					{passwordInvalidError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('hub_create_account_label_password_invalid')}
+						</div>
+					)}
+					{passwordLengthError && (
+						<div className="BrowserCreateAccountForm__inputError">
+							{t('hub_create_account_label_password_invalid_length')}
+						</div>
+					)}
+				</div>
+			</div>
+			<div className="row align-center-middle">
+				<div className="columns small-12 medium-8">
+					<div className="BrowserCreateAccountForm__checkboxContainer BrowserCreateAccountForm--marginBottom flex-container">
+						<ToggleCheckbox
+							checked={isUpdatesChecked}
+							className="ToggleCheckbox--flush-left"
+							onChange={handleUpdatesCheckboxChange}
+						/>
+						<span
+							className={updatesCheckboxInputLabelClassNames}
+							onClick={handleUpdatesCheckboxChange}
+							dangerouslySetInnerHTML={{ __html: promoString }}
+						/>
+					</div>
+				</div>
+				<div className="columns small-12 medium-2" />
+			</div>
+			<div className="BrowserCreateAccountForm__ctaButtonContainer">
+				<button type="submit" className="BrowserCreateAccountForm__ctaButton">{t('create_account')}</button>
+			</div>
+		</form>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+BrowserCreateAccountForm.propTypes = {
+	email: PropTypes.string.isRequired,
+	emailError: PropTypes.bool.isRequired,
+	confirmEmail: PropTypes.string.isRequired,
+	confirmEmailError: PropTypes.bool.isRequired,
+	firstName: PropTypes.string.isRequired,
+	lastName: PropTypes.string.isRequired,
+	isUpdatesChecked: PropTypes.bool.isRequired,
+	isUpdatesNotCheckedError: PropTypes.bool.isRequired,
+	password: PropTypes.string.isRequired,
+	confirmPassword: PropTypes.string.isRequired,
+	passwordInvalidError: PropTypes.bool.isRequired,
+	passwordLengthError: PropTypes.bool.isRequired,
+	handleInputChange: PropTypes.func.isRequired,
+	handleUpdatesCheckboxChange: PropTypes.func.isRequired,
+	handleSubmit: PropTypes.func.isRequired,
+};
+
+export default BrowserCreateAccountForm;

app/hub/Views/BrowserCreateAccountForm/BrowserCreateAccountForm.scss

@@ -0,0 +1,74 @@
+.BrowserCreateAccountForm--addPaddingTop {
+	padding-top: 20px;
+}
+.BrowserCreateAccountForm__inputLabel {
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 2.86;
+	text-transform: uppercase;
+	color: #4a4a4a;
+}
+.BrowserCreateAccountForm__inputBox {
+	font-size: 14;
+	line-height: 24px;
+	color: #4a4a4a;
+
+	// Foundation Overrides
+	border-radius: 6px;
+	box-shadow: none;
+	border: 1px solid #9b9b9b;
+
+	&::placeholder {
+		color: #c4ced1;
+	}
+}
+.BrowserCreateAccountForm__inputBox.error {
+	margin-bottom: 8px;
+	border-color: $color-create-account-form-error-red;
+}
+.BrowserCreateAccountForm__promoString {
+	margin-top: 15px;
+	@include breakpoint(small down) {
+		margin-top: 0;
+	}
+}
+.BrowserCreateAccountForm__ctaButtonContainer {
+	display: flex;
+	justify-content: center;
+
+	.BrowserCreateAccountForm__ctaButton {
+		margin: 48px auto 0 auto;
+		height: 44px;
+		width: 162px;
+		padding: 7.7px 14px;
+		line-height: 22px;
+		background: linear-gradient(
+			45deg,
+			#ff7e74 50%,
+			#00aef0
+		);
+		background-size: 200% 100%;
+		background-position: 100% 50%;
+		transition: 0.25s all;
+		border: none;
+		&:hover {
+			background-position: 0% 50%;
+			transition: 0.25s all;
+		}
+		color: #FFF;
+		font-size: 14.1px;
+		font-weight: 700;
+		border-radius: 3.5px;
+		text-align: center;
+		line-height: 2.05;
+		cursor: pointer;
+	}
+}
+@media only screen and (max-width: 740px) {
+	.BrowserCreateAccountForm__checkboxContainer {
+		display: flex;
+		align-items: center;
+		padding-right: 12px;
+		justify-content: center;
+	}
+}

app/hub/Views/BrowserCreateAccountForm/index.js

@@ -0,0 +1,3 @@
+import BrowserCreateAccountForm from './BrowserCreateAccountForm';
+
+export default BrowserCreateAccountForm;