${window.lang.strings("profile")}
-${window.lang.strings("notifyEvent")}
- - +${window.lang.strings("notifyEvent")}
+ + +${window.lang.strings("inviteDateCreated")}
-${window.lang.strings("inviteRemainingUses")}
--
+
${window.lang.strings("inviteDateCreated")}
+${window.lang.strings("inviteRemainingUses")}
++
+ `; this._right = document.createElement('div') as HTMLDivElement; detailsInner.appendChild(this._right); this._right.classList.add("card", "~neutral", "@low", "inv-created-users", "min-w-full", "sm:min-w-fit", "whitespace-nowrap"); - this._right.innerHTML = `${window.lang.strings("inviteUsersCreated")}`; + this._right.innerHTML = `${window.lang.strings("inviteUsersCreated")}`; this._userTable = document.createElement('div') as HTMLDivElement; this._userTable.classList.add("text-sm", "mt-1", ); this._right.appendChild(this._userTable); @@ -506,6 +500,10 @@ class DOMInvite implements Invite { this.user_label = invite.user_label; } this.userExpiryTime = invite.userExpiryTime || ""; + this._sendToDialog = new SendToDialog(this._middle.getElementsByClassName("invite-send-to-dialog")[0] as HTMLElement, invite, () => { + const needsUpdatingEvent = new CustomEvent("inviteNeedsUpdating", { detail: this.code }); + document.dispatchEvent(needsUpdatingEvent); + }); } asElement = (): HTMLDivElement => { return this._container; } @@ -549,6 +547,9 @@ export class DOMInviteList implements InviteList { this._list = document.getElementById('invites') as HTMLDivElement; this.empty = true; this.invites = {}; + // FIXME: Do this better, take advantage of getting the code in e.detail + document.addEventListener("inviteNeedsUpdating", () => { this.reload(); }, false); + document.addEventListener("newInviteEvent", () => { this.reload(); }, false); document.addEventListener("inviteDeletedEvent", (event: CustomEvent) => { const code = event.detail; @@ -667,9 +668,7 @@ function parseInvite(invite: { [f: string]: string | number | { [name: string]: } export class createInvite { - private _sendToEnabled = document.getElementById("create-send-to-enabled") as HTMLInputElement; - private _sendTo = document.getElementById("create-send-to") as HTMLInputElement; - private _discordSearch: HTMLSpanElement; + private _sendTo: SendToDialog; private _userExpiryToggle = document.getElementById("create-user-expiry-enabled") as HTMLInputElement; private _uses = document.getElementById('create-uses') as HTMLInputElement; private _infUses = document.getElementById("create-inf-uses") as HTMLInputElement; @@ -723,31 +722,6 @@ export class createInvite { get user_label(): string { return this._userLabel.value; } set user_label(label: string) { this._userLabel.value = label; } - get sendToEnabled(): boolean { - return this._sendToEnabled.checked; - } - set sendToEnabled(state: boolean) { - this._sendToEnabled.checked = state; - this._sendTo.disabled = !state; - if (state) { - this._sendToEnabled.parentElement.classList.remove("~neutral"); - this._sendToEnabled.parentElement.classList.add("~urge"); - if (window.discordEnabled) { - this._discordSearch.classList.remove("~neutral"); - this._discordSearch.classList.add("~urge"); - this._discordSearch.onclick = () => this._sendToDiscord(""); - } - } else { - this._sendToEnabled.parentElement.classList.remove("~urge"); - this._sendToEnabled.parentElement.classList.add("~neutral"); - if (window.discordEnabled) { - this._discordSearch.classList.remove("~urge"); - this._discordSearch.classList.add("~neutral"); - this._discordSearch.onclick = null; - } - } - } - get infiniteUses(): boolean { return this._infUses.checked; } @@ -849,8 +823,13 @@ export class createInvite { this._userMinutes.value = ""+n; } - get sendTo(): string { return this._sendTo.value; } - set sendTo(address: string) { this._sendTo.value = address; } + get sendTo(): string { + if (!(this._sendTo)) return ""; + if (this._sendTo.addresses.length > 1) console.error("FIXME: SendToDialog has collected more than one address, make them usable or fix it!"); + if (this._sendTo.addresses.length > 0) return this._sendTo.addresses[0]; + else return ""; + } + set sendTo(address: string) { if (!(this._sendTo)) return; this._sendTo.addresses = [address]; } get profile(): string { const val = this._profile.value; @@ -898,7 +877,7 @@ export class createInvite { "multiple-uses": (this.uses > 1 || this.infiniteUses), "no-limit": this.infiniteUses, "remaining-uses": this.uses, - "send-to": this.sendToEnabled ? this.sendTo : "", + "send-to": this.sendTo, "profile": this.profile, "label": this.label, "user_label": this.user_label @@ -921,7 +900,6 @@ export class createInvite { this.minutes = 30; this._infUses.onchange = () => { this.infiniteUses = this.infiniteUses; }; this.infiniteUses = false; - this._sendToEnabled.onchange = () => { this.sendToEnabled = this.sendToEnabled; }; this.userExpiry = false; this._userExpiryToggle.onchange = () => { this.userExpiry = this._userExpiryToggle.checked; } this._userMonths.disabled = true; @@ -964,22 +942,99 @@ export class createInvite { this._minutes.onchange = this._checkDurationValidity; document.addEventListener("profileLoadEvent", () => { this.loadProfiles(); }, false); - if (!window.emailEnabled && !window.discordEnabled) { - document.getElementById("create-send-to-container").classList.add("unfocused"); + const sendToContainer = document.getElementById("create-send-to-container"); + if (window.emailEnabled || window.discordEnabled) { + this._sendTo = new SendToDialog(sendToContainer); + } else { + sendToContainer.classList.add("unfocused"); } + } +} +class SendToDialog { + private _container: HTMLElement; + private _input: HTMLInputElement; + private _submit?: HTMLButtonElement; + // FIXME: Make an interface for multiple addresses + // private _addresses: string[] = []; + get addresses(): string[] { + if (this._input.value) return [this._input.value]; + return []; + } + set addresses(v: string[]) { + if (v.length > 0) this._input.value = v[0]; + // this._addresses = v; + }; + + private _search?: HTMLButtonElement; + private _discordSearch?: DiscordSearch; + + + constructor(container: HTMLElement, invite?: Invite, onSuccess?: () => void) { + this._container = container; + this._container.classList.add("flex", "flex-col", "gap-2"); + this._container.innerHTML = ` + +