Merge pull request #213 from JsSucks/ui

Securekvp

client/src/data/user.settings.default.json

@@ -172,7 +172,7 @@
                 "settings": [
                     {
                         "id": "e2ekvps",
-                        "type": ["kvp"],
+                        "type": [ "securekvp" ],
                         "value": []
                     }
                 ]

client/src/structs/settings/setting.js

@@ -21,6 +21,7 @@ import GuildSetting from './types/guild';
 import ArraySetting from './types/array';
 import CollectionSetting from './types/collection';
 import KvpSetting from './types/kvp';
+import SecureKvpSetting from './types/securekvp';
 import CustomSetting from './types/custom';
 
 export default class Setting {
@@ -44,6 +45,7 @@ export default class Setting {
         else if (args.type === 'array') return new ArraySetting(args, ...merge);
         else if (args.type === 'collection') return new CollectionSetting(args, ...merge);
         else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
+        else if (args.type === 'securekvp') return new SecureKvpSetting(args, ...merge);
         else if (args.type === 'custom') return new CustomSetting(args, ...merge);
         else throw {message: `Setting type ${args.type} unknown`};
     }

client/src/structs/settings/types/securekvp.js

@@ -0,0 +1,20 @@
+/**
+ * BetterDiscord Secure Key Value Pair Setting Struct
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import Kvp from './kvp';
+
+export default class SecureKvpSetting extends Kvp {
+    /**
+     * The value to use when the setting doesn't have a value.
+     */
+    get defaultValue() {
+        return { key: 'Key', value: '**********' };
+    }
+}

client/src/ui/components/bd/setting/SecureKeyValuePair.vue

@@ -0,0 +1,57 @@
+/**
+ * BetterDiscord Setting Secure Key Value Pair Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div class="bd-formKvp">
+        <div class="bd-formKvpDetails">
+            <div class="bd-inputWrapper">
+                <input type="text" class="bd-textInput" :value="setting.value.key" @keyup.stop="keyUpKey" @input="keyChange" />
+            </div>
+            <div class="bd-inputWrapper">
+                <input type="password" class="bd-textInput" :value="setting.value.value" @keyup.stop="keyUpValue" @blur="valueBlur" @input="valueChange" ref="valueInput" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import aes256 from 'aes256';
+    export default {
+        data() {
+            return {
+                masterKey: 'temporarymasterkey',
+                valueChanged: false
+            }
+        },
+        props: ['setting'],
+        methods: {
+            keyChange(e) {
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
+            },
+            valueChange(e) {
+                this.valueChanged = true;
+            },
+            valueBlur(e) {
+                if (!this.valueChanged) return;
+                const value = aes256.encrypt(this.masterKey, e.target.value);
+                this.setting.value = { key: this.setting.value.key, value }
+                this.valueChanged = false;
+            },
+            keyUpKey(e) {
+                if (e.key !== 'Enter') return;
+                this.$refs.valueInput.focus();
+            },
+            keyUpValue(e) {
+                if (e.key !== 'Enter') return;
+                e.target.blur();
+            }
+        }
+    }
+</script>

client/src/ui/components/bd/setting/Setting.vue

@@ -24,6 +24,7 @@
         <ArraySetting v-else-if="setting.type === 'array'" :setting="setting" />
         <Collection v-else-if="setting.type === 'collection'" :setting="setting" />
         <KeyValuePair v-else-if="setting.type === 'kvp'" :setting="setting" />
+        <SecureKeyValuePair v-else-if="setting.type === 'securekvp'" :setting="setting" />
         <CustomSetting v-else-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
@@ -45,6 +46,7 @@
     import ArraySetting from './Array.vue';
     import Collection from './Collection.vue';
     import KeyValuePair from './KeyValuePair.vue';
+    import SecureKeyValuePair from './SecureKeyValuePair.vue';
     import CustomSetting from './Custom.vue';
 
     export default {
@@ -66,6 +68,7 @@
             ArraySetting,
             Collection,
             KeyValuePair,
+            SecureKeyValuePair,
             CustomSetting
         },
         computed: {

package-lock.json

@@ -55,6 +55,12 @@
         }
       }
     },
+    "aes256": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/aes256/-/aes256-1.0.4.tgz",
+      "integrity": "sha512-yuaKOdoKebChkP+uRsQovWsJYm6qf58cQTvXBu6MM0BMnrXZ9SXEiXREBuU513ZRr+Uo2qX/Ci6EODLUu/qiHA==",
+      "dev": true
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "node-sass": "^4.9.2"
   },
   "devDependencies": {
+    "aes256": "^1.0.4",
     "archiver": "^2.1.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",