212 lines
8.7 KiB
Text
212 lines
8.7 KiB
Text
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<div class="mx-auto max-w-4xl">
|
|
<div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-gray-900 lg:grid lg:grid-cols-5">
|
|
<!-- Left: Brand panel -->
|
|
<div class="hidden lg:col-span-2 lg:flex lg:flex-col lg:justify-between bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 text-white">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<.icon name="hero-signal" class="size-8" />
|
|
<span class="text-xl font-bold">TowerOps</span>
|
|
</div>
|
|
<p class="mt-6 text-lg font-medium leading-relaxed text-blue-100">
|
|
{t("Start monitoring your network in minutes.")}
|
|
</p>
|
|
</div>
|
|
<div class="mt-auto space-y-4">
|
|
<div class="rounded-lg bg-white/10 p-4 backdrop-blur-sm">
|
|
<p class="text-sm font-semibold text-white">{t("Free tier includes:")}</p>
|
|
<ul class="mt-2 space-y-1.5 text-sm text-blue-100">
|
|
<li class="flex items-center gap-2">
|
|
<.icon name="hero-check" class="size-4 text-green-300" />
|
|
{t("Monitor up to 10 devices")}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<.icon name="hero-check" class="size-4 text-green-300" />
|
|
{t("Real-time alerts")}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<.icon name="hero-check" class="size-4 text-green-300" />
|
|
{t("Performance charts & history")}
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<.icon name="hero-check" class="size-4 text-green-300" />
|
|
{t("No credit card required")}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Registration form -->
|
|
<div class="col-span-3 px-6 py-10 sm:px-12">
|
|
<!-- Mobile brand mark -->
|
|
<div class="mb-6 flex items-center justify-center gap-2 lg:hidden">
|
|
<.icon name="hero-signal" class="size-7 text-blue-600 dark:text-blue-400" />
|
|
<span class="text-lg font-bold text-gray-900 dark:text-white">TowerOps</span>
|
|
</div>
|
|
|
|
<div class="text-center lg:text-left">
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
|
|
<%= if @invitation do %>
|
|
{t_auth("Join %{organization}", organization: @invitation.organization.name)}
|
|
<% else %>
|
|
{t_auth("Create your account")}
|
|
<% end %>
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
|
{t_auth("Already registered?")}
|
|
<.link
|
|
navigate={~p"/users/log-in"}
|
|
class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
{t_auth("Log in")}
|
|
</.link>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Mobile: value prop banner -->
|
|
<%= unless @invitation do %>
|
|
<div class="mt-5 flex items-center gap-2 rounded-lg bg-green-50 px-4 py-2.5 text-sm text-green-800 dark:bg-green-900/20 dark:text-green-300 lg:hidden">
|
|
<.icon name="hero-gift" class="size-5 flex-shrink-0" />
|
|
<span class="font-medium">
|
|
{t_auth("First 10 devices free — no credit card needed")}
|
|
</span>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%= if @invitation do %>
|
|
<div class="mt-5 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800">
|
|
<p class="text-sm text-blue-900 dark:text-blue-100">
|
|
{t_auth("You've been invited to join %{organization} as a %{role}.",
|
|
organization: @invitation.organization.name,
|
|
role: @invitation.role
|
|
)}
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mt-8">
|
|
<.form :let={f} for={@form} action={~p"/users/register"}>
|
|
<%= if @invitation_token do %>
|
|
<input type="hidden" name="user[invitation_token]" value={@invitation_token} />
|
|
<% end %>
|
|
|
|
<.input
|
|
field={f[:email]}
|
|
type="email"
|
|
label={t_auth("Email")}
|
|
autocomplete="email"
|
|
required
|
|
phx-mounted={JS.focus()}
|
|
/>
|
|
<.input
|
|
field={f[:password]}
|
|
type="password"
|
|
label={t_auth("Password")}
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
<!-- Password strength indicator (CSS-only) -->
|
|
<div class="mb-4 -mt-2">
|
|
<div class="flex gap-1">
|
|
<div
|
|
class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
|
|
data-index="1"
|
|
>
|
|
</div>
|
|
<div
|
|
class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
|
|
data-index="2"
|
|
>
|
|
</div>
|
|
<div
|
|
class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
|
|
data-index="3"
|
|
>
|
|
</div>
|
|
<div
|
|
class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
|
|
data-index="4"
|
|
>
|
|
</div>
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
|
|
{t_auth("Use 12+ characters for a strong password")}
|
|
</p>
|
|
</div>
|
|
|
|
<%= unless @invitation do %>
|
|
<.input
|
|
name="user[organization_name]"
|
|
value=""
|
|
type="text"
|
|
label={t_auth("Organization Name")}
|
|
placeholder={t_auth("My Company")}
|
|
required
|
|
/>
|
|
<% end %>
|
|
|
|
<div class="space-y-3 mt-6">
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input
|
|
id="privacy_policy_consent"
|
|
name="user[privacy_policy_consent]"
|
|
type="checkbox"
|
|
required
|
|
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div class="ml-3 text-sm">
|
|
<label for="privacy_policy_consent" class="text-gray-700 dark:text-gray-300">
|
|
{t_auth("I agree to the %{link}",
|
|
link:
|
|
raw(
|
|
~s(<a href="/privacy" target="_blank" class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">#{t_auth("Privacy Policy")}</a>)
|
|
)
|
|
)}
|
|
<span class="text-red-600 dark:text-red-400">*</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input
|
|
id="terms_of_service_consent"
|
|
name="user[terms_of_service_consent]"
|
|
type="checkbox"
|
|
required
|
|
class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
|
|
/>
|
|
</div>
|
|
<div class="ml-3 text-sm">
|
|
<label for="terms_of_service_consent" class="text-gray-700 dark:text-gray-300">
|
|
{t_auth("I agree to the %{link}",
|
|
link:
|
|
raw(
|
|
~s(<a href="/terms" target="_blank" class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">#{t_auth("Terms of Service")}</a>)
|
|
)
|
|
)}
|
|
<span class="text-red-600 dark:text-red-400">*</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<.button
|
|
phx-disable-with={t_auth("Creating account...")}
|
|
class="w-full mt-6"
|
|
variant="primary"
|
|
>
|
|
{if @invitation,
|
|
do: t_auth("Accept invitation and create account"),
|
|
else: t_auth("Create an account")}
|
|
<span aria-hidden="true">→</span>
|
|
</.button>
|
|
</.form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layouts.app>
|