diff --git a/frontend/src/pages/org/settings/components/privacy.ts b/frontend/src/pages/org/settings/components/privacy.ts
index 7b17dc96f..c180a117e 100644
--- a/frontend/src/pages/org/settings/components/privacy.ts
+++ b/frontend/src/pages/org/settings/components/privacy.ts
@@ -1,5 +1,5 @@
import { localized, msg } from "@lit/localize";
-import type { SlChangeEvent, SlSwitch } from "@shoelace-style/shoelace";
+import type { SlChangeEvent, SlRadioGroup } from "@shoelace-style/shoelace";
import { html, type PropertyValues } from "lit";
import { customElement, state } from "lit/decorators.js";
@@ -28,18 +28,23 @@ export class OrgSettingsPrivacy extends BtrixElement {
const cols: Cols = [
[
html`
- {
- this.listPublicCollections = (e.target as SlSwitch).checked;
+ this.listPublicCollections =
+ (e.target as SlRadioGroup).value === "public";
await this.updateComplete;
void this.save();
}}
- >${msg("Enable Public Collections Link")}
+ ${msg("Public")}
+ ${msg("Private")}
+
`,
msg(
- "Create a link that anyone can visit to view all public collections in the org.",
+ "If public, anyone with the link to your org's Browsertrix URL will be able to view the org profile and public collections.",
),
],
];
@@ -49,28 +54,25 @@ export class OrgSettingsPrivacy extends BtrixElement {
html`
`,
- msg(
- "Anyone on the internet with this link will be able to view your org's public collections. The link can be accessed even if your org doesn't have public collections.",
- ),
+ html`
+ ${msg(
+ "To customize the URL to this page, update your Org URL in profile settings.",
+ )}
+
+ ${msg("Preview Public Profile")}
+
+ `,
]);
}
diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts
index 561c1604d..da6544bb5 100644
--- a/frontend/src/pages/org/settings/settings.ts
+++ b/frontend/src/pages/org/settings/settings.ts
@@ -131,6 +131,7 @@ export class OrgSettings extends BtrixElement {
${choose(
this.activePanel,
[
+ ["information", () => html`${msg("Profile")}
`],
[
"members",
() => html`
@@ -183,6 +184,7 @@ export class OrgSettings extends BtrixElement {
${this.renderInformation()}
+ ${this.renderApi()}
${this.renderMembers()}
@@ -228,7 +230,7 @@ export class OrgSettings extends BtrixElement {
private renderInformation() {
if (!this.userOrg) return;
- return html``;
+ `;
+ }
+
+ private renderApi() {
+ if (!this.userOrg) return;
+
+ return html`
+ ${msg("Developer Tools")}
+
+
+
+
+ ${columns([
+ [
+ html`
+
+ `,
+ msg("Use this ID to reference this org in the Browsertrix API."),
+ ],
+ ])}
+
+ `;
}
private handleSlugInput(e: InputEvent) {
diff --git a/frontend/src/theme.stylesheet.css b/frontend/src/theme.stylesheet.css
index 1a6ce329e..a57e0f64a 100644
--- a/frontend/src/theme.stylesheet.css
+++ b/frontend/src/theme.stylesheet.css
@@ -147,6 +147,10 @@
background-color: theme(colors.primary.500);
}
+ sl-radio-button[checked]::part(button) {
+ background-color: theme(colors.primary.500);
+ }
+
/* Elevate select and buttons */
sl-select::part(combobox),
sl-button:not([variant="text"])::part(base) {
@@ -212,8 +216,8 @@
}
/* Have button group take up whole width */
- sl-radio-group::part(button-group),
- sl-radio-group sl-radio-button {
+ sl-radio-group:not([size="small"])::part(button-group),
+ sl-radio-group:not([size="small"]) sl-radio-button {
width: 100%;
min-width: min-content;
}