145 lines
5.7 KiB
Text
145 lines
5.7 KiB
Text
<Layouts.authenticated flash={@flash} current_scope={@current_scope}>
|
|
<div class="text-center">
|
|
<.header>
|
|
Account Settings
|
|
<:subtitle>Manage your account email address and password settings</:subtitle>
|
|
</.header>
|
|
</div>
|
|
|
|
<.form :let={f} for={@email_changeset} action={~p"/users/settings"} id="update_email">
|
|
<input type="hidden" name="action" value="update_email" />
|
|
|
|
<.input field={f[:email]} type="email" label="Email" autocomplete="email" required />
|
|
|
|
<.button variant="primary" phx-disable-with="Changing...">Change Email</.button>
|
|
</.form>
|
|
|
|
<div class="divider" />
|
|
|
|
<.form :let={f} for={@password_changeset} action={~p"/users/settings"} id="update_password">
|
|
<input type="hidden" name="action" value="update_password" />
|
|
|
|
<.input
|
|
field={f[:password]}
|
|
type="password"
|
|
label="New password"
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
<.input
|
|
field={f[:password_confirmation]}
|
|
type="password"
|
|
label="Confirm new password"
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
<.button variant="primary" phx-disable-with="Changing...">
|
|
Save Password
|
|
</.button>
|
|
</.form>
|
|
|
|
<div class="divider" />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
|
|
Alert Notification Devices
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Manage mobile devices that receive push notifications for alerts
|
|
</p>
|
|
|
|
<div class="mt-6 space-y-4">
|
|
<%= if Enum.empty?(@mobile_sessions) do %>
|
|
<div class="rounded-lg border border-dashed border-gray-300 p-8 text-center dark:border-white/10">
|
|
<.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
|
|
<h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
|
|
No mobile devices registered
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Add a mobile device to receive push notifications for alerts
|
|
</p>
|
|
</div>
|
|
<% else %>
|
|
<div class="space-y-3">
|
|
<%= for session <- @mobile_sessions do %>
|
|
<div class="flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-white/10">
|
|
<div class="flex items-center gap-3">
|
|
<.icon name="hero-device-phone-mobile" class="h-5 w-5 text-gray-400" />
|
|
<div>
|
|
<p class="font-medium text-gray-900 dark:text-white">
|
|
{session.device_name || "Unknown Device"}
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
{session.device_os} • {session.app_version}
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
Last used {Calendar.strftime(session.last_used_at, "%B %d, %Y")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<.form
|
|
:let={_f}
|
|
for={%{}}
|
|
action={~p"/users/settings"}
|
|
method="put"
|
|
class="inline"
|
|
>
|
|
<input type="hidden" name="action" value="toggle_device_alerts" />
|
|
<input type="hidden" name="session_id" value={session.id} />
|
|
<input
|
|
type="hidden"
|
|
name="enabled"
|
|
value={if session.alerts_enabled, do: "false", else: "true"}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class={[
|
|
"inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold shadow-sm",
|
|
if(session.alerts_enabled,
|
|
do:
|
|
"bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/20 dark:text-green-400 dark:hover:bg-green-900/30",
|
|
else:
|
|
"bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800"
|
|
)
|
|
]}
|
|
>
|
|
<%= if session.alerts_enabled do %>
|
|
<.icon name="hero-bell" class="h-4 w-4" /> Alerts On
|
|
<% else %>
|
|
<.icon name="hero-bell-slash" class="h-4 w-4" /> Alerts Off
|
|
<% end %>
|
|
</button>
|
|
</.form>
|
|
<.form
|
|
:let={_f}
|
|
for={%{}}
|
|
action={~p"/users/settings"}
|
|
method="put"
|
|
class="inline"
|
|
>
|
|
<input type="hidden" name="action" value="revoke_mobile_device" />
|
|
<input type="hidden" name="session_id" value={session.id} />
|
|
<button
|
|
type="submit"
|
|
data-confirm="Are you sure you want to remove this device?"
|
|
class="text-sm font-semibold text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300"
|
|
>
|
|
Remove
|
|
</button>
|
|
</.form>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<.link
|
|
navigate={~p"/mobile/qr-login"}
|
|
class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-300"
|
|
>
|
|
<.icon name="hero-qr-code" class="h-4 w-4" /> Add Mobile Device
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</Layouts.authenticated>
|