Add a basic Symfony UX Stimulus demo

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

package.json

@@ -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",

public/build/entrypoints.json

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

public/build/manifest.json

@@ -18,26 +18,26 @@
   "build/fonts/lato-bold-italic.woff": "/build/fonts/lato-bold-italic.3e6b9980.woff",
   "build/fonts/lato-bold.woff": "/build/fonts/lato-bold.89b61808.woff",
   "build/fonts/lato-normal.woff": "/build/fonts/lato-normal.1d2ca94d.woff",
-  "build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.9bbb245e.eot",
-  "build/fonts/fa-solid-900.ttf": "/build/fonts/fa-solid-900.be9ee23c.ttf",
+  "build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.efbd5d20.eot",
+  "build/fonts/fa-solid-900.ttf": "/build/fonts/fa-solid-900.07c3313b.ttf",
   "build/fonts/lato-normal-italic.woff2": "/build/fonts/lato-normal-italic.bb5de40e.woff2",
   "build/fonts/lato-bold-italic.woff2": "/build/fonts/lato-bold-italic.e48918f9.woff2",
   "build/fonts/lato-bold.woff2": "/build/fonts/lato-bold.21b3848a.woff2",
   "build/fonts/lato-normal.woff2": "/build/fonts/lato-normal.75614cfc.woff2",
-  "build/images/fa-regular-400.svg": "/build/images/fa-regular-400.4689f52c.svg",
-  "build/fonts/fa-brands-400.eot": "/build/fonts/fa-brands-400.23f19bb0.eot",
-  "build/fonts/fa-brands-400.ttf": "/build/fonts/fa-brands-400.527940b1.ttf",
+  "build/images/fa-regular-400.svg": "/build/images/fa-regular-400.19e27d34.svg",
+  "build/fonts/fa-brands-400.eot": "/build/fonts/fa-brands-400.89a52ae1.eot",
+  "build/fonts/fa-brands-400.ttf": "/build/fonts/fa-brands-400.9e138496.ttf",
   "build/images/glyphicons-halflings-regular.svg": "/build/images/glyphicons-halflings-regular.060b2710.svg",
-  "build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.eeccf4f6.woff",
-  "build/fonts/fa-brands-400.woff": "/build/fonts/fa-brands-400.2285773e.woff",
-  "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.1551f4f6.woff2",
-  "build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.d878b0a6.woff2",
+  "build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.c6ec0800.woff",
+  "build/fonts/fa-brands-400.woff": "/build/fonts/fa-brands-400.329a95a9.woff",
+  "build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.ada6e6df.woff2",
+  "build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.c1210e5e.woff2",
   "build/fonts/glyphicons-halflings-regular.ttf": "/build/fonts/glyphicons-halflings-regular.4692b9ec.ttf",
-  "build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.77206a6b.eot",
-  "build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.491974d1.ttf",
+  "build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.4079ae2d.eot",
+  "build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.1017bce8.ttf",
   "build/fonts/glyphicons-halflings-regular.woff": "/build/fonts/glyphicons-halflings-regular.82b1212e.woff",
   "build/fonts/glyphicons-halflings-regular.eot": "/build/fonts/glyphicons-halflings-regular.5be1347c.eot",
   "build/fonts/glyphicons-halflings-regular.woff2": "/build/fonts/glyphicons-halflings-regular.be810be3.woff2",
-  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.bb58e57c.woff",
-  "build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.7a333762.woff2"
-}
+  "build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.36722648.woff",
+  "build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.68c5af1f.woff2"
+}

templates/security/login.html.twig

@@ -2,31 +2,39 @@
 
 {% block body_id 'login' %}
 
-{% block javascripts %}
-    {{ parent() }}
-    {{ encore_entry_script_tags('login') }}
-{% endblock %}
-
 {% block main %}
     {% if error %}
         <div class="alert alert-danger">
             {{ error.messageKey|trans(error.messageData, 'security') }}
         </div>
     {% endif %}
 
-    <div class="row">
+    {#
+        This references the Stimulus controller defined in
+        "assets/controllers/login-controller.js".
+        See https://symfony.com/doc/current/frontend/encore/simple-example.html#stimulus-symfony-ux
+        More info on Symfony UX https://ux.symfony.com
+    #}
+    <div class="row" {{ stimulus_controller('login') }}{# @see assets/controllers/login-controller.js #}>
         <div class="col-sm-5">
             <div class="well">
                 <form action="{{ path('security_login') }}" method="post">
                     <fieldset>
                         <legend><i class="fa fa-lock" aria-hidden="true"></i> {{ 'title.login'|trans }}</legend>
                         <div class="form-group">
                             <label for="username">{{ 'label.username'|trans }}</label>
-                            <input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
+                            <input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control" {{ stimulus_target('login', 'username') }} />
                         </div>
                         <div class="form-group">
                             <label for="password">{{ 'label.password'|trans }}</label>
-                            <input type="password" id="password" name="_password" class="form-control" />
+                            <input type="password" id="password" name="_password" class="form-control" {{ stimulus_target('login', 'password') }} />
+                        </div>
+                        <button class="btn btn-primary pull-right" type="button" {{ stimulus_action('login', 'togglePasswordInputType') }}><i class="fa fa-eye"></i></button>
+                        <div class="form-group">
+                            <label>
+                                <input type="checkbox" name="_remember_me" checked/>
+                                Keep me logged in
+                            </label>
                         </div>
                         <div class="form-group">
                             <label>
@@ -56,18 +64,25 @@
                         <th scope="col">{{ 'label.username'|trans }}</th>
                         <th scope="col">{{ 'label.password'|trans }}</th>
                         <th scope="col">{{ 'label.role'|trans }}</th>
+                        <th scope="col"></th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>john_user</td>
                         <td>kitten</td>
                         <td><code>ROLE_USER</code> ({{ 'help.role_user'|trans }})</td>
+                        <td>
+                            <button class="btn btn-primary btn-sm" {{ stimulus_action('login', 'prefillJohnUser') }}><i class="fa fa-user"></i></button>
+                        </td>
                     </tr>
                     <tr>
                         <td>jane_admin</td>
                         <td>kitten</td>
                         <td><code>ROLE_ADMIN</code> ({{ 'help.role_admin'|trans }})</td>
+                        <td>
+                            <button class="btn btn-primary btn-sm" {{ stimulus_action('login', 'prefillJaneAdmin') }}><i class="fa fa-user"></i></button>
+                        </td>
                     </tr>
                 </tbody>
             </table>

webpack.config.js

@@ -21,7 +21,6 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.js')
-    .addEntry('login', './assets/login.js')
     .addEntry('admin', './assets/admin.js')
     .addEntry('search', './assets/search.js')