analytics/lib/plausible_web/templates/site/new.html.eex
Vinicius Brasil 178e34b9e7
Fix timezone input (#2222)
* Update Timex version from 3.7.7 to 3.7.8

* Generate timezone list from Tzdata

This commit fixes a bug where timezone changes weren't updating the
timezone list displayed when editing or creating a site.

Timezones were being pulled from a static list. This commit changes it
to generate the list from Tzdata, that uses a timezone database with
updated information on time changes. Additionally it adds more timezones
with aliases and links to the list.

Closes #1340

* Use timezone name from browser to recommend timezone

This commit matches the timezone name instead of offset to recommend a
timezone when creating a new site. The JavaScript Intl.DateTimeFormat
API is widely supported according to the link. In any case, if the
timezone fails to match by name, it fallbacks to the offset strategy.

https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_resolvedoptions_computed_timezone

Closes #904
2022-09-14 09:58:42 -03:00

90 lines
4.7 KiB
Elixir

<div class="w-full max-w-3xl mt-4 mx-auto flex">
<%= form_for @changeset, "/sites", [class: "max-w-lg w-full mx-auto bg-white dark:bg-gray-800 shadow-lg rounded px-8 pt-6 pb-8 mb-4 mt-8"], fn f -> %>
<h2 class="text-xl font-black dark:text-gray-100">Your website details</h2>
<%= if @is_at_limit do %>
<div class="rounded-md bg-yellow-50 dark:bg-transparent dark:border border-yellow-200 p-4 mt-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400 dark:text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-400">
Upgrade required
</h3>
<div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
<p>
Your account is limited to <%= @site_limit %> sites. Please contact hello@plausible.io to add more sites.
</p>
</div>
</div>
</div>
</div>
<% end %>
<%= if is_nil(@current_user.trial_expiry_date) do %>
<div class="rounded-md bg-blue-50 dark:bg-transparent dark:border border-blue-200 p-4 mt-4">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<div class="text-sm text-blue-700 dark:text-blue-300">
<p>
When you create your first site, your account will enter a 30 day free trial.
</p>
</div>
</div>
</div>
</div>
<% end %>
<div class="my-6">
<%= label f, :domain, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
<p class="text-gray-500 dark:text-gray-400 text-xs mt-1">Just the naked domain or subdomain without 'www'</p>
<div class="mt-2 flex rounded-md shadow-sm">
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-850 text-gray-500 dark:text-gray-400 sm:text-sm">
https://
</span>
<%= text_input f, :domain, class: "focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm border-gray-300 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300", placeholder: "example.com", disabled: @is_at_limit %>
</div>
<%= error_tag f, :domain %>
</div>
<div class="my-6">
<%= label f, :timezone, "Reporting Timezone", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
<p class="text-gray-500 dark:text-gray-400 text-xs mt-1">To make sure we agree on what 'today' means</p>
<div class="inline-block relative w-full">
<%= select f, :timezone, Plausible.Timezones.options(), id: "tz-select", selected: "Etc/Greenwich", class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", disabled: @is_at_limit %>
</div>
</div>
<script>
var option;
if (typeof Intl !== "undefined") {
var timezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone
option = document.querySelector('#tz-select option[value="' + timezoneName + '"]')
}
if (!option) {
var offset = (new Date()).getTimezoneOffset()
option = document.querySelector('#tz-select option[offset="' + offset + '"]')
}
if (option) { option.selected = "selected"}
</script>
<%= submit "Add snippet →", class: "button mt-4 w-full", disabled: @is_at_limit %>
<% end %>
<%= if @is_first_site do %>
<div class="pt-12 pl-8 hidden md:block">
<%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 2) %>
</div>
<% end %>
</div>