From 90c41f3c371f63c9c5e36e1473a13bc85d73aee6 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Mon, 26 Sep 2022 18:19:46 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=B2=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=20=D0=BF=D0=B0=D1=80=D0=BE=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Api/Api.vue         |  6 ++-
 client/components/share/StdDialog.vue | 77 ++++++++++++++++++++++++---
 2 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/client/components/Api/Api.vue b/client/components/Api/Api.vue
index 6c98fc0..c9869d0 100644
--- a/client/components/Api/Api.vue
+++ b/client/components/Api/Api.vue
@@ -143,8 +143,12 @@ class Api {
 
 
     async showPasswordDialog() {
-        const result = await this.$root.stdDialog.prompt(`Введите пароль для доступа:`, ' ', {
+        const result = await this.$root.stdDialog.password(`Введите пароль для доступа:`, ' ', {
             inputValidator: (str) => (str ? true : 'Пароль не должен быть пустым'),
+            userName: 'access',
+            noEscDismiss: true,
+            noBackdropDismiss: true,
+            noCancel: true,
         });
 
         if (result && result.value) {
diff --git a/client/components/share/StdDialog.vue b/client/components/share/StdDialog.vue
index 0d00d0f..3d68e8c 100644
--- a/client/components/share/StdDialog.vue
+++ b/client/components/share/StdDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <q-dialog ref="dialog" v-model="active" no-route-dismiss @show="onShow" @hide="onHide">
+    <q-dialog ref="dialog" v-model="active" no-route-dismiss :no-esc-dismiss="noEscDismiss" :no-backdrop-dismiss="noBackdropDismiss" @show="onShow" @hide="onHide">
         <slot></slot>
 
         <!--------------------------------------------------->
@@ -62,7 +62,7 @@
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
                     <div v-html="caption"></div>
                 </div>
-                <div class="close-icon column justify-center items-center">
+                <div v-if="!noCancel" class="close-icon column justify-center items-center">
                     <q-btn v-close-popup flat round dense>
                         <q-icon name="la la-times" size="18px"></q-icon>
                     </q-btn>
@@ -78,7 +78,40 @@
             </div>
 
             <div class="buttons row justify-end q-pa-md">
-                <q-btn v-close-popup class="q-px-md q-ml-sm" dense no-caps>
+                <q-btn v-if="!noCancel" v-close-popup class="q-px-md q-ml-sm" dense no-caps>
+                    Отмена
+                </q-btn>
+                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
+                    OK
+                </q-btn>
+            </div>
+        </div>
+
+        <!--------------------------------------------------->
+        <div v-show="type == 'password'" class="bg-white no-wrap">
+            <div class="header row">
+                <div class="caption col row items-center q-ml-md">
+                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
+                    <div v-html="caption"></div>
+                </div>
+                <div v-if="!noCancel" class="close-icon column justify-center items-center">
+                    <q-btn v-close-popup flat round dense>
+                        <q-icon name="la la-times" size="18px"></q-icon>
+                    </q-btn>
+                </div>
+            </div>
+
+            <div class="q-mx-md">
+                <div v-html="message"></div>
+                <input type="text" name="username" autocomplete="username" :value="userName" hidden />
+                <q-input ref="input" v-model="inputValue" type="password" autocomplete="current-password" class="q-mt-xs" outlined dense />
+                <div class="error">
+                    <span v-show="error != ''">{{ error }}</span>
+                </div>
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn v-if="!noCancel" v-close-popup class="q-px-md q-ml-sm" dense no-caps>
                     Отмена
                 </q-btn>
                 <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
@@ -146,6 +179,10 @@ class StdDialog {
     iconColor = '';
     iconName = '';
     hotKeyCode = '';
+    userName = '';
+    noEscDismiss = false;
+    noBackdropDismiss = false;
+    noCancel = false;
 
     created() {
         if (this.$root.addKeyHook) {
@@ -163,6 +200,9 @@ class StdDialog {
         this.inputValue = '';
         this.error = '';
         this.showed = false;
+        this.noEscDismiss = (opts && opts.noEscDismiss) || false;
+        this.noBackdropDismiss = (opts && opts.noBackdropDismiss) || false;
+        this.noCancel = (opts && opts.noCancel) || false;
 
         this.iconColor = 'text-warning';
         if (opts && opts.color) {
@@ -189,7 +229,7 @@ class StdDialog {
     }
 
     onShow() {
-        if (this.type == 'prompt') {
+        if (this.type == 'prompt' || this.type == 'password') {
             this.enableValidator = true;
             if (this.inputValue)
                 this.validate(this.inputValue);
@@ -214,7 +254,7 @@ class StdDialog {
     }
 
     okClick() {
-        if (this.type == 'prompt' && !this.validate(this.inputValue)) {
+        if ((this.type == 'prompt' || this.type == 'password') && !this.validate(this.inputValue)) {
             this.$refs.dialog.shake();
             return;
         }
@@ -284,6 +324,31 @@ class StdDialog {
         });
     }
 
+    password(message, caption, opts) {
+        return new Promise((resolve) => {
+            this.enableValidator = false;
+            this.init(message, caption, opts);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    history.pushState({}, null);
+                    resolve({value: this.inputValue});
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.type = 'password';
+            this.userName = '';
+            if (opts) {
+                this.inputValidator = opts.inputValidator || null;
+                this.inputValue = opts.inputValue || '';
+                this.userName = opts.userName || '';
+            }
+            this.active = true;
+        });
+    }
+
     getHotKey(message, caption, opts) {
         return new Promise((resolve) => {
             this.init(message, caption, opts);
@@ -315,7 +380,7 @@ class StdDialog {
                     handled = true;
                 }
 
-                if (event.key == 'Escape') {
+                if (event.key == 'Escape' && !this.noEscDismiss) {
                     this.$nextTick(() => {
                         this.$refs.dialog.hide();
                     });