diff --git a/frontend/src/components/dialog.ts b/frontend/src/components/dialog.ts new file mode 100644 index 00000000..03b4ad1d --- /dev/null +++ b/frontend/src/components/dialog.ts @@ -0,0 +1,38 @@ +import { css } from "lit"; +import SLDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js"; +import dialogStyles from "@shoelace-style/shoelace/dist/components/dialog/dialog.styles.js"; + +/** + * Customized + * + * Usage: see https://shoelace.style/components/dialog + */ +export class Dialog extends SLDialog { + static styles = css` + ${dialogStyles} .dialog__panel { + overflow: hidden; + } + + .dialog__header { + background-color: var(--sl-color-neutral-50); + border-bottom: 1px solid var(--sl-color-neutral-100); + } + + .dialog__title { + padding-top: var(--sl-spacing-small); + padding-bottom: var(--sl-spacing-small); + font-size: var(--sl-font-size-medium); + font-weight: var(--sl-font-weight-medium); + } + + .dialog__close { + --header-spacing: var(--sl-spacing-2x-small); + } + + .dialog__footer { + padding-top: var(--sl-spacing-small); + padding-bottom: var(--sl-spacing-small); + border-top: 1px solid var(--sl-color-neutral-100); + } + `; +} diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 9ceab8d3..9be28e66 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -10,9 +10,6 @@ import("./locale-picker").then(({ LocalePicker }) => { import("./account-settings").then(({ AccountSettings }) => { customElements.define("btrix-account-settings", AccountSettings); }); -import("./org-invite-form").then(({ OrgInviteForm }) => { - customElements.define("btrix-org-invite-form", OrgInviteForm); -}); import("./config-editor").then(({ ConfigEditor }) => { customElements.define("btrix-config-editor", ConfigEditor); }); @@ -101,6 +98,9 @@ import("./tag-input").then(({ TagInput }) => { import("./tag").then(({ Tag }) => { customElements.define("btrix-tag", Tag); }); +import("./dialog").then(({ Dialog }) => { + customElements.define("btrix-dialog", Dialog); +}); customElements.define("btrix-alert", Alert); customElements.define("btrix-input", Input); diff --git a/frontend/src/components/org-invite-form.ts b/frontend/src/components/org-invite-form.ts deleted file mode 100644 index ab2595c6..00000000 --- a/frontend/src/components/org-invite-form.ts +++ /dev/null @@ -1,132 +0,0 @@ -import { state, property } from "lit/decorators.js"; -import { msg, localized, str } from "@lit/localize"; - -import type { AuthState } from "../utils/AuthService"; -import LiteElement, { html } from "../utils/LiteElement"; -import { AccessCode } from "../utils/orgs"; - -@localized() -export class OrgInviteForm extends LiteElement { - @property({ type: String }) - orgId?: string; - - @property({ type: Object }) - authState?: AuthState; - - @state() - private isSubmitting: boolean = false; - - @state() - private serverError?: string; - - render() { - let formError; - - if (this.serverError) { - formError = html` -
- ${this.serverError} -
- `; - } - - return html` -
-
- - -
-
- - - ${msg("Admin")} - ${msg("Can manage crawls and invite others")} - - - ${msg("Crawler")} - ${msg("Can manage crawls")} - - - ${msg("Viewer")} - ${msg("Can view crawls")} - - -
- - ${formError} - -
- ${msg("Invite")} - this.dispatchEvent(new CustomEvent("cancel"))} - >${msg("Cancel")} -
-
- `; - } - - async onSubmit(event: SubmitEvent) { - event.preventDefault(); - if (!this.authState) return; - - this.isSubmitting = true; - - const formData = new FormData(event.target as HTMLFormElement); - const inviteEmail = formData.get("inviteEmail") as string; - - try { - const data = await this.apiFetch( - `/orgs/${this.orgId}/invite`, - this.authState, - { - method: "POST", - body: JSON.stringify({ - email: inviteEmail, - role: Number(formData.get("role")), - }), - } - ); - - this.dispatchEvent( - new CustomEvent("success", { - detail: { - inviteEmail, - isExistingUser: data.invited === "existing_user", - }, - }) - ); - } catch (e: any) { - if (e?.isApiError) { - this.serverError = e?.message; - } else { - this.serverError = msg("Something unexpected went wrong"); - } - } - - this.isSubmitting = false; - } -} diff --git a/frontend/src/components/tab-list.ts b/frontend/src/components/tab-list.ts index 0ba01d28..e6574cd3 100644 --- a/frontend/src/components/tab-list.ts +++ b/frontend/src/components/tab-list.ts @@ -168,15 +168,19 @@ export class TabList extends LitElement { top: var(--sl-spacing-medium); } - ul { + .tablist { display: flex; - margin: 0 0 0 var(--track-width); + margin: 0; list-style: none; padding: 0; } + .show-indicator .tablist { + margin-left: var(--track-width); + } + @media only screen and (min-width: ${SCREEN_LG}px) { - ul { + .tablist { display: block; } } @@ -201,9 +205,9 @@ export class TabList extends LitElement { } @media only screen and (min-width: ${SCREEN_LG}px) { - ul, - .track, - .indicator { + .tablist, + .show-indicator .track, + .show-indicator .indicator { display: block; } } @@ -217,6 +221,9 @@ export class TabList extends LitElement { @property({ type: String }) progressPanel?: string; + @property({ type: Boolean }) + hideIndicator = false; + @queryAsync(".track") private trackElem!: HTMLElement; @@ -233,7 +240,7 @@ export class TabList extends LitElement { } private async repositionIndicator(activeTab?: TabElement, animate = true) { - if (!activeTab) return; + if (!activeTab || this.hideIndicator) return; const trackElem = await this.trackElem; const indicatorElem = await this.indicatorElem; @@ -274,12 +281,17 @@ export class TabList extends LitElement { @sl-resize=${() => this.repositionIndicator(this.getTab(this.progressPanel))} > -
+
-
    +
diff --git a/frontend/src/index.ts b/frontend/src/index.ts index ca9ddb80..298ed5b9 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -572,6 +572,9 @@ export class App extends LiteElement { .viewStateData=${this.viewState.data} .params=${this.viewState.params} orgId=${this.viewState.params.orgId} + orgPath=${this.viewState.pathname.split( + this.viewState.params.orgId + )[1]} orgTab=${this.viewState.params.orgTab as OrgTab} >`; diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index c8b7fc6d..2b6125c2 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -46,6 +46,10 @@ export class Org extends LiteElement { @property({ type: Object }) viewStateData?: ViewState["data"]; + // Path after `/orgs/:orgId/` + @property({ type: String }) + orgPath!: string; + @property({ type: Object }) params!: Params; @@ -259,6 +263,10 @@ export class Org extends LiteElement { } private renderOrgSettings() { + // const activePanel = this. + const activePanel = this.orgPath.includes("/members") + ? "members" + : "information"; const isAddingMember = this.params.hasOwnProperty("invite"); return html``; } diff --git a/frontend/src/pages/org/settings.ts b/frontend/src/pages/org/settings.ts index 2848ef3e..72fb3144 100644 --- a/frontend/src/pages/org/settings.ts +++ b/frontend/src/pages/org/settings.ts @@ -3,7 +3,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { msg, localized, str } from "@lit/localize"; import { when } from "lit/directives/when.js"; import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js"; -import type { SlButton } from "@shoelace-style/shoelace"; import type { AuthState } from "../../utils/AuthService"; import LiteElement, { html } from "../../utils/LiteElement"; @@ -11,6 +10,8 @@ import { isOwner, AccessCode } from "../../utils/orgs"; import type { OrgData } from "../../utils/orgs"; import type { CurrentUser } from "../../types/user"; +type Tab = "information" | "members"; + /** * Usage: * ```ts @@ -37,131 +38,142 @@ export class OrgSettings extends LiteElement { @property({ type: Object }) org!: OrgData; + @property({ type: String }) + activePanel: Tab = "information"; + @property({ type: Boolean }) isAddingMember = false; @state() - private successfullyInvitedEmail?: string; - - @state() - private isEditingOrgName = false; + private isAddMemberFormVisible = false; @state() private isSavingOrgName = false; + @state() + private isSubmittingInvite = false; + + private get tabLabels() { + return { + information: msg("Org Information"), + members: msg("Members"), + }; + } + async willUpdate(changedProperties: Map) { if (changedProperties.has("isAddingMember") && this.isAddingMember) { - this.successfullyInvitedEmail = undefined; + this.isAddMemberFormVisible = true; } } render() { - if (this.isAddingMember) { - return this.renderAddMember(); - } + return html`
+

${msg("Org Settings")}

+
- return html`${msg("Org Information")} -
${this.renderOrgName()}
- ${msg("Org Members")} -
${this.renderMembers()}
`; - } - - private renderOrgName() { - return html`
(this.isEditingOrgName = false)} - > -
-
- -
-
+ +
+

${this.tabLabels[this.activePanel]}

${when( - this.isEditingOrgName, + this.activePanel === "members", () => html` - ${msg("Cancel")} ${msg("Save Changes")} - `, - () => html` - { - this.isEditingOrgName = true; - (e.target as SlButton) - .closest("form") - ?.querySelector("sl-input") - ?.focus(); - }} - >${msg("Edit")}${msg("Invite New Member")} ` )} +
+ ${this.renderTab("information", "settings")} + ${this.renderTab("members", "settings/members")} + + ${this.renderInformation()} + ${this.renderMembers()} + `; + } + + private renderTab(name: Tab, path: string) { + const isActive = name === this.activePanel; + return html` + + ${this.tabLabels[name]} + + `; + } + + private renderInformation() { + return html`
+ +
+
+ +
+
+ ${msg("Save Changes")} +
-
- `; + +
`; } private renderMembers() { - let successMessage; - - if (this.successfullyInvitedEmail) { - successMessage = html` -
- ${msg( - str`Successfully invited ${this.successfullyInvitedEmail}` - )} -
- `; - } - return html`${successMessage} - -
- ${msg("Add Member")} -
- -
-
+ return html` +
+
-
+
${msg("Name")}
-
+
${msg("Role", { desc: "Organization member's role" })}
${Object.entries(this.org.users!).map( - ([id, { name, role }]) => html` -
-
- ${name || - html`${msg("Member")}`} -
-
- ${isOwner(role) + ([id, user]) => html` +
+
${user.name}
+
+ ${isOwner(user.role) ? msg("Admin") - : role === AccessCode.crawler + : user.role === AccessCode.crawler ? msg("Crawler") : msg("Viewer")}
@@ -169,43 +181,99 @@ export class OrgSettings extends LiteElement { ` )}
-
`; - } - - private renderAddMember() { - return html` -
- - - ${msg("Back to Settings")} -
-
-

