36f7b9fe39
Can now edit the connection names when creating a connection and the connection manager can now edit those names! Much better ease of use.
93 lines
2.9 KiB
JavaScript
93 lines
2.9 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");
|
|
|
|
// Clear the inputs
|
|
for (const key in input) {
|
|
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 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);
|
|
})
|
|
}
|
|
}
|
|
}
|