minor #1384 Tweak the password field (javiereguiluz)

This PR was merged into the main branch. Discussion ---------- Tweak the password field This tweaks the #1284 feature by changing the button that reveals the password. Instead of an independent button, I propose to integrate it right inside the password field, which I think it's a more common practice: ![password-field](https://user-images.githubusercontent.com/73419/208960860-987eebb0-205e-4746-85ff-9fc2a5fa621e.gif) Commits ------- 1d779cf Tweak the password field
symfony · Dec 22, 2022 · 018eebc · 018eebc
2 parents e4dd387 + 1d779cf
commit 018eebc
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -253,6 +253,22 @@ body#login #login-users-help p .console {
   padding: 10px
 }
 
+body#login .form-group-password {
+  position: relative;
+
+  input { padding-right: 48px; }
+  button {
+    background: transparent;
+    border: 0;
+    color: #2C3E50;
+    height: 45px;
+    outline: 0;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+
 /* Common Blog page elements
    ------------------------------------------------------------------------- */
 .post-metadata {

diff --git a/public/build/app.fd6de4a2.css → public/build/app.041f0894.css b/public/build/app.fd6de4a2.css → public/build/app.041f0894.css
diff --git a/public/build/entrypoints.json b/public/build/entrypoints.json
@@ -10,7 +10,7 @@
       ],
       "css": [
         "/build/523.af638d6a.css",
-        "/build/app.fd6de4a2.css"
+        "/build/app.041f0894.css"
       ]
     },
     "admin": {
@@ -41,7 +41,7 @@
     "/build/523.4e56168f.js": "sha384-RhWg+IG69qzBiXWLeR1y4zDAUKShELmPhW/ljLkM6dvDAAAZ8G53S8eSfJCD2ysh",
     "/build/app.6d6d5305.js": "sha384-66G5BXqY9YPdbY6X74e9zhtxcrcsuI+ZNgwcalqQZjApTspsa6tttO/m6/5Q9qeH",
     "/build/523.af638d6a.css": "sha384-v8JR3eGGaAt4v00TVoQw8eXVP3VII6ELEb0ICEiZiWCQAjSLBhTjjvJI3OD6dM8l",
-    "/build/app.fd6de4a2.css": "sha384-kEXfKrysXeUZF5tX/t9lBCeEcxwnMDPu3uRzDpt9R+nWzOc/7Ee/9NpqcqUlMf4C",
+    "/build/app.041f0894.css": "sha384-OSx4GHdlkv4D/Zum3kIF+q8gdjuBkPD9rZfVN8PYGvr3hXjbYkkcstKDpePPLv2v",
     "/build/919.08dbe796.js": "sha384-dzi3OjmstJUAQWj6dVwXZ9S9bOiSC65gm5bBaUjl3cpEPNNjo0m6SW14cdB0+Xma",
     "/build/admin.01a1ae56.js": "sha384-LOSDVRmGz+4BPOMk0InaJfGREPO4tBFmPzWApnJ4uvuiAxf4BfnDh43JkIewAm8T",
     "/build/admin.4e2dcc67.css": "sha384-ijpylu55+5LEOVSzTnWBeA7JuRKZ1HWi4TiJBM6Uil3h7FjmwVjUK8hN86UU1nOj",

diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,5 +1,5 @@
 {
-  "build/app.css": "/build/app.fd6de4a2.css",
+  "build/app.css": "/build/app.041f0894.css",
   "build/app.js": "/build/app.6d6d5305.js",
   "build/admin.css": "/build/admin.4e2dcc67.css",
   "build/admin.js": "/build/admin.01a1ae56.js",

diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
@@ -25,17 +25,13 @@
                             <label for="username">{{ 'label.username'|trans }}</label>
                             <input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control" {{ stimulus_target('login', 'username') }} />
                         </div>
-                        <div class="form-group">
+
+                        <div class="form-group form-group-password">
                             <label for="password">{{ 'label.password'|trans }}</label>
                             <input type="password" id="password" name="_password" class="form-control" {{ stimulus_target('login', 'password') }} />
+                            <button class="btn btn-primary pull-right" type="button" {{ stimulus_action('login', 'togglePasswordInputType') }}><i class="fa fa-eye"></i></button>
                         </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>
                                 <input type="checkbox" name="_remember_me" checked/>