Skip to content

Commit

Permalink
feat: 🎸 rm email from registration, add error handling username
Browse files Browse the repository at this point in the history
  • Loading branch information
@koepferd
koepferd committed Mar 12, 2021
1 parent a302b91 commit ba9355f
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 171 deletions.
27 changes: 2 additions & 25 deletions src/api/apiPostRegistration.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import {
removeWarningLabels,
warningLabelForTranslatableAndParentId
} from '../components/registration/warningLabels';
import { generateCsrfToken } from '../resources/scripts/helpers/generateCsrfToken';
import { autoLogin } from '../components/registration/autoLogin';
import {
Expand All @@ -15,7 +11,7 @@ export const apiPostRegistration = (
url: string,
data: {},
handleSuccessfulRegistration: Function,
handleRegistrationError: Function
handleRegistrationConflictError: Function
) => {
removeAllCookies();
if (isRequestInProgress) {
Expand All @@ -33,9 +29,7 @@ export const apiPostRegistration = (
handleLoginSuccess: handleSuccessfulRegistration
});
} else if (xhr.readyState > 3 && xhr.status === 409) {
//TODO rm deprecated error functionality
handleRegistrationError(xhr.response);
handleConfirmationError(xhr.response);
handleRegistrationConflictError(xhr);
isRequestInProgress = false;
} else if (
xhr.readyState > 3 &&
Expand All @@ -54,20 +48,3 @@ export const apiPostRegistration = (
xhr.send(JSON.stringify(data));
return xhr;
};

export const handleConfirmationError = (data: string) => {
removeWarningLabels();
window.scrollTo(0, 0);
if (data.includes('"usernameAvailable":0')) {
warningLabelForTranslatableAndParentId(
'warningLabels.username.unavailable',
'username'
);
}
if (data.includes('"emailAvailable":0')) {
warningLabelForTranslatableAndParentId(
'warningLabels.email.unavailable',
'email'
);
}
};
20 changes: 13 additions & 7 deletions src/api/fetchData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import {
redirectToErrorPage
} from '../components/error/errorHandling';
import { redirectToHelpmail } from '../components/registration/prefillPostcode';
import {
isU25Registration,
getConsultingTypeFromRegistration
} from '../resources/scripts/helpers/resorts';
import { isU25Registration } from '../resources/scripts/helpers/resorts';
import { logout } from '../components/logout/logout';

const isIE11Browser =
Expand All @@ -25,9 +22,11 @@ export const FETCH_ERRORS = {
EMPTY: 'EMPTY',
PASSWORD: 'PASSWORD',
CONFLICT: 'CONFLICT',
CONFLICT_WITH_RESPONSE: 'CONFLICT_WITH_RESPONSE',
TIMEOUT: 'TIMEOUT',
NO_MATCH: 'NO_MATCH',
CATCH_ALL: 'CATCH_ALL'
CATCH_ALL: 'CATCH_ALL',
X_REASON: 'X-Reason'
};

export const FETCH_SUCCESS = {
Expand Down Expand Up @@ -121,10 +120,17 @@ export const fetchData = (props: fetchDataProps): Promise<any> =>
reject(new Error(FETCH_ERRORS.NO_MATCH));
} else if (
response.status === 409 &&
props.responseHandling.includes(FETCH_ERRORS.CONFLICT)
(props.responseHandling.includes(
FETCH_ERRORS.CONFLICT
) ||
props.responseHandling.includes(
FETCH_ERRORS.CONFLICT_WITH_RESPONSE
))
) {
reject(
getConsultingTypeFromRegistration()
props.responseHandling.includes(
FETCH_ERRORS.CONFLICT_WITH_RESPONSE
)
? response
: new Error(FETCH_ERRORS.CONFLICT)
);
Expand Down
18 changes: 9 additions & 9 deletions src/components/formAccordion/FormAccordion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { AccordionItemValidity } from '../registration/registrationHelpers';

interface FormAccordionProps {
consultingType: number;
isUsernameAlreadInUse: boolean;
prefilledAgencyData: any;
handleFormAccordionData: Function;
}
Expand Down Expand Up @@ -51,11 +52,18 @@ export const FormAccordion = (props: FormAccordionProps) => {
}
}, [isUsernameValid, isSelectedAgencyValid, username, agency]); // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
if (props.isUsernameAlreadInUse) {
setActiveItem(1);
}
}, [props.isUsernameAlreadInUse]);

