Skip to content

Simplify UX & UI for configuring external Wi-Fi network connection #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ethanjli merged 1 commit into from
Jan 6, 2026
Merged

Simplify UX & UI for configuring external Wi-Fi network connection #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions internal/app/deviceadmin/routes/internet/conn-profiles.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,9 @@ func (h *Handlers) HandleConnProfilePostByUUID() echo.HandlerFunc {
); err != nil {
return errors.Wrapf(err, "couldn't update connection profile %s", rawUUID)
}
if err := h.nmc.ActivateConnProfile(c.Request().Context(), uid); err != nil {
return err
}
// Redirect user
return c.Redirect(http.StatusSeeOther, redirectTarget)
case "updated":
Expand Down
10 changes: 5 additions & 5 deletions internal/app/deviceadmin/routes/internet/routes.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,8 @@ type InternetViewData struct {
NM nm.NetworkManager

AvailableSSIDs []string
Wlan0InternetConnProfile nm.ConnProfile
Wlan0HotspotConnProfile nm.ConnProfile
Wlan1InternetConnProfile nm.ConnProfile

WifiDevices []nm.Device
EthernetDevices []nm.Device
Expand All @@ -101,11 +101,11 @@ func getInternetViewData(ctx context.Context, nmc *nm.Client) (vd InternetViewDa
return vd, errors.Wrap(err, "couldn't get overall information about NetworkManager")
}

const iface = "wlan0"
const internetIface = "wlan1"
// Note(ethanjli): the list of APs is just for autocompletion in the simplified wifi management
// view, and it can be missing just after activating wlan0-hotspot; so it's fine if we don't
// provide any data about available APs on this page:
availableAPs, _ := nmc.ScanNetworks(ctx, iface)
availableAPs, _ := nmc.ScanNetworks(ctx, internetIface)
for ssid, aps := range availableAPs {
if len(aps) == 0 {
continue
Expand Down Expand Up @@ -138,10 +138,10 @@ func getInternetViewData(ctx context.Context, nmc *nm.Client) (vd InternetViewDa
case "wifi":
vd.WifiConnProfiles = append(vd.WifiConnProfiles, connProfile.Settings.Conn)
switch conn := connProfile.Settings.Conn; conn.ID {
case "wlan0-internet":
vd.Wlan0InternetConnProfile = connProfile
case "wlan0-hotspot":
vd.Wlan0HotspotConnProfile = connProfile
case "wlan1-internet":
vd.Wlan1InternetConnProfile = connProfile
}
case "ethernet":
vd.EthernetConnProfiles = append(vd.EthernetConnProfiles, connProfile.Settings.Conn)
Expand Down
1 change: 1 addition & 0 deletions web/templates/internet/conn-profiles/index.page.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@
data-form-submission-target="submit"
>
</form>
<!-- TODO: also show a button to deactivate the profile, if it's active -->
</div>
</div>
</turbo-frame>
Expand Down
55 changes: 35 additions & 20 deletions web/templates/internet/external-network-form.partial.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@
>

<turbo-frame
id="internet_devices_wlan0_access-points.frame"
id="internet_devices_wlan1_access-points.frame"
data-turbo-reload
refresh="morph"
data-action="turbo:frame-load->dropdown-textbox#updateSelect turbo:morph-element->dropdown-textbox#updateSelect"
data-action="
turbo:frame-load->dropdown-textbox#updateSelect
turbo:morph-element->dropdown-textbox#updateSelect
"
>
<form
action="{{$Meta.BasePath}}internet/devices/wlan0/access-points"
action="{{$Meta.BasePath}}internet/devices/wlan1/access-points"
method="POST"
class="is-inline-block mb-3"
data-controller="form-submission hideable"
Expand All @@ -43,7 +46,7 @@
</div>
</form>
<datalist
id="internet_devices_wlan0_access-points.datalist"
id="internet_devices_wlan1_access-points.datalist"
data-dropdown-textbox-target="datalist"
>
{{range $ssid := $availableSSIDs}}
Expand Down Expand Up @@ -99,7 +102,7 @@
<input
class="input" type="text"
name="802-11-wireless.ssid"
list="{{$Meta.BasePath}}internet/devices/wlan0/access-points/list"
list="{{$Meta.BasePath}}internet/devices/wlan1/access-points/list"
minlength=1 maxlength=32
value="{{toString $wifi.SSID}}"
required
Expand All @@ -110,7 +113,7 @@
<p>
(you can view details about all detected external networks
<a href="{{urlJoin (dict
"path" (print $Meta.BasePath "internet/devices/wlan0/access-points")
"path" (print $Meta.BasePath "internet/devices/wlan1/access-points")
"query" $Meta.Form.Encode
)}}" target="_blank">here</a>)
</p>
Expand All @@ -129,7 +132,10 @@
class="is-inline-block is-vertical-align-top mt-1"
{{if not (eq $wifiSec.KeyMgmt "")}}checked{{end}}
data-checkable-textbox-target="checkable"
data-action="change->checkable-textbox#toggle change->checkable-textbox#setPlaceholder"
data-action="
change->checkable-textbox#toggle
change->checkable-textbox#setPlaceholder
"
data-checkable-textbox-placeholder-param="not shown here, for security reasons"
/>
<div class="is-inline-block is-vertical-align-top">
Expand All @@ -148,7 +154,11 @@
size=30
data-password-input-target="input"
data-checkable-textbox-target="textbox"
data-action="focus->checkable-textbox#edit focus->checkable-textbox#setPlaceholder input->password-input#edit"
data-action="
focus->checkable-textbox#edit
focus->checkable-textbox#setPlaceholder
input->password-input#edit
"
data-checkable-textbox-placeholder-param="not shown here, for security reasons"
>
</div>
Expand Down Expand Up @@ -177,7 +187,10 @@
required
autocomplete="off"
{{if eq $wifiSec.KeyMgmt ""}}checked{{end}}
data-action="change->checkable-textbox#toggle change->checkable-textbox#setPlaceholder"
data-action="
change->checkable-textbox#toggle
change->checkable-textbox#setPlaceholder
"
data-checkable-textbox-placeholder-param="none"
/>
No
Expand All @@ -186,7 +199,7 @@
</div>

<div class="field">
<label class="label">Behavior</label>
<label class="label">Automatic connection</label>
<div class="control radios">
<label class="radio is-block">
<input type="radio"
Expand All @@ -196,7 +209,7 @@
autocomplete="off"
{{if $conn.Autoconnect}}checked{{end}}
/>
Automatically try to connect during boot
Always connect when available
</label>
<label class="radio is-block ml-0">
<input type="radio"
Expand All @@ -206,20 +219,22 @@
autocomplete="off"
{{if not $conn.Autoconnect}}checked{{end}}
/>
Don't try to connect during boot
Don't automatically connect
</label>
</div>
</div>

<div class="field" data-form-submission-target="submitter">
<div class="control">
<input
class="button is-primary"
type="submit"
name="update-type"
value="Save"
data-form-submission-target="submit"
>
<div class="field is-grouped">
<div class="control">
<input
class="button is-primary"
type="submit"
name="update-type"
value="Save and connect"
data-form-submission-target="submit"
>
</div>
</div>
</div>
</form>
Expand Down
96 changes: 4 additions & 92 deletions web/templates/internet/index.page.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@

<section class="section content">
<h2 id="internet_wifi">Wi-Fi</h2>
{{if not .Data.Wlan0InternetConnProfile.HasData}}
{{if not .Data.Wlan1InternetConnProfile.HasData}}
<article class="message is-error two-card-width">
<div class="message-body">
The basic configuration file for internet access could not be found! Was it removed?
Expand All @@ -60,110 +60,22 @@
"path" .Meta.Path
"query" (.Meta.Form.WithInstead "mode" "advanced").Encode
)}}">advanced view</a> of this page to check whether
the "wlan0-internet" connection profile is listed, and if so, what its contents are.
It should have ID "wlan0-internet" and be of type "wifi".
the "wlan1-internet" connection profile is listed, and if so, what its contents are.
It should have ID "wlan1-internet" and be of type "wifi".
</div>
</article>
{{else}}
<p class="two-card-width">
This machine's internal Wi-Fi module (wlan0) can either connect to an
<strong>external Wi-Fi network</strong> created by a Wi-Fi router (to give this machine
internet access) or create its own <strong>Wi-Fi hotspot</strong> (as a way for your
computer to connect directly to this machine). Whenever a connection to an external Wi-Fi
network fails or is lost, this machine will automatically switch to creating its own Wi-Fi
hotspot instead.
</p>
<article class="message is-info two-card-width">
<div class="message-body">
Once this machine has started making its own Wi-Fi hotspot, it will not automatically
try to connect to the external Wi-Fi network before the next boot. However, you can
manually make the machine try to connect to the external Wi-Fi network by clicking the
"Use external network now" button further down this page.
</div>
</article>
<!--
<p>
TODO: simplify this behavior by making a system service which checks whether the
wlan0-internet profile's autoconnect behavior is enabled and, if so, deactivate
wlan0-hotspot and activate wlan0-internet instead whenever the wlan0-internet's network
is within range. This would effectively be a "always automatically try to connect"
behavior, instead of the "autoconnect only during boot" behavior which we currently have
with NetworkManager.
</p>
-->
<div class="card section-card">
<div class="card-content">
<h3>External Wi-Fi network</h3>
{{
template "internet/external-network-form.partial.tmpl" dict
"ConnProfile" .Data.Wlan0InternetConnProfile
"ConnProfile" .Data.Wlan1InternetConnProfile
"AvailableSSIDs" .Data.AvailableSSIDs
"Meta" .Meta
}}
</div>
</div>

