towerops/lib/towerops_web/live/site_live/form.html.heex

358 lines
14 KiB
Text

<Layouts.authenticated
flash={@flash}
current_scope={@current_scope}
>
<div class="mb-4">
<.link
navigate={
if @live_action == :edit,
do: ~p"/sites/#{@site.id}",
else: ~p"/sites"
}
class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
<.icon name="hero-arrow-left" class="h-4 w-4" />
{if @live_action == :edit, do: "Back to Site", else: "Back to Sites"}
</.link>
</div>
<.header>
{@page_title}
<:subtitle>
{if @live_action == :new,
do: "Add a new site to your organization",
else: "Update site details"}
</:subtitle>
</.header>
<div class="max-w-2xl">
<.form for={@form} id="site-form" phx-change="validate" phx-submit="save">
<.input field={@form[:name]} type="text" label="Site Name" required />
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
Parent Site
<span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</span>
<select
id={@form[:parent_site_id].id}
name={@form[:parent_site_id].name}
class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
>
<option value="">No parent site</option>
{Phoenix.HTML.Form.options_for_select(
Enum.map(@available_parent_sites, &{&1.name, &1.id}),
@form[:parent_site_id].value
)}
</select>
</label>
</div>
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
Location <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</span>
<input
type="text"
id={@form[:location].id}
name={@form[:location].name}
value={@form[:location].value}
class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
/>
</label>
</div>
<div class="mb-4">
<label>
<span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
Description
<span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</span>
<textarea
id={@form[:description].id}
name={@form[:description].name}
class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
>{Phoenix.HTML.Form.normalize_value("textarea", @form[:description].value)}</textarea>
</label>
</div>
<%= if @available_agents != [] do %>
<div class="mt-6 border-t pt-6">
<h3 class="text-base font-medium mb-4">
Agent Configuration
<span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Set a default agent for SNMP polling at this site. This will override the organization default for all devices at this site. Leave blank to inherit from organization.
</p>
<.input
field={@form[:agent_token_id]}
type="select"
label="Default Agent for Site"
prompt="Inherit from organization"
options={Enum.map(@available_agents, &{&1.name, &1.id})}
/>
<%= if @live_action == :edit and @site.agent_token_id do %>
<p class="mt-1 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
<.icon name="hero-exclamation-triangle" class="h-4 w-4" />
<strong>Overriding</strong> organization default -
all devices at this site will use this agent
</p>
<div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
<p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
Force Apply to Site Device
</p>
<p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
This will assign this agent to ALL devices at this site.
</p>
<.button
type="button"
phx-click="apply_agent_to_all"
data-confirm="This will replace agent assignments for ALL devices at this site. Are you sure?"
variant="danger"
>
<.icon name="hero-arrow-path" class="h-4 w-4" /> Apply Agent to All Device
</.button>
</div>
<% else %>
<%= if Map.get(assigns, :org_agent) do %>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
<.icon name="hero-building-office-2" class="h-4 w-4" />
Currently inheriting organization default: <strong>{@org_agent.name}</strong>
</p>
<% else %>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Set a default agent for all devices at this site. Device can override this setting individually.
</p>
<% end %>
<% end %>
</div>
<% end %>
<div class="mt-6 border-t pt-6">
<h3 class="text-base font-medium mb-4">
SNMP Configuration
<span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Override organization SNMP defaults for all devices at this site. Leave blank to inherit from organization.
</p>
<.input
field={@form[:snmp_version]}
type="select"
label="SNMP Version"
prompt="Inherit from organization"
options={[{"v1", "1"}, {"v2c", "2c"}, {"v3", "3"}]}
/>
<!-- v1/v2c Community String -->
<%= if @form[:snmp_version].value in ["1", "2c"] do %>
<.input
field={@form[:snmp_community]}
type="text"
label="SNMP Community String"
placeholder="Leave blank to inherit from organization"
/>
<% end %>
<!-- v3 Credentials -->
<%= if @form[:snmp_version].value == "3" do %>
<.input
field={@form[:snmpv3_security_level]}
type="select"
label="Security Level"
prompt="Select security level"
options={[
{"No Auth, No Priv", "noAuthNoPriv"},
{"Auth, No Priv", "authNoPriv"},
{"Auth, Priv", "authPriv"}
]}
/>
<.input
field={@form[:snmpv3_username]}
type="text"
label="Username"
placeholder="Leave blank to inherit from organization"
/>
<!-- Auth fields (shown for authNoPriv and authPriv) -->
<%= if @form[:snmpv3_security_level].value in ["authNoPriv", "authPriv"] do %>
<.input
field={@form[:snmpv3_auth_protocol]}
type="select"
label="Auth Protocol"
prompt="Select protocol"
options={[
{"SHA-256 (recommended)", "SHA-256"},
{"SHA-512", "SHA-512"},
{"SHA-384", "SHA-384"},
{"SHA-224", "SHA-224"},
{"SHA (SHA-1)", "SHA"},
{"MD5", "MD5"}
]}
/>
<.input
field={@form[:snmpv3_auth_password]}
type="password"
label="Auth Password"
placeholder="Min 8 characters"
autocomplete="off"
/>
<% end %>
<!-- Priv fields (shown only for authPriv) -->
<%= if @form[:snmpv3_security_level].value == "authPriv" do %>
<.input
field={@form[:snmpv3_priv_protocol]}
type="select"
label="Privacy Protocol"
prompt="Select protocol"
options={[
{"AES-128 (recommended)", "AES"},
{"AES-256", "AES-256"},
{"AES-192", "AES-192"},
{"AES-256-C", "AES-256-C"},
{"DES (legacy)", "DES"}
]}
/>
<.input
field={@form[:snmpv3_priv_password]}
type="password"
label="Privacy Password"
placeholder="Min 8 characters"
autocomplete="off"
/>
<% end %>
<% end %>
<.input
field={@form[:snmp_port]}
type="number"
label="SNMP Port"
placeholder="Leave blank to inherit from organization (default: 161)"
/>
<%= if @live_action == :edit and @site.snmp_community do %>
<div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
<p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
Force Apply to Site Device
</p>
<p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
This will override SNMP settings for ALL devices at this site.
</p>
<.button
type="button"
phx-click="apply_snmp_to_all"
data-confirm="This will replace SNMP settings for ALL devices at this site. Are you sure?"
variant="danger"
>
<.icon name="hero-arrow-path" class="h-4 w-4" /> Apply SNMP Config to All Device
</.button>
</div>
<% end %>
</div>
<%= if @current_scope.user.is_superuser do %>
<div class="mt-6 border-t pt-6">
<h3 class="text-base font-medium mb-4">
MikroTik API Configuration
<span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Override organization MikroTik API defaults for all devices at this site. Leave blank to inherit from organization. Only applies to MikroTik devices.
</p>
<div class="mb-4 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
<p class="text-xs text-blue-700 dark:text-blue-300">
<.icon name="hero-beaker" class="h-4 w-4 inline" />
<strong>Experimental Feature:</strong>
MikroTik API integration is under active development.
</p>
</div>
<.input
field={@form[:mikrotik_enabled]}
type="checkbox"
label="Enable MikroTik API"
/>
<%= if @form[:mikrotik_enabled].value do %>
<.input
field={@form[:mikrotik_username]}
type="text"
label="Username"
placeholder="Leave blank to inherit from organization"
/>
<.input
field={@form[:mikrotik_password]}
type="password"
label="Password"
placeholder="Leave blank to inherit from organization"
/>
<.input
field={@form[:mikrotik_port]}
type="number"
label="API Port"
placeholder="8729 (SSL) or 8728 (plain)"
/>
<.input
field={@form[:mikrotik_use_ssl]}
type="checkbox"
label="Use SSL (API-SSL)"
/>
<%= if @form[:mikrotik_use_ssl].value == false do %>
<div class="mt-3 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p class="text-sm text-red-700 dark:text-red-300">
<strong>🚨 Critical Security Warning:</strong>
Plain API (port 8728) sends credentials unencrypted over the network. This setting is
<strong>blocked for devices using cloud pollers</strong>
and should only be used with local agents on trusted networks.
</p>
</div>
<% else %>
<div class="mt-3 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
<p class="text-sm text-yellow-700 dark:text-yellow-300">
<strong>⚠️ Security Warning:</strong>
Plain API (port 8728) sends credentials unencrypted. Use SSL (port 8729) whenever possible.
</p>
</div>
<% end %>
<% end %>
</div>
<% end %>
<div class="flex gap-3 mt-6">
<.button phx-disable-with="Saving..." variant="primary">Save Site</.button>
<.button navigate={~p"/sites"}>Cancel</.button>
</div>
</.form>
<%= if @live_action == :edit do %>
<div class="mt-12 pt-8 border-t border-gray-200 dark:border-white/10">
<h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">Danger Zone</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Once you delete a site, there is no going back. This will also delete all devices at this site.
</p>
<.button
phx-click="delete"
data-confirm="Are you sure you want to delete this site? This will also delete all devices at this site."
variant="danger"
>
<.icon name="hero-trash" class="h-4 w-4" /> Delete Site
</.button>
</div>
<% end %>
</div>
</Layouts.authenticated>