8ab00b20d4
The creation modal was sending data after being wiped, this was fixed and the data does not get cleared from the modal until AFTER the request is sent.
96 lines
3.0 KiB
JavaScript
96 lines
3.0 KiB
JavaScript
/*
|
|
* This file is used to generate the connection URL for the database connection
|
|
* when the user changes inputs in the connection modal.
|
|
*
|
|
* This file is also used to show and hide the connection modal.
|
|
*/
|
|
|
|
// New connection modal
|
|
const modal = document.getElementById("connection-modal");
|
|
|
|
function ShowModal() {
|
|
modal.classList.remove("hidden");
|
|
modal.classList.remove("opacity-0");
|
|
}
|
|
|
|
function HideModal() {
|
|
modal.classList.add("hidden");
|
|
modal.classList.add("opacity-0");
|
|
|
|
for (const key in input) {
|
|
if (key != "driver") {
|
|
input[key].value = "";
|
|
}
|
|
}
|
|
}
|
|
|
|
const input = {
|
|
host: document.getElementById("db-host"),
|
|
port: document.getElementById("db-port"),
|
|
driver: document.getElementById("db-driver"),
|
|
username: document.getElementById("db-username"),
|
|
password: document.getElementById("db-password"),
|
|
database: document.getElementById("db-database"),
|
|
name: document.getElementById("db-conn-name"),
|
|
connectionURL: document.getElementById("db-url")
|
|
}
|
|
|
|
// State for hiding the password in the connection URL
|
|
// let hidden = true;
|
|
// const togglePassword = () => {
|
|
// hidden = !hidden;
|
|
// GenerateURL(input);
|
|
// }
|
|
|
|
function GenerateURL(data) {
|
|
// let password = hidden ? "●".repeat(data.password.value.length) : data.password.value;
|
|
data.connectionURL.value = `${data.driver.value}://${data.username.value || "<username>"}:${data.password.value || "<password>"}@${data.host.value || "<host>"}:${data.port.value || "<port>"}/${data.database.value || "<database>"}?sslmode=disable`;
|
|
}
|
|
|
|
function ParseURL (data) {
|
|
const regex = /^(?<protocol>[a-z]+):\/\/(?<username>[^:]+):(?<password>[^@]+)@(?<host>[^:]+):(?<port>[0-9]+)\/(?<database>[^\?]+)(\?(?<params>.*))?$/;
|
|
const match = data.connectionURL.value.match(regex);
|
|
|
|
if (match) {
|
|
const { protocol, username, password, host, port, database } = match.groups;
|
|
|
|
data.host.value = host;
|
|
data.port.value = port;
|
|
data.password.value = password;
|
|
data.username.value = username;
|
|
data.driver.value = protocol;
|
|
data.database.value = database;
|
|
|
|
data.connectionURL.classList.remove("text-red-500");
|
|
document.getElementById("db-url-invalid").classList.add("hidden");
|
|
|
|
} else {
|
|
data.connectionURL.classList.add("text-red-500");
|
|
document.getElementById("db-url-invalid").classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
// Create the event listeners for the input fields
|
|
for (const key in input) {
|
|
if (key == "connectionURL") {
|
|
input[key].addEventListener("input", () => {
|
|
ParseURL(input);
|
|
})
|
|
} else if (key == "name") {
|
|
continue;
|
|
} else {
|
|
// If the input changed is the database name, update the connection name as well.
|
|
// This will create a default connection name based on the database name.
|
|
if (key == "database") {
|
|
input[key].addEventListener("input", () => {
|
|
GenerateURL(input);
|
|
input.name.value = input[key].value;
|
|
})
|
|
} else {
|
|
input[key].addEventListener("input", () => {
|
|
GenerateURL(input);
|
|
})
|
|
}
|
|
}
|
|
}
|