feat(user): add registration container

src/components/Header/Header.tsx

@@ -28,6 +28,7 @@ type Props = {
   onSearchButtonClick?: () => void;
   onCloseSearchButtonClick?: () => void;
   onLoginButtonClick?: () => void;
+  onSignUpButtonClick?: () => void;
   toggleUserMenu: (value: boolean) => void;
   children?: ReactFragment;
   isLoggedIn: boolean;
@@ -45,6 +46,7 @@ const Header: React.FC<Props> = ({
   searchEnabled,
   onCloseSearchButtonClick,
   onLoginButtonClick,
+  onSignUpButtonClick,
   isLoggedIn,
   userMenuOpen,
   toggleUserMenu,
@@ -104,14 +106,7 @@ const Header: React.FC<Props> = ({
       ) : (
         <div className={styles.buttonContainer}>
           <Button onClick={onLoginButtonClick} label="Login" />
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              'sign up';
-            }}
-            label="Sign up"
-          />
+          <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label="Sign up" />
         </div>
       )
     ) : null;

src/components/Layout/Layout.tsx

@@ -63,6 +63,10 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     history.push(addQueryParam(history, 'u', 'login'));
   };
 
+  const signUpButtonClickHandler = () => {
+    history.push(addQueryParam(history, 'u', 'create_account'));
+  };
+
   const toggleUserMenu = (value: boolean) =>
     UIStore.update((state) => {
       state.userMenuOpen = value;
@@ -111,6 +115,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
           onSearchButtonClick={searchButtonClickHandler}
           onCloseSearchButtonClick={closeSearchButtonClickHandler}
           onLoginButtonClick={loginButtonClickHandler}
+          onSignUpButtonClick={signUpButtonClickHandler}
           isLoggedIn={isLoggedIn}
           userMenuOpen={userMenuOpen}
           toggleUserMenu={toggleUserMenu}

src/containers/AccountModal/forms/Registration.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { object, string, SchemaOf, boolean } from 'yup';
+import type { RegistrationFormData } from 'types/account';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router';
+
+import RegistrationForm from '../../../components/RegistrationForm/RegistrationForm';
+import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
+import { addQueryParam } from '../../../utils/history';
+
+//todo add registration logic
+
+const temp = (t: unknown) => {
+  t;
+};
+
+const Registration = () => {
+  const history = useHistory();
+  const { t } = useTranslation('account');
+  const loginSubmitHandler: UseFormOnSubmitHandler<RegistrationFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
+    try {
+      await temp(formData);
+
+      history.push(addQueryParam(history, 'u', 'personal_details'));
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        if (error.message.toLowerCase().includes('invalid param email')) {
+          setErrors({ email: t('registrations.invalid_email') });
+        } else if (error.message.toLowerCase().includes('invalid param password')) {
+          setErrors({ form: t('registrations.invalid_password') });
+        }
+        setValue('password', '');
+      }
+    }
+
+    setSubmitting(false);
+  };
+
+  const validationSchema: SchemaOf<RegistrationFormData> = object().shape({
+    email: string().email(t('registrations.field_is_not_valid_email')).required(t('registrations.field_required')),
+    password: string().required(t('registrations.field_required')),
+    termsConditions: boolean().required(t('registrations.field_required')),
+    emailUpdates: boolean().required(),
+  });
+  const initialValues: RegistrationFormData = { email: '', password: '', termsConditions: true, emailUpdates: true };
+  const { handleSubmit, handleChange, values, errors, submitting } = useForm<RegistrationFormData>(
+    initialValues,
+    loginSubmitHandler,
+    validationSchema,
+  );
+
+  return <RegistrationForm onSubmit={handleSubmit} onChange={handleChange} values={values} errors={errors} submitting={submitting} />;
+};
+
+export default Registration;

src/hooks/useForm.ts

@@ -16,7 +16,7 @@ export type UseFormReturnValue<T> = {
 };
 
 type UseFormMethods<T> = {
-  setValue: (key: keyof T, value: string) => void;
+  setValue: (key: keyof T, value: string | boolean) => void;
   setErrors: (errors: FormErrors<T>) => void;
   setSubmitting: (submitting: boolean) => void;
 };
@@ -32,7 +32,7 @@ export default function useForm<T extends FormValues>(
   const [submitting, setSubmitting] = useState(false);
   const [errors, setErrors] = useState<FormErrors<T>>({});
 
-  const setValue = (name: keyof T, value: string) => {
+  const setValue = (name: keyof T, value: string | boolean) => {
     setValues((current) => ({ ...current, [name]: value }));
   };
 

src/i18n/locales/en_US/account.json

@@ -10,5 +10,17 @@
     "view_password": "View password",
     "wrong_combination": "Incorrect email/password combination",
     "wrong_email": "Please check your email and try again."
+  },
+  "registration": {
+    "email": "Email",
+    "field_required": "This field is required",
+    "hide_password": "Hide password",
+    "password": "Password",
+    "sign_up": "Sign up",
+    "continue": "Continue",
+    "view_password": "View password",
+    "terms_conditions": "I accept the <a href={{link}}>Terms and Conditions</a> of Cleeng.",
+    "email_updates": "Yes, I want to receive {{siteName}} updates by email.",
+    "already_account": "Already have an account?"
   }
 }

src/styles/_theme.scss

@@ -91,7 +91,7 @@ $cookies-color: $dark-color !default;
 $cookies-bg: variables.$white !default;
 
 // Form
-$form-error-bg-color: #FF0C3E !default;
+$form-error-bg-color: #ff0c3e !default;
 
 // Footer
 
@@ -151,7 +151,11 @@ $text-field-hover-bg-color: rgba(variables.$white, 0.08) !default;
 $text-field-active-color: variables.$white !default;
 $text-field-active-border-color: variables.$white !default;
 $text-field-placeholder-color: rgba(variables.$white, 0.7) !default;
-$text-field-error-color: #FF0C3E !default;
+$text-field-error-color: #ff0c3e !default;
+
+// Input
+$input-resting-border-color: rgba(variables.$white, 0.34) !default;
+$input-hover-border-color: rgba(variables.$white, 0.7) !default;
 
 // Toggle
 

types/account.d.ts

@@ -21,6 +21,13 @@ export type LoginFormData = {
   password: string;
 };
 
+export type RegistrationFormData = {
+  email: string;
+  password: string;
+  termsConditions: boolean;
+  emailUpdates: boolean;
+};
+
 export type RegisterPayload = {
   email: string;
   password: string;

types/general.d.ts

@@ -1 +1 @@
-type FormValues = Record<string, string>;
+type FormValues = Record<string, string | boolean>;