feat: 🎸 add all components to registration for generic cases

CaritasDeutschland · Sep 29, 2020 · c5be879 · c5be879
1 parent 082de4e
commit c5be879
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 55 deletions.
diff --git a/src/components/checkbox/ts/Checkbox.tsx b/src/components/checkbox/ts/Checkbox.tsx
@@ -24,9 +24,10 @@ export const Checkbox = (props) => {
 				id={checkboxItem.labelId}
 				className="checkbox__label"
 				htmlFor={checkboxItem.inputId}
-			>
-				{checkboxItem.label}
-			</label>
+				dangerouslySetInnerHTML={{
+					__html: checkboxItem.label
+				}}
+			></label>
 		</div>
 	);
 };
diff --git a/src/components/inputField/scss/_inputField.styles.scss b/src/components/inputField/scss/_inputField.styles.scss
@@ -59,6 +59,26 @@ $iconSize: 24px;
 				border: 1px solid $form-disabled !important;
 			}
 		}
+
+		&--invalid {
+			border: 2px solid $form-error !important;
+			color: $form-error !important;
+
+			& + label,
+			& + label + span + p {
+				color: $form-error;
+			}
+		}
+
+		&--valid {
+			border: 2px solid $form-success !important;
+			color: $form-success !important;
+
+			& + label,
+			& + label + span + p {
+				color: $form-success;
+			}
+		}
 	}
 
 	&__icon {

diff --git a/src/components/postcodeSuggestion/ts/PostcodeSuggestion.tsx b/src/components/postcodeSuggestion/ts/PostcodeSuggestion.tsx
@@ -17,6 +17,7 @@ import {
 
 export interface PostcodeSuggestionProps {
 	selectedConsultingType: number;
+	icon?: JSX.Element;
 	setAgency: Function;
 }
 
@@ -127,7 +128,8 @@ export const PostcodeSuggestion = (props: PostcodeSuggestionProps) => {
 		maxLength: VALID_POSTCODE_LENGTH.MAX,
 		pattern: '^[0-9]+$',
 		disabled: !props.selectedConsultingType,
-		postcodeFallbackLink: postcodeFallbackLink
+		postcodeFallbackLink: postcodeFallbackLink,
+		icon: props.icon
 	};
 
 	const handlePostcodeInput = (e) => {

diff --git a/src/components/profile/scss/_profile.styles.scss b/src/components/profile/scss/_profile.styles.scss
@@ -434,6 +434,7 @@ $backBtnSize: 24px;
 		max-width: 320px;
 		margin: 0 auto;
 		padding-bottom: $grid-base-six;
+		z-index: 20;
 
 		&:after,
 		&:before {

diff --git a/src/components/registration/registrationData.json b/src/components/registration/registrationData.json
@@ -2,16 +2,16 @@
 	"addiction": {
 		"consultingType": "0",
 		"useInformal": true,
-		"overline": "Sucht",
+		"overline": "Suchtberatung",
 		"showEmail": false,
-		"hidePostcodeField": true
+		"showPostCode": false
 	},
 	"u25": {
 		"consultingType": "1",
 		"useInformal": true,
 		"overline": "Beratung für Suizidgefährdete junge Menschen [U25]",
 		"showEmail": true,
-		"hidePostcodeField": true,
+		"showPostCode": false,
 		"requiredComponents": [
 			{
 				"componentType": "dropdown",
@@ -90,10 +90,17 @@
 		]
 	},
 	"pregnancy": {
+		"consultingType": "2",
+		"useInformal": false,
+		"overline": "Schwangerschaftsberatung",
+		"showEmail": true,
+		"showPostCode": true
+	},
+	"parenting": {
 		"consultingType": "2",
 		"useInformal": true,
 		"overline": "Schwanger",
 		"showEmail": true,
-		"hidePostcodeField": true
+		"showPostCode": false
 	}
 }
diff --git a/src/components/registration/ts/Registration.tsx b/src/components/registration/ts/Registration.tsx
@@ -4,10 +4,16 @@ import { Stage } from '../../stage/ts/stage';
 import { InputField, InputFieldItem } from '../../inputField/ts/InputField';
 import { SVG } from '../../svgSet/ts/SVG';
 import { ICON_KEYS } from '../../svgSet/ts/SVGHelpers';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { translate } from '../../../resources/ts/i18n/translate';
 import { Button } from '../../button/ts/Button';
 import * as allRegistrationData from '../registrationData.json';
+import { PostcodeSuggestion } from '../../postcodeSuggestion/ts/PostcodeSuggestion';
+import {
+	inputValuesFit,
+	strengthIndicator
+} from '../../passwordField/ts/validateInputValue';
+import { CheckboxItem, Checkbox } from '../../checkbox/ts/Checkbox';
 
 export const initRegistration = () => {
 	ReactDOM.render(
@@ -21,11 +27,35 @@ const getConsultingTypeFromRegistration = () =>
 		document.getElementById('registrationRoot').dataset.consultingtype
 	);
 
+const getPasswordClassNames = (invalid, valid) => {
+	if (invalid) {
+		return 'inputField__input--invalid';
+	}
+	if (valid) {
+		return 'inputField__input--valid';
+	}
+};
+
 const Registration = () => {
 	const [username, setUsername] = useState(null);
 	const [postcode, setPostcode] = useState(null);
-	const [passwordInput, setPasswordInput] = useState(null);
+	const [agencyId, setAgencyId] = useState(null);
+	const [password, setpassword] = useState(null);
+	const [passwordSuccessMessage, setPasswordSuccessMessage] = useState(null);
+	const [passwordErrorMessage, setPasswordErrorMessage] = useState(null);
 	const [passwordConfirmation, setPasswordConfirmation] = useState(null);
+	const [
+		passwordConfirmationSuccessMessage,
+		setPasswordConfirmationSuccessMessage
+	] = useState(null);
+	const [
+		passwordConfirmationErrorMessage,
+		setPasswordConfirmationErrorMessage
+	] = useState(null);
+	const [email, setEmail] = useState(null);
+	const [isDataProtectionSelected, setIsDataProtectionSelected] = useState(
+		false
+	);
 	const [consultingType, setConsultingType] = useState(
 		getConsultingTypeFromRegistration()
 	);
@@ -42,95 +72,184 @@ const Registration = () => {
 		content: username,
 		icon: <SVG name={ICON_KEYS.PERSON} />,
 		id: 'username',
-		infoText: translate('registration.user.infoText'),
 		labelTranslatable: 'registration.user.label',
+		infoText: translate('registration.user.infoText'),
 		maxLength: 30,
 		name: 'username',
 		type: 'text'
 	};
 
-	const inputItemPostcode: InputFieldItem = {
-		content: postcode,
-		icon: <SVG name={ICON_KEYS.PIN} />,
-		id: 'postcode',
-		infoText: translate('registration.postcode.infoText'),
-		labelTranslatable: 'registration.postcode.label',
-		name: 'postcode',
-		type: 'number'
-	};
-
-	const inputItemPasswordInput: InputFieldItem = {
-		content: passwordInput,
+	const inputItempassword: InputFieldItem = {
+		content: password,
+		class: getPasswordClassNames(
+			!!passwordErrorMessage,
+			!!passwordSuccessMessage
+		),
 		icon: <SVG name={ICON_KEYS.LOCK} />,
 		id: 'passwordInput',
 		labelTranslatable: 'registration.password.input.label',
+		infoText:
+			(passwordErrorMessage || passwordSuccessMessage
+				? `${passwordErrorMessage} ${passwordSuccessMessage}<br>`
+				: '') +
+			translate('registration.password.confirmation.infoText'),
 		name: 'passwordInput',
-		type: 'text'
+		type: 'password'
 	};
 
 	const inputItemPasswordConfirmation: InputFieldItem = {
 		content: passwordConfirmation,
+		class: getPasswordClassNames(
+			!!passwordConfirmationErrorMessage,
+			!!passwordConfirmationSuccessMessage
+		),
 		icon: <SVG name={ICON_KEYS.LOCK} />,
-		id: 'passwordInput',
-		infoText: translate('registration.postcode.infoText'),
-		labelTranslatable: 'registration.postcode.label',
-		name: 'passwordInput',
+		id: 'passwordConfirmation',
+		labelTranslatable: 'registration.password.confirmation.label',
+		infoText:
+			passwordConfirmationErrorMessage ||
+			passwordConfirmationSuccessMessage
+				? `${passwordConfirmationErrorMessage} ${passwordConfirmationSuccessMessage}`
+				: '',
+		name: 'passwordConfirmation',
+		type: 'password'
+	};
+
+	const inputItemEmail: InputFieldItem = {
+		content: email,
+		icon: <SVG name={ICON_KEYS.ENVELOPE} />,
+		id: 'email',
+		labelTranslatable: 'registration.email.label',
+		infoText: translate('registration.email.infoText'),
+		name: 'email',
 		type: 'text'
 	};
 
-	const handleUsernameChange = (event) => {
-		setUsername(event.target.value);
+	const checkboxItemDataProtection: CheckboxItem = {
+		inputId: 'dataProtectionCheckbox',
+		name: 'dataProtectionCheckbox',
+		labelId: 'dataProtectionLabel',
+		label: translate('registration.dataProtection.label'),
+		checked: isDataProtectionSelected
 	};
 
-	const handlePostcodeChange = (event) => {
-		setPostcode(event.target.value);
+	const handleUsernameChange = (event) => {
+		setUsername(event.target.value);
 	};
 
-	const handlePasswordInputChange = (event) => {
-		setPasswordInput(event.target.value);
+	const handlepasswordChange = (event) => {
+		validatePassword(event.target.value);
+		setpassword(event.target.value);
 	};
 
 	const handlePasswordConfirmationChange = (event) => {
+		validatePasswordConfirmation(event.target.value);
 		setPasswordConfirmation(event.target.value);
 	};
 
+	const handleEmailChange = (event) => {
+		setEmail(event.target.value);
+	};
+
+	const validatePassword = (password) => {
+		let passwordStrength = strengthIndicator(password);
+		console.log('password strength', passwordStrength);
+		if (password.length >= 1 && passwordStrength < 4) {
+			setPasswordSuccessMessage('');
+			setPasswordErrorMessage(
+				translate('registration.password.insecure')
+			);
+		} else if (password.length >= 1) {
+			setPasswordSuccessMessage(
+				translate('registration.password.secure')
+			);
+			setPasswordErrorMessage('');
+		} else {
+			setPasswordSuccessMessage('');
+			setPasswordErrorMessage('');
+		}
+	};
+
+	const validatePasswordConfirmation = (confirmPassword) => {
+		let passwordFits = inputValuesFit(confirmPassword, password);
+		if (confirmPassword.length >= 1 && !passwordFits) {
+			setPasswordConfirmationSuccessMessage('');
+			setPasswordConfirmationErrorMessage(
+				translate('registration.password.notSame')
+			);
+		} else if (confirmPassword.length >= 1) {
+			setPasswordConfirmationSuccessMessage(
+				translate('registration.password.same')
+			);
+			setPasswordConfirmationErrorMessage('');
+		} else {
+			setPasswordConfirmationSuccessMessage('');
+			setPasswordConfirmationErrorMessage('');
+		}
+	};
+
 	return (
 		<div className="registration">
 			<Stage hasAnimation={true}></Stage>
 			<form
 				id="registrationForm"
-				// IF GENERIC: registration__form--generic
+				// IF GENERIC: registration__form--generic ???
 				className="registration__form"
 				data-consultingtype="{{consultingType}}"
 				data-resources="[{paths: ['components/registrationFormular/ts/registration.js?{{bioTrueEnv 'RELEASE_VERSION'}}']}]"
 			>
-				<h3>OVERLINE</h3>
+				<h3>{registrationData.overline}</h3>
 				<h1>Registrierung</h1>
 
-				{/* ----------------------------- Required fields ---------------------------- */}
+				{/* ----------------------------- Required Fields ---------------------------- */}
 				<div className="generalInformation">
-					{/* REMOVE SHOW EMAIL HERE: ONLY EXAMPLE */}
-					{registrationData.showEmail ? (
-						<InputField
-							item={inputItemUsername}
-							inputHandle={handleUsernameChange}
-						/>
-					) : null}
-					{/*POST CODE NOT FOR EVERY CONSULTANT TYPE*/}
 					<InputField
-						item={inputItemPostcode}
-						inputHandle={handlePostcodeChange}
+						item={inputItemUsername}
+						inputHandle={handleUsernameChange}
 					/>
+					{registrationData.showPostCode ? (
+						<PostcodeSuggestion
+							selectedConsultingType={consultingType}
+							icon={<SVG name={ICON_KEYS.PIN} />}
+							setAgency={(agency) => {
+								if (agency) {
+									setAgencyId(agency?.id);
+									setPostcode(agency?.typedPostcode);
+								}
+							}}
+						/>
+					) : null}
 					<InputField
-						item={inputItemPasswordInput}
-						inputHandle={handlePasswordInputChange}
+						item={inputItempassword}
+						inputHandle={handlepasswordChange}
 					/>
 					<InputField
 						item={inputItemPasswordConfirmation}
 						inputHandle={handlePasswordConfirmationChange}
 					/>
-					{/*
-					{{> 'components/inputField/inputField' email.[0]}} */}
+					<InputField
+						item={inputItemEmail}
+						inputHandle={handleEmailChange}
+					/>
+				</div>
+
+				{/* ----------------------------- Submit Section ---------------------------- */}
+				<div className="registrationFooter">
+					<div className="registrationFooter__requiredInfo">
+						<p className="formWrapper__infoText">
+							{translate('registration.required.infoText')}
+						</p>
+					</div>
+					<Checkbox
+						item={checkboxItemDataProtection}
+						checkboxHandle={() =>
+							setIsDataProtectionSelected(
+								!isDataProtectionSelected
+							)
+						}
+					/>
+					{/* {{> 'components/checkbox/checkbox' termsCheckbox.[0]}}
+					{{> 'components/button/button' sendButton.[0]}} */}
 				</div>
 			</form>