analytics/lib/plausible_web/templates/google_analytics/confirm.html.heex

77 lines
2.8 KiB
Plaintext

<.form
:let={f}
for={@conn}
class="max-w-md w-full mx-auto bg-white dark:bg-gray-900 shadow-md rounded-sm px-8 pt-6 pb-8 mb-4 mt-8"
onsubmit="confirmButton.disabled = true; return true;"
action={Routes.google_analytics_path(@conn, :import, @site.domain)}
>
<h2 class="text-xl font-black dark:text-gray-100">Import from Google Analytics</h2>
<.input type="hidden" field={f[:access_token]} />
<.input type="hidden" field={f[:refresh_token]} />
<.input type="hidden" field={f[:expires_at]} />
<div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
Stats from this property and time period will be imported from
your Google Analytics account to your Plausible dashboard
</div>
<div class="mt-6">
<.label for={f[:property].id}>Google Analytics property</.label>
<span class="block w-full text-base dark:text-gray-100 sm:text-sm dark:bg-gray-800">
{@selected_property_name}
</span>
<.input type="hidden" value={@selected_property} field={f[:property]} readonly="true" />
</div>
<div class="flex justify-between mt-3">
<div class="w-36">
<.label for={f[:start_date].id}>From</.label>
<span class="block w-full text-base dark:text-gray-100 sm:text-sm dark:bg-gray-800">
{PlausibleWeb.EmailView.date_format(@start_date)}
</span>
<.input type="hidden" value={@start_date} field={f[:start_date]} readonly="true" />
</div>
<div class="align-middle pt-4 dark:text-gray-100">&rarr;</div>
<div class="w-36">
<.label for={f[:end_date].id}>To</.label>
<span class="block w-full text-base dark:text-gray-100 sm:text-sm dark:bg-gray-800">
{PlausibleWeb.EmailView.date_format(@end_date)}
</span>
<.input type="hidden" value={@end_date} field={f[:end_date]} readonly="true" />
</div>
</div>
<div class="mt-6 flex flex-col-reverse sm:flex-row justify-between items-center">
<p class="text-sm mt-4 sm:mt-0 dark:text-gray-100">
<a
href={
Routes.google_analytics_path(@conn, :property, @site.domain,
property: @selected_property,
access_token: @access_token,
refresh_token: @refresh_token,
expires_at: @expires_at
)
}
class="underline text-indigo-600"
>
Go back
</a>
</p>
<.button
type="submit"
name="confirmButton"
class="button sm:w-auto w-full [&>span.label-enabled]:block [&>span.label-disabled]:hidden [&[disabled]>span.label-enabled]:hidden [&[disabled]>span.label-disabled]:block"
>
<span class="label-enabled pointer-events-none">
Confirm import
</span>
<span class="label-disabled">
<.spinner class="inline-block h-5 w-5 mr-2 text-white dark:text-gray-400" />
Starting import...
</span>
</.button>
</div>
</.form>