Add a basic Symfony Stimulus demo

Author: Antoine Makdessi

.DS_Store

@@ -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://github.com/symfony/ux
+
+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/.DS_Store

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

assets/controllers/login-controller.js

@@ -4,7 +4,6 @@
 
 {% block javascripts %}
     {{ parent() }}
-    {{ encore_entry_script_tags('login') }}
 {% endblock %}
 
 {% block main %}
@@ -14,20 +13,21 @@
         </div>
     {% endif %}
 
-    <div class="row">
+    <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>
                         <input type="hidden" name="_target_path" value="{{ app.request.get('redirect_to') }}"/>
                         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
                         <button type="submit" class="btn btn-primary">
@@ -50,18 +50,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>

assets/login.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')