feat: add show password for input password

assets/app.js

@@ -7,6 +7,7 @@ import './js/headerFixed';
 import './js/swiperArticle';
 import './js/highlight';
 import './js/rangeInput';
+import './js/showPassword';
 import Filter from './js/filter';
 new Filter(document.querySelector('.js-filter'));
 

assets/js/showPassword.js

@@ -0,0 +1,28 @@
+const inputsPassword = document.querySelectorAll('input[type="password"]');
+
+if (inputsPassword) {
+    inputsPassword.forEach(input => {
+        const parent = document.createElement('div');
+        parent.classList.add('parent-password');
+
+        const icon = document.createElement('i');
+        icon.classList.add('bi', 'bi-eye-slash-fill', 'icon-password');
+
+        input.before(parent);
+        parent.append(input);
+        input.after(icon);
+
+        icon.addEventListener('click', e => {
+            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
+            input.setAttribute('type', type);
+
+            if (type === 'password') {
+                icon.classList.remove('bi-eye-fill');
+                icon.classList.add('bi-eye-slash-fill');
+            } else {
+                icon.classList.remove('bi-eye-slash-fill');
+                icon.classList.add('bi-eye-fill');
+            }
+        });
+    });
+}

assets/styles/_structure.scss

@@ -82,3 +82,16 @@ pre {
   width: 100%;
   border-radius: $border-radius;
 }
+
+.parent-password {
+  position: relative;
+}
+
+.icon-password {
+  position: absolute;
+  top: 50%;
+  right: 1%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  color: $primary;
+}

templates/Security/login.html.twig

@@ -14,11 +14,15 @@
 					{{ error.messageKey|trans(error.messageData, 'security') }}
 				</div>
 			{% endif %}
-			<label for="username" class="form-label">{{ 'form.user.fields.email.label'|trans(domain = 'forms') }}</label>
-			<input type="text" id="username" class="form-control" name="_username" placeholder="{{ 'form.user.fields.email.placeholder'|trans(domain = 'forms') }}" value="{{ lastUsername }}"/>
+			<div class="mb-3">
+				<label for="username" class="form-label">{{ 'form.user.fields.email.label'|trans(domain = 'forms') }}</label>
+				<input type="text" id="username" class="form-control" name="_username" placeholder="{{ 'form.user.fields.email.placeholder'|trans(domain = 'forms') }}" value="{{ lastUsername }}"/>
+			</div>
 
-			<label for="password" class="form-label">{{ 'form.user.fields.password.main'|trans(domain = 'forms') }}</label>
-			<input type="password" id="password" class="form-control" placeholder="{{ 'form.user.fields.password.placeholder'|trans(domain = 'forms') }}" name="_password"/>
+			<div class="mb-3">
+				<label for="password" class="form-label">{{ 'form.user.fields.password.main'|trans(domain = 'forms') }}</label>
+				<input type="password" id="password" class="form-control" placeholder="{{ 'form.user.fields.password.placeholder'|trans(domain = 'forms') }}" name="_password"/>
+			</div>
 
 			<div class="d-grid gap-2 d-md-block mt-4 text-center">
 				<button type="submit" class="btn btn-primary">{{ 'main.btn.login'|trans(domain = 'content') }}</button>