8000 feature #1284 Add a basic Symfony UX Stimulus demo (Antoine Makdessi,… · symfony/demo@ecb6655 · GitHub
[go: up one dir, main page]
Skip to content

Commit ecb6655

Browse files
javiereguiluzjaviereguiluz
committed
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
2 parents 3b6c3f3 + 6db00c4 commit ecb6655

25 files changed

+77
-9616
lines changed

‎assets/controllers/login-controller.js

Lines changed: 36 additions & 0 deletions
628C
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// A Stimulus JavaScript controller file
2+
// https://stimulus.hotwired.dev
3+
// @see templates/security/login.html.twig
4+
// More info on Symfony UX https://ux.symfony.com
5+
6+
import { Controller } from '@hotwired/stimulus';
7+
8+
/*
9+
* The following line makes this controller "lazy": it won't be downloaded until needed
10+
* See https://github.com/symfony/stimulus-bridge#lazy-controllers
11+
*/
12+
/* stimulusFetch: 'lazy' */
13+
export default class extends Controller {
14+
static targets = ['username', 'password']
15+
16+
// /!\ in a real application, the user/password should never be hardcoded /!\
17+
// but for the demo application, it's very convenient to do so
18+
19+
prefillJohnUser() {
20+
this.usernameTarget.value = 'john_user'
21+
this.passwordTarget.value = 'kitten'
22+
}
23+
24+
prefillJaneAdmin() {
25+
this.usernameTarget.value = 'jane_admin'
26+
this.passwordTarget.value = 'kitten'
27+
}
28+
29+
togglePasswordInputType() {
30+
if ('password' === this.passwordTarget.type) {
31+
this.passwordTarget.type = 'text'
32+
} else {
33+
this.passwordTarget.type = 'password'
34+
}
35+
}
36+
}

‎assets/login.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"devDependencies": {
33
"@fortawesome/fontawesome-free": "^5.8.1",
4-
"@symfony/stimulus-bridge": "^3.2.0",
5-
"@symfony/webpack-encore": "^4.0.0",
4+
"@hotwired/stimulus": "^3.0",
5+
"@symfony/stimulus-bridge": "^3.0",
6+
"@symfony/webpack-encore": "^4.0",
67
"bloodhound-js": "^1.2.3",
78
"bootstrap-sass": "^3.3.7",
89
"bootstrap-tagsinput": "^0.7.1",

‎public/build/755.5a8586e9.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎public/build/755.5a8586e9.js.LICENSE.txt

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎public/build/entrypoints.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,4 @@
5858
"/build/admin.4e2dcc67.css": "sha384-ijpylu55+5LEOVSzTnWBeA7JuRKZ1HWi4TiJBM6Uil3h7FjmwVjUK8hN86UU1nOj",
5959
"/build/search.0b825478.js": "sha384-+gn6v9YJ6WqSztHDIK1PXrDUNjNF2Ihwu6A1t3D9cB4fw4FwlhSDauCG+dklLXD2"
6060
}
61-
}
61+
}

‎public/build/fonts/fa-brands-400.2285773e.woff

-87.9 KB
Binary file not shown.

‎public/build/fonts/fa-brands-400.23f19bb0.eot

-131 KB
Binary file not shown.

‎public/build/fonts/fa-brands-400.527940b1.ttf

-131 KB
Binary file not shown.

‎public/build/fonts/fa-brands-400.d878b0a6.woff2

-74.9 KB
Binary file not shown.

‎public/build/fonts/fa-regular-400.491974d1.ttf

-32.9 KB
Binary file not shown.

‎public/build/fonts/fa-regular-400.77206a6b.eot

-33.2 KB
Binary file not shown.

‎public/build/fonts/fa-regular-400.7a333762.woff2

-12.9 KB
Binary file not shown.

‎public/build/fonts/fa-regular-400.bb58e57c.woff

-15.9 KB
Binary file not shown.

‎public/build/fonts/fa-solid-900.1551f4f6.woff2

-76.4 KB
Binary file not shown.

