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';
+        }
+    }
+}