Discord authorization window

This commit is contained in:
MrSandMan 2024-01-09 20:45:22 +03:00
parent 291a571b22
commit b6a53e5e05
2 changed files with 101 additions and 23 deletions

View File

@ -4027,4 +4027,70 @@ input:checked + .toggleSwitchSlider:before {
transition: 0.25s ease;
display: flex;
justify-content: center;
}
/*******************************************************************************
* *
* Skirda Discord Authorization *
* *
******************************************************************************/
.Centered {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
/* width: 100%; */
}
.Centered > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
#loginSkirdaAuthorizationWindow {
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgb(83 83 83 / 60%);
border-radius: 3px;
margin-bottom: 20px;
}
#settingsAboutCurrentVersion {
text-align: center;
width: 50%;
padding: 2rem 0 2rem 0;
}
#loginSkirdaAuthorizationNote {
font-size: 10px;
color: grey;
}
#loginSkirdaAuthorizationRetryButton {
margin-bottom: 0.7rem;
color: rgb(249 249 249);
border: 1px solid rgb(209 209 209);
border-radius: 4px;
transition: 0.25s ease;
font-size: 15px;
cursor: pointer;
outline: none;
background: none;
padding: 0.4rem 1rem 0.4rem 1rem;
}
#loginSkirdaAuthorizationRetryButton:hover {
background: rgb(0 0 0 / 91%);
border: 1px solid rgb(83 83 83 / 42%);
}
#loginSkirdaAuthorizationRetryButton:active {
background: rgb(0 0 0 / 91%);
border: 1px solid rgb(83 83 83 / 42%);
}

View File

@ -1,28 +1,40 @@
<div id="loginSkirdaDiscordContainer" style="display: none;">
<div id="loginOfflineCancelContainer" > <!--Delete style="" as temp fix-->
<button id="loginOfflineCancelButton">
<div id="loginOfflineCancelIcon">X</div>
<span id="loginOfflineCancelText">Cancel</span>
</button>
</div>
<div id="loginContent">
<button id="loginSkirdaDiscordInitAuth" class="loginButton" enabled>
<div id="loginOfflineButtonContent">
LOGIN
<svg id="loginSVG" viewBox="0 0 24.87 13.97">
<defs>
<style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
</defs>
<polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
</svg>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<div id="loginSkirdaDiscordContainer" style="display: none;" class="Centered">
<!--Окно открытия браузера (ожидание ответа)-->
<div id="loginSkirdaAuthorizationWindow" style="display:none;">
<div id="settingsAboutCurrentContent" class="Centered">
<div id="settingsAboutCurrentHeadline">
<img id="settingsAboutLogo" src="./assets/images/SealCircle.png">
<span id="settingsAboutTitle">Authorize through Skirda Discord</span>
</div>
</button>
<div id="settingsAboutCurrentVersion" class="Centered">
<span>Мы открыли браузер для дальнейшей авторизации через Discord</span>
</div>
</div>
<div id="settingsAboutButtons">
<span id="loginSkirdaAuthorizationNote">В случае, если это не произошло, откройте его самостоятельно</span>
</div>
</div>
<script src="./assets/js/scripts/loginSkirdaDiscord.js"></script>
<script src="./assets/js/skirda-auth/auth.js"></script>
<!--Ошибка-->
<div id="loginSkirdaAuthorizationWindow">
<div id="settingsAboutCurrentContent" class="Centered">
<div id="settingsAboutCurrentHeadline">
<img id="settingsAboutLogo" src="./assets/images/SealCircle.png">
<span id="settingsAboutTitle">Authorize through Skirda Discord</span>
</div>
<div id="settingsAboutCurrentVersion" class="Centered">
<span>Ошибка при авторизации :(</span>
</div>
<div class="settingsAboutCurrentContent">
<button id="loginSkirdaAuthorizationRetryButton">Повторить</button>
<button class="settingsAuthAccountLogOut" style="opacity: 100%;">Отменить</button>
</div>
</div>
<div id="settingsAboutButtons">
<span id="loginSkirdaAuthorizationNote">Не получается? Обратитесь к администрации проекта за помощью</span>
</div>
</div>
</div>