feat(config): make timezone, locale, username and password editable

.vitepress/theme/custom.css

@@ -15,14 +15,21 @@
   margin-bottom: 1em;
 }
 
-.form-cell input[type="text"] {
+.form-cell input[type="text"],
+.form-cell select {
   border: 1px solid rgb(60, 60, 67);
   display: block;
   padding: 0.25em 0.5em;
   border-radius: 0.25em;
   min-width: 40em;
+  max-width: 40em;
+  background: transparent;
+  appearance: auto;
+  -webkit-appearance: auto;
 }
-.form-cell input[type="text"]:focus {
+
+.form-cell input[type="text"]:focus,
+.form-cell select:focus {
   border: 1px solid #0c78fc;
 }
 .nix-code {

components/ConfigForm.vue

@@ -2,7 +2,13 @@
 import NixCode from "./NixCode.vue"
 import NixForm from "./NixForm.vue"
 import { provide, ref } from 'vue'
+import { listTz, clientTz } from 'timezone-select-js';
 
+const availableLanguages = {
+  'en_US.UTF-8': 'English',
+  'fr_FR.UTF-8': 'Francais'
+}
+const availableTimezones = listTz() 
 let nixin = {
   netconf: 'autoconfig',
   networkingHostname: '',
@@ -66,12 +72,11 @@ let nixin = {
     }],
   bundles: [],
   services: [],
-  timezone: 'Etc/UTC',
+  timezone: 'Europe/Belfast', // default to UTC but could be found with clientTz(),
   locale: 'en_US.UTF-8',
-  user: 'operator',
+  operatingUser: 'operator',
-  userPassword: 'CHANGE ME !!!',
+  operatingUserPassword: 'CHANGE ME !!!',
 }
-
 nixin.availableServices.forEach((s) => {
   s.inBundle = []
 })
@@ -175,10 +180,34 @@ function selectServices(bundleId, services) {
   </div>
 
   <h2>Other configuration</h2>
-  Operating UNIX user name<br />
+  <div class="form-row">
-  Operating UNIX user password<br />
+    <div class="form-cell">
-  Timezone<br />
+      <label>Operating UNIX user name</label>
-  Locale<br />
+      <input required type="text" v-model="nixin.operatingUser" />
+    </div>
+  </div>
+  <div class="form-row">
+    <div class="form-cell">
+      <label>Operating UNIX user password</label>
+      <input required type="text" v-model="nixin.operatingUserPassword" />
+    </div>
+  </div>
+  <div class="form-row">
+    <div class="form-cell">
+     <label>Timezone</label>
+     <select v-model="nixin.timezone">
+       <option v-for="tz in availableTimezones" :selected="nixin.timezone === tz.value" v-bind:value="tz.value">{{ tz.label }}</option>
+     </select>
+    </div>
+  </div>
+  <div class="form-row">
+    <div class="form-cell">
+     <label>Locale</label>
+     <select v-model="nixin.locale">
+       <option v-for="(lang, k) in availableLanguages" :selected="nixin.locale === k" v-bind:value="k">{{ lang }}</option>
+     </select>
+    </div>
+  </div>
 
   <h2>Auto-generated configuration.nix file</h2>
   <pre class="nix-code">
@@ -205,15 +234,15 @@ function selectServices(bundleId, services) {
 <NixCode :service="service"/>
 </div>
 
-  users.users.{{ nixin.user }} = {
+  users.users.{{ nixin.operatingUser }} = {
       isNormalUser = true;
       extraGroups = [ "wheel" ];
-      initialPassword = "{{ nixin.userPassword }}";
+      initialPassword = "{{ nixin.operatingUserPassword }}";
   };
 
   security.sudo.extraRules= [
     {
-      users = [ "{{ nixin.user }}" ];
+      users = [ "{{ nixin.operatingUser }}" ];
       commands = [
         { 
           command = "ALL" ;

package-lock.json

@@ -6,6 +6,9 @@
     "": {
       "name": "NixiN",
       "license": "AGPL-3.0",
+      "dependencies": {
+        "timezone-select-js": "^2.0.1"
+      },
       "devDependencies": {
         "vitepress": "^1.3.3"
       }
@@ -2262,6 +2265,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/timezone-select-js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/timezone-select-js/-/timezone-select-js-2.0.1.tgz",
+      "integrity": "sha512-alGTIkA0193yj+cE2oDa47VMrfYvJGgx6waZm1s0UnVF5hGYZGZkcfd2DtFqjf/v5Qs+Fl6hR7jeUrPMbfWLSg=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

package.json

@@ -13,5 +13,8 @@
   },
   "devDependencies": {
     "vitepress": "^1.3.3"
+  },
+  "dependencies": {
+    "timezone-select-js": "^2.0.1"
   }
 }