Add cancel button to login options for later.

app/app.ejs

@@ -32,6 +32,7 @@
         <%- include('welcome') %>
         <%- include('login') %>
         <%- include('waiting') %>
+        <%- include('loginOptions') %>
         <%- include('settings') %>
         <%- include('landing') %>
     </div>

app/assets/css/launcher.css

@@ -222,6 +222,7 @@ body, button {
     align-items: center;
     height: 100%;
     width: 100%;
+    background: rgba(0, 0, 0, 0.50);
 }
 
 #welcomeContent {
@@ -951,6 +952,96 @@ body, button {
     }
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Login Options View (loginOptions.ejs)                                       *
+ *                                                                             *
+ ******************************************************************************/
+
+#loginOptionsContainer {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    transition: filter 0.25s ease;
+    background: rgba(0, 0, 0, 0.50);
+}
+
+#loginOptionsContent {
+    border-radius: 3px;
+    position: relative;
+    top: -5%;
+}
+
+.loginOptionsMainContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.loginOptionActions {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.loginOptionButtonContainer {
+    width: 16em;
+}
+
+.loginOptionButton {
+    background: rgba(0, 0, 0, 0.25);
+    border: 1px solid rgba(126, 126, 126, 0.57);
+    border-radius: 3px;
+    height: 50px;
+    width: 100%;
+    text-align: left;
+    padding: 0px 25px;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+}
+.loginOptionButton:hover,
+.loginOptionButton:focus {
+    background: rgba(54, 54, 54, 0.25);
+    text-shadow: 0px 0px 20px white;
+}
+
+#loginOptionCancelContainer {
+    position: absolute;
+    bottom: -100px;
+}
+
+#loginOptionCancelButton {
+    background: none;
+    border: none;
+    padding: 2px 0px;
+    font-size: 16px;
+    font-weight: bold;
+    color: lightgrey;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+}
+#loginOptionCancelButton:hover,
+#loginOptionCancelButton:focus {
+    text-shadow: 0px 0px 20px lightgrey;
+}
+#loginOptionCancelButton:active {
+    text-shadow: 0px 0px 20px rgba(211, 211, 211, 0.75);
+    color: rgba(211, 211, 211, 0.75);
+}
+#loginOptionCancelButton:disabled {
+    color: rgba(211, 211, 211, 0.75);
+    pointer-events: none;
+}
+
+
 /*******************************************************************************
  *                                                                             *
  * Settings View (sttings.ejs)                                                 *

app/assets/js/scripts/loginOptions.js

@@ -0,0 +1,24 @@
+const loginOptionMicrosoft = document.getElementById('loginOptionMicrosoft')
+const loginOptionMojang = document.getElementById('loginOptionMojang')
+
+let loginOptionsViewOnLoginSuccess
+let loginOptionsViewOnLoginCancel
+let loginOptionsViewOnCancel
+
+loginOptionMicrosoft.onclick = (e) => {
+    switchView(getCurrentView(), VIEWS.waiting, 500, 500, () => {
+        ipcRenderer.send(
+            MSFT_OPCODE.OPEN_LOGIN,
+            loginOptionsViewOnLoginSuccess,
+            loginOptionsViewOnLoginCancel
+        )
+    })
+}
+
+loginOptionMojang.onclick = (e) => {
+    switchView(getCurrentView(), VIEWS.login, 500, 500, () => {
+        loginViewOnSuccess = loginOptionsViewOnLoginSuccess
+        loginViewOnCancel = loginOptionsViewOnLoginCancel
+        loginCancelEnabled(true)
+    })
+}

app/assets/js/scripts/settings.js

@@ -330,16 +330,19 @@ document.getElementById('settingsAddMojangAccount').onclick = (e) => {
 // Bind the add microsoft account button.
 document.getElementById('settingsAddMicrosoftAccount').onclick = (e) => {
     switchView(getCurrentView(), VIEWS.waiting, 500, 500, () => {
-        ipcRenderer.send(MSFT_OPCODE.OPEN_LOGIN)
+        ipcRenderer.send(MSFT_OPCODE.OPEN_LOGIN, VIEWS.settings, VIEWS.settings)
     })
 }
 
 // Bind reply for Microsoft Login.
 ipcRenderer.on(MSFT_OPCODE.REPLY_LOGIN, (_, ...arguments_) => {
     if (arguments_[0] === MSFT_REPLY_TYPE.ERROR) {
-        switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
 
-            if(arguments_.length > 1 && arguments_[1] === MSFT_ERROR.NOT_FINISHED) {
+        const viewOnClose = arguments_[2]
+        console.log(arguments_)
+        switchView(getCurrentView(), viewOnClose, 500, 500, () => {
+
+            if(arguments_[1] === MSFT_ERROR.NOT_FINISHED) {
                 // User cancelled.
                 msftLoginLogger.info('Login cancelled by user.')
                 return
@@ -358,9 +361,11 @@ ipcRenderer.on(MSFT_OPCODE.REPLY_LOGIN, (_, ...arguments_) => {
         })
     } else if(arguments_[0] === MSFT_REPLY_TYPE.SUCCESS) {
         const queryMap = arguments_[1]
+        const viewOnClose = arguments_[2]
 
         // Error from request to Microsoft.
         if (Object.prototype.hasOwnProperty.call(queryMap, 'error')) {
+            switchView(getCurrentView(), viewOnClose, 500, 500, () => {
                 let error = queryMap.error
                 let errorDesc = queryMap.error_description
                 title = error
@@ -379,6 +384,8 @@ ipcRenderer.on(MSFT_OPCODE.REPLY_LOGIN, (_, ...arguments_) => {
                     toggleOverlay(false)
                 })
                 toggleOverlay(true)
+
+            })
         } else {
 
             msftLoginLogger.info('Acquired authCode, proceeding with authentication.')
@@ -386,7 +393,7 @@ ipcRenderer.on(MSFT_OPCODE.REPLY_LOGIN, (_, ...arguments_) => {
             const authCode = queryMap.code
             AuthManager.addMicrosoftAccount(authCode).then(value => {
                 updateSelectedAccount(value)
-                switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+                switchView(getCurrentView(), viewOnClose, 500, 500, () => {
                     prepareSettings()
                 })
             })

app/assets/js/scripts/uibinder.js

@@ -16,6 +16,7 @@ let fatalStartupError = false
 // Mapping of each view to their container IDs.
 const VIEWS = {
     landing: '#landingContainer',
+    loginOptions: '#loginOptionsContainer',
     login: '#loginContainer',
     settings: '#settingsContainer',
     welcome: '#welcomeContainer',

app/assets/js/scripts/welcome.js

@@ -2,5 +2,7 @@
  * Script for welcome.ejs
  */
 document.getElementById('welcomeButton').addEventListener('click', e => {
-    switchView(VIEWS.welcome, VIEWS.login)
+    loginOptionsViewOnLoginSuccess = VIEWS.landing
+    loginOptionsViewOnLoginCancel = VIEWS.loginOptions
+    switchView(VIEWS.welcome, VIEWS.loginOptions)
 })

