add input modal

TODO Option for masked input

client/src/builtin/E2EE.js

@@ -159,8 +159,13 @@ export default new class E2EE extends BuiltinModule {
 
     async enabled(e) {
         seed = Security.randomBytes();
-        // TODO Input modal for key
-        this.master = Security.encrypt(seed, TEMP_KEY);
+        let newMaster = '';
+        try {
+            newMaster = await Modals.input('E2EE', 'Master Key:').promise;
+        } catch (err) {
+            Toasts.error('Failed to set master key!');
+        }
+        this.master = Security.encrypt(seed, newMaster);
         this.patchDispatcher();
         this.patchMessageContent();
         const selector = '.' + WebpackModules.getClassName('channelTextArea', 'emojiButton');

client/src/styles/partials/modals/index.scss

@@ -7,3 +7,4 @@
 @import './error-modal.scss';
 @import './settings-modal.scss';
 @import './permission-modal.scss';
+@import './input-modal.scss';

client/src/styles/partials/modals/input-modal.scss

@@ -0,0 +1,8 @@
+.bd-inputModalBody {
+    display: flex;
+    flex-direction: column;
+
+    input {
+        margin-top: 5px;
+    }
+}

client/src/ui/components/bd/modals/InputModal.vue

@@ -0,0 +1,52 @@
+/**
+ * BetterDiscord Input Modal 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>
+    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
+        <div slot="body" class="bd-modal-basic-body bd-inputModalBody bd-form-textinput">
+            {{ modal.text }}
+            <input ref="input" type="text" @keyup.stop="keyup"/><!-- TODO Option for masked input -->
+        </div>
+        <div slot="footer" class="bd-modal-controls">
+            <div class="bd-flex-grow"></div>
+            <div class="bd-button bd-ok" @click="() => { modal.confirm(value); modal.close(); }">OK</div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+    // Imports
+    import { Modal } from '../../common';
+
+    export default {
+        data() {
+            return {
+                value: ''
+            }
+        },
+        props: ['modal'],
+        components: {
+            Modal
+        },
+        methods: {
+            keyup(e) {
+                if (e.key === 'Enter') {
+                    this.modal.confirm(this.value);
+                    this.modal.close();
+                    return;
+                }
+                this.value = e.target.value;
+            }
+        },
+        mounted() {
+            this.$refs.input.focus();
+        }
+    }
+</script>

client/src/ui/modals.js

@@ -16,6 +16,7 @@ import ConfirmModal from './components/bd/modals/ConfirmModal.vue';
 import ErrorModal from './components/bd/modals/ErrorModal.vue';
 import SettingsModal from './components/bd/modals/SettingsModal.vue';
 import PermissionModal from './components/bd/modals/PermissionModal.vue';
+import InputModal from './components/bd/modals/InputModal.vue';
 
 let modals = 0;
 
@@ -176,6 +177,19 @@ export default class Modals {
         return new Modal(modal, ConfirmModal);
     }
 
+    static input(title, text) {
+        return this.add(this.createInputModal(title, text));
+    }
+
+    static createInputModal(title, text) {
+        const modal = { title, text };
+        modal.promise = new Promise((resolve, reject) => {
+            modal.confirm = value => resolve(value);
+            modal.beforeClose = () => reject();
+        });
+        return new Modal(modal, InputModal);
+    }
+
     /**
      * Creates a new permissions modal and adds it to the open stack.
      * The modal will have a promise property that will be set to a Promise object that is resolved or rejected if the user accepts the permissions or closes the modal.