Merge pull request #3560 from forkcms/toggle-secret

Add ToggleSecret to backend scripts

src/Core/Domain/Form/TogglePasswordType.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace ForkCMS\Core\Domain\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\PasswordType;
+
+final class TogglePasswordType extends AbstractType
+{
+    public function getParent(): string
+    {
+        return PasswordType::class;
+    }
+
+    public function getBlockPrefix(): string
+    {
+        return 'toggle_password';
+    }
+}

src/Core/assets/js/Components/TogglePasswordInputType.js

@@ -0,0 +1,24 @@
+export class TogglePasswordInputType {
+  constructor (element) {
+    this._button = element.querySelector('button')
+    this._input = element.querySelector('input')
+
+    this.init()
+  }
+
+  init () {
+    this._button.addEventListener('click', () => {
+      this.toggle()
+    })
+  }
+
+  toggle () {
+    if (this._input.type === 'password') {
+      this._input.type = 'text'
+      this._button.innerHTML = '<i class="fa fa-eye ms-2"></i>'
+    } else {
+      this._input.type = 'password'
+      this._button.innerHTML = '<i class="fa fa-eye-slash ms-2"></i>'
+    }
+  }
+}

src/Modules/Backend/assets/Backend/webpack/js/Backend.js

@@ -25,6 +25,7 @@ import { Config } from './Components/Config'
 import { PasswordGenerator } from './Components/PasswordGenerator'
 import { PasswordStrenghtMeter } from '../../../../../../Core/assets/js/Components/PasswordStrenghtMeter'
 import { InitBsToasts } from './Components/InitToasts'
+import { TogglePasswordInputType } from '../../../../../../Core/assets/js/Components/TogglePasswordInputType'
 
 window.bootstrap = bootstrap
 
@@ -54,6 +55,7 @@ export class Backend {
 
     Backend.initPasswordGenerators()
     Backend.initPasswordStrenghtMeters()
+    Backend.initTogglePasswordInputType()
 
     // do not move, should be run as the last item.
     if (!Config.isDebug()) this.forms.unloadWarning()
@@ -70,6 +72,12 @@ export class Backend {
       element.passwordStrengthMeter = new PasswordStrenghtMeter($(element))
     })
   }
+
+  static initTogglePasswordInputType () {
+    document.querySelectorAll('[data-role="toggle-password-visibility"]').forEach((element) => {
+      element.togglePassword = new TogglePasswordInputType(element)
+    })
+  }
 }
 
 $(window).on('load', () => {

src/Modules/Backend/templates/base/formTheme.html.twig

@@ -642,3 +642,12 @@
     {{ form_widget(form.children|last) }}
   </div>
 {% endblock %}
+
+{% block toggle_password_widget %}
+  <div class="input-group mb-3" data-role="toggle-password-visibility">
+    {{ form_widget(form) }}
+    <button class="btn btn-default" type="button">
+      <i class="fas fa-eye-slash ms-2"></i>
+    </button>
+  </div>
+{% endblock %}

src/Modules/Frontend/assets/Frontend/webpack/js/_Components.js

@@ -12,6 +12,7 @@ import * as Vue from 'vue/'
 import VEmbed from './Vue-components/VEmbed'
 import VShareButtons from './Vue-components/VShareButtons'
 import { Data } from '../../../../../../Core/assets/js/Components/Data'
+import { TogglePasswordInputType } from '../../../../../../Core/assets/js/Components/TogglePasswordInputType'
 
 export class Components {
   initComponents () {
@@ -26,6 +27,8 @@ export class Components {
     this.twitter = new Twitter()
     this.consentDialog = new ConsentDialog()
 
+    Components.initTogglePasswordInputType()
+
     if ($('[data-v-embed]').length) {
       window.vembed = new Vue({
         el: '[data-v-embed]',
@@ -40,4 +43,10 @@ export class Components {
       })
     }
   }
+
+  static initTogglePasswordInputType () {
+    document.querySelectorAll('[data-role="toggle-password-visibility"]').forEach((element) => {
+      element.togglePassword = new TogglePasswordInputType(element)
+    })
+  }
 }

src/Modules/Frontend/templates/base/FormLayout.html.twig

@@ -305,3 +305,12 @@
     {{ form_widget(form.children|last) }}
   </div>
 {% endblock %}
+
+{% block toggle_password_widget %}
+  <div class="input-group mb-3" data-role="toggle-password-visibility">
+    {{ form_widget(form) }}
+    <button class="btn btn-default" type="button">
+      <i class="fas fa-eye-slash ms-2"></i>
+    </button>
+  </div>
+{% endblock %}