feature #1284 Add a basic Symfony UX Stimulus demo (Antoine Makdessi, javiereguiluz)

This PR was squashed before being merged into the main branch.

Discussion
----------

Add a basic Symfony UX Stimulus demo

Cf a Slack of mine in the Symfony Slack, I discussed to add a simple/basic Stimulus example leveraging Symfony UX

As requested; this leverages:

- https://symfony.com/blog/symfony-ux-2-0-and-stimulus-3-support
- https://github.com/symfony/webpack-encore-bundle#stimulus--symfony-ux-helper

---

https://user-images.githubusercontent.com/1358361/147409321-cbd625c0-362b-401f-9936-a8814a496de2.mov

Feel free to comment, thx

Commits
-------

6db00c4 Add a basic Symfony UX Stimulus demo

Author: javiereguiluz

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"
   }
-}
+}