add realm selector to login

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-03-24 21:13:33 +00:00
parent b6685696fc
commit fa66459da7
4 changed files with 21 additions and 9 deletions

View File

@ -23,7 +23,8 @@ input, label, legend {
input { input {
border: solid white 1px; border: solid white 1px;
width: min-content; min-width: fit-content;
width: 100%;
} }
input:focus { input:focus {
@ -38,7 +39,8 @@ select {
border: solid white 1px; border: solid white 1px;
background-color: black; background-color: black;
color: white; color: white;
width: min-content; min-width: fit-content;
width: 100%;
} }
select:disabled { select:disabled {

View File

@ -11,7 +11,7 @@
</head> </head>
<body> <body>
<div class="center-div"> <div class="center-div">
<form style="margin-top: 20px; width: min-content; margin-left: auto; margin-right: auto;"> <form style="margin-top: 20px; min-width: min-content; 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);">
@ -19,6 +19,8 @@
<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>
<select id="realm" name="realm"></select>
</div> </div>
</fieldset> </fieldset>
<fieldset class="fieldset-no-border"> <fieldset class="fieldset-no-border">

View File

@ -1,11 +1,16 @@
import {requestTicket, setTicket, ResponseError, NetworkError, goToPage, deleteAllCookies} from "./utils.js"; import {requestTicket, setTicket, ResponseError, NetworkError, goToPage, deleteAllCookies, requestPVE} from "./utils.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init (){ async function init (){
deleteAllCookies(); deleteAllCookies();
let formSubmitButton = document.querySelector("#submit"); let formSubmitButton = document.querySelector("#submit");
let status = document.querySelector("#status"); let status = document.querySelector("#status");
let realms = await requestPVE("/access/domains", "GET");
let realmSelect = document.querySelector("#realm");
realms.data.forEach((element) => {
realmSelect.add(new Option(element.comment, element.realm));
});
formSubmitButton.addEventListener("click", async (e) => { formSubmitButton.addEventListener("click", async (e) => {
status.innerText = ""; status.innerText = "";
status.style.color = "#000000"; status.style.color = "#000000";
@ -14,7 +19,7 @@ function init (){
let formData = new FormData(form); let formData = new FormData(form);
try { try {
status.innerText = "Authenticating..."; status.innerText = "Authenticating...";
let ticket = await requestTicket(formData.get("username"), formData.get("password")); 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 = "#00ff00";

View File

@ -81,9 +81,8 @@ export function getCookie(cname) {
return ""; return "";
} }
export async function requestTicket (username, password) { export async function requestTicket (username, password, realm) {
let response = await requestPVE("/access/ticket", "POST", {username: `${username}@ldap`, password: password}, false); let response = await requestPVE("/access/ticket", "POST", {username: `${username}@${realm}`, password: password}, false);
return response; return response;
} }
@ -144,6 +143,10 @@ async function request (url, content) {
throw new NetworkError(error); throw new NetworkError(error);
}); });
if(!response.ok){
throw new ResponseError(response);
}
let data = await response.json(); let data = await response.json();
data.status = response.status; data.status = response.status;
return data; return data;