Allow Microsoft login from the welcome view.

This commit is contained in:
Daniel Scalzi 2022-02-08 20:53:28 -05:00
parent dfbe6e0a6b
commit 2e0ece9d0b
No known key found for this signature in database
GPG Key ID: 9E3E2AFE45328AA5
8 changed files with 160 additions and 24 deletions

View File

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

View File

@ -222,6 +222,7 @@ body, button {
align-items: center; align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.50);
} }
#welcomeContent { #welcomeContent {
@ -951,6 +952,71 @@ 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 {
background: rgba(0, 0, 0, 0.50);
border-radius: 3px;
height: 450px;
width: 350px;
}
.loginOptionsMainContent {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 100%;
padding-top: 25px;
}
.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;
}
/******************************************************************************* /*******************************************************************************
* * * *
* Settings View (sttings.ejs) * * Settings View (sttings.ejs) *

View File

@ -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)
})
}

View File

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

View File

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

View File

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

31
app/loginOptions.ejs Normal file
View File

@ -0,0 +1,31 @@
<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>
</div>
<script src="./assets/js/scripts/loginOptions.js"></script>
</div>

View File

@ -95,12 +95,16 @@ const REDIRECT_URI_PREFIX = 'https://login.microsoftonline.com/common/oauth2/nat
// Microsoft Auth Login // Microsoft Auth Login
let msftAuthWindow let msftAuthWindow
let msftAuthSuccess let msftAuthSuccess
ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent) => { let msftAuthViewSuccess
let msftAuthViewOnClose
ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent, ...arguments_) => {
if (msftAuthWindow) { 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 return
} }
msftAuthSuccess = false msftAuthSuccess = false
msftAuthViewSuccess = arguments_[0]
msftAuthViewOnClose = arguments_[1]
msftAuthWindow = new BrowserWindow({ msftAuthWindow = new BrowserWindow({
title: 'Microsoft Login', title: 'Microsoft Login',
backgroundColor: '#222222', backgroundColor: '#222222',
@ -116,7 +120,7 @@ ipcMain.on(MSFT_OPCODE.OPEN_LOGIN, (ipcEvent) => {
msftAuthWindow.on('close', () => { msftAuthWindow.on('close', () => {
if(!msftAuthSuccess) { 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) 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 msftAuthSuccess = true
msftAuthWindow.close() msftAuthWindow.close()