Add cancel button to login options for later.

Allow Microsoft login from the welcome view.
2024-12-22 03:32:12 -08:00 · 2022-02-08 21:22:24 -05:00 · 2022-02-08 20:53:28 -05:00
8 changed files with 188 additions and 24 deletions
--- a/app/app.ejs
+++ b/app/app.ejs
@ -32,6 +32,7 @@
        <%- include('welcome') %>
        <%- include('login') %>
        <%- include('waiting') %>
+        <%- include('loginOptions') %>
        <%- include('settings') %>
        <%- include('landing') %>
    </div>
--- a/app/assets/css/launcher.css
+++ b/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)                                                 *
--- a/app/assets/js/scripts/loginOptions.js
+++ b/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)
+    })
+}
--- a/app/assets/js/scripts/settings.js
+++ b/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,27 +361,31 @@ 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')) {
-            let error = queryMap.error
-            let errorDesc = queryMap.error_description
-            title = error
-            description = errorDesc
-            if (error === 'access_denied') {
-                // TODO Write custom error messages.
+            switchView(getCurrentView(), viewOnClose, 500, 500, () => {
+                let error = queryMap.error
+                let errorDesc = queryMap.error_description
                title = error
                description = errorDesc
-            }
-            setOverlayContent(
-                title,
-                description,
-                'OK'
-            )
-            setOverlayHandler(() => {
-                toggleOverlay(false)
+                if (error === 'access_denied') {
+                    // TODO Write custom error messages.
+                    title = error
+                    description = errorDesc
+                }
+                setOverlayContent(
+                    title,
+                    description,
+                    'OK'
+                )
+                setOverlayHandler(() => {
+                    toggleOverlay(false)
+                })
+                toggleOverlay(true)
+
            })
-            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()
                })
            })
--- a/app/assets/js/scripts/uibinder.js
+++ b/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',
--- a/app/assets/js/scripts/welcome.js
+++ b/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)
 })
--- a/app/loginOptions.ejs
+++ b/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>
--- a/index.js
+++ b/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()
Author	SHA1	Message	Date
Daniel Scalzi	8b23847c29	Add cancel button to login options for later.	2022-02-08 21:22:24 -05:00
Daniel Scalzi	2e0ece9d0b	Allow Microsoft login from the welcome view.	2022-02-08 20:53:28 -05:00