120 lines
4.9 KiB
Text
120 lines
4.9 KiB
Text
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<div class="mx-auto max-w-sm">
|
|
<div class="text-center">
|
|
<.header>
|
|
<%= if @invitation do %>
|
|
{t_auth("Join %{organization}", organization: @invitation.organization.name)}
|
|
<% else %>
|
|
{t_auth("Register for an account")}
|
|
<% end %>
|
|
<:subtitle>
|
|
{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>
|
|
{t_auth("to your account now.")}
|
|
</:subtitle>
|
|
</.header>
|
|
|
|
<%= if @invitation do %>
|
|
<div class="mt-6 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>
|
|
<% else %>
|
|
<div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800">
|
|
<p class="text-sm font-medium text-blue-900 dark:text-blue-100">
|
|
{t_auth("Free tier includes:")}
|
|
</p>
|
|
<ul class="mt-2 text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
|
<li>{t_auth("✓ Monitor up to 10 devices")}</li>
|
|
<li>{t_auth("✓ Real-time alerts and notifications")}</li>
|
|
<li>{t_auth("✓ Performance charts and historical data")}</li>
|
|
<li>{t_auth("✓ No credit card required")}</li>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<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
|
|
/>
|
|
|
|
<%= 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-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-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-zinc-700 dark:text-zinc-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-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-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-zinc-700 dark:text-zinc-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")}
|
|
</.button>
|
|
</.form>
|
|
</div>
|
|
</div>
|
|
</Layouts.app>
|