i18n: extract auth strings into the lang file

Author: jamaljsr

app/src/__tests__/components/loop/LoopPage.spec.tsx

@@ -74,8 +74,8 @@ describe('LoopPage component', () => {
       const { getByText } = render();
       expect(getByText('Loop')).toBeInTheDocument();
       fireEvent.click(getByText('Loop'));
-      expect(getByText('Loop out')).toBeInTheDocument();
-      expect(getByText('Loop in')).toBeInTheDocument();
+      expect(getByText('Loop Out')).toBeInTheDocument();
+      expect(getByText('Loop In')).toBeInTheDocument();
     });
 
     it('should display swap wizard when Loop out is clicked', async () => {
@@ -85,7 +85,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
     });
 
@@ -96,7 +96,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop in'));
+      fireEvent.click(getByText('Loop In'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
     });
 
@@ -107,7 +107,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 1).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop in'));
+      fireEvent.click(getByText('Loop In'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('arrow-left.svg'));
       expect(getByText('Loop History')).toBeInTheDocument();
@@ -120,7 +120,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();
@@ -141,7 +141,7 @@ describe('LoopPage component', () => {
       store.channelStore.sortedChannels.slice(0, 3).forEach(c => {
         store.buildSwapStore.toggleSelectedChannel(c.chanId);
       });
-      fireEvent.click(getByText('Loop out'));
+      fireEvent.click(getByText('Loop Out'));
       expect(getByText('Step 1 of 2')).toBeInTheDocument();
       fireEvent.click(getByText('Next'));
       expect(getByText('Step 2 of 2')).toBeInTheDocument();

app/src/components/loop/LoopActions.tsx

@@ -36,7 +36,6 @@ const Styled = {
     margin-left: 20px;
     font-size: ${props => props.theme.sizes.s};
     color: ${props => props.theme.colors.gray};
-    /* font-style: italic; */
   `,
 };
 
@@ -64,7 +63,7 @@ const LoopActions: React.FC = () => {
               borderless
               onClick={handleLoopOut}
             >
-              Loop out
+              {l('common.loopOut')}
             </Button>
             <Button
               primary={
@@ -74,15 +73,15 @@ const LoopActions: React.FC = () => {
               onClick={handleLoopIn}
               disabled={!buildSwapStore.loopInAllowed}
             >
-              Loop in
+              {l('common.loopIn')}
             </Button>
           </ActionBar>
           {!buildSwapStore.loopInAllowed && <Note>{l('loopInNote')}</Note>}
         </Actions>
       ) : (
         <Button onClick={buildSwapStore.startSwap}>
           <Refresh />
-          Loop
+          {l('common.loop')}
         </Button>
       )}
     </Wrapper>

app/src/i18n/locales/en-US.json

@@ -1,4 +1,7 @@
 {
+  "common.loop": "Loop",
+  "common.loopIn": "Loop In",
+  "common.loopOut": "Loop Out",
   "enums.BalanceMode.receive": "Receiving",
   "enums.BalanceMode.send": "Sending",
   "enums.BalanceMode.routing": "Routing",
@@ -64,6 +67,8 @@
   "cmps.settings.GeneralSettings.pageTitle": "Settings",
   "cmps.settings.UnitSettings.pageTitle": "Bitcoin Unit",
   "cmps.settings.UnitSettings.backText": "Settings",
+  "stores.authStore.emptyPassErr": "oops, password is required",
+  "stores.authStore.invalidPassErr": "oops, that password is incorrect",
   "stores.uiStore.authErrorTitle": "Your session has expired",
   "stores.uiStore.authErrorMsg": "Please enter you password to continue"
 }

app/src/store/stores/authStore.ts

@@ -1,6 +1,9 @@
 import { action, observable } from 'mobx';
+import { prefixTranslation } from 'util/translate';
 import { Store } from 'store';
 
+const { l } = prefixTranslation('stores.authStore');
+
 export default class AuthStore {
   private _store: Store;
 
@@ -32,7 +35,7 @@ export default class AuthStore {
   @action.bound
   async login(password: string) {
     this._store.log.info('attempting to login with password');
-    if (!password) throw new Error('oops, password is required');
+    if (!password) throw new Error(l('emptyPassErr'));
 
     // encode the password and update the store
     const encoded = Buffer.from(`${password}:${password}`).toString('base64');
@@ -46,7 +49,7 @@ export default class AuthStore {
       // clear the credentials if incorrect
       this.setCredentials('');
       this._store.log.error('incorrect credentials');
-      throw new Error('oops, that password is incorrect');
+      throw new Error(l('invalidPassErr'));
     }
   }