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;
--form-disabled-color: #606060;
--button-accept: #0F0;
--success-color: #0F0;
--button-cancel: #F00;
--fail-color: #F00;
}
* {
@ -110,23 +112,6 @@ p {
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 {
visibility: hidden;
}

2
index.html
View File

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

40
login.html
View File

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

2
scripts/config.js
View File

@ -325,7 +325,7 @@ async function handleDiskDelete () {
document.body.append(dialog);
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) => {
if (result === "confirm") {

10
scripts/login.js
View File

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