Updated dependencies, added Welcome component.

The CSS needs to be redone and made more modular. Measurements should not be done in px, and switched to em/rem.
Redux needs to be setup for state management.

package.json

@@ -31,15 +31,15 @@
   "dependencies": {
     "adm-zip": "^0.4.14",
     "async": "^3.2.0",
-    "discord-rpc": "3.1.0",
-    "electron-updater": "^4.2.4",
+    "discord-rpc": "^3.1.1",
+    "electron-updater": "^4.3.1",
     "fs-extra": "^9.0.0",
     "github-syntax-dark": "^0.5.0",
-    "got": "^10.7.0",
-    "jquery": "^3.5.0",
-    "moment": "^2.24.0",
+    "got": "^11.1.0",
+    "jquery": "^3.5.1",
+    "moment": "^2.25.3",
     "request": "^2.88.2",
-    "semver": "^7.2.2",
+    "semver": "^7.3.2",
     "tar-fs": "^2.0.0",
     "triple-beam": "^1.3.0",
     "winreg": "^1.2.4",
@@ -48,36 +48,38 @@
   "devDependencies": {
     "@babel/preset-react": "^7.9.4",
     "@types/adm-zip": "^0.4.33",
-    "@types/async": "^3.0.8",
+    "@types/async": "^3.2.1",
     "@types/chai": "^4.2.11",
-    "@types/discord-rpc": "^3.0.2",
+    "@types/discord-rpc": "^3.0.3",
     "@types/fs-extra": "^8.1.0",
-    "@types/jquery": "^3.3.33",
+    "@types/jquery": "^3.3.38",
     "@types/mocha": "^7.0.2",
-    "@types/node": "^12.12.29",
+    "@types/node": "^12.12.38",
     "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/react-dom": "^16.9.7",
     "@types/request": "^2.48.4",
-    "@types/tar-fs": "^1.16.2",
+    "@types/tar-fs": "^2.0.0",
     "@types/triple-beam": "^1.3.0",
     "@types/winreg": "^1.2.30",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
-    "electron": "^8.2.1",
-    "electron-builder": "^22.4.0",
+    "electron": "^8.2.5",
+    "electron-builder": "^22.6.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-ts": "^4.0.1",
     "eslint": "^6.8.0",
     "helios-distribution-types": "1.0.0-pre.1",
-    "mocha": "^7.1.1",
+    "mocha": "^7.1.2",
     "nock": "^12.0.3",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "react-hot-loader": "^4.12.19",
+    "react-hot-loader": "^4.12.21",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
     "rimraf": "^3.0.2",
-    "ts-node": "^8.8.2",
+    "ts-node": "^8.10.1",
     "typescript": "^3.8.3",
-    "webpack": "^4.42.0"
+    "webpack": "^4.43.0"
   },
   "repository": {
     "type": "git",

src/main/asset/processor/MojangIndexProcessor.ts

@@ -1,5 +1,5 @@
 import { IndexProcessor } from '../model/engine/IndexProcessor'
-import got, { HTTPError, GotError, RequestError, ParseError, TimeoutError } from 'got'
+import got, { HTTPError, RequestError, ParseError, TimeoutError } from 'got'
 import { LoggerUtil } from '../../logging/loggerutil'
 import { pathExists, readFile, ensureDir, writeFile, readJson } from 'fs-extra'
 import { MojangVersionManifest } from '../model/mojang/VersionManifest'
@@ -24,13 +24,13 @@ export class MojangIndexProcessor extends IndexProcessor {
         responseType: 'json'
     })
 
-    private handleGotError<T>(operation: string, error: GotError, dataProvider: () => T): T {
+    private handleGotError<T>(operation: string, error: RequestError, dataProvider: () => T): T {
         if(error instanceof HTTPError) {
             this.logger.error(`Error during ${operation} request (HTTP Response ${error.response.statusCode})`, error)
             this.logger.debug('Response Details:')
             this.logger.debug('Body:', error.response.body)
             this.logger.debug('Headers:', error.response.headers)
-        } else if(error instanceof RequestError) {
+        } else if(Object.getPrototypeOf(error) instanceof RequestError) {
             this.logger.error(`${operation} request recieved no response (${error.code}).`, error)
         } else if(error instanceof TimeoutError) {
             this.logger.error(`${operation} request timed out (${error.timings.phases.total}ms).`)
@@ -148,7 +148,7 @@ export class MojangIndexProcessor extends IndexProcessor {
 
             return res.body
         } catch(error) {
-            return this.handleGotError(url, error as GotError, () => null)
+            return this.handleGotError(url, error, () => null)
         }
 
     }
@@ -158,7 +158,7 @@ export class MojangIndexProcessor extends IndexProcessor {
             const res = await this.client.get<MojangVersionManifest>(MojangIndexProcessor.VERSION_MANIFEST_ENDPOINT)
             return res.body
         } catch(error) {
-            return this.handleGotError('Load Mojang Version Manifest', error as GotError, () => null)
+            return this.handleGotError('Load Mojang Version Manifest', error, () => null)
         }
     }
 

src/main/mojang/model/internal/Response.ts

@@ -1,4 +1,4 @@
-import { GotError } from "got/dist/source"
+import { RequestError } from "got/dist/source"
 
 /**
  * @see https://wiki.vg/Authentication#Errors
@@ -22,7 +22,7 @@ export interface MojangResponse<T> {
 
     data: T
     responseCode: MojangResponseCode
-    error?: GotError
+    error?: RequestError
     isInternalError?: boolean
 
 }

src/main/mojang/mojang.ts

@@ -1,7 +1,7 @@
 import { LoggerUtil } from '../logging/loggerutil'
 import { Agent } from './model/auth/Agent'
 import { Status, StatusColor } from './model/internal/Status'
-import got, { RequestError, HTTPError, TimeoutError, GotError, ParseError } from 'got'
+import got, { RequestError, HTTPError, TimeoutError, ParseError } from 'got'
 import { Session } from './model/auth/Session'
 import { AuthPayload } from './model/auth/AuthPayload'
 import { MojangResponse, MojangResponseCode, deciperResponseCode, isInternalError, MojangErrorBody } from './model/internal/Response'
@@ -89,7 +89,7 @@ export class Mojang {
         }
     }
 
-    private static handleGotError<T>(operation: string, error: GotError, dataProvider: () => T): MojangResponse<T> {
+    private static handleGotError<T>(operation: string, error: RequestError, dataProvider: () => T): MojangResponse<T> {
         const response: MojangResponse<T> = {
             data: dataProvider(),
             responseCode: MojangResponseCode.ERROR,
@@ -102,7 +102,7 @@ export class Mojang {
             Mojang.logger.debug('Response Details:')
             Mojang.logger.debug('Body:', error.response.body)
             Mojang.logger.debug('Headers:', error.response.headers)
-        } else if(error instanceof RequestError) {
+        } else if(Object.getPrototypeOf(error) instanceof RequestError) {
             Mojang.logger.error(`${operation} request recieved no response (${error.code}).`, error)
         } else if(error instanceof TimeoutError) {
             Mojang.logger.error(`${operation} request timed out (${error.timings.phases.total}ms).`)
@@ -156,7 +156,7 @@ export class Mojang {
 
         } catch(error) {
 
-            return Mojang.handleGotError('Mojang Status', error as GotError, () => {
+            return Mojang.handleGotError('Mojang Status', error, () => {
                 for(let i=0; i<Mojang.statuses.length; i++){
                     Mojang.statuses[i].status = StatusColor.GREY
                 }
@@ -197,7 +197,7 @@ export class Mojang {
                 json.clientToken = clientToken
             }
 
-            const res = await Mojang.authClient.post<Session>('authenticate', { json })
+            const res = await Mojang.authClient.post<Session>('authenticate', { json, responseType: 'json' })
             Mojang.expectSpecificSuccess('Mojang Authenticate', 200, res.statusCode)
             return {
                 data: res.body,
@@ -205,7 +205,7 @@ export class Mojang {
             }
 
         } catch(err) {
-            return Mojang.handleGotError('Mojang Authenticate', err as GotError, () => null)
+            return Mojang.handleGotError('Mojang Authenticate', err, () => null)
         }
 
     }
@@ -243,7 +243,7 @@ export class Mojang {
                     responseCode: MojangResponseCode.SUCCESS
                 }
             }
-            return Mojang.handleGotError('Mojang Validate', err as GotError, () => false)
+            return Mojang.handleGotError('Mojang Validate', err, () => false)
         }
 
     }
@@ -275,7 +275,7 @@ export class Mojang {
             }
 
         } catch(err) {
-            return Mojang.handleGotError('Mojang Invalidate', err as GotError, () => undefined)
+            return Mojang.handleGotError('Mojang Invalidate', err, () => undefined)
         }
 
     }
@@ -301,7 +301,7 @@ export class Mojang {
                 requestUser
             }
 
-            const res = await Mojang.authClient.post<Session>('refresh', { json })
+            const res = await Mojang.authClient.post<Session>('refresh', { json, responseType: 'json' })
             Mojang.expectSpecificSuccess('Mojang Refresh', 200, res.statusCode)
 
             return {
@@ -310,7 +310,7 @@ export class Mojang {
             }
 
         } catch(err) {
-            return Mojang.handleGotError('Mojang Refresh', err as GotError, () => null)
+            return Mojang.handleGotError('Mojang Refresh', err, () => null)
         }
 
     }

src/renderer/components/Application.tsx

@@ -1,13 +1,12 @@
 import { hot } from 'react-hot-loader/root';
 import * as React from 'react';
-import Frame from './Frame';
+import Frame from './frame/Frame';
+import Welcome from './welcome/Welcome';
 
 const Application = () => (
     <>
     <Frame />
-    <div>
-        Hello World from Electron!
-    </div>
+    <Welcome />
     </>
 );
 

src/renderer/components/welcome/Welcome.css

@@ -0,0 +1,111 @@
+#welcomeContainer {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+#welcomeContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    top: -10%;
+    position: relative;
+}
+
+#welcomeImageSeal {
+    border-radius: 50%;
+    border: 2px solid #cad7e1;
+    background: rgba(1, 2, 1, 0.5);
+    height: 125px;
+    width: 125px;
+    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
+    margin-bottom: 5%;
+    margin-top: 10%;
+}
+
+#welcomeHeader {
+    font-family: 'Avenir Medium';
+    text-align: center;
+    color: white;
+    margin-bottom: 25px;
+    letter-spacing: 1px;
+    font-size: 20px;
+    text-shadow: white 0px 0px 0px;
+}
+
+#welcomeDescription {
+    text-align: justify;
+    font-size: 13px;
+    font-weight: 100;
+    text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
+}
+
+#welcomeDescCTA {
+    text-align: center;
+    font-size: 14px;
+    font-weight: 100;
+    text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
+}
+
+/* Login button styles. */
+#welcomeButton {
+    background: none;
+    font-weight: bold;
+    letter-spacing: 2px;
+    border: none;
+    padding: 15px 5px;
+    margin: 10px 0px;
+    cursor: pointer;
+    position: relative;
+    right: -20px;
+    transition: 0.5s ease;
+    margin-top: 5%;
+    margin-bottom: -5%;
+}
+#welcomeButton:disabled {
+    color: rgba(255, 255, 255, 0.75);
+    pointer-events: none;
+}
+#welcomeButton:hover,
+#welcomeButton:focus {
+    text-shadow: 0px 0px 20px #fff;
+    outline: none;
+}
+#welcomeButton:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7;
+}
+#welcomeSVG {
+    -webkit-transform: translate3d(0, 0, 0);
+    overflow: visible;
+    transform: rotate(90deg);
+    margin-left: 20px;
+    transition: 0.25s ease;
+    width: 20px;
+    height: 20px;
+}
+#welcomeButton:hover #welcomeSVG,
+#welcomeButton:focus #welcomeSVG {
+    filter: drop-shadow(0px 0px 2px #fff);
+    -webkit-filter: drop-shadow(0px 0px 2px #fff);
+}
+#welcomeButton:active #welcomeSVG .arrowLine {
+    stroke: #c7c7c7;
+}
+#welcomeButton:active #welcomeSVG {
+    filter: drop-shadow(0px 0px 2px #c7c7c7);
+    -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
+}
+#welcomeButton:disabled #welcomeSVG .arrowLine {
+    stroke: rgba(255, 255, 255, 0.75);
+}
+
+#welcomeButtonContent {
+    display: flex;
+    align-items: center;
+}

