Split auth accounts by Microsoft/Mojang.

This commit is contained in:
Daniel Scalzi 2022-02-07 19:11:30 -05:00
parent 2a99d72dde
commit dfbe6e0a6b
No known key found for this signature in database
GPG Key ID: 9E3E2AFE45328AA5
3 changed files with 77 additions and 48 deletions

View File

@ -1348,58 +1348,65 @@ input:checked + .toggleSwitchSlider:before {
* Settings View (Account Tab) * Settings View (Account Tab)
* * */ * * */
#settingsAddAuthAccountButtonContainer { .settingsAuthAccountTypeContainer {
display: flex; display: flex;
width: 75%; width: 75%;
column-gap: 10px; flex-direction: column;
} }
.settingsAddAuthAccountContainer { .settingsAuthAccountTypeHeader {
display: flex;
align-items: center;
width: 100%; width: 100%;
justify-content: space-between;
padding: 10px 0px;
border-bottom: 1px solid #ffffff85;
margin-bottom: 30px;
} }
/* Add account button styles. */ .settingsAuthAccountTypeHeaderLeft {
display: flex;
column-gap: 5px;
}
/* Settings add account button styles. */
.settingsAddAuthAccount { .settingsAddAuthAccount {
background: rgba(0, 0, 0, 0.25); background: none;
border: 1px solid rgba(126, 126, 126, 0.57); border: none;
border-radius: 3px;
height: 50px;
width: 100%;
text-align: left; text-align: left;
padding: 0px 25px; padding: 2px 0px;
color: white;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
transition: 0.25s ease; transition: 0.25s ease;
display: flex;
align-items: center;
column-gap: 5px;
} }
.settingsAddAuthAccount:hover, .settingsAddAuthAccount:hover,
.settingsAddAuthAccount:focus { .settingsAddAuthAccount:focus {
background: rgba(54, 54, 54, 0.25); text-shadow: 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white;
text-shadow: 0px 0px 20px white;
} }
.settingsAddAuthAccount:active {
/* Settings auth accounts header. */ text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.75);
#settingsCurrentAccountsHeader { color: rgba(255, 255, 255, 0.75);
margin: 20px 0px; }
.settingsAddAuthAccount:disabled {
color: rgba(255, 255, 255, 0.75);
pointer-events: none;
} }
/* Auth account list container styles. */ /* Auth account list container styles. */
#settingsCurrentAccounts { .settingsCurrentAccounts {
margin-bottom: 5%; margin-bottom: 5%;
} }
#settingsCurrentAccounts > .settingsAuthAccount:not(:last-child) { .settingsCurrentAccounts > .settingsAuthAccount:not(:last-child) {
margin-bottom: 10px; margin-bottom: 10px;
} }
#settingsCurrentAccounts > .settingsAuthAccount:not(:first-child) { .settingsCurrentAccounts > .settingsAuthAccount:not(:first-child) {
margin-top: 10px; margin-top: 10px;
} }
/* Auth account shared styles. */ /* Auth account shared styles. */
.settingsAuthAccount { .settingsAuthAccount {
display: flex; display: flex;
width: 75%;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
border-radius: 3px; border-radius: 3px;
border: 1px solid rgba(126, 126, 126, 0.57); border: 1px solid rgba(126, 126, 126, 0.57);

View File

@ -556,7 +556,8 @@ function refreshAuthAccountSelected(uuid){
}) })
} }
const settingsCurrentAccounts = document.getElementById('settingsCurrentAccounts') const settingsCurrentMicrosoftAccounts = document.getElementById('settingsCurrentMicrosoftAccounts')
const settingsCurrentMojangAccounts = document.getElementById('settingsCurrentMojangAccounts')
/** /**
* Add auth account elements for each one stored in the authentication database. * Add auth account elements for each one stored in the authentication database.
@ -569,11 +570,13 @@ function populateAuthAccounts(){
} }
const selectedUUID = ConfigManager.getSelectedAccount().uuid const selectedUUID = ConfigManager.getSelectedAccount().uuid
let authAccountStr = '' let microsoftAuthAccountStr = ''
let mojangAuthAccountStr = ''
authKeys.map((val) => { authKeys.forEach((val) => {
const acc = authAccounts[val] const acc = authAccounts[val]
authAccountStr += `<div class="settingsAuthAccount" uuid="${acc.uuid}">
const accHtml = `<div class="settingsAuthAccount" uuid="${acc.uuid}">
<div class="settingsAuthAccountLeft"> <div class="settingsAuthAccountLeft">
<img class="settingsAuthAccountImage" alt="${acc.displayName}" src="https://mc-heads.net/body/${acc.uuid}/60"> <img class="settingsAuthAccountImage" alt="${acc.displayName}" src="https://mc-heads.net/body/${acc.uuid}/60">
</div> </div>
@ -596,9 +599,17 @@ function populateAuthAccounts(){
</div> </div>
</div> </div>
</div>` </div>`
if(acc.type === 'microsoft') {
microsoftAuthAccountStr += accHtml
} else {
mojangAuthAccountStr += accHtml
}
}) })
settingsCurrentAccounts.innerHTML = authAccountStr settingsCurrentMicrosoftAccounts.innerHTML = microsoftAuthAccountStr
settingsCurrentMojangAccounts.innerHTML = mojangAuthAccountStr
} }
/** /**

View File

@ -28,34 +28,45 @@
<span class="settingsTabHeaderText">Account Settings</span> <span class="settingsTabHeaderText">Account Settings</span>
<span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span> <span class="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span>
</div> </div>
<div id="settingsAddAuthAccountButtonContainer"> <div class="settingsAuthAccountTypeContainer">
<div id="settingsAddMojangAccountContainer" class="settingsAddAuthAccountContainer"> <div class="settingsAuthAccountTypeHeader">
<button id="settingsAddMojangAccount" class="settingsAddAuthAccount"> <div class="settingsAuthAccountTypeHeaderLeft">
<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 id="settingsAddMojangAccountText" class="settingsAddAuthAccountText">&#43; Add Mojang Account</span>
</button>
</div>
<div id="settingsAddMicrosoftAccountContainer" class="settingsAddAuthAccountContainer">
<button id="settingsAddMicrosoftAccount" class="settingsAddAuthAccount">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 23 23"> <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="#f35325" d="M1 1h10v10H1z" />
<path fill="#81bc06" d="M12 1h10v10H12z" /> <path fill="#81bc06" d="M12 1h10v10H12z" />
<path fill="#05a6f0" d="M1 12h10v10H1z" /> <path fill="#05a6f0" d="M1 12h10v10H1z" />
<path fill="#ffba08" d="M12 12h10v10H12z" /> <path fill="#ffba08" d="M12 12h10v10H12z" />
</svg> </svg>
<span id="settingsAddMicrosoftAccountText" class="settingsAddAuthAccountText">&#43; Add Microsoft Account</span> <span>Microsoft</span>
</button> </div>
<div class="settingsAuthAccountTypeHeaderRight">
<button class="settingsAddAuthAccount" id="settingsAddMicrosoftAccount">+ Add Microsoft Account</button>
</div>
</div>
<div class="settingsCurrentAccounts" id="settingsCurrentMicrosoftAccounts">
<!-- Microsoft auth accounts populated here. -->
</div> </div>
</div> </div>
<div id="settingsCurrentAccountsHeader">
<span class="settingsFieldTitle">Current Accounts</span> <div class="settingsAuthAccountTypeContainer">
</div> <div class="settingsAuthAccountTypeHeader">
<div id="settingsCurrentAccounts"> <div class="settingsAuthAccountTypeHeaderLeft">
<!-- Auth accounts populated here. --> <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>Mojang</span>
</div>
<div class="settingsAuthAccountTypeHeaderRight">
<button class="settingsAddAuthAccount" id="settingsAddMojangAccount">+ Add Mojang Account</button>
</div>
</div>
<div class="settingsCurrentAccounts" id="settingsCurrentMojangAccounts">
<!-- Mojang auth accounts populated here. -->
</div>
</div> </div>
</div> </div>
<div id="settingsTabMinecraft" class="settingsTab" style="display: none;"> <div id="settingsTabMinecraft" class="settingsTab" style="display: none;">