WifiNetworkCard

Domain · Modem

SSID, band (2.4/5/6 GHz), security mode, and guest/disabled labels. An edit link is added via the editHref prop.

Preview

HomeNetwork

2.4GHzWPA2/3

HomeNetwork_5G

5GHzWPA3

HomeGuest

Guest

2.4GHzWPA2

Code

<% wifi.networks.forEach(function(net) { %>
<%- include('modules/domain/modem/WifiNetworkCard', { network: net }) %>
<% }); %>

Preview

OldNetwork

Off

2.4GHzWPA2

Code

<%- include('modules/domain/modem/WifiNetworkCard', { network: { ...net, enabled: false } }) %>

Preview

HomeNetwork_5G

5GHzWPA3

Edit

Code

<%- include('modules/domain/modem/WifiNetworkCard', { network: net, editHref: '/wifi/edit/' + net.id }) %>

<%
  var _net     = locals.network  || {};
  var _enabled = _net.enabled !== false;
  var _isGuest = _net.isGuest || false;

  var secLabels = {
    OPEN:              'Open',
    WPA2_PERSONAL:     'WPA2',
    WPA3_PERSONAL:     'WPA3',
    WPA2_WPA3_MIXED:   'WPA2/3',
    WPA2_ENTERPRISE:   'WPA2-Ent',
    WPA3_ENTERPRISE:   'WPA3-Ent',
  };
  var secLabel  = secLabels[_net.securityMode] || _net.securityMode;
  var bandColor = _net.band === '6GHz' ? 'text-secondary' : _net.band === '5GHz' ? 'text-primary' : 'text-info';
%>
<div class="rounded-xl border <%= _enabled ? 'border-border' : 'border-border opacity-60' %> bg-surface-raised p-4 flex items-center gap-4<%= locals.className ? ' ' + locals.className : '' %>">
  <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-subtle <%= bandColor %>">
    <i class="fa-solid fa-wifi text-sm" aria-hidden="true"></i>
  </span>

  <div class="flex-1 min-w-0">
    <div class="flex items-center gap-2 flex-wrap">
      <p class="text-sm font-semibold text-text-primary truncate"><%= _net.ssid %></p>
      <% if (_isGuest) { %>
      <span class="rounded-md bg-warning/10 border border-warning/30 px-1.5 py-0.5 text-xs font-medium text-warning">Guest</span>
      <% } %>
      <% if (!_enabled) { %>
      <span class="rounded-md bg-surface-overlay border border-border px-1.5 py-0.5 text-xs font-medium text-text-secondary">Off</span>
      <% } %>
    </div>
    <div class="flex items-center gap-2 mt-0.5 text-xs text-text-secondary">
      <span><%= _net.band %></span>
      <span aria-hidden="true">·</span>
      <span><%= secLabel %></span>
      <% if (_net.maxClients) { %>
      <span aria-hidden="true">·</span>
      <span>Max <%= _net.maxClients %></span>
      <% } %>
    </div>
  </div>

  <% if (locals.editHref) { %>
  <a href="<%= locals.editHref %>"
     class="shrink-0 text-xs text-text-secondary hover:text-text-primary transition-colors px-2 py-1 rounded border border-border hover:bg-surface-overlay">
    Edit
  </a>
  <% } %>
</div>

WifiNetworkCard

Dual-band + guest

Disabled network

With edit link