src/renderer/components/welcome/Welcome.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import './Welcome.css';
+
+const Welcome = () => (
+    <div id="welcomeContainer">
+        <div id="welcomeContent">
+            <img id="welcomeImageSeal" src="../images/SealCircle.png"/>
+            <span id="welcomeHeader">WELCOME TO HELIOS LAUNCHER</span>
+            <span id="welcomeDescription">Our mission is to provide modded servers with a simple and reliable client. When a server needs more than vanilla minecraft offers, they turn to modding platforms to fill in the gaps. Managing and deploying client updates can be difficult and time consuming. Helios Launcher provides a platform to handle all of this for you through a customized, simple, and elegant client. It shouldn't be hard to play modded minecraft. It's shouldn't be hard to set up Java. With Helios, it isn't. Let's get going.</span>
+            <br />
+            <span id="welcomeDescCTA">You are just a few clicks away from the game.</span>
+            <button id="welcomeButton">
+                <div id="welcomeButtonContent">
+                    CONTINUE
+                    <svg id="welcomeSVG" viewBox="0 0 24.87 13.97">
+                        <polyline style={{fill:'none', stroke:'#FFF', strokeWidth:'2px', transition: '0.25s ease'}} strokeWidth="2px"  points="0.71 13.26 12.56 1.41 24.16 13.02"/>
+                    </svg>
+                </div>
+            </button>
+        </div>
+    </div>
+);
+
+export default Welcome;