From ed3155551760d312773d47da37948c74e2d9bf0f Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Wed, 4 Aug 2021 11:49:12 +0200 Subject: [PATCH 1/6] fix(player): fix player error after playing the same item a second time --- src/containers/Cinema/Cinema.tsx | 13 +++---------- src/utils/collection.ts | 8 ++++++++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/containers/Cinema/Cinema.tsx b/src/containers/Cinema/Cinema.tsx index 8dc66de7f..59a7ce8a5 100644 --- a/src/containers/Cinema/Cinema.tsx +++ b/src/containers/Cinema/Cinema.tsx @@ -11,6 +11,7 @@ import { watchHistoryStore, useWatchHistory } from '../../stores/WatchHistorySto import { ConfigContext } from '../../providers/ConfigProvider'; import { addScript } from '../../utils/dom'; import useOttAnalytics from '../../hooks/useOttAnalytics'; +import { deepCopy } from '../../utils/collection'; import styles from './Cinema.module.scss'; @@ -64,15 +65,7 @@ const Cinema: React.FC = ({ item, onPlay, onPause, onComplete, onUserActi } // load new item - playerRef.current.load([ - { - mediaid: item.mediaid, - image: item.image, - title: item.title, - description: item.description, - sources: item.sources.map((source) => ({ ...source })), - }, - ]); + playerRef.current.load([deepCopy(item)]); }; const initializePlayer = () => { @@ -85,7 +78,7 @@ const Cinema: React.FC = ({ item, onPlay, onPause, onComplete, onUserActi playerRef.current = window.jwplayer(playerElementRef.current); playerRef.current.setup({ - playlist: [item], + playlist: [deepCopy(item)], aspect: false, width: '100%', height: '100%', diff --git a/src/utils/collection.ts b/src/utils/collection.ts index 77eb13ba9..a2410d628 100644 --- a/src/utils/collection.ts +++ b/src/utils/collection.ts @@ -126,6 +126,13 @@ const checkConsentsFromValues = (publisherConsents: Consent[], consents: Record< return { customerConsents, consentsErrors }; }; +const deepCopy = (obj: unknown) => { + if (Array.isArray(obj) || (typeof obj === 'object' && obj !== null)) { + return JSON.parse(JSON.stringify(obj)); + } + return obj; +}; + export { getFiltersFromConfig, getFiltersFromSeries, @@ -138,4 +145,5 @@ export { formatConsentsFromValues, extractConsentValues, checkConsentsFromValues, + deepCopy, }; From c8ccfc78e0f495829e40ffe9d9ca75b11979201b Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Wed, 4 Aug 2021 11:55:14 +0200 Subject: [PATCH 2/6] fix(auth): disable continue button in registration form --- src/components/Checkbox/Checkbox.tsx | 2 +- src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap | 1 + src/components/RegistrationForm/RegistrationForm.test.tsx | 1 + src/components/RegistrationForm/RegistrationForm.tsx | 5 ++++- src/containers/AccountModal/forms/Registration.tsx | 1 + 5 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index ae423bd97..e4ddbfd1a 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -33,7 +33,7 @@ const Checkbox: React.FC = ({ label, name, onChange, header, checked, val ) : null}
- +
{helperText ?
{helperText}
: null} diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 3f632029a..65a4973f6 100644 --- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -17,6 +17,7 @@ exports[` renders and matches snapshot 1`] = ` diff --git a/src/components/RegistrationForm/RegistrationForm.test.tsx b/src/components/RegistrationForm/RegistrationForm.test.tsx index 5cf844892..77ac45c26 100644 --- a/src/components/RegistrationForm/RegistrationForm.test.tsx +++ b/src/components/RegistrationForm/RegistrationForm.test.tsx @@ -15,6 +15,7 @@ describe('', () => { consentErrors={[]} consentValues={{}} loading={false} + canSubmit={true} onConsentChange={jest.fn()} />, ); diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx index cc8a2c6b3..ce9d4a73b 100644 --- a/src/components/RegistrationForm/RegistrationForm.tsx +++ b/src/components/RegistrationForm/RegistrationForm.tsx @@ -28,6 +28,7 @@ type Props = { consentValues: Record; consentErrors: string[]; submitting: boolean; + canSubmit: boolean; publisherConsents?: Consent[]; }; @@ -38,6 +39,7 @@ const RegistrationForm: React.FC = ({ errors, submitting, loading, + canSubmit, publisherConsents, consentValues, onConsentChange, @@ -113,6 +115,7 @@ const RegistrationForm: React.FC = ({ name={consent.name} value={consent.name} error={consentErrors?.includes(consent.name)} + required={consent.required} checked={consentValues[consent.name]} onChange={onConsentChange} label={formatConsentLabel(consent.label)} @@ -125,7 +128,7 @@ const RegistrationForm: React.FC = ({ variant="contained" color="primary" size="large" - disabled={submitting} + disabled={submitting || !canSubmit} fullWidth />
diff --git a/src/containers/AccountModal/forms/Registration.tsx b/src/containers/AccountModal/forms/Registration.tsx index 592567e4f..ed62109e4 100644 --- a/src/containers/AccountModal/forms/Registration.tsx +++ b/src/containers/AccountModal/forms/Registration.tsx @@ -91,6 +91,7 @@ const Registration = () => { publisherConsents={publisherConsents} loading={publisherConsentsLoading} onConsentChange={handleChangeConsent} + canSubmit={!!values.email && !!values.password} /> ); }; From b774a42a00a70cea5242f0deffed6536ddc2567e Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Wed, 4 Aug 2021 12:05:34 +0200 Subject: [PATCH 3/6] 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": "" From 89644bc0c46efbc2801e7945a0fe68d0a70e4cab Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Wed, 4 Aug 2021 14:24:34 +0200 Subject: [PATCH 4/6] fix(auth): validate registration form on blur and improve password strength --- .../EditPasswordForm.test.tsx.snap | 9 ++-- .../PasswordStrength.module.scss | 48 +++++++++++-------- .../PasswordStrength/PasswordStrength.tsx | 33 +++++++++---- .../PasswordStrength.test.tsx.snap | 9 ++-- .../RegistrationForm/RegistrationForm.tsx | 12 ++++- .../RegistrationForm.test.tsx.snap | 28 +++++++---- src/components/TextField/TextField.tsx | 3 +- .../AccountModal/forms/Registration.tsx | 5 +- src/hooks/useForm.ts | 41 ++++++++++++++-- src/i18n/locales/en_US/account.json | 11 ++++- src/i18n/locales/nl_NL/account.json | 9 +++- types/form.d.ts | 1 + 12 files changed, 153 insertions(+), 56 deletions(-) diff --git a/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap index c397a5202..4bbaa1876 100644 --- a/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap +++ b/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap @@ -60,17 +60,20 @@ exports[` renders and matches snapshot 1`] = `
- - registration.password_strength + + + registration.password_strength.invalid
- -
+ > +
+
+
+ + + registration.password_strength.invalid + +
+ registration.password_helper_text
- - registration.password_strength -
- -
-
+ reset.password_helper_text
- - - registration.password_strength.invalid -