some fixes

public/scss/home.scss

@@ -135,6 +135,8 @@ $tableBackground: #fff;
       }
       .sync-container {
         margin: 0 0 0 auto;
+        display: flex;
+        flex-direction: row;
         .goat-btn {
           height: 51px;
           width: 220px;
@@ -145,6 +147,7 @@ $tableBackground: #fff;
           border-radius: 4px;
           color: #000000;
           font-size: 14px;
+          margin-left: 18px;
           padding: 12px 36px;
           background: #fff;
           outline: none;
@@ -156,6 +159,31 @@ $tableBackground: #fff;
             max-width: 100%;
           }
         }
+        .stockx-btn {
+          height: 51px;
+          width: 216px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+          color: #fff;
+          font-size: 14px;
+          padding: 12px 36px;
+          background: #3bae2b;
+          outline: none;
+          background-image: radial-gradient(
+            at top left,
+            #51bf43, #3bae2b
+          );
+          box-shadow: 0px 15px 85px -7px rgba(0,0,0,0.2);
+          .img {
+            margin-left: .6rem;
+            width: 70px;
+            height: auto;
+            max-width: 100%;
+          }
+        }
       }
     }
     .sales-table {

src/classes/data.ts

@@ -25,7 +25,10 @@ export const data: DataManager = {
       fs.writeFileSync(settingsPath, JSON.stringify({
         goatUsername: '',
         goatPassword: '',
-        goatAuthToken: ''
+        goatAuthToken: '',
+        stockxEmail: '',
+        stockxPassword: '',
+        stockxJwtToken: ''
       }));
     }
     saleStorage = JSON.parse(fs.readFileSync(salesPath).toString());

src/classes/stockx.ts

@@ -30,12 +30,14 @@ export class Stockx {
           password
         },
         json: true,
-        jar: this.jar
+        jar: this.jar,
+        resolveWithFullResponse: true
       });
-      this.jwtToken = res.headers['Jwt-Authorization'];
+      this.jwtToken = res.headers['jwt-authorization'];
 
-      return '';
+      return this.jwtToken;
     } catch (e) {
+      console.error(e);
       return '';
     }
   }

src/common/types.ts

