Save logged in user email in local storage

frontend/app/common/constants.ts

@@ -30,6 +30,9 @@ export const LS_HIDDEN_USERS_KEY = '__remarkHiddenUsers';
 /** localstorage key under which sort preference resides */
 export const LS_SORT_KEY = '__remarkSort';
 
+/** localstorage key for email of logged in user */
+export const LS_EMAIL_KEY = '__remarkEmail';
+
 export const THEMES: Theme[] = ['light', 'dark'];
 
 export const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|Opera Mini|Windows Phone/i.test(navigator.userAgent);

frontend/app/components/auth/__email-login-form/auth__email-login-form.test.tsx

@@ -8,6 +8,7 @@ import { validToken } from '@app/testUtils/mocks/jwt';
 import { sendEmailVerificationRequest } from '@app/common/api';
 import { IntlProvider } from 'react-intl';
 import enMessages from '../../../locales/en.json';
+import { LS_EMAIL_KEY } from '@app/common/constants';
 
 jest.mock('@app/utils/jwt', () => ({
   isJwtExpired: jest
@@ -52,6 +53,8 @@ describe('EmailLoginForm', () => {
     await sleep(100);
     expect(onSignIn).toBeCalledWith('abcd');
     expect(onSuccess).toBeCalledWith(testUser);
+    //test that email is saved in local storage after email login
+    expect(localStorage.getItem(LS_EMAIL_KEY)).toEqual('someone@example.com');
   });
 
   it('should send form by pasting token', async () => {

frontend/app/components/auth/__email-login-form/auth__email-login-form.tsx

@@ -16,6 +16,7 @@ import { defineMessages, IntlShape, useIntl, FormattedMessage } from 'react-intl
 import { validateUserName } from '../validateUserName';
 
 import { messages as loginForm } from '../__anonymous-login-form/auth__anonymous-login-form';
+import { LS_EMAIL_KEY } from '@app/common/constants';
 
 interface OwnProps {
   onSignIn(token: string): Promise<User | null>;
@@ -118,6 +119,7 @@ export class EmailLoginForm extends Component<Props, State> {
         return;
       }
       this.setState({ verificationSent: false, tokenValue: '' });
+      localStorage.setItem(LS_EMAIL_KEY, this.state.addressValue);
       if (this.props.onSuccess) {
         await this.props.onSuccess(user);
       }

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx

@@ -20,6 +20,7 @@ import { IntlProvider } from 'react-intl';
 import enMessages from '../../../locales/en.json';
 
 import { SubscribeByEmail, SubscribeByEmailForm } from './';
+import { LS_EMAIL_KEY } from '@app/common/constants';
 
 const initialStore = {
   user,
@@ -139,6 +140,13 @@ describe('<SubscribeByEmailForm/>', () => {
     expect(wrapper.find(Button).text()).toEqual('Unsubscribe');
   });
 
+  it('should fill in email from local storage', async () => {
+    localStorage.setItem(LS_EMAIL_KEY, 'someone@email.com');
+    const wrapper = createWrapper();
+    const form = wrapper.find('form');
+    expect(form.find('input').props().value).toEqual('someone@email.com');
+  });
+
   it('should send form by paste valid token', async () => {
     const wrapper = createWrapper();
     const onInputEmail = wrapper.find(Input).prop('onInput');

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx

@@ -24,6 +24,7 @@ import TextareaAutosize from '@app/components/comment-form/textarea-autosize';
 import { isUserAnonymous } from '@app/utils/isUserAnonymous';
 import { isJwtExpired } from '@app/utils/jwt';
 import { useIntl, defineMessages, IntlShape, FormattedMessage } from 'react-intl';
+import { LS_EMAIL_KEY } from '@app/common/constants';
 
 const emailRegex = /[^@]+@[^.]+\..+/;
 
@@ -132,7 +133,7 @@ export const SubscribeByEmailForm: FunctionComponent = () => {
   const [step, setStep] = useState(subscribed ? Step.Subscribed : Step.Email);
 
   const [token, setToken] = useState('');
-  const [emailAddress, setEmailAddress] = useState('');
+  const [emailAddress, setEmailAddress] = useState(localStorage.getItem(LS_EMAIL_KEY) || '');
 
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);

frontend/app/components/root/root.tsx

@@ -5,7 +5,13 @@ import b from 'bem-react-helper';
 import { IntlShape, useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { AuthProvider, Sorting } from '@app/common/types';
-import { COMMENT_NODE_CLASSNAME_PREFIX, MAX_SHOWN_ROOT_COMMENTS, THEMES, IS_MOBILE } from '@app/common/constants';
+import {
+  COMMENT_NODE_CLASSNAME_PREFIX,
+  MAX_SHOWN_ROOT_COMMENTS,
+  THEMES,
+  IS_MOBILE,
+  LS_EMAIL_KEY,
+} from '@app/common/constants';
 import { maxShownComments, url } from '@app/common/settings';
 
 import { StaticStore } from '@app/common/static_store';
@@ -150,6 +156,7 @@ export class Root extends Component<Props, State> {
 
   logOut = async () => {
     await this.props.logOut();
+    localStorage.removeItem(LS_EMAIL_KEY);
     await this.props.fetchComments();
   };