From b97884236cee197c29f0825920e9c088694124ef Mon Sep 17 00:00:00 2001
From: Brendan Early <mymindstorm@evermiss.net>
Date: Thu, 11 Jul 2019 10:25:34 -0500
Subject: [PATCH 1/2] manual entry improvements (#306)

---
 _locales/en/messages.json               | 11 +++-
 src/components/Popup/AddAccountPage.vue | 75 +++++++++++++++++--------
 2 files changed, 62 insertions(+), 24 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bb9353304..f4477898d 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -52,7 +52,7 @@
         "description": "Account."
     },
     "accountName": {
-        "message": "Account Name",
+        "message": "Username",
         "description": "Account Name."
     },
     "issuer": {
@@ -303,5 +303,14 @@
     },
     "loading": {
         "message": "Loading..."
+    },
+    "advanced": {
+        "message": "Advanced"
+    },
+    "period": {
+        "message": "Period"
+    },
+    "type": {
+        "message": "Type"
     }
 }
diff --git a/src/components/Popup/AddAccountPage.vue b/src/components/Popup/AddAccountPage.vue
index d5d493a6c..64e1dfc33 100644
--- a/src/components/Popup/AddAccountPage.vue
+++ b/src/components/Popup/AddAccountPage.vue
@@ -1,15 +1,29 @@
 <template>
   <div>
-    <label>{{ i18n.accountName }}</label>
-    <input type="text" class="input" v-model="newAccount.account">
+    <label>{{ i18n.issuer }}</label>
+    <input type="text" class="input" v-model="newAccount.issuer" />
     <label>{{ i18n.secret }}</label>
-    <input type="text" class="input" v-model="newAccount.secret">
-    <select v-model="newAccount.type">
-      <option v-bind:value="OTPType.totp">{{ i18n.based_on_time }}</option>
-      <option v-bind:value="OTPType.hotp">{{ i18n.based_on_counter }}</option>
-      <option v-bind:value="OTPType.battle">Battle.net</option>
-      <option v-bind:value="OTPType.steam">Steam</option>
-    </select>
+    <input type="text" class="input" v-model="newAccount.secret" />
+    <details>
+      <summary>{{ i18n.advanced }}</summary>
+      <label>{{ i18n.accountName }}</label>
+      <input type="text" class="input" v-model="newAccount.account" />
+      <label>{{ i18n.period }}</label>
+      <input
+        type="number"
+        min="1"
+        class="input"
+        v-model.number="newAccount.period"
+        v-bind:disabled="newAccount.type === OTPType.hotp"
+      />
+      <label class="combo-label">{{ i18n.type }}</label>
+      <select v-model="newAccount.type">
+        <option v-bind:value="OTPType.totp">{{ i18n.based_on_time }}</option>
+        <option v-bind:value="OTPType.hotp">{{ i18n.based_on_counter }}</option>
+        <option v-bind:value="OTPType.battle">Battle.net</option>
+        <option v-bind:value="OTPType.steam">Steam</option>
+      </select>
+    </details>
     <div class="button-small" v-on:click="addNewAccount()">{{ i18n.ok }}</div>
   </div>
 </template>
@@ -17,27 +31,30 @@
 import Vue from "vue";
 import { mapState } from "vuex";
 import { OTPType, OTPEntry } from "../../models/otp";
-import * as CryptoJS from 'crypto-js';
+import * as CryptoJS from "crypto-js";
 
 export default Vue.extend({
-  data: function () {
+  data: function() {
     return {
       newAccount: {
+        issuer: "",
         account: "",
         secret: "",
-        type: OTPType.totp
+        type: OTPType.totp,
+        period: 30
       }
     };
   },
   computed: mapState("accounts", ["OTPType"]),
   methods: {
     async addNewAccount() {
-      this.newAccount.secret = this.newAccount.secret.replace(/ /g, '');
+      this.newAccount.secret = this.newAccount.secret.replace(/ /g, "");
+
       if (
         !/^[a-z2-7]+=*$/i.test(this.newAccount.secret) &&
         !/^[0-9a-f]+$/i.test(this.newAccount.secret)
       ) {
-        this.$store.commit('notification/alert', this.i18n.errorsecret)
+        this.$store.commit("notification/alert", this.i18n.errorsecret);
         return;
       }
       let type: OTPType;
@@ -56,22 +73,34 @@ export default Vue.extend({
       } else {
         type = this.newAccount.type;
       }
-      const entry = new OTPEntry({ 
+
+      if (type === OTPType.hhex || type === OTPType.hotp) {
+        this.newAccount.period = NaN;
+      } else if (
+        this.newAccount.period < 1 ||
+        typeof this.newAccount.period !== "number"
+      ) {
+        this.newAccount.period = NaN;
+      }
+
+      const entry = new OTPEntry({
         type,
         index: 0,
-        issuer: '',
+        issuer: this.newAccount.issuer,
         account: this.newAccount.account,
         encrypted: false,
         hash: CryptoJS.MD5(this.newAccount.secret).toString(),
         secret: this.newAccount.secret,
-        counter: 0
-        }
-      );
+        counter: 0,
+        period: this.newAccount.period
+      });
+
       await entry.create(this.$store.state.accounts.encryption);
-      await this.$store.dispatch('accounts/updateEntries');
-      this.$store.commit('style/hideInfo');
-      this.$store.commit('style/toggleEdit');
-      const codes = document.getElementById('codes');
+      await this.$store.dispatch("accounts/updateEntries");
+      this.$store.commit("style/hideInfo");
+      this.$store.commit("style/toggleEdit");
+
+      const codes = document.getElementById("codes");
       if (codes) {
         // wait vue apply changes to dom
         setTimeout(() => {

From 16f20c87f95a3c5bd8ab74b881200b2642b15573 Mon Sep 17 00:00:00 2001
From: Brendan Early <mymindstorm@evermiss.net>
Date: Thu, 8 Aug 2019 15:59:31 -0500
Subject: [PATCH 2/2] NaN => undefined

---
 src/components/Popup/AddAccountPage.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Popup/AddAccountPage.vue b/src/components/Popup/AddAccountPage.vue
index 64e1dfc33..2f56c0c83 100644
--- a/src/components/Popup/AddAccountPage.vue
+++ b/src/components/Popup/AddAccountPage.vue
@@ -34,14 +34,22 @@ import { OTPType, OTPEntry } from "../../models/otp";
 import * as CryptoJS from "crypto-js";
 
 export default Vue.extend({
-  data: function() {
+  data: function(): {
+    newAccount: {
+      issuer: string;
+      account: string;
+      secret: string;
+      type: OTPType;
+      period: number | undefined;
+    };
+  } {
     return {
       newAccount: {
         issuer: "",
         account: "",
         secret: "",
         type: OTPType.totp,
-        period: 30
+        period: undefined
       }
     };
   },
@@ -75,12 +83,12 @@ export default Vue.extend({
       }
 
       if (type === OTPType.hhex || type === OTPType.hotp) {
-        this.newAccount.period = NaN;
+        this.newAccount.period = undefined;
       } else if (
-        this.newAccount.period < 1 ||
-        typeof this.newAccount.period !== "number"
+        typeof this.newAccount.period !== "number" ||
+        this.newAccount.period < 1
       ) {
-        this.newAccount.period = NaN;
+        this.newAccount.period = undefined;
       }
 
       const entry = new OTPEntry({