add personal data inputs

options/index.html

@@ -18,17 +18,65 @@
       <span class="sh">The number on the front of your card starting with <span class="ms">7081</span>.</span><br>
       <input name="bcnum" id="bcnum" type="text" pattern="70814[0-9]{11}" required
         title="Your BahnCard number is 16 digits long and starts with 7081." />
-        <button id="bcnum-get-from-profile">Get from profile (experimental)</button>
+      <button id="bcnum-get-from-profile">Get from profile (experimental)</button>
     </label>
     <label class="item">
       <span class="fh">Your date of birth</span><br>
       <input name="birthday" id="birthday" type="date" required />
     </label>
-    <label>
+    <label class="item">
       <span class="fh">Skip questionnaire</span><br>
       <span class="sh">Automatically answer "I was delayed, by more than 60 minutes."</span><br>
       <input name="autocontinue" id="autocontinue" type="checkbox" />
     </label>
+    <fieldset>
+      <legend>Address data</legend>
+      <label class="item">
+        <span class="fh">Title</span>
+        <select name="title" id="title">
+          <option value="">Please choose</option>
+          <option value="mr">Mr</option>
+          <option value="ms">Ms</option>
+        </select>
+      </label>
+      <label class="item">
+        <span class="fh">Name</span><br>
+        <input name="firstname" id="firstname" />
+      </label>
+      <label class="item">
+        <span class="fh">Surname</span><br>
+        <input name="surname" id="surname" />
+      </label>
+      <label class="item">
+        <span class="fh">Email address</span><br>
+        <input name="email" id="email" type="email" />
+      </label>
+      <label class="item">
+        <span class="fh">Street address</span><br>
+        <input name="addr1" id="addr1" placeholder="e.g. Hauptstraße 1a">
+      </label>
+      <label class="item">
+        <span class="fh">Postcode</span><bR>
+        <input name="postcode" id="postcode" />
+      </label>
+      <label class="item">
+        <span class="fh">Place</span><br>
+        <input name="placename" id="placename" />
+      </label>
+    </fieldset>
+    <fieldset>
+      <legend>Bank details</legend>
+      <label class="item">
+        <span class="fh">IBAN</span><br>
+        <span class="sh">Please make sure to enter any letters in upper case.</span>
+        <input name="iban" id="iban" pattern="[A-Z]{2}\d{2}[A-Z0-9]+" />
+      </label>
+      <label class="item">
+        <span class="fh">BIC</span><br>
+        <span class="sh">Bank Identifier Code for your bank. Can mostly be omitted.</span><br>
+        <input name="bic" id="bic" />
+      </label>
+    </fieldset>
     <div class="item"><button type="submit">Save</button><span id="success"></span></div>
     <p id="errors"></p>
   </form>

options/script.js

@@ -26,6 +26,27 @@ function luhnValidate(cardNumber) {
 
   return (total !== 0 && (total % 10) === 0);
 }
+function ibanLatinCharId(chr){
+  c = chr.charCodeAt(0);
+  if (c > 0x40 && c <= 0x5a) {
+    return chr.charCodeAt(0) - 0x40 + 9;
+  } else if (c > 0x60 && c <= 0x7a) {
+    return chr.charCodeAt(0) - 0x60 + 9;
+  }
+  return false;
+}
+function ibanValidate(iban){
+  iban = iban.toUpperCase();
+  countryId = iban.slice(0, 2);
+  checksum = iban.slice(2, 4);
+  countryDigits = countryId.split('').map(ibanLatinCharId).join('');
+  body = iban.substring(4);
+  processing = `${body}${countryDigits}${checksum}`;
+  resultingNumber = BigInt(processing, 10);
+  mod = resultingNumber % 97n;
+  return mod == 1;
+  
+}
 
 function putError(s){
   document.querySelector('#errors').textContent += s;
@@ -34,6 +55,13 @@ function clearError(){
   document.querySelector('#errors').textContent = "";
 }
 
+async function saveValueIfNotEmpty(k, v){
+  if (v!==""){
+    return browser.storage.sync.set({k:v})
+  }
+  return false
+}
+
 async function saveOptions(ev) {
   clearError();
   ev.preventDefault();
@@ -49,18 +77,44 @@ async function saveOptions(ev) {
   }
   let autoContinue = this.querySelector('#autocontinue').checked;
   let enable = this.querySelector('#enable').checked;
+  let title = this.querySelector('#title').value;
+  let firstName = this.querySelector('#firstname').value;
+  let surName = this.querySelector('#surname').value;
+  let emailAddress = this.querySelector('#email').value;
+  let streetAddr = this.querySelector('#addr1').value;
+  let postCode = this.querySelector('#postcode').value;
+  let placeName = this.querySelector('#placename').value;
+  let iban = this.querySelector('#iban').value;
+  if (iban != "" && !ibanValidate(iban)){
+    putError("Please check your IBAN for typing errors.");
+    return;
+  }
+  let bic = this.querySelector('#bic').value;
   let options = {
     bcnum: bcNum,
     bday: bDay,
-    autocontinue: autoContinue
+    autocontinue: autoContinue,
+    enable: enable,
+    addr__appellation: title,
+    addr__firstName: firstName,
+    addr__surName: surName,
+    addr__email: emailAddress,
+    addr__street: streetAddr,
+    addr__postcode: postCode,
+    addr__placename: placeName,
+    pymt__iban: iban,
+    pymt__bic: bic
   };
+  options = Object.fromEntries(Object.entries(options).filter(([k, v]) => v !== ""))
   console.log("saving", options);
+
   browser.storage.sync.set(options).then(() => {
     document.querySelector('#success').textContent = "✔";
     setTimeout(() => {
       document.querySelector('#success').textContent = '';
     }, 5000);
   })
+
 }
 
 async function restoreOptions() {

options/style.css

@@ -12,7 +12,7 @@ label.item {
   display: block;
 }
 
-input {
+input, select {
   margin: 8px 0px;
 }