Fix email autofill in subscription popup

frontend/app/components/auth/auth.spec.tsx

@@ -141,6 +141,7 @@ describe('<Auth/>', () => {
     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(<Auth />);
 
@@ -167,6 +168,7 @@ describe('<Auth/>', () => {
 
     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 () => {

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 | { bot: string; token: string }>(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;
         }
       }

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, '');
+}

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('<SubscribeByEmailForm/>', () => {
   });
 
   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 () => {

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<string | null>(null);

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<Promise<void>> {
     if (cleanSession) {
       await logout();
     }
-    localStorage.removeItem(LS_EMAIL_KEY);
+    resetPersistedEmail();
     dispatch(setUser());
     dispatch(unsetCommentMode());
     dispatch(fetchComments());