feat(auth): add sign up link in login form

src/components/LoginForm/LoginForm.module.scss

@@ -10,3 +10,8 @@
 .link {
   margin-bottom: 24px;
 }
+
+.bottom {
+  margin-top: 24px;
+  text-align: center;
+}

src/components/LoginForm/LoginForm.tsx

@@ -24,9 +24,10 @@ type Props = {
   errors: FormErrors<LoginFormData>;
   values: LoginFormData;
   submitting: boolean;
+  siteName?: string;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting }: Props) => {
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, siteName }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
   const history = useHistory();
@@ -67,6 +68,9 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
         {t('login.forgot_password')}
       </Link>
       <Button type="submit" label={t('login.sign_in')} variant="contained" color="primary" size="large" disabled={submitting} fullWidth />
+      <p className={styles.bottom}>
+        {t('login.not_registered', { siteName })} <Link to={addQueryParam(history, 'u', 'create-account')}>{t('login.sign_up')}</Link>
+      </p>
     </form>
   );
 };

src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap

@@ -96,6 +96,18 @@ exports[`<LoginForm> renders and matches snapshot 1`] = `
         login.sign_in
       </span>
     </button>
+    <p
+      class="bottom"
+    >
+      login.not_registered
+       
+      <a
+        class="link"
+        href="/?u=create-account"
+      >
+        login.sign_up
+      </a>
+    </p>
   </form>
 </div>
 `;

src/components/RegistrationForm/RegistrationForm.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { render } from '../../testUtils';
 
 import RegistrationForm from './RegistrationForm';
 

src/components/RegistrationForm/RegistrationForm.tsx

@@ -15,6 +15,7 @@ import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import Checkbox from '../Checkbox/Checkbox';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import Link from '../Link/Link';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -50,10 +51,6 @@ const RegistrationForm: React.FC<Props> = ({
   const { t } = useTranslation('account');
   const history = useHistory();
 
-  const loginButtonClickHandler = () => {
-    history.push(addQueryParam(history, 'u', 'login'));
-  };
-
   const formatConsentLabel = (label: string): string | JSX.Element => {
     // @todo sanitize consent label to prevent XSS
     const hasHrefOpenTag = /<a(.|\n)*?>/.test(label);
@@ -131,12 +128,9 @@ const RegistrationForm: React.FC<Props> = ({
         disabled={submitting || !canSubmit}
         fullWidth
       />
-      <div className={styles.bottom}>
-        <span className={styles.alreadyAccount}>{t('registration.already_account')}</span>
-        <button className={styles.login} onClick={loginButtonClickHandler}>
-          {t('login.sign_in')}
-        </button>
-      </div>
+      <p className={styles.bottom}>
+        {t('registration.already_account')} <Link to={addQueryParam(history, 'u', 'login')}>{t('login.sign_in')}</Link>
+      </p>
       {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );

src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap

@@ -105,20 +105,18 @@ exports[`<RegistrationForm> renders and matches snapshot 1`] = `
         registration.continue
       </span>
     </button>
-    <div
+    <p
       class="bottom"
     >
-      <span
-        class="alreadyAccount"
-      >
-        registration.already_account
-      </span>
-      <button
-        class="login"
+      registration.already_account
+       
+      <a
+        class="link"
+        href="/?u=login"
       >
         login.sign_in
-      </button>
-    </div>
+      </a>
+    </p>
   </form>
 </div>
 `;

src/containers/AccountModal/forms/Login.tsx

@@ -8,8 +8,10 @@ import LoginForm from '../../../components/LoginForm/LoginForm';
 import { login } from '../../../stores/AccountStore';
 import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
 import { removeQueryParam } from '../../../utils/history';
+import { ConfigStore } from '../../../stores/ConfigStore';
 
 const Login = () => {
+  const { siteName } = ConfigStore.useState((s) => s.config);
   const history = useHistory();
   const { t } = useTranslation('account');
   const loginSubmitHandler: UseFormOnSubmitHandler<LoginFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
@@ -39,7 +41,7 @@ const Login = () => {
   const initialValues: LoginFormData = { email: '', password: '' };
   const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, loginSubmitHandler, validationSchema);
 
-  return <LoginForm onSubmit={handleSubmit} onChange={handleChange} values={values} errors={errors} submitting={submitting} />;
+  return <LoginForm onSubmit={handleSubmit} onChange={handleChange} values={values} errors={errors} submitting={submitting} siteName={siteName} />;
 };
 
 export default Login;

src/i18n/locales/en_US/account.json

@@ -57,8 +57,10 @@
     "field_required": "This field is required",
     "forgot_password": "Forgot password?",
     "hide_password": "Hide password",
+    "not_registered": "New to {{siteName}}?",
     "password": "Password",
     "sign_in": "Sign in",
+    "sign_up": "Sign up",
     "view_password": "View password",
     "wrong_combination": "Incorrect email/password combination",
     "wrong_email": "Please check your email and try again."

src/i18n/locales/nl_NL/account.json

@@ -57,8 +57,10 @@
     "field_required": "",
     "forgot_password": "",
     "hide_password": "",
+    "not_registered": "",
     "password": "",
     "sign_in": "",
+    "sign_up": "",
     "view_password": "",
     "wrong_combination": "",
     "wrong_email": ""