towerops/lib/towerops_web/controllers/user_settings_html/edit.html.heex

<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
>
  <div class="text-center">
    <.header>
      {t_auth("Account Settings")}
      <:subtitle>{t_auth("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={t_auth("Email")} autocomplete="email" required />

    <.button variant="primary" phx-disable-with={t_auth("Changing...")}>
      {t_auth("Change Email")}
    </.button>
  </.form>

  <div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" />

  <.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={t_auth("New password")}
      autocomplete="new-password"
      required
    />
    <.input
      field={f[:password_confirmation]}
      type="password"
      label={t_auth("Confirm new password")}
      autocomplete="new-password"
      required
    />
    <.button variant="primary" phx-disable-with={t_auth("Changing...")}>
      {t_auth("Save Password")}
    </.button>
  </.form>

  <div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" />

  <div>
    <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
      {t_auth("Alert Notification Devices")}
    </h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
      {t_auth("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">
            {t_auth("No mobile devices registered")}
          </h3>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {t_auth("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 || t_auth("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">
                    {t_auth("Last used %{date}",
                      date: ToweropsWeb.TimeHelpers.format_date(session.last_used_at, "UTC")
                    )}
                  </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" /> {t_auth("Alerts On")}
                    <% else %>
                      <.icon name="hero-bell-slash" class="h-4 w-4" /> {t_auth("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={t_auth("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"
                  >
                    {t_auth("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" /> {t_auth("Add Mobile Device")}
      </.link>
    </div>
  </div>
</Layouts.authenticated>