Add a basic Symfony UX Stimulus demo

Author: Antoine Makdessi

assets/controllers/login-controller.js

@@ -0,0 +1,36 @@
+// A Stimulus JavaScript controller file
+// https://stimulus.hotwired.dev
+// @see templates/security/login.html.twig
+// More info on Symfony UX https://ux.symfony.com
+
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * The following line makes this controller "lazy": it won't be downloaded until needed
+ * See https://github.com/symfony/stimulus-bridge#lazy-controllers
+ */
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+  static targets = ['username', 'password']
+
+  // /!\ in a real application, the user/password should never be hardcoded /!\
+  // but for the demo application, it's very convenient to do so
+
+  prefillJohnUser() {
+    this.usernameTarget.value = 'john_user'
+    this.passwordTarget.value = 'kitten'
+  }
+
+  prefillJaneAdmin() {
+    this.usernameTarget.value = 'jane_admin'
+    this.passwordTarget.value = 'kitten'
+  }
+
+  togglePasswordInputType() {
+    if ('password' === this.passwordTarget.type) {
+      this.passwordTarget.type = 'text'
+    } else {
+      this.passwordTarget.type = 'password'
+    }
+  }
+}

assets/login.js

@@ -1,8 +1,9 @@
 {
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.8.1",
-        "@symfony/stimulus-bridge": "^3.2.0",
-        "@symfony/webpack-encore": "^4.0.0",
+        "@hotwired/stimulus": "^3.0",
+        "@symfony/stimulus-bridge": "^3.0",
+        "@symfony/webpack-encore": "^4.0",
         "bloodhound-js": "^1.2.3",
         "bootstrap-sass": "^3.3.7",
         "bootstrap-tagsinput": "^0.7.1",

package.json

@@ -58,4 +58,4 @@
     "/build/admin.4e2dcc67.css": "sha384-ijpylu55+5LEOVSzTnWBeA7JuRKZ1HWi4TiJBM6Uil3h7FjmwVjUK8hN86UU1nOj",
     "/build/search.0b825478.js": "sha384-+gn6v9YJ6WqSztHDIK1PXrDUNjNF2Ihwu6A1t3D9cB4fw4FwlhSDauCG+dklLXD2"
   }
-}
+}