‎public/build/fonts/fa-solid-900.9bbb245e.eot

-198 KB
Binary file not shown.

‎public/build/fonts/fa-solid-900.be9ee23c.ttf

-198 KB
Binary file not shown.

‎public/build/fonts/fa-solid-900.eeccf4f6.woff

-99.3 KB
Binary file not shown.

‎public/build/images/fa-brands-400.2f517e09.svg

Lines changed: 0 additions & 3717 deletions
This file was deleted.

‎public/build/images/fa-regular-400.4689f52c.svg

Lines changed: 0 additions & 801 deletions
This file was deleted.

‎public/build/images/fa-solid-900.7a8b4f13.svg

Lines changed: 0 additions & 5034 deletions
This file was deleted.

‎public/build/login.6b6b5d56.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/build/manifest.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,26 @@
1818
"build/fonts/lato-bold-italic.woff": "/build/fonts/lato-bold-italic.3e6b9980.woff",
1919
"build/fonts/lato-bold.woff": "/build/fonts/lato-bold.89b61808.woff",
2020
"build/fonts/lato-normal.woff": "/build/fonts/lato-normal.1d2ca94d.woff",
21-
"build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.9bbb245e.eot",
22-
"build/fonts/fa-solid-900.ttf": "/build/fonts/fa-solid-900.be9ee23c.ttf",
21+
"build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.efbd5d20.eot",
22+
"build/fonts/fa-solid-900.ttf": "/build/fonts/fa-solid-900.07c3313b.ttf",
2323
"build/fonts/lato-normal-italic.woff2": "/build/fonts/lato-normal-italic.bb5de40e.woff2",
2424
"build/fonts/lato-bold-italic.woff2": "/build/fonts/lato-bold-italic.e48918f9.woff2",
2525
"build/fonts/lato-bold.woff2": "/build/fonts/lato-bold.21b3848a.woff2",
2626
"build/fonts/lato-normal.woff2": "/build/fonts/lato-normal.75614cfc.woff2",
27-
"build/images/fa-regular-400.svg": "/build/images/fa-regular-400.4689f52c.svg",
28-
"build/fonts/fa-brands-400.eot": "/build/fonts/fa-brands-400.23f19bb0.eot",
29-
"build/fonts/fa-brands-400.ttf": "/build/fonts/fa-brands-400.527940b1.ttf",
27+
"build/images/fa-regular-400.svg": "/build/images/fa-regular-400.19e27d34.svg",
28+
"build/fonts/fa-brands-400.eot": "/build/fonts/fa-brands-400.89a52ae1.eot",
29+
"build/fonts/fa-brands-400.ttf": "/build/fonts/fa-brands-400.9e138496.ttf",
3030
"build/images/glyphicons-halflings-regular.svg": "/build/images/glyphicons-halflings-regular.060b2710.svg",
31-
"build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.eeccf4f6.woff",
32-
"build/fonts/fa-brands-400.woff": "/build/fonts/fa-brands-400.2285773e.woff",
33-
"build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.1551f4f6.woff2",
34-
"build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.d878b0a6.woff2",
31+
"build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.c6ec0800.woff",
32+
"build/fonts/fa-brands-400.woff": "/build/fonts/fa-brands-400.329a95a9.woff",
33+
"build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.ada6e6df.woff2",
34+
"build/fonts/fa-brands-400.woff2": "/build/fonts/fa-brands-400.c1210e5e.woff2",
3535
"build/fonts/glyphicons-halflings-regular.ttf": "/build/fonts/glyphicons-halflings-regular.4692b9ec.ttf",
36-
"build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.77206a6b.eot",
37-
"build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.491974d1.ttf",
36+
"build/fonts/fa-regular-400.eot": "/build/fonts/fa-regular-400.4079ae2d.eot",
37+
"build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.1017bce8.ttf",
3838
"build/fonts/glyphicons-halflings-regular.woff": "/build/fonts/glyphicons-halflings-regular.82b1212e.woff",
3939
"build/fonts/glyphicons-halflings-regular.eot": "/build/fonts/glyphicons-halflings-regular.5be1347c.eot",
4040
"build/fonts/glyphicons-halflings-regular.woff2": "/build/fonts/glyphicons-halflings-regular.be810be3.woff2",
41-
"build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.bb58e57c.woff",
42-
"build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.7a333762.woff2"
43-
}
41+
"build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.36722648.woff",
42+
"build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.68c5af1f.woff2"
43+
}

