393 lines
12 KiB
JavaScript
393 lines
12 KiB
JavaScript
import {app} from "../../../scripts/app.js";
|
|
import {api} from "../../../scripts/api.js";
|
|
import {setupButtons, setupModal, setupDropdown} from './ui_helpers.js';
|
|
|
|
|
|
let loggedInEvent = null;
|
|
let loggedOutEvent = new Event('loggedOutEvent');
|
|
export let selectedGraph = null;
|
|
|
|
//const graphCreateNewEvent = new Event('graphCreateNew');
|
|
// create a place to store some variables, including security_token
|
|
|
|
class GDELogin {
|
|
constructor(api) {
|
|
this.api = api;
|
|
this.security_token = null;
|
|
this.initElements();
|
|
}
|
|
|
|
initElements() {
|
|
this.login_div = this.createElement("div", {id: "gde-login"});
|
|
this.usernameField = this.createInputField("username-field", "Username");
|
|
this.passwordField = this.createInputField("password-field", "Password", "password");
|
|
this.loginButton = this.createButton("login-button", "Login", this.handleLogin.bind(this));
|
|
this.logoutButton = this.createButton("logout-button", "Logout", this.handleLogout.bind(this));
|
|
}
|
|
|
|
createInputField(id, placeholder, type = "text") {
|
|
return this.createElement("input", {
|
|
id: id,
|
|
placeholder: placeholder,
|
|
type: type,
|
|
});
|
|
}
|
|
|
|
createButton(id, text, clickHandler) {
|
|
const button = this.createElement("button", {
|
|
id: id,
|
|
innerText: text,
|
|
});
|
|
button.addEventListener("click", clickHandler);
|
|
return button;
|
|
}
|
|
|
|
createElement(tag, attributes) {
|
|
const element = document.createElement(tag);
|
|
for (let attr in attributes) {
|
|
element[attr] = attributes[attr];
|
|
}
|
|
return element;
|
|
}
|
|
|
|
async handleLogin() {
|
|
const username = this.usernameField.value;
|
|
const password = this.passwordField.value;
|
|
|
|
gdeState.user = username;
|
|
|
|
const res = await this.api.fetchApi("/gde/login", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password,
|
|
client_id: this.api.clientId,
|
|
}),
|
|
});
|
|
|
|
if (res.status !== 200) {
|
|
//if res.logged_in is false then the login failed but only need to alert if this.api.clientId is set
|
|
if (res.logged_in === false && this.api.clientId) {
|
|
alert("Login failed. Please check your username and password and try again.");
|
|
}
|
|
if (res.logged_in === true) {
|
|
this.username = res.user;
|
|
gdeState.user = username;
|
|
}
|
|
|
|
} else {
|
|
const security_json = await res.json();
|
|
this.security_token = security_json.security;
|
|
this.switchToLogoutView();
|
|
|
|
if (username) {
|
|
const event = new CustomEvent('loggedInEvent',
|
|
{detail: {'user': username}});
|
|
//loggedInEvent.target = {value:json.user};
|
|
document.dispatchEvent(event);
|
|
} else { // client was refreshed user was lost but client_id was not
|
|
this.usernameField.value = security_json.user;
|
|
loggedInEvent.target.value = security_json.user;
|
|
document.dispatchEvent(loggedInEvent);
|
|
|
|
}
|
|
const welcomeMessage = this.createElement("div", {
|
|
id: "welcome-message",
|
|
innerText: `Welcome ${this.usernameField.value}`
|
|
});
|
|
this.login_div.append(welcomeMessage);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
async handleLogout() {
|
|
await this.api.fetchApi("/gde/logout", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
client_id: this.api.clientId,
|
|
}),
|
|
});
|
|
document.dispatchEvent(loggedOutEvent);
|
|
this.clearDropdowns();
|
|
this.switchToLoginView();
|
|
|
|
const welcomeMessage = document.getElementById("welcome-message");
|
|
if (welcomeMessage) welcomeMessage.remove();
|
|
|
|
}
|
|
|
|
switchToLogoutView() {
|
|
this.usernameField.remove();
|
|
this.passwordField.remove();
|
|
this.loginButton.remove();
|
|
this.login_div.append(this.logoutButton);
|
|
}
|
|
|
|
switchToLoginView() {
|
|
this.logoutButton.remove();
|
|
this.login_div.append(this.usernameField, this.passwordField, this.loginButton);
|
|
}
|
|
|
|
clearDropdowns() {
|
|
this.clearDropdown("graph-name-field");
|
|
//this.clearDropdown("branch-name-field");
|
|
}
|
|
|
|
clearDropdown(id) {
|
|
const dropdown = document.getElementById(id);
|
|
if (dropdown) {
|
|
while (dropdown.options.length > 2) {
|
|
dropdown.remove(2);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
async getServerState(client_id) {
|
|
// check with the server to see if we have a valid client_id
|
|
const response = await api.fetchApi("/gde/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
client_id: client_id,
|
|
}),
|
|
});
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
}
|
|
|
|
async setupLoginForm() {
|
|
const menu = document.querySelector(".comfy-menu");
|
|
// create a div in the menu for this extension
|
|
|
|
//need to check with server for the status of our current api.clientId
|
|
const cid = api.clientId || api.socket.url.split("=")[1];
|
|
const server_state = await this.getServerState(cid).then((server_state) => {
|
|
const logged_in = server_state.logged_in;
|
|
gdeState.user = server_state.user;
|
|
|
|
const separator = document.createElement("hr");
|
|
separator.style.margin = "20px 0";
|
|
separator.style.width = "100%";
|
|
menu.append(separator);
|
|
menu.append(this.login_div);
|
|
|
|
if (logged_in) {
|
|
this.login_div.append(this.logoutButton);
|
|
|
|
} else {
|
|
this.login_div.append(this.usernameField);
|
|
this.login_div.append(this.passwordField);
|
|
this.login_div.append(this.loginButton);
|
|
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
const gdeLogin = new GDELogin(api);
|
|
let gdeState = {
|
|
// this is for holding the state of the ui like what is selected etc
|
|
graph: null,
|
|
branch: null,
|
|
user: null,
|
|
}
|
|
|
|
// create a dummy function
|
|
// gde.setup_login_form = async () => {
|
|
// const menu = document.querySelector(".comfy-menu");
|
|
// // create a div in the menu for this extension
|
|
//
|
|
//
|
|
// //need to check with server for the status of our current api.clientId
|
|
// const cid = api.clientId || api.socket.url.split("=")[1];
|
|
// const server_state = await gde.get_server_state(cid).then((server_state) => {
|
|
// const logged_in = server_state.logged_in;
|
|
//
|
|
// const separator = document.createElement("hr");
|
|
// separator.style.margin = "20px 0";
|
|
// separator.style.width = "100%";
|
|
// menu.append(separator);
|
|
// menu.append(gde.login_div);
|
|
//
|
|
// if (logged_in) {
|
|
// gde.login_div.append(gde.logoutButton);
|
|
//
|
|
// } else {
|
|
// gde.login_div.append(gde.usernameField);
|
|
// gde.login_div.append(gde.passwordField);
|
|
// gde.login_div.append(gde.loginButton);
|
|
//
|
|
// }
|
|
// });
|
|
//
|
|
// }
|
|
// gde.hijack_queueprompt = async () => {
|
|
// // is this actually needed?
|
|
// }
|
|
app.registerExtension({
|
|
name: "GDE.UI.RemoveDefaultButtons",
|
|
async setup(app) {
|
|
document.getElementById("comfy-load-default-button").remove();
|
|
document.getElementById("comfy-clipspace-button").remove();
|
|
},
|
|
});
|
|
|
|
app.registerExtension({
|
|
name: "GDE.UI.Login",
|
|
async setup() {
|
|
setTimeout(async () => {
|
|
await gdeLogin.setupLoginForm();
|
|
//await gde.hijack_queueprompt();
|
|
}, 10);
|
|
}
|
|
|
|
|
|
});
|
|
|
|
function SetupGraphDropDown(graphDropdown,
|
|
event,
|
|
menu,
|
|
handleGraphCreateNew,
|
|
handleGraphSelect) {
|
|
// event may come in as null, so we need to populate it with default values
|
|
if (!event) {
|
|
event = {
|
|
detail: {
|
|
user: "main",
|
|
graph: "default.json",
|
|
branch: "main"
|
|
},
|
|
target: {
|
|
value: "main"
|
|
}
|
|
}
|
|
gdeState.user = "main"
|
|
}
|
|
// graphDropdown.clearDropDown();
|
|
graphDropdown.clearDropDown("Select Graph");
|
|
const selectedGraph = null
|
|
graphDropdown = setupDropdown(menu, api,
|
|
"Select Graph",
|
|
"/gde/git/user_graphs",
|
|
"graph-name-field",
|
|
gdeState.user,
|
|
handleGraphCreateNew,
|
|
handleGraphSelect);
|
|
// modify graphDropdown to change gdeState.graph when it is changed
|
|
graphDropdown.addEventListener("change", (event) => {
|
|
const selectedGraph = event.target.value;
|
|
if (selectedGraph && selectedGraph !== gdeState.graph) {
|
|
gdeState.graph = selectedGraph;
|
|
const graphChangeEvent = new CustomEvent('graphChangeEvent', {
|
|
detail: {
|
|
graph: selectedGraph
|
|
}
|
|
});
|
|
document.dispatchEvent(graphChangeEvent);
|
|
}
|
|
});
|
|
return graphDropdown;
|
|
}
|
|
|
|
app.registerExtension({
|
|
name: "GDE.UI.Git",
|
|
async setup() {
|
|
setupModal();
|
|
setupButtons(gdeState, app, api);
|
|
|
|
|
|
const separator = document.createElement("hr");
|
|
const menu = document.querySelector(".comfy-menu");
|
|
separator.style.margin = "20px 0";
|
|
separator.style.width = "100%";
|
|
menu.append(separator);
|
|
|
|
|
|
// const handleBranchCreateNew = (event, dropdown) => {
|
|
// // Custom logic for when "Create New" is selected in the branch dropdown
|
|
// showModal('branch-name-field'); // Show the modal for creating a new branch
|
|
// dropdown.value = ""; // Reset the dropdown value
|
|
// // Clear the file dropdown
|
|
// const fileDropdown = document.getElementById("graph-name-field");
|
|
//
|
|
//
|
|
// };
|
|
|
|
document.addEventListener('loggedInEvent', async (event) => {
|
|
gdeState.user = event.detail.user;
|
|
//gdeState.graph = event.detail.graph;
|
|
graphDropdown = SetupGraphDropDown(
|
|
graphDropdown,
|
|
event,
|
|
menu,
|
|
handleGraphCreateNew,
|
|
handleGraphSelect);
|
|
|
|
});
|
|
|
|
// no lets call clear dropdown when there is a loggout
|
|
document.addEventListener('loggedOutEvent', async (event) => {
|
|
graphDropdown.clearDropDown();
|
|
}
|
|
);
|
|
|
|
const handleGraphCreateNew = (event, dropdown) => {
|
|
// Custom logic for when "Create New" is selected in the branch dropdown
|
|
|
|
showModal('graph-name-field')
|
|
dropdown.disabled = true;
|
|
|
|
const modal = document.getElementById("graph-name-modal");
|
|
// hijack its onsubmit function
|
|
const prev_submit = modal.submit;
|
|
//submitButton.onclick
|
|
modal.submit = () => {
|
|
let graphName = prev_submit();
|
|
gdeState.graph = graphName;
|
|
dropdown.disabled = false;
|
|
|
|
}
|
|
};
|
|
const handleGraphSelect = (event, dropdown) => {
|
|
// change gdeState.graph when it is changed
|
|
const selectedGraph = event.target.value;
|
|
gdeState.graph = selectedGraph;
|
|
|
|
};
|
|
|
|
|
|
//setupDropdown(menu, api, "Select Branch", "/gde/git/users", "branch-name-field", null, null, handleBranchCreateNew);
|
|
//const branchDropdown = document.getElementById("branch-name-field");
|
|
|
|
// branchDropdown.addEventListener("change", (event) => {
|
|
// const selectedBranch = event.target.value;
|
|
// if (selectedBranch && selectedBranch !== "Create New") {
|
|
// // Repopulate the file/graph dropdown based on the selected branch
|
|
// setupDropdown(menu, api, "Select Graph", "/gde/git/user_graphs", "graph-name-field", selectedBranch, null, handleGraphCreateNew);
|
|
// }
|
|
//
|
|
// });
|
|
|
|
|
|
let tmp = setupDropdown(menu,
|
|
api,
|
|
"Select Graph",
|
|
"/gde/git/user_graphs",
|
|
"graph-name-field",
|
|
gdeState.user,
|
|
handleGraphCreateNew,
|
|
handleGraphSelect);
|
|
let graphDropdown = SetupGraphDropDown(tmp,
|
|
null,
|
|
menu,
|
|
handleGraphCreateNew,
|
|
handleGraphSelect);
|
|
|
|
}
|
|
});
|