{{$wlan0Internet := .Data.Wlan0InternetConnProfile}}
{{$wlan0Hotspot := .Data.Wlan0HotspotConnProfile}}
{{if and $wlan0Hotspot.HasData}}
<p class="two-card-width">
This machine can try to temporarily switch between connecting to the external network
and making the hotspot, before the next boot:
</p>
{{else}}
<p class="two-card-width">
This machine can try to temporarily connect to the external network, before the next
boot:
</p>
{{end}}
<div class="field is-grouped">
<div class="control">
<form
action="{{.Meta.BasePath}}internet/conn-profiles/{{$wlan0Internet.Settings.Conn.UUID.String}}"
method="POST"
data-controller="form-submission"
data-action="submit->form-submission#submit"
data-form-submission-target="submitter"
class="mb-3"
>
<input type="hidden" name="state" value="activated-transiently">
<input type="hidden" name="redirect-target" value="{{urlJoin (dict
"path" .Meta.Path
"query" .Meta.Form.Encode
)}}">
<input
class="button is-primary"
type="submit"
value="Use external network now"
data-form-submission-target="submit"
>
</form>
</div>
{{if $wlan0Hotspot.HasData}}
<div class="control">
<form
action="{{.Meta.BasePath}}internet/conn-profiles/{{$wlan0Hotspot.Settings.Conn.UUID.String}}"
method="POST"
data-controller="form-submission"
data-action="submit->form-submission#submit"
data-form-submission-target="submitter"
class="mb-3"
>
<input type="hidden" name="state" value="activated-transiently">
<input type="hidden" name="redirect-target" value="{{urlJoin (dict
"path" .Meta.Path
"query" .Meta.Form.Encode
)}}">
<input
class="button is-primary"
type="submit"
value="Activate hotspot now"
data-form-submission-target="submit"
>
</form>
</div>
{{end}}
</div>
{{end}}

<h3 id="internet_wifi_devices">All modules</h3>
Expand Down
Loading