const accordionItemData = [
{
title: translate('registration.username.headline'),
nestedComponent: (
<RegistrationUsername
isUsernameAlreadInUse={props.isUsernameAlreadInUse}
onUsernameChange={(username) => setUsername(username)}
onValidityChange={(validity) =>
setIsUsernameValid(validity)
Expand Down Expand Up @@ -89,14 +97,6 @@ export const FormAccordion = (props: FormAccordionProps) => {
});
}

const handleStepSubmit = (indexOfItem) => {
if (indexOfItem + 1 > accordionItemData.length) {
setActiveItem(0);
} else {
setActiveItem(indexOfItem + 1);
}
};

const handleItemHeaderClick = (indexOfItem) => {
setActiveItem(indexOfItem);
};
Expand All @@ -109,7 +109,7 @@ export const FormAccordion = (props: FormAccordionProps) => {
index={i + 1}
isActive={i + 1 === activeItem}
isLastItem={i + 1 === accordionItemData.length}
onStepSubmit={handleStepSubmit}
onStepSubmit={(i) => setActiveItem(i + 1)}
onItemHeaderClick={handleItemHeaderClick}
title={accordionItem.title}
nestedComponent={accordionItem.nestedComponent}
Expand Down
92 changes: 14 additions & 78 deletions src/components/registration/Registration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
InputFieldItem
} from '../inputField/InputField';
import { ReactComponent as LockIcon } from '../../resources/img/icons/lock.svg';
import { ReactComponent as EnvelopeIcon } from '../../resources/img/icons/envelope.svg';
import { useEffect, useState } from 'react';
import { translate } from '../../resources/scripts/i18n/translate';
import { Button } from '../button/Button';
Expand All @@ -22,7 +21,6 @@ import {
buttonItemSubmit,
getOptionOfSelectedValue,
getValidationClassNames,
isStringValidEmail,
overlayItemRegistrationSuccess
} from './registrationHelpers';
import {
Expand All @@ -48,7 +46,6 @@ import {
} from '../../resources/scripts/helpers/resorts';
import { OverlayWrapper, Overlay, OVERLAY_FUNCTIONS } from '../overlay/Overlay';
import { redirectToApp } from './autoLogin';
import { removeInputErrorClass, removeWarningLabelById } from './warningLabels';
import { isNumber } from '../../resources/scripts/helpers/isNumber';
import '../../resources/styles/styles';
import './registration.styles';
Expand All @@ -70,7 +67,6 @@ export interface ResortData {
consultingType: string;
overline: string;
requiredComponents?: any[];
showEmail: boolean;
useInformal: boolean;
voluntaryComponents?: any[];
}
Expand Down Expand Up @@ -109,10 +105,9 @@ const Registration = () => {
passwordConfirmationErrorMessage,
setPasswordConfirmationErrorMessage
] = useState('');
const [email, setEmail] = useState('');
const [isEmailValid, setIsEmailValid] = useState(true);
const [emailSuccessMessage, setEmailSuccessMessage] = useState('');
const [emailErrorMessage, setEmailErrorMessage] = useState('');
const [isUsernameAlreadyInUse, setIsUsernameAlreadyInUse] = useState<
boolean
>(false);
const [
valuesOfGeneratedInputs,
setValuesOfGeneratedInputs
Expand Down Expand Up @@ -194,10 +189,6 @@ const Registration = () => {

validation.push(generalValidation ? true : false);

if (resortData.showEmail) {
validation.push(isEmailValid ? true : false);
}

// U25 and gemeinsamstatteinsam
if (consultingType === 1) {
validation.push(
Expand All @@ -216,14 +207,6 @@ const Registration = () => {
prefillPostcode();
}, []); // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
const warningLabels = document.querySelectorAll('.warning');
if (warningLabels.length > 0 && resortData.showEmail) {
removeWarningLabelById('email');
removeInputErrorClass('email');
}
}, [email, resortData.showEmail]);

useEffect(
() => {
if (isRegistrationValid()) {
Expand All @@ -237,7 +220,6 @@ const Registration = () => {
formAccordionData,
password,
passwordConfirmation,
email,
valuesOfGeneratedInputs,
isDataProtectionSelected
]
Expand Down Expand Up @@ -283,23 +265,6 @@ const Registration = () => {
type: 'password'
};

const inputItemEmail: InputFieldItem = {
content: email,
class: getValidationClassNames(
!!emailErrorMessage,
!!emailSuccessMessage
),
icon: <EnvelopeIcon />,
id: 'email',
label:
emailErrorMessage || emailSuccessMessage
? `${emailErrorMessage} ${emailSuccessMessage}`
: translate('registration.email.label'),
infoText: translate('registration.email.infoText'),
name: 'email',
type: 'text'
};

const checkboxItemDataProtection: CheckboxItem = {
inputId: 'dataProtectionCheckbox',
name: 'dataProtectionCheckbox',
Expand All @@ -319,39 +284,31 @@ const Registration = () => {
setPasswordConfirmation(event.target.value);
};

const handleEmailChange = (event) => {
validateEmail(event.target.value);
setEmail(event.target.value);
};

const handleOverlayAction = (buttonFunction: string) => {
if (buttonFunction === OVERLAY_FUNCTIONS.REDIRECT_WITH_BLUR) {
redirectToApp();
}
};

const handleRegistrationError = (response) => {
//TODO: implement new error functionality!
console.log('ERROR', response);
const handleRegistrationError = (response: XMLHttpRequest) => {
const error = response.getResponseHeader(FETCH_ERRORS.X_REASON);
if (error && error === 'USERNAME_NOT_AVAILABLE') {
setIsUsernameAlreadyInUse(true);
setIsSubmitButtonDisabled(true);
window.scrollTo({ top: 0 });
}
};
// TODO: refactor warning for username already in use!
// useEffect(() => {
// const warningLabels = document.querySelectorAll('.warning');
// if (warningLabels.length > 0) {
// removeWarningLabelById('username');
// removeInputErrorClass('username');
// }
// }, [username]);

const handleSubmitButtonClick = () => {
setIsUsernameAlreadyInUse(false);

const generalRegistrationData = {
username: formAccordionData.username,
password: encodeURIComponent(password),
agencyId: formAccordionData.agencyId,
postcode: formAccordionData.postcode,
consultingType: consultingType?.toString(),
termsAccepted: isDataProtectionSelected.toString(),
...(email && { email: email })
termsAccepted: isDataProtectionSelected.toString()
};

let generatedRegistrationData = {};
Expand Down Expand Up @@ -427,22 +384,6 @@ const Registration = () => {
}
};

const validateEmail = (email) => {
if (email.length > 0 && isStringValidEmail(email)) {
setIsEmailValid(true);
setEmailSuccessMessage(translate('registration.email.valid'));
setEmailErrorMessage('');
} else if (email.length > 0) {
setIsEmailValid(false);
setEmailSuccessMessage('');
setEmailErrorMessage(translate('registration.email.invalid'));
} else {
setIsEmailValid(true);
setEmailSuccessMessage('');
setEmailErrorMessage('');
}
};

const handleGeneratedInputfieldValueChange = (
inputValue,
inputName,
Expand Down Expand Up @@ -576,6 +517,7 @@ const Registration = () => {

<FormAccordion
consultingType={consultingType}
isUsernameAlreadInUse={isUsernameAlreadyInUse}
prefilledAgencyData={prefilledAgencyData}
handleFormAccordionData={(formData) =>
setFormAccordionData(formData)
Expand Down Expand Up @@ -619,12 +561,6 @@ const Registration = () => {
type="infoSmall"
/>
)}
{resortData.showEmail && (
<InputField
item={inputItemEmail}
inputHandle={handleEmailChange}
/>
)}
{resortData.requiredComponents
? requiredComponents
: null}
Expand Down
9 changes: 9 additions & 0 deletions src/components/registration/RegistrationUsername.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from './registrationHelpers';

interface RegistrationUsernameProps {
isUsernameAlreadInUse: boolean;
onUsernameChange: Function;
onValidityChange: Function;
}
Expand All @@ -23,6 +24,14 @@ export const RegistrationUsername = (props: RegistrationUsernameProps) => {
const [labelContent, setLabelContent] = useState<string>(null);
const [labelState, setLabelState] = useState<InputFieldLabelState>(null);

useEffect(() => {
if (props.isUsernameAlreadInUse) {
setIsValid('invalid');
setLabelState('invalid');
setLabelContent(translate('registration.user.unavailable'));
}
}, [props.isUsernameAlreadInUse]);

useEffect(() => {
props.onUsernameChange(username);
}, [username, props]);
Expand Down
Loading

0 comments on commit ba9355f

Please sign in to comment.