toggle/blur passwords, fixes #299

elan-ev · Sep 21, 2021 · bde095e · bde095e
1 parent 5f49283
commit bde095e
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 7 deletions.
diff --git a/Driver/BigBlueButton.php b/Driver/BigBlueButton.php
@@ -389,7 +389,7 @@ public static function getConfigOptions()
             new ConfigOption('active', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Aktiv?'), true),
             new ConfigOption('label', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Label'), 'Server #'),
             new ConfigOption('url',     dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'URL des BBB-Servers')),
-            new ConfigOption('api-key', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Api-Key (Salt)')),
+            new ConfigOption('api-key', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Api-Key (Salt)'), null, null, 'password'),
             new ConfigOption('proxy', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Zugriff über Proxy')),
             new ConfigOption('connection_timeout', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Connection Timeout (e.g. 0.5)')),
             new ConfigOption('request_timeout', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Request Timeout (e.g. 3.4)')),

diff --git a/Driver/ConfigOption.php b/Driver/ConfigOption.php
@@ -14,13 +14,14 @@
 class ConfigOption
 {
     private
-            $name, $display_name, $value, $default_value, $info;
+            $name, $display_name, $value, $default_value, $info, $attr;
 
-    public function __construct($name, $display_name, $default_value = null, $info = null) {
+    public function __construct($name, $display_name, $default_value = null, $info = null, $attr = null) {
         $this->name          = $name;
         $this->display_name  = $display_name;
         $this->default_value = $default_value;
-        $this->info     = $info;
+        $this->info          = $info;
+        $this->attr          = $attr;
     }
 
     public function getName()
@@ -55,6 +56,14 @@ public function setInfo($info) {
         $this->info = $info;
     }
 
+    public function getAttribute() {
+        return $this->attr;
+    }
+
+    public function setAttribute($attr) {
+        $this->attr = $attr;
+    }
+
     public function toArray() {
         $values = [];
         if (is_array($this->getValue())) {
@@ -73,6 +82,7 @@ public function toArray() {
         $result_arr['display_name'] = $this->getDisplayName();
         $result_arr['value'] = $values;
         !$this->getInfo() ?: $result_arr['info'] = $this->getInfo();
+        !$this->getAttribute() ?: $result_arr['attr'] = $this->getAttribute();
         return $result_arr;
     }
 }
diff --git a/Driver/DfnVc.php b/Driver/DfnVc.php
@@ -395,7 +395,7 @@ public static function getConfigOptions()
             new ConfigOption('label', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Label'), 'Server #'),
             new ConfigOption('url', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'API-Endpoint'), 'https://connect.vc.dfn.de'),
             new ConfigOption('login', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Funktionskennung')),
-            new ConfigOption('password', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Passwort')),
+            new ConfigOption('password', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Passwort'), null, null, 'password'),
             new ConfigOption('course_types', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Veranstaltungstyp'), MeetingPlugin::getSemClasses(), _('Nur in folgenden Veranstaltungskategorien nutzbar')),
             new ConfigOption('description', dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Beschreibung'), '', _('Ein Beschreibungstext wird angezeigt, um den Server zu führen oder zu beschreiben.'))
         );

diff --git a/Driver/MicrosoftTeams.php b/Driver/MicrosoftTeams.php
@@ -410,7 +410,7 @@ public static function getConfigOptions()
                 dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Verzeichnis-ID (Mandant)')
             ),
             new ConfigOption('client_secret',
-                dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Geheimer Clientschlüssel (Wert)')
+                dgettext(MeetingPlugin::GETTEXT_DOMAIN, 'Geheimer Clientschlüssel (Wert)') , null, null, 'password'
             )
         );
     }

diff --git a/assets/css/meetings.scss b/assets/css/meetings.scss
@@ -32,6 +32,11 @@ table.conference-meetings {
         &:last-child, &.td_center {
             text-align: center !important;
         }
+        &.password{
+            color: transparent;
+            text-shadow: 0 0 5px rgba(0,0,0,0.5);
+            cursor: help;
+        }
     }
 
     thead {
@@ -344,4 +349,26 @@ span.meeting-badge {
         vertical-align:middle;
         margin-right: 9px;
     }
+}
+
+.dialog-content {
+    form {
+        div {
+            label {
+                div.form-password-input {
+                    position: relative ;
+                    img {
+                        position: absolute;
+                        top: 8px;
+                        right: 9px;
+                        cursor: pointer;
+                    }
+
+                    input {
+                        padding-right: 30px;
+                    }
+                }
+            }
+        }
+    }
 }
diff --git a/vueapp/components/ServerDialog.vue b/vueapp/components/ServerDialog.vue
@@ -28,6 +28,13 @@
                                 :false-value="false"
                                 v-model="server[driver_name][value.name]">
                             <textarea v-else-if="value.name == 'description'" v-model="server[driver_name][value.name]"></textarea>
+                            <template v-else-if="value.attr && value.attr == 'password'">
+                                <div class="form-password-input" @click.prevent="togglePasswordText($event, value.name)">
+                                    <input type="password" :ref="value.name" v-model="server[driver_name][value.name]">
+                                    <StudipIcon class="overlay-input-icon" icon="visibility-visible"
+                                        role="clickable" size="16"></StudipIcon>
+                                </div>
+                            </template>
                             <input v-else class="size-l" :type="(value.name == 'maxParticipants') ? 'number' : 'text'" min="0" @change="(value.name == 'maxParticipants') ? reduceMins() : ''"
                                 v-model="server[driver_name][value.name]"
                                 :placeholder="value.value">
@@ -61,6 +68,7 @@ import StudipButton from "@/components/StudipButton";
 import ServerRoomSize from "@/components/ServerRoomSize";
 import MessageBox from "@/components/MessageBox";
 import StudipTooltipIcon from "@/components/StudipTooltipIcon";
+import StudipIcon from "@/components/StudipIcon";
 
 import { dialog } from '@/common/dialog.mixins'
 
@@ -81,6 +89,7 @@ export default {
         ServerRoomSize,
         MessageBox,
         StudipTooltipIcon,
+        StudipIcon
     },
 
     data() {
@@ -172,6 +181,19 @@ export default {
             if (this.server[this.driver_name] && !Object.keys(this.server[this.driver_name]).includes('course_types')) {
                 this.$set(this.server[this.driver_name], 'course_types', '');
             }
+        },
+
+        togglePasswordText(event, ref) {
+            if (!event.target) {
+                return;
+            }
+            if ($(event.target).prop('tagName') == 'IMG') {
+                if (this.$refs && this.$refs[ref]) {
+                    this.$refs[ref][0].type = (this.$refs[ref][0].type == 'password') ? 'text' : 'password';
+                }
+            } else if ($(event.target).prop('tagName') == 'INPUT') {
+                $(event.target).focus();
+            }
         }
     },
 

diff --git a/vueapp/views/Admin.vue b/vueapp/views/Admin.vue
@@ -109,7 +109,7 @@
                                 <td>{{ index + 1 }}</td>
                                 <template v-for="(value, key) in driver.config">
                                     <td :key="key" v-if="value.name && value.name != 'roomsize-presets' && value.name != 'description'"
-                                    :class="{td_center:value.name == 'active'}"
+                                    :class="{td_center:value.name == 'active', password: value.attr && value.attr == 'password'}"
                                     :title="(value.name != 'active' && value.name != 'course_types' ? server[value.name] : '')"
                                     >
                                         <template v-if="value.name == 'maxParticipants'