analytics/lib/plausible_web/templates/site/settings.html.eex

<div class="pt-24"></div>
<div class="max-w-md mx-auto flex justify-between">
  <a href="/<%= URI.encode_www_form(@site.domain) %>"><h1>Settings for <%= @site.domain %></h1></a>
</div>
<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mt-10">
  <div class="flex items-center justify-between">
    <h2>General</h2>
  </div>

  <div class="my-4 border-b border-grey-light"></div>

  <%= form_for @changeset, "/#{URI.encode_www_form(@site.domain)}/settings", [class: "max-w-xs"], fn f -> %>
    <div class="my-4">
      <%= label f, :domain, class: "block text-grey-darker text-sm font-bold mb-2" %>
      <%= text_input f, :domain, class: "transition bg-grey-lighter appearance-none border border-transparent rounded w-full p-2 text-grey-darker leading-normal appearance-none focus:outline-none focus:border-grey-light ", disabled: "disabled" %>
      <%= error_tag f, :domain %>
    </div>
    <div class="my-4">
      <%= label f, :timezone, "Reporting Timezone", class: "block text-grey-darker text-sm font-bold mb-2" %>
      <div class="inline-block relative w-full">
        <%= select f, :timezone, Plausible.Timezones.options(), class: "block appearance-none w-full bg-grey-lighter text-grey-darker cursor-pointer hover:border-grey p-2 pr-8 rounded leading-normal focus:outline-none" %>
        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-red">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>
    <%= submit "Save changes", class: "button mt-4" %>
  <% end %>
</div>

<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mt-10" id="visibility">
  <div class="flex items-center justify-between">
    <h2>Visibility</h2>
  </div>

  <div class="my-4 border-b border-grey-light"></div>
  <%= if @site.public do %>
      Stats for <%= @site.domain %> are currently <b>public</b>. Anyone with the following link can view the stats:
      <div class="relative text-sm mt-4">
        <input type="text" id="public-link" value="https://plausible.io/<%= URI.encode_www_form(@site.domain)  %>" class="transition bg-grey-lighter appearance-none border border-transparent rounded w-full p-2 pr-16 text-grey-darker appearance-none focus:outline-none focus:border-grey-light" />
        <a onclick="var input = document.getElementById('public-link'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="absolute pin-r text-indigo-darker font-bold p-2">
          <svg class="feather-sm"><use xlink:href="#feather-copy" /></svg>
        </a>
      </div>
    <%= button("Make stats private", to: "/sites/#{URI.encode_www_form(@site.domain)}/make-private", method: "POST", class: "button mt-8") %>
  <% else %>
    <div class="text-grey-darker">
      Stats for <%= @site.domain %> are currently <b>private</b>. You are the only person who can see them.
      If you choose to make your stats public, anyone with the link will be able to view them.
    </div>
    <%= button("Make stats public", to: "/sites/#{URI.encode_www_form(@site.domain)}/make-public", method: "POST", class: "button mt-8") %>
  <% end %>

  <div class="mt-16">
    <h2>Shared links</h2>

    <div class="my-4 border-b border-grey-light"></div>

    <div class="my-4">
      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.
    </div>

    <%= for link <- @shared_links do %>
      <div class="flex relative w-full mt-2 text-sm">
        <input type="text" id="<%= link.slug %>" readonly="readonly" value="<%= shared_link_dest(link) %>" class="transition bg-grey-lighter appearance-none border border-transparent rounded rounded-r-none w-full p-2 text-grey-darker appearance-none focus:outline-none focus:border-grey-light" />
        <button onclick="var input = document.getElementById('<%= link.slug %>'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="py-2 px-4 bg-grey-lighter text-indigo-darker rounded-none border-r border-grey-light">
          <svg class="feather-sm"><use xlink:href="#feather-copy" /></svg>
        </button>
        <%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/shared-links/#{link.slug}", method: :delete, class: "py-2 px-4 bg-grey-lighter text-red-dark rounded-l-none", data: [confirm: "Are you sure you want to delete this shared link? The stats will not be accessible with this link anymore."]) do %>
          <svg class="feather-sm"><use xlink:href="#feather-trash-2" /></svg>
        <% end %>
      </div>
    <% end %>
  </div>

  <%= link("+ New link", to: "/sites/#{URI.encode_www_form(@site.domain)}/shared-links/new", class: "button mt-4") %>
</div>

