Skip to content

Commit b47652f

Browse files
rosierrosier
committed
[Bootstrap v5] Update login page
1 parent c1691a8 commit b47652f

File tree

2 files changed

+27
-66
lines changed

2 files changed

+27
-66
lines changed

‎assets/styles/app.scss‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -439,38 +439,6 @@ body#homepage .jumbotron P {
439439
------------------------------------------------------------------------- */
440440
body#login #login-users-help p {
441441
font-size: 15px;
442-
line-height: 1.42857
443-
}
444-
445-
body#login #login-users-help p:last-child {
446-
margin-bottom: 0
447-
}
448-
449-
body#login #login-users-help p .label {
450-
margin-right: 5px
451-
}
452-
453-
body#login #login-users-help p .console {
454-
display: block;
455-
margin: 5px 0;
456-
padding: 10px
457-
}
458-
459-
body#login .form-group-password {
460-
position: relative;
461-
}
462-
body#login .form-group-password input {
463-
padding-right: 48px;
464-
}
465-
body#login .form-group-password button {
466-
background: transparent;
467-
border: 0;
468-
color: var(--text-color);
469-
height: 45px;
470-
outline: 0;
471-
position: absolute;
472-
bottom: 0;
473-
right: 0;
474442
}
475443

476444
body#login #login-help table td {
@@ -604,8 +572,3 @@ body#blog_search .post-metadata {
604572
font-size: 16px;
605573
margin-bottom: 8px;
606574
}
607-
608-
.input-group button.btn {
609-
padding-bottom: 0;
610-
padding-top: 0;
611-
}

‎templates/security/login.html.twig‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,42 @@
44

55
{% block main %}
66
{% if error %}
7-
<div class="alert alert-danger">
7+
<div class="alert alert-danger" role="alert">
88
{{ error.messageKey|trans(error.messageData, 'security') }}
99
</div>
1010
{% endif %}
1111

1212
{#
13-
This references the Stimulus controller defined in
14-
"assets/controllers/login-controller.js".
13+
This references the Stimulus controller defined in "assets/controllers/login-controller.js".
1514
See https://symfony.com/bundles/StimulusBundle/current/index.html
16-
More info on Symfony UX https://ux.symfony.com
15+
For more info on Symfony UX see https://ux.symfony.com
1716
#}
18-
<div class="row" {{ stimulus_controller('login') }}{# @see assets/controllers/login-controller.js #}>
17+
<div class="row" {{ stimulus_controller('login') }}>
1918
<div class="col-sm-5">
2019
<div class="well">
2120
<form action="{{ path('security_login') }}" method="post">
2221
<fieldset>
2322
<legend><twig:ux:icon name="tabler:lock"/> {{ 'title.login'|trans }}</legend>
24-
<div class="form-group">
25-
<label for="username">{{ 'label.username'|trans }}</label>
26-
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control" {{ stimulus_target('login', 'username') }} />
23+
<div class="mb-3">
24+
<label class="form-label" for="username">{{ 'label.username'|trans }}</label>
25+
<input class="form-control" {{ stimulus_target('login', 'username') }} id="username" name="_username" required="required" type="text" value="{{ last_username }}">
2726
</div>
2827

29-
<div class="form-group form-group-password">
30-
<label for="password">{{ 'label.password'|trans }}</label>
31-
<input type="password" id="password" name="_password" class="form-control" {{ stimulus_target('login', 'password') }} />
32-
<button class="btn btn-primary pull-right" type="button" {{ stimulus_action('login', 'togglePasswordInputType') }}><twig:ux:icon name="tabler:eye" aria-hidden="false" aria-label="Toggle password visibility"/></button>
28+
<div class="mb-3">
29+
<label class="form-label" for="password">{{ 'label.password'|trans }}</label>
30+
<div class="input-group">
31+
<input class="form-control" {{ stimulus_target('login', 'password') }} id="password" name="_password" required="required" type="password">
32+
<button class="btn btn-primary" type="button" {{ stimulus_action('login', 'togglePasswordInputType') }}><twig:ux:icon name="tabler:eye" aria-hidden="false" aria-label="Toggle password visibility"/></button>
33+
</div>
3334
</div>
3435

35-
<div class="form-group">
36-
<label>
37-
<input type="checkbox" name="_remember_me" checked/>
38-
{{ 'label.remember_me'|trans }}
39-
</label>
36+
<div class="mb-3 form-check">
37+
<input class="form-check-input" id="remember_me" name="_remember_me" type="checkbox" checked>
38+
<label class="form-check-label" for="remember_me">{{ 'label.remember_me'|trans }}</label>
4039
</div>
41-
<input type="hidden" name="_target_path" value="{{ app.request.get('redirect_to') }}"/>
42-
<input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}"/>
40+
41+
<input type="hidden" name="_target_path" value="{{ app.request.get('redirect_to') }}">
42+
<input type="hidden" name="_csrf_token" data-controller="csrf-protection" value="{{ csrf_token('authenticate') }}">
4343
<button type="submit" class="btn btn-primary">
4444
<twig:ux:icon name="tabler:login"/> {{ 'action.sign_in'|trans }}
4545
</button>
@@ -89,18 +89,16 @@
8989

9090
<div id="login-users-help" class="card">
9191
<div class="card-body">
92-
<p>
93-
<span class="badge badge-success">{{ 'note'|trans }}</span>
94-
{{ 'help.reload_fixtures'|trans }}<br/>
95-
96-
<code class="console">$ php bin/console doctrine:fixtures:load</code>
92+
<p class="card-text">
93+
<span class="badge text-bg-info">{{ 'note'|trans }}</span>
94+
{{ 'help.reload_fixtures'|trans }}<br>
95+
<code class="d-block my-2 p-2">$ php bin/console doctrine:fixtures:load</code>
9796
</p>
9897

99-
<p>
100-
<span class="badge badge-success">{{ 'tip'|trans }}</span>
101-
{{ 'help.add_user'|trans }}<br/>
102-
103-
<code class="console">$ php bin/console app:add-user</code>
98+
<p class="card-text">
99+
<span class="badge text-bg-info">{{ 'tip'|trans }}</span>
100+
{{ 'help.add_user'|trans }}<br>
101+
<code class="d-block my-2 p-2">$ php bin/console app:add-user</code>
104102
</p>
105103
</div>
106104
</div>

0 commit comments

Comments
 (0)