From b774a42a00a70cea5242f0deffed6536ddc2567e Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Wed, 4 Aug 2021 12:05:34 +0200 Subject: [PATCH] feat(auth): add sign up link in login form --- src/components/LoginForm/LoginForm.module.scss | 5 +++++ src/components/LoginForm/LoginForm.tsx | 6 +++++- .../__snapshots__/LoginForm.test.tsx.snap | 12 ++++++++++++ .../RegistrationForm/RegistrationForm.test.tsx | 3 ++- .../RegistrationForm/RegistrationForm.tsx | 14 ++++---------- .../RegistrationForm.test.tsx.snap | 18 ++++++++---------- src/containers/AccountModal/forms/Login.tsx | 4 +++- src/i18n/locales/en_US/account.json | 2 ++ src/i18n/locales/nl_NL/account.json | 2 ++ 9 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/components/LoginForm/LoginForm.module.scss b/src/components/LoginForm/LoginForm.module.scss index 84d204ec2..149cf17ee 100644 --- a/src/components/LoginForm/LoginForm.module.scss +++ b/src/components/LoginForm/LoginForm.module.scss @@ -10,3 +10,8 @@ .link { margin-bottom: 24px; } + +.bottom { + margin-top: 24px; + text-align: center; +} diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx index d086eacb5..724c2e2f2 100644 --- a/src/components/LoginForm/LoginForm.tsx +++ b/src/components/LoginForm/LoginForm.tsx @@ -24,9 +24,10 @@ type Props = { errors: FormErrors; values: LoginFormData; submitting: boolean; + siteName?: string; }; -const LoginForm: React.FC = ({ onSubmit, onChange, values, errors, submitting }: Props) => { +const LoginForm: React.FC = ({ 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 = ({ onSubmit, onChange, values, errors, submit {t('login.forgot_password')} +

+ login.not_registered + + + login.sign_up + +

`; diff --git a/src/components/RegistrationForm/RegistrationForm.test.tsx b/src/components/RegistrationForm/RegistrationForm.test.tsx index 77ac45c26..15922bb84 100644 --- a/src/components/RegistrationForm/RegistrationForm.test.tsx +++ b/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'; diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx index ce9d4a73b..fe475866d 100644 --- a/src/components/RegistrationForm/RegistrationForm.tsx +++ b/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 = ({ 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 = //.test(label); @@ -131,12 +128,9 @@ const RegistrationForm: React.FC = ({ disabled={submitting || !canSubmit} fullWidth /> -
- {t('registration.already_account')} - -
+

+ {t('registration.already_account')} {t('login.sign_in')} +

{submitting && } ); diff --git a/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap index c8b35f4d8..db7861875 100644 --- a/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap +++ b/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap @@ -105,20 +105,18 @@ exports[` renders and matches snapshot 1`] = ` registration.continue -
- - registration.already_account - - -
+ +

`; diff --git a/src/containers/AccountModal/forms/Login.tsx b/src/containers/AccountModal/forms/Login.tsx index 20862e855..c559823e6 100644 --- a/src/containers/AccountModal/forms/Login.tsx +++ b/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 = 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 ; + return ; }; export default Login; diff --git a/src/i18n/locales/en_US/account.json b/src/i18n/locales/en_US/account.json index d50f67074..46742f36d 100644 --- a/src/i18n/locales/en_US/account.json +++ b/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." diff --git a/src/i18n/locales/nl_NL/account.json b/src/i18n/locales/nl_NL/account.json index 84f23c26b..23e185748 100644 --- a/src/i18n/locales/nl_NL/account.json +++ b/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": ""