Added labels, made options optional, default selected option

src/pages/basicDashboard/InternetSetup.vue

@@ -1,67 +1,181 @@
+<script lang="ts" setup>
+  import { shallowRef } from 'vue'
+  const pageTitle="Internet Setup"
+
+  interface Sections {
+    title?: string,
+    id: string,
+    selectedRadio?: number,
+    forms?: {
+      name?: string,
+      class: string,
+      option: string,
+      label?: string,
+    }[]
+  }
+
+  const sections = shallowRef<Sections[]>([]);
+
+  sections.value = [
+    {
+      title: "Does your internet require a login?",
+      id: "internetSetupLogin",
+      selectedRadio: 0,
+      forms: [
+        {
+          name: "internetLoginOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Yes",
+        },
+        {
+          name: "internetLoginOption",
+          class: "selectOption",
+          option: "radio",
+          label: "No",
+        },
+        {
+          name: "internetLoginInput",
+          class: "inputOption",
+          option: "text",
+          label: "Username/Email",
+        },
+        {
+          name: "internetLoginInput",
+          class: "inputOption",
+          option: "password",
+          label: "Password",
+        }
+      ]
+    },
+    {
+      title: "Internet IP Address",
+      id: "internetSetupIP",
+      selectedRadio: 0,
+      forms: [
+        {
+          name: "internetIPOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Dynamic IP from ISP",
+        },
+        {
+          name: "internetIPOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Static IP from ISP",
+        },
+        {
+          name: "internetIPInput",
+          class: "inputOption",
+          option: "text",
+          label: "IP Address"
+        },
+        {
+          name: "internetIPInput",
+          class: "inputOption",
+          option: "text",
+          label: "IP Subnet Mask"
+        },
+        {
+          name: "internetIPInput",
+          class: "inputOption",
+          option: "text",
+          label: "Gateway IP Address"
+        },
+      ]
+    },
+    {
+      title: "DNS (Domain Name Server) Address",
+      id: "internetSetupDNS",
+      selectedRadio: 0,
+      forms: [
+        {
+          name: "internetDNSOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Automatic DNS from ISP",
+        },
+        {
+          name: "internetDNSOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Select DNS Servers",
+        },
+        {
+          name: "internetDNSInput",
+          class: "inputOption",
+          option: "text",
+          label: "Primary DNS"
+        },
+        {
+          name: "internetDNSInput",
+          class: "inputOption",
+          option: "text",
+          label: "Secondary DNS"
+        },
+      ]
+    }, {
+      title: "Router MAC Address",
+      id: "internetSetupMAC",
+      selectedRadio: 0,
+      forms: [
+        {
+          name: "internetMACOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Default Address",
+        },
+        {
+          name: "internetMACOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Computer MAC Address",
+        },
+        {
+          name: "internetMACOption",
+          class: "selectOption",
+          option: "radio",
+          label: "Specific MAC Address",
+        },
+        {
+          name: "internetMACInput",
+          class: "inputOption",
+          option: "text",
+          label: "MAC Address",
+        },
+      ]
+    }
+  ]
+</script>
+
 <template>
   <div id="internetSetupComponent">
-    <h2 class="title">Internet Setup</h2>
+    <h2 class="title">{{ pageTitle }}</h2>
-    <section id="internetSetupLogin">
+    <section 
-      <h3>Does your internet connection require a login?</h3>
+      v-for="section in sections" 
-      <!-- Backend required to finish -->
+      :id="section.id" 
-      <form>
+      :key="section.id"
-        <label class="selectOption">
+    >
-          <input type="radio" name="internetLoginOption" value="1">
+      <h3>{{ section.title }}</h3>
-          Yes
+      <form v-if="section.forms">
-        </label>
+        <label 
-        <label class="selectOption">
+          :class="form.class" 
-          <input type="radio" name="internetLoginOption" value="2">
+          v-for="(form, index) in section.forms"
-          No
+        >
+          <input
+            :type="form.option"
+            :name="form.name" 
+            :value="form.option === 'radio' ? index : ''" 
+            :checked="section.selectedRadio === index" 
+            :key="form.label"
+          >
+          {{ form.label }}
         </label>
       </form>
-    </section>
+      <template v-else></template>
       <div class="seperator"></div>
-    <section id="internetSetupIP">
-      <h3>Internet IP Address</h3>
-      <form>
-        <label class="selectOption">
-          <input type="radio" name="internetIPOption" value="1">
-          Dynamic IP from ISP
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetIPOption" value="2">
-          Static IP from ISP
-        </label>
-      </form>
     </section>
-    <div class="seperator"></div>
-    <section>
-      <h3>DNS (Domain Name Server) Address</h3>
-      <form>
-        <label class="selectOption">
-          <input type="radio" name="internetDNSOption" value="1">
-          Automatic DNS from ISP
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetDNSOption" value="2">
-          Select DNS Servers
-        </label>
-      </form>
-    </section>
-    <div class="seperator"></div>
-    <section>
-      <h3>Router MAC Address</h3>
-      <form>
-        <label class="selectOption">
-          <input type="radio" name="internetMACOption" value="1">
-          Default Address
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetMACOption" value="2">
-          Computer MAC Address
-        </label>
-        <label class="selectOption">
-          <input type="radio" name="internetMACOption" value="2">
-          Specific MAC Adress
-        </label>
-      </form>
-    </section>
-    <div class="seperator"></div>
   </div>
 </template>
 

src/pages/basicDashboard/Wireless.vue

@@ -35,7 +35,7 @@
           <input type="checkbox">
           Enable 20/40 MHz Coexistence
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
           Name (SSID)
         </label>
@@ -87,7 +87,7 @@
           </label>
           Security Options
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="password" name="wirelessName" value="SomeRandomPassword"/>
           Password (Network)
         </label>
@@ -105,7 +105,7 @@
           <input type="checkbox">
           Enable 20/40 MHz Coexistence
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="text" name="wirelessName" value="SomeRandomNetwork"/>
           Name (SSID)
         </label>
@@ -157,7 +157,7 @@
           </label>
           Security Options
         </label>
-        <label class="inputName">
+        <label class="inputOption">
           <input type="password" name="wirelessName" value="SomeRandomPassword"/>
           Password (Network)
         </label>

src/styles/basicDashboard.css

@@ -130,6 +130,9 @@
     gap: 10px;
   }
 
+  .seperator {
+    margin-top: 20px;
+  }
   .selectOption {
     display: flex;
     align-items: center;
@@ -142,7 +145,7 @@
     user-select: none;
     cursor: pointer;
   }
-  .inputName {
+  .inputOption {
     display: flex;
     flex-direction: column-reverse;
     input {