<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mt-10">
  <h2>Goals</h2>
  <div class="my-4 border-b border-grey-light"></div>
  <div>
    <%= if Enum.count(@goals) > 0 do %>
      <%= for goal <- @goals do %>
        <div class="border-b border-grey-light py-3 flex justify-between">
          <small class="font-bold"><%= goal_name(goal) %></small>
          <%= button("❌", to: "/#{URI.encode_www_form(@site.domain)}/goals/#{goal.id}", method: :delete, class: "text-sm", data: [confirm: "Are you sure you want to remove goal #{goal_name(goal)}? This will just affect the UI, all of your analytics data will stay intact."]) %>
        </div>
      <% end %>
    <% else %>
      <div>No goals configured for this site yet</div>
    <% end %>
  </div>

  <%= link("+ Add goal", to: "/#{URI.encode_www_form(@site.domain)}/goals/new", class: "button mt-6") %>
</div>

<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mt-10" id="google-auth">
  <div class="flex items-center justify-between">
    <h2>Google Integration</h2>
  </div>

  <div class="my-4 border-b border-grey-light"></div>
    <div class="text-grey-darker my-4">
      Integrating with your Google account allows Plausible to show more information about your websites' performance on their search engine.
    </div>

    <%= if @site.google_auth do %>
      <div class="py-2"></div>
      <span class="text-grey-darker">Connected Google account: <b><%= @site.google_auth.email %></b></span>

      <%= if @site.google_auth.property && !(@site.google_auth.property in @search_console_domains) do %>
        <p class="text-grey-darker mt-6 font-bold">
        NB: Your Google account does not have access to your currently configured property, <%= @site.google_auth.property %>. Please select a verified property from the list below.
        </p>
      <% else %>
        <p class="text-grey-darker mt-6">
        Select the Google Search Console property you would like to pull keyword data from. If you don't see your domain, <%= link("set it up and verify", to: "https://docs.plausible.io/google-search-console-integration#1-add-your-site-on-the-search-console", class: "text-indigo") %> on Search Console first.
        </p>
      <% end %>

      <%= form_for Plausible.Site.GoogleAuth.changeset(@site.google_auth), "/#{URI.encode_www_form(@site.domain)}/settings/google", [class: "max-w-xs"], fn f -> %>
        <div class="my-6">
          <div class="inline-block relative w-full">
            <%= select f, :property, @search_console_domains, prompt: "(Choose property)", class: "block appearance-none w-full bg-grey-lighter text-grey-darker cursor-pointer hover:border-grey p-2 pr-8 rounded leading-normal focus:outline-none" %>
            <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-red">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
            </div>
          </div>
        </div>

        <%= submit "Save", class: "button" %>
      <% end %>
    <% else %>
      <%= button("Continue with Google", to: Plausible.Google.Api.authorize_url(@site.id), class: "button mt-4") %>

      <div class="text-grey-darker mt-8">
        NB: You also need to set up your site on <%= link("Google Search Console", to: "https://search.google.com/search-console/about") %> for the integration to work. <%= link("Read the docs", to: "https://docs.plausible.io/google-search-console-integration", class: "text-indigo") %>
      </div>
    <% end %>
</div>