app/loginOptions.ejs

@@ -0,0 +1,34 @@
+<div id="loginOptionsContainer" style="display: none;">
+    <div id="loginOptionsContent">
+        <div class="loginOptionsMainContent">
+            <h2>Login Options</h2>
+            <div class="loginOptionActions">
+                <div class="loginOptionButtonContainer">
+                    <button id="loginOptionMicrosoft" class="loginOptionButton">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 23 23">
+                            <path fill="#f35325" d="M1 1h10v10H1z" />
+                            <path fill="#81bc06" d="M12 1h10v10H12z" />
+                            <path fill="#05a6f0" d="M1 12h10v10H1z" />
+                            <path fill="#ffba08" d="M12 12h10v10H12z" />
+                        </svg>
+                        <span>Login with Microsoft</span>
+                    </button>
+                </div>
+                <div class="loginOptionButtonContainer">
+                    <button id="loginOptionMojang" class="loginOptionButton">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 9.677 9.667">
+                            <path d="M-26.332-12.098h2.715c-1.357.18-2.574 1.23-2.715 2.633z" fill="#fff" />
+                            <path d="M2.598.022h7.07L9.665 7c-.003 1.334-1.113 2.46-2.402 2.654H0V2.542C.134 1.2 1.3.195 2.598.022z" fill="#db2331" />
+                            <path d="M1.54 2.844c.314-.76 1.31-.46 1.954-.528.785-.083 1.503.272 2.1.758l.164-.9c.327.345.587.756.964 1.052.28.254.655-.342.86-.013.42.864.408 1.86.54 2.795l-.788-.373C6.9 4.17 5.126 3.052 3.656 3.685c-1.294.592-1.156 2.65.06 3.255 1.354.703 2.953.51 4.405.292-.07.42-.34.87-.834.816l-4.95.002c-.5.055-.886-.413-.838-.89l.04-4.315z" fill="#fff" />
+                        </svg>
+                        <span>Login with Mojang</span>
+                    </button>
+                </div>
+            </div>
+            <div id="loginOptionCancelContainer" style="display: none;">
+                <button id="loginOptionCancelButton">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <script src="./assets/js/scripts/loginOptions.js"></script>
+</div>

index.js

@@ -95,12 +95,16 @@ const REDIRECT_URI_PREFIX = 'https://login.microsoftonline.com/common/oauth2/nat
 // Microsoft Auth Login
 let msftAuthWindow
 let msftAuthSuccess
-ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent) => {
+let msftAuthViewSuccess
+let msftAuthViewOnClose
+ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent, ...arguments_) => {
     if (msftAuthWindow) {
-        ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.ERROR, MSFT_ERROR.ALREADY_OPEN)
+        ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.ERROR, MSFT_ERROR.ALREADY_OPEN, msftAuthViewOnClose)
         return
     }
     msftAuthSuccess = false
+    msftAuthViewSuccess = arguments_[0]
+    msftAuthViewOnClose = arguments_[1]
     msftAuthWindow = new BrowserWindow({
         title: 'Microsoft Login',
         backgroundColor: '#222222',
@@ -116,7 +120,7 @@ ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent) => {
 
     msftAuthWindow.on('close', () => {
         if(!msftAuthSuccess) {
-            ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.ERROR, MSFT_ERROR.NOT_FINISHED)
+            ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.ERROR, MSFT_ERROR.NOT_FINISHED, msftAuthViewOnClose)
         }
     })
 
@@ -130,7 +134,7 @@ ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent) => {
                 queryMap[name] = decodeURI(value)
             })
 
-            ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.SUCCESS, queryMap)
+            ipcEvent.reply(MSFT_OPCODE.REPLY_LOGIN, MSFT_REPLY_TYPE.SUCCESS, queryMap, msftAuthViewSuccess)
 
             msftAuthSuccess = true
             msftAuthWindow.close()