add "Waiting on microsoft..."

This commit is contained in:
Dr_Dee 2021-02-02 21:21:24 +01:00
parent 3ebb71b368
commit 731f00acc9
4 changed files with 73 additions and 49 deletions

View File

@ -688,6 +688,21 @@ body, button {
width: 16px;
height: 16px;
}
.circle-loader-big {
margin:auto;
border: 5px solid rgba(255, 255, 255, 0.5);
border-left-color: #ffffff;
animation-name: loader-spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
display: block;
align-self: center;
border-radius: 50%;
width: 60px;
height: 60px;
}
.load-complete {
animation: none;
border-color: #ffffff;

View File

@ -301,17 +301,23 @@ loginButton.addEventListener('click', () => {
})
loginMSButton.addEventListener('click', (event) => {
// Show loading stuff.
toggleOverlay(true, false, 'msOverlay')
loginMSButton.disabled = true
ipcRenderer.send('openMSALoginWindow', 'open')
})
ipcRenderer.on('MSALoginWindowReply', (event, ...args) => {
if (args[0] === 'error') {
loginMSButton.disabled = false
loginLoading(false)
switch (args[1]){
case 'AlreadyOpenException': {
setOverlayContent('ERROR', 'There is already a login window open!', 'OK')
setOverlayHandler(() => {
toggleOverlay(false)
toggleOverlay(false, false, 'msOverlay')
})
toggleOverlay(true)
return
@ -320,6 +326,7 @@ ipcRenderer.on('MSALoginWindowReply', (event, ...args) => {
setOverlayContent('ERROR', 'You have to finish the login process to use Helios Launcher. The window will close by itself when you have successfully logged in.', 'OK')
setOverlayHandler(() => {
toggleOverlay(false)
toggleOverlay(false, false, 'msOverlay')
})
toggleOverlay(true)
return
@ -327,7 +334,7 @@ ipcRenderer.on('MSALoginWindowReply', (event, ...args) => {
}
}
toggleOverlay(false, false, 'msOverlay')
const queryMap = args[0]
if (queryMap.has('error')) {
let error = queryMap.get('error')
@ -348,9 +355,6 @@ ipcRenderer.on('MSALoginWindowReply', (event, ...args) => {
// Disable form.
formDisabled(true)
// Show loading stuff.
loginLoading(true)
const authCode = queryMap.get('code')
AuthManager.addMSAccount(authCode).then(account => {
updateSelectedAccount(account)

View File

@ -9,7 +9,7 @@
*
* @returns {boolean} Whether or not the overlay is visible.
*/
function isOverlayVisible(){
function isOverlayVisible() {
return document.getElementById('main').hasAttribute('overlay')
}
@ -20,8 +20,8 @@ let overlayHandlerContent
*
* @param {KeyboardEvent} e The keydown event.
*/
function overlayKeyHandler (e){
if(e.key === 'Enter' || e.key === 'Escape'){
function overlayKeyHandler(e) {
if (e.key === 'Enter' || e.key === 'Escape') {
document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
}
}
@ -30,10 +30,10 @@ function overlayKeyHandler (e){
*
* @param {KeyboardEvent} e The keydown event.
*/
function overlayKeyDismissableHandler (e){
if(e.key === 'Enter'){
function overlayKeyDismissableHandler(e) {
if (e.key === 'Enter') {
document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
} else if(e.key === 'Escape'){
} else if (e.key === 'Escape') {
document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEsc')[0].click()
}
}
@ -45,12 +45,12 @@ function overlayKeyDismissableHandler (e){
* @param {string} content The overlay content which will be shown.
* @param {boolean} dismissable Whether or not the overlay is dismissable
*/
function bindOverlayKeys(state, content, dismissable){
function bindOverlayKeys(state, content, dismissable) {
overlayHandlerContent = content
document.removeEventListener('keydown', overlayKeyHandler)
document.removeEventListener('keydown', overlayKeyDismissableHandler)
if(state){
if(dismissable){
if (state) {
if (dismissable) {
document.addEventListener('keydown', overlayKeyDismissableHandler)
} else {
document.addEventListener('keydown', overlayKeyHandler)
@ -65,22 +65,22 @@ function bindOverlayKeys(state, content, dismissable){
* @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false.
* @param {string} content Optional. The content div to be shown.
*/
function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){
if(toggleState == null){
function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent') {
if (toggleState == null) {
toggleState = !document.getElementById('main').hasAttribute('overlay')
}
if(typeof dismissable === 'string'){
if (typeof dismissable === 'string') {
content = dismissable
dismissable = false
}
bindOverlayKeys(toggleState, content, dismissable)
if(toggleState){
if (toggleState) {
document.getElementById('main').setAttribute('overlay', true)
// Make things untabbable.
$('#main *').attr('tabindex', '-1')
$('#' + content).parent().children().hide()
$('#' + content).show()
if(dismissable){
if (dismissable) {
$('#overlayDismiss').show()
} else {
$('#overlayDismiss').hide()
@ -88,7 +88,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
$('#overlayContainer').fadeIn({
duration: 250,
start: () => {
if(getCurrentView() === VIEWS.settings){
if (getCurrentView() === VIEWS.settings) {
document.getElementById('settingsContainer').style.backgroundColor = 'transparent'
}
}
@ -100,14 +100,14 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
$('#overlayContainer').fadeOut({
duration: 250,
start: () => {
if(getCurrentView() === VIEWS.settings){
if (getCurrentView() === VIEWS.settings) {
document.getElementById('settingsContainer').style.backgroundColor = 'rgba(0, 0, 0, 0.50)'
}
},
complete: () => {
$('#' + content).parent().children().hide()
$('#' + content).show()
if(dismissable){
if (dismissable) {
$('#overlayDismiss').show()
} else {
$('#overlayDismiss').hide()
@ -117,7 +117,7 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
}
}
function toggleServerSelection(toggleState){
function toggleServerSelection(toggleState) {
prepareServerSelectionList()
toggleOverlay(toggleState, true, 'serverSelectContent')
}
@ -130,7 +130,7 @@ function toggleServerSelection(toggleState){
* @param {string} acknowledge Acknowledge button text.
* @param {string} dismiss Dismiss button text.
*/
function setOverlayContent(title, description, acknowledge, dismiss = 'Dismiss'){
function setOverlayContent(title, description, acknowledge, dismiss = 'Dismiss') {
document.getElementById('overlayTitle').innerHTML = title
document.getElementById('overlayDesc').innerHTML = description
document.getElementById('overlayAcknowledge').innerHTML = acknowledge
@ -143,8 +143,8 @@ function setOverlayContent(title, description, acknowledge, dismiss = 'Dismiss')
*
* @param {function} handler
*/
function setOverlayHandler(handler){
if(handler == null){
function setOverlayHandler(handler) {
if (handler == null) {
document.getElementById('overlayAcknowledge').onclick = () => {
toggleOverlay(false)
}
@ -159,8 +159,8 @@ function setOverlayHandler(handler){
*
* @param {function} handler
*/
function setDismissHandler(handler){
if(handler == null){
function setDismissHandler(handler) {
if (handler == null) {
document.getElementById('overlayDismiss').onclick = () => {
toggleOverlay(false)
}
@ -173,8 +173,8 @@ function setDismissHandler(handler){
document.getElementById('serverSelectConfirm').addEventListener('click', () => {
const listings = document.getElementsByClassName('serverListing')
for(let i=0; i<listings.length; i++){
if(listings[i].hasAttribute('selected')){
for (let i = 0; i < listings.length; i++) {
if (listings[i].hasAttribute('selected')) {
const serv = DistroManager.getDistribution().getServer(listings[i].getAttribute('servid'))
updateSelectedServer(serv)
refreshServerStatus(true)
@ -183,7 +183,7 @@ document.getElementById('serverSelectConfirm').addEventListener('click', () => {
}
}
// None are selected? Not possible right? Meh, handle it.
if(listings.length > 0){
if (listings.length > 0) {
const serv = DistroManager.getDistribution().getServer(listings[i].getAttribute('servid'))
updateSelectedServer(serv)
toggleOverlay(false)
@ -192,8 +192,8 @@ document.getElementById('serverSelectConfirm').addEventListener('click', () => {
document.getElementById('accountSelectConfirm').addEventListener('click', () => {
const listings = document.getElementsByClassName('accountListing')
for(let i=0; i<listings.length; i++){
if(listings[i].hasAttribute('selected')){
for (let i = 0; i < listings.length; i++) {
if (listings[i].hasAttribute('selected')) {
const authAcc = ConfigManager.setSelectedAccount(listings[i].getAttribute('uuid'))
ConfigManager.save()
updateSelectedAccount(authAcc)
@ -203,7 +203,7 @@ document.getElementById('accountSelectConfirm').addEventListener('click', () =>
}
}
// None are selected? Not possible right? Meh, handle it.
if(listings.length > 0){
if (listings.length > 0) {
const authAcc = ConfigManager.setSelectedAccount(listings[0].getAttribute('uuid'))
ConfigManager.save()
updateSelectedAccount(authAcc)
@ -223,16 +223,16 @@ document.getElementById('accountSelectCancel').addEventListener('click', () => {
})
})
function setServerListingHandlers(){
function setServerListingHandlers() {
const listings = Array.from(document.getElementsByClassName('serverListing'))
listings.map((val) => {
val.onclick = e => {
if(val.hasAttribute('selected')){
if (val.hasAttribute('selected')) {
return
}
const cListings = document.getElementsByClassName('serverListing')
for(let i=0; i<cListings.length; i++){
if(cListings[i].hasAttribute('selected')){
for (let i = 0; i < cListings.length; i++) {
if (cListings[i].hasAttribute('selected')) {
cListings[i].removeAttribute('selected')
}
}
@ -242,16 +242,16 @@ function setServerListingHandlers(){
})
}
function setAccountListingHandlers(){
function setAccountListingHandlers() {
const listings = Array.from(document.getElementsByClassName('accountListing'))
listings.map((val) => {
val.onclick = e => {
if(val.hasAttribute('selected')){
if (val.hasAttribute('selected')) {
return
}
const cListings = document.getElementsByClassName('accountListing')
for(let i=0; i<cListings.length; i++){
if(cListings[i].hasAttribute('selected')){
for (let i = 0; i < cListings.length; i++) {
if (cListings[i].hasAttribute('selected')) {
cListings[i].removeAttribute('selected')
}
}
@ -261,12 +261,12 @@ function setAccountListingHandlers(){
})
}
function populateServerListings(){
function populateServerListings() {
const distro = DistroManager.getDistribution()
const giaSel = ConfigManager.getSelectedServer()
const servers = distro.getServers()
let htmlString = ''
for(const serv of servers){
for (const serv of servers) {
htmlString += `<button class="serverListing" servid="${serv.getID()}" ${serv.getID() === giaSel ? 'selected' : ''}>
<img class="serverListingImg" src="${serv.getIcon()}"/>
<div class="serverListingDetails">
@ -293,12 +293,12 @@ function populateServerListings(){
}
function populateAccountListings(){
function populateAccountListings() {
const accountsObj = ConfigManager.getAuthAccounts()
const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v])
const accounts = Array.from(Object.keys(accountsObj), v => accountsObj[v])
let htmlString = ''
for(let i=0; i<accounts.length; i++){
htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${i===0 ? 'selected' : ''}>
for (let i = 0; i < accounts.length; i++) {
htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${i === 0 ? 'selected' : ''}>
<img src="https://crafatar.com/renders/head/${accounts[i].uuid}?scale=2&default=MHF_Steve&overlay">
<div class="accountListingName">${accounts[i].displayName}</div>
</button>`
@ -307,12 +307,12 @@ function populateAccountListings(){
}
function prepareServerSelectionList(){
function prepareServerSelectionList() {
populateServerListings()
setServerListingHandlers()
}
function prepareAccountSelectionList(){
function prepareAccountSelectionList() {
populateAccountListings()
setAccountListingHandlers()
}

View File

@ -28,6 +28,7 @@
</div>
</div>
<div id="overlayContent">
<div class="circle-loader" style="display: none;"></div>
<span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
<span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
<div id="overlayActionContainer">
@ -37,5 +38,9 @@
</div>
</div>
</div>
<div id="msOverlay" style="display: none;">
<span><div class="circle-loader-big"></div></span><br>
<span style="font-size: 2em;">Waiting on Microsoft...</span>
</div>
<script src="./assets/js/scripts/overlay.js"></script>
</div>