analytics/lib/plausible_web/templates/site/settings_visibility.html.heex

<.settings_tiles>
  <.tile docs="visibility">
    <:title>
      Public dashboard
    </:title>
    <:subtitle>
      Share your stats publicly or keep them private.
    </:subtitle>

    <.form
      action={
        (@site.public && Routes.site_path(@conn, :make_private, @site.domain)) ||
          Routes.site_path(@conn, :make_public, @site.domain)
      }
      method="post"
      for={nil}
    >
      <.toggle_submit set_to={@site.public}>
        Make stats publicly available on
        <.unstyled_link
          class="text-indigo-500"
          href={Routes.stats_path(@conn, :stats, @site.domain, [])}
        >
          {PlausibleWeb.StatsView.pretty_stats_url(@site)}
        </.unstyled_link>
      </.toggle_submit>
    </.form>
  </.tile>

  <.tile
    docs="shared-links"
    feature_mod={Plausible.Billing.Feature.SharedLinks}
    site={@site}
    current_role={@site_role}
    current_team={@site_team}
    conn={@conn}
  >
    <:title>
      Shared links
    </:title>
    <:subtitle>
      You can share your stats privately by generating a shared link. The links are impossible to guess and you can add password protection for extra security.
    </:subtitle>

    <.filter_bar filtering_enabled?={false}>
      <.button_link href={Routes.site_path(@conn, :new_shared_link, @site.domain)} mt?={false}>
        Add Shared Link
      </.button_link>
    </.filter_bar>

    <p :if={Enum.empty?(@shared_links)} class="mb-8 text-center text-sm">
      No Shared Links configured for this site.
    </p>

    <.table rows={@shared_links} id="shared-links-table">
      <:thead>
        <.th hide_on_mobile>Name</.th>
        <.th>Link</.th>
        <.th invisible>Actions</.th>
      </:thead>
      <:tbody :let={link}>
        <.td truncate hide_on_mobile>
          {link.name}
          <Heroicons.lock_closed :if={link.password_hash} class="w-6 h-6 feather ml-2" />
          <Heroicons.lock_open :if={!link.password_hash} class="w-6 h-6 feather ml-2" />
        </.td>
        <.td>
          <.input_with_clipboard
            name={link.slug}
            id={link.slug}
            value={shared_link_dest(@site, link)}
          />
        </.td>
        <.td actions>
          <.edit_button
            class="mt-2"
            href={Routes.site_path(@conn, :edit_shared_link, @site.domain, link.slug)}
          />
          <.delete_button
            class="mt-2"
            method="delete"
            href={Routes.site_path(@conn, :delete_shared_link, @site.domain, link.slug)}
            data-confirm="Are you sure you want to delete this shared link? The stats will not be accessible with this link anymore."
          />
        </.td>
      </:tbody>
    </.table>
  </.tile>

  <.tile
    docs="embed-dashboard"
    feature_mod={Plausible.Billing.Feature.SharedLinks}
    site={@site}
    current_role={@site_role}
    current_team={@site_team}
    conn={@conn}
  >
    <:title>
      Embed dashboard
    </:title>
    <:subtitle>
      You can use shared links to embed your stats in any other webpage using an <code>iframe</code>. Copy & paste a shared link into the form below to generate the embed code.
    </:subtitle>

    <.input
      name="embed-link"
      id="embed-link"
      label="Enter shared link (only public shared links without password can be embedded)"
      value=""
      width="w-1/2"
      mt?={false}
    />

    <.input
      type="select"
      name="theme"
      id="theme"
      label="Select theme"
      options={["Light", "Dark", "System"]}
      value="Light"
      width="w-1/2"
    />

    <.input
      name="background"
      id="background"
      label="Custom background color (optional). Try using `transparent` background to blend the dashboard with your site."
      value=""
      placeholder="e.g. #F9FAFB"
      width="w-1/2"
    />

    <.input name="base-url" type="hidden" id="base-url" value={plausible_url()} />
    <.button id="generate-embed" mt?={false}>
      Generate embed code
    </.button>

    <.label for="embed-code" class="mt-4">Embed code</.label>

    <div class="relative mt-1">
      <textarea
        id="embed-code"
        name="embed-code"
        rows="6"
        readonly="readonly"
        onclick="this.select()"
        class="block w-full border-gray-300 dark:border-gray-700 resize-none text-sm shadow-xs focus:ring-indigo-500 focus:border-indigo-500 rounded-md dark:bg-gray-900 dark:text-gray-300"
      ></textarea>
      <a
        onclick="var textarea = document.getElementById('embed-code'); textarea.focus(); textarea.select(); document.execCommand('copy');"
        href="javascript:void(0)"
        class="text-sm text-indigo-500 no-underline hover:underline"
      >
        <Heroicons.document_duplicate class="h-5 w-5 absolute text-indigo-700 top-3 right-3" />
      </a>
    </div>
  </.tile>
</.settings_tiles>