${msg("Add New Member")}

- this.navTo(`/orgs/${this.orgId}/settings/members`)} - .authState=${this.authState} - .orgId=${this.orgId} - > + (this.isAddMemberFormVisible = true)} + @sl-after-hide=${() => (this.isAddMemberFormVisible = false)} + > + ${this.isAddMemberFormVisible ? this.renderInviteForm() : ""} + + `; + } + + private renderUserRole(user: { name: string; role: typeof AccessCode }) { + return html` + ${"Admin"} + ${"Crawler"} + ${"Viewer"} + `; + } + + private hideInviteDialog() { + this.navTo(`/orgs/${this.orgId}/settings/members`); + } + + private renderInviteForm() { + return html` +
+
+ + +
+
+ + + ${msg("Admin — Can create crawls and manage org members")} + + + ${msg("Crawler — Can create crawls")} + + + ${msg("Viewer — Can view crawls")} + + +
+
+
+ ${msg("Cancel")} + ${msg("Invite")}
`; } + async checkFormValidity(formEl: HTMLFormElement) { + await this.updateComplete; + return !formEl.querySelector("[data-invalid]"); + } + private async onOrgNameSubmit(e: SubmitEvent) { e.preventDefault(); - if (!this.org) return; - const { orgName } = serialize(e.target as HTMLFormElement); + + const formEl = e.target as HTMLFormElement; + if (!(await this.checkFormValidity(formEl))) return; + + const { orgName } = serialize(formEl); this.isSavingOrgName = true; @@ -222,19 +290,14 @@ export class OrgSettings extends LiteElement { duration: 8000, }); - this.org = { - ...this.org, - name: orgName as string, - }; - - this.isEditingOrgName = false; this.dispatchEvent( new CustomEvent("update-user-info", { bubbles: true }) ); - } catch (e) { - console.debug(e); + } catch (e: any) { this.notify({ - message: msg("Sorry, couldn't update organization name at this time."), + message: e.isApiError + ? e.message + : msg("Sorry, couldn't update organization name at this time."), variant: "danger", icon: "exclamation-octagon", }); @@ -243,12 +306,48 @@ export class OrgSettings extends LiteElement { this.isSavingOrgName = false; } - private onInviteSuccess( - event: CustomEvent<{ inviteEmail: string; isExistingUser: boolean }> - ) { - this.successfullyInvitedEmail = event.detail.inviteEmail; + async onOrgInviteSubmit(e: SubmitEvent) { + e.preventDefault(); - this.navTo(`/orgs/${this.orgId}/settings/members`); + const formEl = e.target as HTMLFormElement; + if (!(await this.checkFormValidity(formEl))) return; + + const { inviteEmail, role } = serialize(formEl); + + this.isSubmittingInvite = true; + + try { + const data = await this.apiFetch( + `/orgs/${this.orgId}/invite`, + this.authState!, + { + method: "POST", + body: JSON.stringify({ + email: inviteEmail, + role: Number(role), + }), + } + ); + + this.notify({ + message: msg(str`Successfully invited ${inviteEmail}.`), + variant: "success", + icon: "check2-circle", + duration: 8000, + }); + + this.hideInviteDialog(); + } catch (e: any) { + this.notify({ + message: e.isApiError + ? e.message + : msg("Sorry, couldn't invite user at this time."), + variant: "danger", + icon: "exclamation-octagon", + }); + } + + this.isSubmittingInvite = false; } }