update control

webrecorder · Nov 25, 2024 · c4af545 · c4af545
1 parent 249697f
commit c4af545
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 37 deletions.
diff --git 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`
-          <sl-switch
-            ?checked=${this.org?.listPublicCollections}
+          <sl-radio-group
+            label=${msg("Org Visibility")}
+            value=${this.org?.listPublicCollections ? "public" : "private"}
+            size="small"
             @sl-change=${async (e: SlChangeEvent) => {
-              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")}</sl-switch
           >
+            <sl-radio-button value="public">${msg("Public")}</sl-radio-button>
+            <sl-radio-button value="private">${msg("Private")}</sl-radio-button>
+          </sl-radio-group>
         `,
         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`
           <div class="mb-2">
             <btrix-copy-field
-              label=${msg("Shareable Link")}
+              label=${msg("Public Profile Page")}
               value=${orgHomeUrl}
               .monostyle=${false}
             ></btrix-copy-field>
-            <p class="form-help-text mt-2">
-              ${msg(
-                "To customize this link, update your Org URL under General settings.",
-              )}
-              <a
-                class="inline-flex items-center gap-1 text-blue-500 hover:text-blue-600"
-                href=${`${this.navigate.orgBasePath}/profile-preview`}
-                target="_blank"
-              >
-                ${msg("Preview Link")}
-                <sl-icon slot="suffix" name="arrow-right"></sl-icon
-              ></a>
-            </p>
           </div>
         `,
-        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.",
+          )}
+          <a
+            class="inline-flex items-center gap-1 text-blue-500 hover:text-blue-600"
+            href=${`${this.navigate.orgBasePath}/profile-preview`}
+            target="_blank"
+          >
+            ${msg("Preview Public Profile")}
+            <sl-icon slot="suffix" name="arrow-right"></sl-icon
+          ></a>
+        `,
       ]);
     }
 

diff --git 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`<h3>${msg("Profile")}</h3> `],
               [
                 "members",
                 () => html`
@@ -183,6 +184,7 @@ export class OrgSettings extends BtrixElement {
         <btrix-tab-panel name="information">
           ${this.renderInformation()}
           <btrix-org-settings-privacy></btrix-org-settings-privacy>
+          ${this.renderApi()}
         </btrix-tab-panel>
         <btrix-tab-panel name="members">
           ${this.renderMembers()}
@@ -228,7 +230,7 @@ export class OrgSettings extends BtrixElement {
   private renderInformation() {
     if (!this.userOrg) return;
 
-    return html`<div class="rounded-lg border">
+    return html`<section class="rounded-lg border">
       <form @submit=${this.onOrgInfoSubmit}>
         <div class="p-5">
           ${columns([
@@ -274,16 +276,6 @@ export class OrgSettings extends BtrixElement {
               `,
               msg("Customize your organization's Browsertrix URL."),
             ],
-            [
-              html`
-                <btrix-copy-field
-                  class="mb-2"
-                  label=${msg("Org ID")}
-                  value=${this.orgId}
-                ></btrix-copy-field>
-              `,
-              msg("Use this ID to reference this org in the Browsertrix API."),
-            ],
           ])}
         </div>
         <footer class="flex justify-end border-t px-4 py-3">
@@ -297,7 +289,32 @@ export class OrgSettings extends BtrixElement {
           >
         </footer>
       </form>
-    </div>`;
+    </section>`;
+  }
+
+  private renderApi() {
+    if (!this.userOrg) return;
+
+    return html` <h2 class="mb-2 mt-7 text-lg font-medium">
+        ${msg("Developer Tools")}
+      </h2>
+
+      <section class="rounded-lg border">
+        <div class="p-5">
+          ${columns([
+            [
+              html`
+                <btrix-copy-field
+                  class="mb-2"
+                  label=${msg("Org ID")}
+                  value=${this.orgId}
+                ></btrix-copy-field>
+              `,
+              msg("Use this ID to reference this org in the Browsertrix API."),
+            ],
+          ])}
+        </div>
+      </section>`;
   }
 
   private handleSlugInput(e: InputEvent) {

diff --git 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;
   }