Переход на quasar

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -472,20 +472,15 @@ class SettingsPage extends Vue {
 
     async enterServerStorageKey(key) {
         try {
-            const result = await this.$prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
+            const result = await this.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
-                    `<br><br>Введите новый ключ доступа:`, '', {
+                    `<br><br>Введите новый ключ доступа:`, ' ', {
-                dangerouslyUseHTMLString: true,
-                confirmButtonText: 'OK',
-                cancelButtonText: 'Отмена',
                 inputValidator: (str) => { if (str && utils.fromBase58(str).length == 32) return true; else return 'Неверный формат ключа'; },
                 inputValue: (key && _.isString(key) ? key : null),
-                customClass: 'prompt-dialog',
-                type: 'warning',
             });
-
+/*
             if (result.value && utils.fromBase58(result.value).length == 32) {
                 this.commit('reader/setServerStorageKey', result.value);
-            }
+            }*/
         } catch (e) {
             //
         }

client/components/share/StdDialog.vue

@@ -1,7 +1,8 @@
 <template>
-    <q-dialog ref="dialog" v-model="active" @hide="onHide">
+    <q-dialog ref="dialog" v-model="active" @show="onShow" @hide="onHide">
         <slot></slot>
 
+        <!--------------------------------------------------->
         <div v-show="type == 'alert'" class="column bg-white">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
@@ -24,6 +25,7 @@
             </div>
         </div>
 
+        <!--------------------------------------------------->
         <div v-show="type == 'confirm'" class="column bg-white">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
@@ -46,6 +48,31 @@
                 <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
             </div>
         </div>
+
+        <!--------------------------------------------------->
+        <div v-show="type == 'prompt'" class="column bg-white">
+            <div class="header row">
+                <div class="caption col row items-center q-ml-md">
+                    <q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
+                    <div v-html="caption"></div>
+                </div>
+                <div class="close-icon column justify-center items-center">
+                    <q-btn flat round dense v-close-popup>
+                        <q-icon name="la la-times" size="18px"></q-icon>
+                    </q-btn>
+                </div>
+            </div>
+
+            <div class="col q-mx-md">
+                <div v-html="message"></div>
+                <q-input ref="input" outlined dense v-model="inputValue"/>                
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
+                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
+            </div>
+        </div>
     </q-dialog>
 </template>
 
@@ -63,6 +90,7 @@ class StdDialog extends Vue {
     message = '';
     active = false;
     type = '';
+    inputValue = '';
 
     created() {
         if (this.$root.addKeyHook) {
@@ -85,6 +113,12 @@ class StdDialog extends Vue {
         }
     }
 
+    onShow() {
+        if (this.type == 'prompt') {
+            this.$refs.input.focus();
+        }
+    }
+
     okClick() {
         this.ok = true;
     }
@@ -123,6 +157,25 @@ class StdDialog extends Vue {
         });
     }
 
+    prompt(message, caption, opts) {
+        return new Promise((resolve) => {
+            this.init(message, caption);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.type = 'prompt';
+            this.inputValue = opts.inputValue || '';
+            this.inputValidator = opts.inputValidator || null;
+            this.active = true;
+        });
+    }
+
     keyHook(event) {
         if (this.active && event.code == 'Enter') {
             this.okClick();