add "Waiting on microsoft..."

app/assets/css/launcher.css

@@ -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;

app/assets/js/scripts/login.js

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

app/assets/js/scripts/overlay.js

@@ -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){
+function overlayKeyHandler(e) {
-    if(e.key === 'Enter' || e.key === 'Escape'){
+    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){
+function overlayKeyDismissableHandler(e) {
-    if(e.key === 'Enter'){
+    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 (state) {
-        if(dismissable){
+        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'){
+function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent') {
-    if(toggleState == null){
+    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){
+function setOverlayHandler(handler) {
-    if(handler == null){
+    if (handler == null) {
         document.getElementById('overlayAcknowledge').onclick = () => {
             toggleOverlay(false)
         }
@@ -159,8 +159,8 @@ function setOverlayHandler(handler){
  * 
  * @param {function} handler 
  */
-function setDismissHandler(handler){
+function setDismissHandler(handler) {
-    if(handler == null){
+    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++){
+    for (let i = 0; i < listings.length; i++) {
-        if(listings[i].hasAttribute('selected')){
+        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++){
+    for (let i = 0; i < listings.length; i++) {
-        if(listings[i].hasAttribute('selected')){
+        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++){
+            for (let i = 0; i < cListings.length; i++) {
-                if(cListings[i].hasAttribute('selected')){
+                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++){
+            for (let i = 0; i < cListings.length; i++) {
-                if(cListings[i].hasAttribute('selected')){
+                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++){
+    for (let i = 0; i < accounts.length; i++) {
-        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${i===0 ? 'selected' : ''}>
+        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()
 }

app/overlay.ejs

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