tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use css vars for coloring

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-03 22:59:36 +00:00
parent 3c2fa28f0a
commit eecf272e99
5 changed files with 28 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -5,7 +5,9 @@
--content-txt-color: black; --content-txt-color: black;
--form-disabled-color: #606060; --form-disabled-color: #606060;
--button-accept: #0F0; --button-accept: #0F0;
--success-color: #0F0;
--button-cancel: #F00; --button-cancel: #F00;
--fail-color: #F00;
} }
* { * {
@ -110,23 +112,6 @@ p {
text-align: left; text-align: left;
} }
@media screen and (min-width: 480px) {
.center-div {
min-width: 480px;
max-width: 50%;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 480px) {
.center-div {
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.hidden { .hidden {
visibility: hidden; visibility: hidden;
} }

2
index.html
View File

@ -19,7 +19,7 @@
} }
instance-obj:after, instance-obj:first-child:before { instance-obj:after, instance-obj:first-child:before {
content: " "; content: " ";
border-bottom: 1px solid black; border-bottom: 1px solid var(--content-txt-color);
grid-column: 1 / span 3; grid-column: 1 / span 3;
} }
</style> </style>

40
login.html
View File

@ -17,27 +17,25 @@
</nav> </nav>
</header> </header>
<main> <main>
<div class="center-div"> <form style="margin-left: auto; margin-right: auto;">
<form style="margin-left: auto; margin-right: auto;"> <fieldset>
<fieldset> <legend>Proxmox VE Login</legend>
<legend>Proxmox VE Login</legend> <div class="input-grid" style="grid-template-columns: repeat(2, auto);">
<div class="input-grid" style="grid-template-columns: repeat(2, auto);"> <label for="username">Username</label>
<label for="username">Username</label> <input type="text" id="username" name="username">
<input type="text" id="username" name="username"> <label for="password">Password</label>
<label for="password">Password</label> <input type="password" id="password" name="password">
<input type="password" id="password" name="password"> <label for="realm">Realm</label>
<label for="realm">Realm</label> <select id="realm" name="realm"></select>
<select id="realm" name="realm"></select> </div>
</div> </fieldset>
</fieldset> <fieldset class="fieldset-no-border">
<fieldset class="fieldset-no-border"> <div class="btn-group">
<div class="btn-group"> <button id="submit">LOGIN</button>
<button id="submit">LOGIN</button> </div>
</div> </fieldset>
</fieldset> </form>
</form> <p id="status" style="text-align: center;"></p>
<p id="status"></p>
</div>
</main> </main>
<footer><p>&copy; tronnet</p></footer> <footer><p>&copy; tronnet</p></footer>
</body> </body>

2
scripts/config.js
View File

@ -325,7 +325,7 @@ async function handleDiskDelete () {
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Delete ${this.dataset.disk}`; dialog.header = `Delete ${this.dataset.disk}`;
dialog.formBody = `<p style="color: #FF0000;">Are you sure you want to <strong>delete</strong> disk</p><p style="color: #FF0000;">${this.dataset.disk}</p>`; dialog.formBody = `<p>Are you sure you want to <strong>delete</strong> disk</p><p>${this.dataset.disk}</p>`;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {

10
scripts/login.js
View File

@ -16,7 +16,7 @@ async function init (){
}); });
formSubmitButton.addEventListener("click", async (e) => { formSubmitButton.addEventListener("click", async (e) => {
status.innerText = ""; status.innerText = "";
status.style.color = "#000000"; status.style.color = "var(--content-txt-color)";
e.preventDefault(); e.preventDefault();
let form = document.querySelector("form"); let form = document.querySelector("form");
let formData = new FormData(form); let formData = new FormData(form);
@ -25,21 +25,21 @@ async function init (){
let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm")); let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm"));
setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username")); setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username"));
status.innerText = "Authentication successful!" status.innerText = "Authentication successful!"
status.style.color = "#00ff00"; status.style.color = "var(--success-color)";
goToPage("index.html"); goToPage("index.html");
} }
catch (error) { catch (error) {
if(error instanceof ResponseError) { // response error is usually 401 auth failed if(error instanceof ResponseError) { // response error is usually 401 auth failed
status.innerText = "Authentication failed."; status.innerText = "Authentication failed.";
status.style.color = "#ff0000"; status.style.color = "var(--fail-color)";
} }
else if (error instanceof NetworkError) { else if (error instanceof NetworkError) {
status.innerText = "Encountered a network error."; status.innerText = "Encountered a network error.";
status.style.color = "#ff0000"; status.style.color = "var(--fail-color)";
} }
else { else {
status.innerText = "An error occured."; status.innerText = "An error occured.";
status.style.color = "#ff0000"; status.style.color = "var(--fail-color)";
console.error(error); console.error(error);
} }
} }