<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mt-10" id="email-reports">
  <h2>Email reports</h2>

  <div class="my-4 border-b border-grey-light"></div>

  <div class="my-8 flex items-center">
    <%= if @weekly_report do %>
      <%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/disable", method: :post, class: "border rounded-full border-grey flex items-center cursor-pointer w-8 bg-green justify-end") do %>
        <span class="rounded-full border w-4 h-4 border-grey shadow-inner bg-white shadow"></span>
      <% end %>
    <% else %>
      <%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/enable", method: :post, class: "border rounded-full border-grey flex items-center cursor-pointer w-8 justify-start") do %>
        <span class="rounded-full border w-4 h-4 border-grey shadow-inner bg-white shadow"></span>
      <% end %>
    <% end %>
    <span class="ml-2">Send a weekly email report every Monday</span>
  </div>
  <%= if @weekly_report do %>
    <div class="text-sm text-grey-darker mt-6">
      <h4 class="my-2">Weekly report recipients</h4>
      <%= for recipient <- @weekly_report.recipients do %>
        <div class="p-3 flex justify-between bg-grey-lighter rounded my-2 max-w-sm">
          <span><svg class="feather mr-1" style="transform: translateY(0.05em)"><use xlink:href="#feather-mail" /></svg><%= recipient %></span>
          <%= button("❌", to: "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/recipients/#{recipient}", method: :delete) %>
        </div>
      <% end %>
      <%= form_for @conn, "/sites/#{URI.encode_www_form(@site.domain)}/weekly-report/recipients", fn f -> %>
        <div class="flex justify-between my-2 max-w-sm">
          <%= email_input f, :recipient, class: "transition bg-grey-lighter appearance-none border border-transparent rounded w-full p-2 text-grey-darker leading-normal appearance-none focus:outline-none focus:border-grey-light", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
          <%= submit "Add recipient", class: "button rounded-l-none whitespace-no-wrap" %>
        </div>
      <% end %>
    </div>
  <% end %>
  <div class="my-8 border-b border-grey-light"></div>
  <div class="my-8 flex items-center">
    <%= if @monthly_report do %>
      <%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/disable", method: :post, class: "border rounded-full border-grey flex items-center cursor-pointer w-8 bg-green justify-end") do %>
        <span class="rounded-full border w-4 h-4 border-grey shadow-inner bg-white shadow"></span>
      <% end %>
    <% else %>
      <%= button(to: "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/enable", method: :post, class: "border rounded-full border-grey flex items-center cursor-pointer w-8 justify-start") do %>
        <span class="rounded-full border w-4 h-4 border-grey shadow-inner bg-white shadow"></span>
      <% end %>
    <% end %>
    <span class="ml-2">Send a monthly email report on 1st of the month</span>
  </div>
  <%= if @monthly_report do %>
    <div class="text-sm text-grey-darker mt-6">
      <h4 class="my-2">Monthly report recipients</h4>
      <%= for recipient <- @monthly_report.recipients do %>
        <div class="p-3 flex justify-between bg-grey-lighter rounded my-2 max-w-sm">
          <span><svg class="feather mr-1" style="transform: translateY(0.05em)"><use xlink:href="#feather-mail" /></svg><%= recipient %></span>
          <%= button("❌", to: "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/recipients/#{recipient}", method: :delete) %>
        </div>
      <% end %>
      <%= form_for @conn, "/sites/#{URI.encode_www_form(@site.domain)}/monthly-report/recipients", fn f -> %>
        <div class="flex justify-between my-2 max-w-sm">
          <%= email_input f, :recipient, class: "transition bg-grey-lighter appearance-none border border-transparent rounded w-full p-2 text-grey-darker leading-normal appearance-none focus:outline-none focus:border-grey-light", style: "flex-grow: 2", placeholder: "recipient@example.com" %>
          <%= submit "Add recipient", class: "button rounded-l-none whitespace-no-wrap" %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

<%= form_for @conn, "/", [class: "bg-white max-w-md mx-auto shadow-md rounded rounded-t-none border-t-2 border-indigo-lightest px-8 pt-6 pb-8 mb-4 mt-16"], fn f -> %>
  <div class="flex items-center justify-between">
    <h2>Javascript snippet</h2>
  </div>
  <div class="my-4">
    <p>Include this snippet in the <code>&lt;head&gt;</code> of your website.</p>
    <div class="relative">
      <%= textarea f, :domain, id: "snippet_code", class: "transition overflow-hidden bg-grey-lighter appearance-none border border-transparent rounded w-full p-2 pr-6 text-grey-darker leading-normal appearance-none focus:outline-none focus:bg-white focus:border-grey-light text-xs mt-2 resize-none", value: snippet(@site), rows: 2 %>
      <a onclick="var textarea = document.getElementById('snippet_code'); textarea.focus(); textarea.select(); document.execCommand('copy');" href="javascript:void(0)" class="no-underline text-indigo text-sm hover:underline">
        <svg class="absolute text-indigo" style="top: 24px; right: 12px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
      </a>
    </div>
  </div>
<% end %>

<div class="max-w-md mx-auto bg-white shadow-md rounded rounded-t-none border-t-2 border-red-dark px-8 pt-6 pb-8 mt-16 mb-24">
  <div class="flex items-center justify-between">
    <h2>Delete site data</h2>
  </div>

  <div class="my-4 border-b border-grey-light"></div>

  <p class="text-lg">Deleting the site removes all stats you've collected</p>
  <%= link "Delete #{@site.domain}", to: "/#{URI.encode_www_form(@site.domain)}", method: :delete, class: "button bg-red-dark mt-4", data: [confirm: "Deleting the site data cannot be reversed. Are you sure?"] %>
</div>