@@ -19,6 +19,9 @@ export type Settings = {
   goatUsername: string;
   goatPassword: string;
   goatAuthToken: string;
+  stockxEmail: string;
+  stockxPassword: string;
+  stockxJwtToken: string;
 };
 
 export type DataManager = {

src/main/main.ts

@@ -9,8 +9,10 @@ import * as url from 'url';
 import { data } from '@/classes/data';
 import { SaleInfo, Settings } from '@/common/types';
 import { Goat } from '../classes/goat';
+import { Stockx } from '../classes/stockx';
 
 const goat: Goat = new Goat();
+const stockx: Stockx = new Stockx();
 const devtools: boolean = false;
 let mainWindow: Electron.BrowserWindow | null;
 
@@ -93,6 +95,19 @@ ipcMain.on('goatLogin', async (event: IpcMessageEvent, arg: { username: string;
   }
 });
 
+ipcMain.on('stockxLogin', async (event: IpcMessageEvent, arg: { email: string; password: string }) => {
+  // tslint:disable: possible-timing-attack
+  const token: string = await stockx.logIn(arg.email, arg.password);
+  if (token) {
+    data.setSetting('stockxEmail', arg.email);
+    data.setSetting('stockxPassword', arg.password);
+    data.setSetting('stockxJwtToken', token);
+    mainWindow!.webContents.send('stockxLoginResponse', true);
+  } else {
+    mainWindow!.webContents.send('stockxLoginResponse', false);
+  }
+});
+
 ipcMain.on('syncGoatSales', async (event: IpcMessageEvent) => {
   await goat.getSales();
   mainWindow!.webContents.send('getSales', data.getSales());

src/renderer/components/tableItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Select from 'react-select';
 import { ipcRenderer } from 'electron';
+import { SaleInfo } from '@/common/types';
 
 type Action = { label: string; value: string };
 type TableItemProps = {

src/renderer/routes/Home.tsx

@@ -4,6 +4,7 @@ import Modal from 'react-responsive-modal';
 
 import { SaleInfo, Settings } from '@/common/types';
 import * as GoatLogo from '@public/img/goat.png';
+import * as StockxLogo from '@public/img/stockx.png';
 import '@public/scss/home.scss';
 import { AddSale } from '../components/addSale';
 import { TableItem } from '../components/tableItem';
@@ -19,6 +20,7 @@ type HomeState = {
   sales: SaleInfo[];
   addModalOpen: boolean;
   goatConnected: boolean;
+  stockxConnected: boolean;
 };
 
 let storedSales: SaleInfo[] = [];
@@ -42,7 +44,8 @@ export class Home extends React.Component<HomeProps, HomeState> {
     this.state = {
       sales: [],
       addModalOpen: false,
-      goatConnected: false
+      goatConnected: false,
+      stockxConnected: false
     };
 
     this.grossProfit = 0;
@@ -77,7 +80,6 @@ export class Home extends React.Component<HomeProps, HomeState> {
         }
       }
 
-
       let mostProfitable: number = 0;
       for (const sale of sales) {
         this.netProfit += sale.netProfit;
@@ -107,6 +109,9 @@ export class Home extends React.Component<HomeProps, HomeState> {
       if (settings.goatAuthToken) {
         this.setState({ goatConnected: true });
       }
+      if (settings.stockxJwtToken) {
+        this.setState({ stockxConnected: true });
+      }
     });
   }
 
@@ -210,6 +215,11 @@ export class Home extends React.Component<HomeProps, HomeState> {
                 {this.state.sales.length} {this.state.sales.length === 1 ? 'Sale' : 'Sales'}
               </div>
               <div className='sync-container'>
+                {this.state.goatConnected ? (
+                  <button onClick={this.syncGoat} className='stockx-btn'>
+                    Pull Sales <img className='img' src={StockxLogo.toString()}/>
+                  </button>
+                ) : null }
                 {this.state.goatConnected ? (
                   <button onClick={this.syncGoat} className='goat-btn'>
                     Pull Sales <img className='img' src={GoatLogo.toString()}/>

src/renderer/routes/Settings.tsx

@@ -8,7 +8,7 @@ import { IpcMessageEvent, ipcRenderer } from 'electron';
 
 type SettingProps = {};
 type SettingState = {
-  stockxUsername: string;
+  stockxEmail: string;
   stockxPassword: string;
   goatUsername: string;
   goatPassword: string;
@@ -22,21 +22,29 @@ ipcRenderer.on('goatLoginResponse', (event: IpcMessageEvent, success: boolean) =
   }
 });
 
+ipcRenderer.on('stockxLoginResponse', (event: IpcMessageEvent, success: boolean) => {
+  if (success) {
+    toast.success('Successfully logged into stockx and saved credentials.');
+  } else {
+    toast.error('There was an issue logging into stockx, please try again later');
+  }
+});
+
 /**
  * Home component to be used as main homepage
  */
 export class Settings extends React.Component<SettingProps, SettingState> {
   constructor(props: SettingProps) {
     super(props);
     this.state = {
-      stockxUsername: '',
+      stockxEmail: '',
       stockxPassword: '',
       goatUsername: '',
       goatPassword: ''
     };
 
     this.handleChange = this.handleChange.bind(this);
-    this.showToast = this.showToast.bind(this);
+    this.stockxLogin = this.stockxLogin.bind(this);
     this.goatLogin = this.goatLogin.bind(this);
   }
 
@@ -70,8 +78,8 @@ export class Settings extends React.Component<SettingProps, SettingState> {
                 <div className='row'>
                   <div className='col'>
                     <p>Stockx Account</p>
-                    <input value={this.state.stockxUsername} className='input' placeholder='Username'
-                      onChange={this.handleChange} name='stockxUsername' />
+                    <input value={this.state.stockxEmail} className='input' placeholder='Email'
+                      onChange={this.handleChange} name='stockxEmail' />
                   </div>
                 </div>
                 <div className='row'>
@@ -82,7 +90,7 @@ export class Settings extends React.Component<SettingProps, SettingState> {
                 </div>
                 <div className='row' style={{ marginTop: '22px', marginBottom: '22px' }}>
                   <div className='col'>
-                    <button onClick={this.showToast} className='stockx-btn'>Login to <img className='img' src={StockxLogo.toString()}/></button>
+                    <button onClick={this.stockxLogin} className='stockx-btn'>Login to <img className='img' src={StockxLogo.toString()}/></button>
                   </div>
                 </div>
               </div>
@@ -126,7 +134,10 @@ export class Settings extends React.Component<SettingProps, SettingState> {
     });
   }
 
-  private showToast(): void {
-    toast.error('Stockx connections may be coming soon.');
+  private stockxLogin(): void {
+    ipcRenderer.send('stockxLogin', {
+      email: this.state.stockxEmail,
+      password: this.state.stockxPassword
+    });
   }
 }