‎templates/security/login.html.twig

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,39 @@
22

33
{% block body_id 'login' %}
44

5-
{% block javascripts %}
6-
{{ parent() }}
7-
{{ encore_entry_script_tags('login') }}
8-
{% endblock %}
9-
105
{% block main %}
116
{% if error %}
127
<div class="alert alert-danger">
138
{{ error.messageKey|trans(error.messageData, 'security') }}
149
</div>
1510
{% endif %}
1611

17-
<div class="row">
12+
{#
13+
This references the Stimulus controller defined in
14+
"assets/controllers/login-controller.js".
15+
See https://symfony.com/doc/current/frontend/encore/simple-example.html#stimulus-symfony-ux
16+
More info on Symfony UX https://ux.symfony.com
17+
#}
18+
<div class="row" {{ stimulus_controller('login') }}{# @see assets/controllers/login-controller.js #}>
1819
<div class="col-sm-5">
1920
<div class="well">
2021
<form action="{{ path('security_login') }}" method="post">
2122
<fieldset>
2223
<legend><i class="fa fa-lock" aria-hidden="true"></i> {{ 'title.login'|trans }}</legend>
2324
<div class="form-group">
2425
<label for="username">{{ 'label.username'|trans }}</label>
25-
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
26+
<input type="text" id="username" name="_username" value="{{ last_username }}" class= 1CF5 "form-control" {{ stimulus_target('login', 'username') }} />
2627
</div>
2728
<div class="form-group">
2829
<label for="password">{{ 'label.password'|trans }}</label>
29-
<input type="password" id="password" name="_password" class="form-control" />
30+
<input type="password" id="password" name="_password" class="form-control" {{ stimulus_target('login', 'password') }} />
31+
</div>
32+
<button class="btn btn-primary pull-right" type="button" {{ stimulus_action('login', 'togglePasswordInputType') }}><i class="fa fa-eye"></i></button>
33+
<div class="form-group">
34+
<label>
35+
<input type="checkbox" name="_remember_me" checked/>
36+
Keep me logged in
37+
</label>
3038
</div>
3139
<div class="form-group">
3240
<label>
@@ -56,18 +64,25 @@
5664
<th scope="col">{{ 'label.username'|trans }}</th>
5765
<th scope="col">{{ 'label.password'|trans }}</th>
5866
<th scope="col">{{ 'label.role'|trans }}</th>
67+
<th scope="col"></th>
5968
</tr>
6069
</thead>
6170
<tbody>
6271
<tr>
6372
<td>john_user</td>
6473
<td>kitten</td>
6574
<td><code>ROLE_USER</code> ({{ 'help.role_user'|trans }})</td>
75+
<td>
76+
<button class="btn btn-primary btn-sm" {{ stimulus_action('login', 'prefillJohnUser') }}><i class="fa fa-user"></i></button>
77+
</td>
6678
</tr>
6779
<tr>
6880
<td>jane_admin</td>
6981
<td>kitten</td>
7082
<td><code>ROLE_ADMIN</code> ({{ 'help.role_admin'|trans }})</td>
83+
<td>
84+
<button class="btn btn-primary btn-sm" {{ stimulus_action('login', 'prefillJaneAdmin') }}><i class="fa fa-user"></i></button>
85+
</td>
7186
</tr>
7287
</tbody>
7388
</table>

‎webpack.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ Encore
2121
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
2222
*/
2323
.addEntry('app', './assets/app.js')
24-
.addEntry('login', './assets/login.js')
2524
.addEntry('admin', './assets/admin.js')
2625
.addEntry('search', './assets/search.js')
2726

0 commit comments

Comments
 (0)
0