Move login JS to Stimulus

assets/app.js

@@ -7,41 +7,6 @@ import './bootstrap.js';
  */
 import './styles/app.css';
 
-function showPasswd(selector) {
-    const icon = document.querySelector(selector);
-    const pwInput = document.querySelector('#pass-field');
-
-    icon.addEventListener('click', function () {
-        if (pwInput.getAttribute('type') === 'password') {
-            this.firstElementChild.classList.remove('fa-eye-slash');
-            this.firstElementChild.classList.add('fa-eye');
-            pwInput.setAttribute('type', 'text');
-        } else {
-            this.firstElementChild.classList.remove('fa-eye');
-            this.firstElementChild.classList.add('fa-eye-slash');
-            pwInput.setAttribute('type', 'password');
-        }
-    });
-}
-
-console.log('whatever');
-
-if (location.pathname.includes('login')) {
-    showPasswd('#show-pw');
-
-    document.querySelector('#submit > button').addEventListener('click', function () {
-        this.parentElement.classList.add('is-loading');
-    });
-
-    const error = document.querySelector('.is-danger');
-
-    if (error) {
-        error.querySelector('.delete').addEventListener('click', () => {
-            error.classList.add('is-hidden');
-        });
-    }
-}
-
 if (! location.pathname.includes('login')) {
     const vocabs = document.querySelector('#vocabs');
     const records = document.querySelector('#records');

assets/controllers/hello_controller.js

@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
-    connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
-    }
-}

assets/controllers/loading_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['control'];
+
+    setLoading() {
+        this.controlTarget.classList.add('is-loading');
+    }
+}

assets/controllers/notification_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['notif'];
+
+    close() {
+        this.notifTarget.classList.add('is-hidden');
+    }
+}

assets/controllers/show_password_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ */
+export default class extends Controller {
+    static targets = ['pass'];
+
+    toggle(event) {
+        const span = event.currentTarget;
+        const icon = span.firstElementChild;
+
+        if (this.passTarget.type === 'password') {
+            icon.classList.remove('fa-eye');
+            icon.classList.add('fa-eye-slash');
+            this.passTarget.type = 'text';
+        }
+        else {
+            icon.classList.remove('fa-eye-slash');
+            icon.classList.add('fa-eye');
+            this.passTarget.type = 'password';
+        }
+    }
+}

templates/login/index.html.twig

@@ -12,9 +12,10 @@
 
     <div class="card" style="max-width: 40vw; margin: 0 auto;">
         {% if error %}
-            <article class="message is-danger">
-                <div class="message-body">Wrong user name and/or password. Please retry</div>
-            </article>
+            <div class="notification is-danger is-light" data-controller="notification" data-notification-target="notif">
+                <button class="delete" data-action="click->notification#close"></button>
+                Wrong user name and/or password. Please retry
+            </div>
         {% endif %}
         <form class="card-content pl-5 pr-5 pt-6" action="{{ path('app_login') }}" id="login" method="post">
             <div class="field">
@@ -26,25 +27,26 @@
                     <input class="input" name="_username" required type="text" placeholder="User name">
                 </p>
             </div>
-            <div class="field mt-5">
+            <div class="field mt-5" data-controller="show-password">
                 <label class="label">Password</label>
                 <p class="control has-icons-right">
-                <input class="input" type="password" name="_password" required placeholder="Password" id="pass-field">
-                <span class="icon is-small is-right is-clickable" id="show-pw">
-                    <i class="fa fa-eye-slash"></i>
+                <input class="input" type="password" name="_password" required placeholder="Password" id="pass-field"
+                    data-show-password-target="pass" />
+                <span class="icon is-small is-right is-clickable" id="show-pw"
+                    data-action="click->show-password#toggle">
+                    <i class="fa fa-eye"></i>
                 </span>
                 </p>
             </div>
             <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-            <div class="field mt-5">
-                <p class="control" id="submit">
-                    <button class="button is-link is-fullwidth" type="submit">
+            <div class="field mt-5" data-controller="loading">
+                <p class="control" id="submit" data-loading-target="control">
+                    <button class="button is-link is-fullwidth" type="submit" data-action="click->loading#setLoading">
                         Sign in
                     </button>
                 </p>
             </div>
         </form>
     </div>
-
 </div>
 {% endblock %}