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 {
border: solid white 1px;
width: min-content;
min-width: fit-content;
width: 100%;
}
input:focus {
@ -38,7 +39,8 @@ select {
border: solid white 1px;
background-color: black;
color: white;
width: min-content;
min-width: fit-content;
width: 100%;
}
select:disabled {

View File

@ -11,7 +11,7 @@
</head>
<body>
<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>
<legend>Proxmox VE Login</legend>
<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
@ -19,6 +19,8 @@
<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">

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);
function init (){
async function init (){
deleteAllCookies();
let formSubmitButton = document.querySelector("#submit");
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) => {
status.innerText = "";
status.style.color = "#000000";
@ -14,7 +19,7 @@ function init (){
let formData = new FormData(form);
try {
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"));
status.innerText = "Authentication successful!"
status.style.color = "#00ff00";

View File

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