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)
* * */
#settingsAddAuthAccountButtonContainer {
.settingsAuthAccountTypeContainer {
display: flex;
width: 75%;
column-gap: 10px;
flex-direction: column;
}
.settingsAddAuthAccountContainer {
.settingsAuthAccountTypeHeader {
display: flex;
align-items: center;
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 {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(126, 126, 126, 0.57);
border-radius: 3px;
height: 50px;
width: 100%;
background: none;
border: none;
text-align: left;
padding: 0px 25px;
padding: 2px 0px;
color: white;
cursor: pointer;
outline: none;
transition: 0.25s ease;
display: flex;
align-items: center;
column-gap: 5px;
}
.settingsAddAuthAccount:hover,
.settingsAddAuthAccount:focus {
background: rgba(54, 54, 54, 0.25);
text-shadow: 0px 0px 20px white;
text-shadow: 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white;
}
/* Settings auth accounts header. */
#settingsCurrentAccountsHeader {
margin: 20px 0px;
.settingsAddAuthAccount:active {
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);
color: rgba(255, 255, 255, 0.75);
}
.settingsAddAuthAccount:disabled {
color: rgba(255, 255, 255, 0.75);
pointer-events: none;
}
/* Auth account list container styles. */
#settingsCurrentAccounts {
.settingsCurrentAccounts {
margin-bottom: 5%;
}
#settingsCurrentAccounts > .settingsAuthAccount:not(:last-child) {
.settingsCurrentAccounts > .settingsAuthAccount:not(:last-child) {
margin-bottom: 10px;
}
#settingsCurrentAccounts > .settingsAuthAccount:not(:first-child) {
.settingsCurrentAccounts > .settingsAuthAccount:not(:first-child) {
margin-top: 10px;
}
/* Auth account shared styles. */
.settingsAuthAccount {
display: flex;
width: 75%;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
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.
@ -569,11 +570,13 @@ function populateAuthAccounts(){
}
const selectedUUID = ConfigManager.getSelectedAccount().uuid
let authAccountStr = ''
let microsoftAuthAccountStr = ''
let mojangAuthAccountStr = ''
authKeys.map((val) => {
authKeys.forEach((val) => {
const acc = authAccounts[val]
authAccountStr += `<div class="settingsAuthAccount" uuid="${acc.uuid}">
const accHtml = `<div class="settingsAuthAccount" uuid="${acc.uuid}">
<div class="settingsAuthAccountLeft">
<img class="settingsAuthAccountImage" alt="${acc.displayName}" src="https://mc-heads.net/body/${acc.uuid}/60">
</div>
@ -596,9 +599,17 @@ function populateAuthAccounts(){
</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="settingsTabHeaderDesc">Add new accounts or manage existing ones.</span>
</div>
<div id="settingsAddAuthAccountButtonContainer">
<div id="settingsAddMojangAccountContainer" class="settingsAddAuthAccountContainer">
<button id="settingsAddMojangAccount" class="settingsAddAuthAccount">
<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">
<div class="settingsAuthAccountTypeContainer">
<div class="settingsAuthAccountTypeHeader">
<div class="settingsAuthAccountTypeHeaderLeft">
<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 id="settingsAddMicrosoftAccountText" class="settingsAddAuthAccountText">&#43; Add Microsoft Account</span>
</button>
<span>Microsoft</span>
</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 id="settingsCurrentAccountsHeader">
<span class="settingsFieldTitle">Current Accounts</span>
</div>
<div id="settingsCurrentAccounts">
<!-- Auth accounts populated here. -->
<div class="settingsAuthAccountTypeContainer">
<div class="settingsAuthAccountTypeHeader">
<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>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 id="settingsTabMinecraft" class="settingsTab" style="display: none;">