WiFi dialog: Turn WiFi country code field into a <select> (#1820)

Related #131, part (h).
Stacked on #1819.

This PR turns the free text input field for the country code in the WiFi
dialog into a `<select>` dropdown, to make it easier for users to choose
their correct and applicable country code value.

<img width="811" alt="Screenshot 2024-07-05 at 08 21 33"
src="https://github.com/tiny-pilot/tinypilot/assets/83721279/34b6469b-3681-4545-af26-1e6a567c4756">

A few notes:

- I thought the simplest approach to retrieve the available country
codes was by copying them over from the
`/usr/share/zoneinfo/iso3166.tab` file. An alternative would be to parse
the file in the backend, and retrieve the list dynamically via an API
endpoint. That would then also allow us to validate the input value
against this list in the request parser. However, I think the
cost<>benefit ratio of such an implementation would be questionable,
especially considering that [the ISO definitions don’t seem to change
very often](http://www.statoids.com/w3166his.html).
- I adjusted the input field label from “Country Code” to “Country”. I
still suggest to display the country codes in the options (e.g., `United
States (US)`) for informational reasons, to satisfy both technical and
non-technical users.
- I removed the `size` attribute of the `<input>` field in favor of a
`width`, to make the sizing match the one of the `<select>` field. The
latter has slightly different box sizing behaviour, so it’s width
differs by `1em`.
<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1820"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <[email protected]>

app/static/js/wifi.js

@@ -0,0 +1,259 @@
+/**
+ * List of all possible WiFi country codes according to ISO 3166-1 alpha-2.
+ *
+ * Last update: 2024-07-05.
+ *
+ * This list was ported from the following file (included on RaspberryPi OS):
+ *     /usr/share/zoneinfo/iso3166.tab
+ */
+export const COUNTRY_CODES = {
+  AD: "Andorra",
+  AE: "United Arab Emirates",
+  AF: "Afghanistan",
+  AG: "Antigua & Barbuda",
+  AI: "Anguilla",
+  AL: "Albania",
+  AM: "Armenia",
+  AO: "Angola",
+  AQ: "Antarctica",
+  AR: "Argentina",
+  AS: "Samoa (American)",
+  AT: "Austria",
+  AU: "Australia",
+  AW: "Aruba",
+  AX: "Åland Islands",
+  AZ: "Azerbaijan",
+  BA: "Bosnia & Herzegovina",
+  BB: "Barbados",
+  BD: "Bangladesh",
+  BE: "Belgium",
+  BF: "Burkina Faso",
+  BG: "Bulgaria",
+  BH: "Bahrain",
+  BI: "Burundi",
+  BJ: "Benin",
+  BL: "St Barthelemy",
+  BM: "Bermuda",
+  BN: "Brunei",
+  BO: "Bolivia",
+  BQ: "Caribbean NL",
+  BR: "Brazil",
+  BS: "Bahamas",
+  BT: "Bhutan",
+  BV: "Bouvet Island",
+  BW: "Botswana",
+  BY: "Belarus",
+  BZ: "Belize",
+  CA: "Canada",
+  CC: "Cocos (Keeling) Islands",
+  CD: "Congo (Dem. Rep.)",
+  CF: "Central African Rep.",
+  CG: "Congo (Rep.)",
+  CH: "Switzerland",
+  CI: "Côte d'Ivoire",
+  CK: "Cook Islands",
+  CL: "Chile",
+  CM: "Cameroon",
+  CN: "China",
+  CO: "Colombia",
+  CR: "Costa Rica",
+  CU: "Cuba",
+  CV: "Cape Verde",
+  CW: "Curaçao",
+  CX: "Christmas Island",
+  CY: "Cyprus",
+  CZ: "Czech Republic",
+  DE: "Germany",
+  DJ: "Djibouti",
+  DK: "Denmark",
+  DM: "Dominica",
+  DO: "Dominican Republic",
+  DZ: "Algeria",
+  EC: "Ecuador",
+  EE: "Estonia",
+  EG: "Egypt",
+  EH: "Western Sahara",
+  ER: "Eritrea",
+  ES: "Spain",
+  ET: "Ethiopia",
+  FI: "Finland",
+  FJ: "Fiji",
+  FK: "Falkland Islands",
+  FM: "Micronesia",
+  FO: "Faroe Islands",
+  FR: "France",
+  GA: "Gabon",
+  GB: "Britain (UK)",
+  GD: "Grenada",
+  GE: "Georgia",
+  GF: "French Guiana",
+  GG: "Guernsey",
+  GH: "Ghana",
+  GI: "Gibraltar",
+  GL: "Greenland",
+  GM: "Gambia",
+  GN: "Guinea",
+  GP: "Guadeloupe",
+  GQ: "Equatorial Guinea",
+  GR: "Greece",
+  GS: "South Georgia & the South Sandwich Islands",
+  GT: "Guatemala",
+  GU: "Guam",
+  GW: "Guinea-Bissau",
+  GY: "Guyana",
+  HK: "Hong Kong",
+  HM: "Heard Island & McDonald Islands",
+  HN: "Honduras",
+  HR: "Croatia",
+  HT: "Haiti",
+  HU: "Hungary",
+  ID: "Indonesia",
+  IE: "Ireland",
+  IL: "Israel",
+  IM: "Isle of Man",
+  IN: "India",
+  IO: "British Indian Ocean Territory",
+  IQ: "Iraq",
+  IR: "Iran",
+  IS: "Iceland",
+  IT: "Italy",
+  JE: "Jersey",
+  JM: "Jamaica",
+  JO: "Jordan",
+  JP: "Japan",
+  KE: "Kenya",
+  KG: "Kyrgyzstan",
+  KH: "Cambodia",
+  KI: "Kiribati",
+  KM: "Comoros",
+  KN: "St Kitts & Nevis",
+  KP: "Korea (North)",
+  KR: "Korea (South)",
+  KW: "Kuwait",
+  KY: "Cayman Islands",
+  KZ: "Kazakhstan",
+  LA: "Laos",
+  LB: "Lebanon",
+  LC: "St Lucia",
+  LI: "Liechtenstein",
+  LK: "Sri Lanka",
+  LR: "Liberia",
+  LS: "Lesotho",
+  LT: "Lithuania",
+  LU: "Luxembourg",
+  LV: "Latvia",
+  LY: "Libya",
+  MA: "Morocco",
+  MC: "Monaco",
+  MD: "Moldova",
+  ME: "Montenegro",
+  MF: "St Martin (French)",
+  MG: "Madagascar",
+  MH: "Marshall Islands",
+  MK: "North Macedonia",
+  ML: "Mali",
+  MM: "Myanmar (Burma)",
+  MN: "Mongolia",
+  MO: "Macau",
+  MP: "Northern Mariana Islands",
+  MQ: "Martinique",
+  MR: "Mauritania",
+  MS: "Montserrat",
+  MT: "Malta",
+  MU: "Mauritius",
+  MV: "Maldives",
+  MW: "Malawi",
+  MX: "Mexico",
+  MY: "Malaysia",
+  MZ: "Mozambique",
+  NA: "Namibia",
+  NC: "New Caledonia",
+  NE: "Niger",
+  NF: "Norfolk Island",
+  NG: "Nigeria",
+  NI: "Nicaragua",
+  NL: "Netherlands",
+  NO: "Norway",
+  NP: "Nepal",
+  NR: "Nauru",
+  NU: "Niue",
+  NZ: "New Zealand",
+  OM: "Oman",
+  PA: "Panama",
+  PE: "Peru",
+  PF: "French Polynesia",
+  PG: "Papua New Guinea",
+  PH: "Philippines",
+  PK: "Pakistan",
+  PL: "Poland",
+  PM: "St Pierre & Miquelon",
+  PN: "Pitcairn",
+  PR: "Puerto Rico",
+  PS: "Palestine",
+  PT: "Portugal",
+  PW: "Palau",
+  PY: "Paraguay",
+  QA: "Qatar",
+  RE: "Réunion",
+  RO: "Romania",
+  RS: "Serbia",
+  RU: "Russia",
+  RW: "Rwanda",
+  SA: "Saudi Arabia",
+  SB: "Solomon Islands",
+  SC: "Seychelles",
+  SD: "Sudan",
+  SE: "Sweden",
+  SG: "Singapore",
+  SH: "St Helena",
+  SI: "Slovenia",
+  SJ: "Svalbard & Jan Mayen",
+  SK: "Slovakia",
+  SL: "Sierra Leone",
+  SM: "San Marino",
+  SN: "Senegal",
+  SO: "Somalia",
+  SR: "Suriname",
+  SS: "South Sudan",
+  ST: "Sao Tome & Principe",
+  SV: "El Salvador",
+  SX: "St Maarten (Dutch)",
+  SY: "Syria",
+  SZ: "Eswatini (Swaziland)",
+  TC: "Turks & Caicos Is",
+  TD: "Chad",
+  TF: "French S. Terr.",
+  TG: "Togo",
+  TH: "Thailand",
+  TJ: "Tajikistan",
+  TK: "Tokelau",
+  TL: "East Timor",
+  TM: "Turkmenistan",
+  TN: "Tunisia",
+  TO: "Tonga",
+  TR: "Turkey",
+  TT: "Trinidad & Tobago",
+  TV: "Tuvalu",
+  TW: "Taiwan",
+  TZ: "Tanzania",
+  UA: "Ukraine",
+  UG: "Uganda",
+  UM: "US minor outlying islands",
+  US: "United States",
+  UY: "Uruguay",
+  UZ: "Uzbekistan",
+  VA: "Vatican City",
+  VC: "St Vincent",
+  VE: "Venezuela",
+  VG: "Virgin Islands (UK)",
+  VI: "Virgin Islands (US)",
+  VN: "Vietnam",
+  VU: "Vanuatu",
+  WF: "Wallis & Futuna",
+  WS: "Samoa (western)",
+  YE: "Yemen",
+  YT: "Mayotte",
+  ZA: "South Africa",
+  ZM: "Zambia",
+  ZW: "Zimbabwe",
+};

app/templates/custom-elements/wifi-dialog.html

@@ -47,6 +47,14 @@
       gap: 0.5em;
     }
 
+    .input-row input {
+      width: 20em;
+    }
+
+    .input-row select {
+      width: 21em;
+    }
+
     .button-container {
       margin-top: 1em;
     }
@@ -76,7 +84,6 @@ <h3>Wi-Fi Credentials</h3>
         <input
           type="text"
           id="ssid-input"
-          size="30"
           class="monospace"
           autocomplete="off"
           autocorrect="off"
@@ -90,7 +97,6 @@ <h3>Wi-Fi Credentials</h3>
         <input
           type="password"
           id="psk-input"
-          size="30"
           class="monospace"
           autocomplete="off"
           autocorrect="off"
@@ -100,19 +106,10 @@ <h3>Wi-Fi Credentials</h3>
         />
       </div>
       <div class="input-row">
-        <label for="country-code-input">Country Code:</label>
-        <input
-          type="text"
-          id="country-code-input"
-          size="4"
-          maxlength="2"
-          class="monospace"
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-          placeholder="US"
-        />
+        <label for="country-code-input">Country:</label>
+        <select id="country-code-input">
+          <!-- Filled programmatically -->
+        </select>
       </div>
     </div>
     <inline-message variant="error" id="input-error">
@@ -164,6 +161,7 @@ <h3>Wi-Fi Credentials Removed</h3>
     enableWifi,
     disableWifi,
   } from "/js/controllers.js";
+  import { COUNTRY_CODES } from "/js/wifi.js";
 
   (function () {
     const template = document.querySelector("#wifi-template");
@@ -224,6 +222,13 @@ <h3>Wi-Fi Credentials Removed</h3>
               this.dispatchEvent(new DialogClosedEvent());
             })
           );
+          Object.entries(COUNTRY_CODES)
+            .sort(([, nameA], [, nameB]) => nameA.localeCompare(nameB))
+            .forEach(([code, name]) =>
+              this._elements.countryCodeInput.add(
+                new Option(`${name} (${code})`, code)
+              )
+            );
         }
 
         get _state() {
@@ -258,7 +263,10 @@ <h3>Wi-Fi Credentials Removed</h3>
           }
 
           this._elements.ssidInput.value = wifiSettings.ssid;
-          this._elements.countryCodeInput.value = wifiSettings.countryCode;
+          // Preselect the US country code as initial value, (a) as demo value,
+          // and (b) because it probably fits most users anyway.
+          this._elements.countryCodeInput.value =
+            wifiSettings.countryCode || "US";
           this._elements.pskInput.value = "";
           this._initialWiFiSettings = { psk: "", ...wifiSettings };