From 24e9404a6f7c421172fed9b89878ce54923de58a Mon Sep 17 00:00:00 2001 From: Paul Mineev Date: Wed, 29 Jun 2022 19:26:03 -0700 Subject: [PATCH] Fix email autofill in subscription popup --- frontend/app/components/auth/auth.spec.tsx | 2 ++ frontend/app/components/auth/auth.tsx | 13 +++++++++---- frontend/app/components/auth/auth.utils.ts | 14 ++++++++++++++ .../comment-form__subscribe-by-email.test.tsx | 8 +++++--- .../comment-form__subscribe-by-email.tsx | 4 ++-- frontend/app/store/user/actions.ts | 5 +++-- 6 files changed, 35 insertions(+), 11 deletions(-) diff --git a/frontend/app/components/auth/auth.spec.tsx b/frontend/app/components/auth/auth.spec.tsx index 72e91311..130068ae 100644 --- a/frontend/app/components/auth/auth.spec.tsx +++ b/frontend/app/components/auth/auth.spec.tsx @@ -141,6 +141,7 @@ describe('', () => { jest.spyOn(api, 'emailSignin').mockImplementationOnce(async () => null); jest.spyOn(api, 'verifyEmailSignin').mockImplementationOnce(async () => ({} as User)); jest.spyOn(utils, 'getTokenInvalidReason').mockImplementationOnce(() => null); + jest.spyOn(utils, 'persistEmail').mockImplementationOnce(jest.fn()); render(); @@ -167,6 +168,7 @@ describe('', () => { await waitFor(() => expect(api.verifyEmailSignin).toBeCalled()); expect(api.verifyEmailSignin).toBeCalledWith('token'); + expect(utils.persistEmail).toBeCalledWith('email@email.com'); }); it('should show validation error for token', async () => { diff --git a/frontend/app/components/auth/auth.tsx b/frontend/app/components/auth/auth.tsx index 1223a7a8..591ec553 100644 --- a/frontend/app/components/auth/auth.tsx +++ b/frontend/app/components/auth/auth.tsx @@ -16,7 +16,7 @@ import { Button } from './components/button'; import { OAuth } from './components/oauth'; import { messages } from './auth.messsages'; import { useDropdown, useErrorMessage } from './auth.hooks'; -import { getProviders, getTokenInvalidReason } from './auth.utils'; +import { getProviders, getTokenInvalidReason, persistEmail } from './auth.utils'; import { oauthSignin, emailSignin, @@ -31,6 +31,7 @@ import styles from './auth.module.css'; export function Auth() { const intl = useIntl(); const telegramParamsRef = useRef(null); + const emailRef = useRef(''); const dispatch = useDispatch(); const [oauthProviders, formProviders] = getProviders(); @@ -121,6 +122,8 @@ export function Auth() { const email = data.get('email') as string; const username = data.get('username') as string; + emailRef.current = email; + await emailSignin(email, username); setView('token'); break; @@ -131,11 +134,13 @@ export function Auth() { if (invalidReason) { setError(invalidReason); - } else { - const user = await verifyEmailSignin(token); - dispatch(setUser(user)); + break; } + const user = await verifyEmailSignin(token); + dispatch(setUser(user)); + persistEmail(emailRef.current); + break; } } diff --git a/frontend/app/components/auth/auth.utils.ts b/frontend/app/components/auth/auth.utils.ts index 1e3c7dbd..b92e1cb9 100644 --- a/frontend/app/components/auth/auth.utils.ts +++ b/frontend/app/components/auth/auth.utils.ts @@ -4,6 +4,8 @@ import type { FormProvider, OAuthProvider } from 'common/types'; import { OAUTH_PROVIDERS } from './components/oauth.consts'; import { messages } from './auth.messsages'; +import { setItem, getItem } from 'common/local-storage'; +import { LS_EMAIL_KEY } from 'common/constants'; export function getProviders(): [OAuthProvider[], FormProvider[]] { const oauthProviders: OAuthProvider[] = []; @@ -27,3 +29,15 @@ export function getTokenInvalidReason(token: string): null | keyof typeof messag return null; } + +export function persistEmail(email: string) { + setItem(LS_EMAIL_KEY, email); +} + +export function getPersistedEmail() { + return getItem(LS_EMAIL_KEY) || ''; +} + +export function resetPersistedEmail() { + setItem(LS_EMAIL_KEY, ''); +} diff --git a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx index ef2faf54..d5bc5cc9 100644 --- a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx +++ b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx @@ -14,8 +14,8 @@ import { sleep } from 'utils/sleep'; import { Input } from 'components/input'; import { Button } from 'components/button'; import { Dropdown } from 'components/dropdown'; +import { persistEmail } from 'components/auth/auth.utils'; import enMessages from 'locales/en.json'; -import { LS_EMAIL_KEY } from 'common/constants'; import { SubscribeByEmail, SubscribeByEmailForm } from '.'; @@ -139,10 +139,12 @@ describe('', () => { }); it('should fill in email from local storage', async () => { - localStorage.setItem(LS_EMAIL_KEY, 'someone@email.com'); + const expected = 'someone@email.com'; + persistEmail(expected); const wrapper = createWrapper(); const form = wrapper.find('form'); - expect(form.find('input').props().value).toEqual('someone@email.com'); + + expect(form.find('input').props().value).toBe(expected); }); it('should send form by paste valid token', async () => { diff --git a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx index e71768f1..005d2666 100644 --- a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx +++ b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx @@ -5,7 +5,6 @@ import b from 'bem-react-helper'; import { useIntl, defineMessages, IntlShape, FormattedMessage } from 'react-intl'; import { User } from 'common/types'; -import { LS_EMAIL_KEY } from 'common/constants'; import { StoreState } from 'store'; import { setUserSubscribed } from 'store/user/actions'; import { sleep } from 'utils/sleep'; @@ -18,6 +17,7 @@ import { Button } from 'components/button'; import { Dropdown } from 'components/dropdown'; import { Preloader } from 'components/preloader'; import { TextareaAutosize } from 'components/textarea-autosize'; +import { getPersistedEmail } from 'components/auth/auth.utils'; import { isUserAnonymous } from 'utils/isUserAnonymous'; import { isJwtExpired } from 'utils/jwt'; @@ -126,7 +126,7 @@ export const SubscribeByEmailForm: FunctionComponent = () => { const [step, setStep] = useState(subscribed ? Step.Subscribed : Step.Email); const [token, setToken] = useState(''); - const [emailAddress, setEmailAddress] = useState(localStorage.getItem(LS_EMAIL_KEY) || ''); + const [emailAddress, setEmailAddress] = useState(getPersistedEmail); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); diff --git a/frontend/app/store/user/actions.ts b/frontend/app/store/user/actions.ts index 4768d17a..4598f379 100644 --- a/frontend/app/store/user/actions.ts +++ b/frontend/app/store/user/actions.ts @@ -3,7 +3,7 @@ import { logout } from 'components/auth/auth.api'; import { User, BlockedUser, BlockTTL } from 'common/types'; import { ttlToTime } from 'utils/ttl-to-time'; import { getHiddenUsers } from 'utils/get-hidden-users'; -import { LS_EMAIL_KEY, LS_HIDDEN_USERS_KEY } from 'common/constants'; +import { LS_HIDDEN_USERS_KEY } from 'common/constants'; import { setItem } from 'common/local-storage'; import { StoreAction } from '../index'; @@ -20,6 +20,7 @@ import { } from './types'; import { fetchComments, unsetCommentMode } from '../comments/actions'; import { COMMENTS_PATCH } from '../comments/types'; +import { resetPersistedEmail } from 'components/auth/auth.utils'; export function setUser(user: User | null = null): USER_SET_ACTION { return { @@ -33,7 +34,7 @@ export function signout(cleanSession = true): StoreAction> { if (cleanSession) { await logout(); } - localStorage.removeItem(LS_EMAIL_KEY); + resetPersistedEmail(); dispatch(setUser()); dispatch(unsetCommentMode()); dispatch(fetchComments());