flex around devise, also reconfirmable

2022-12-20 21:02:36 +02:00
parent 13682fb58b
commit 0ccfab790b
15 changed files with 298 additions and 133 deletions
--- a/app/views/devise/passwords/edit.html.haml
+++ b/app/views/devise/passwords/edit.html.haml
@ -1,19 +1,36 @@
-%h2 Change your password
-= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
-  = render "devise/shared/error_messages", resource: resource
-  = f.hidden_field :reset_password_token
-  .field
-    = f.label :password, "New password"
-    %br/
-    - if @minimum_password_length
-      %em
-        (#{@minimum_password_length} characters minimum)
-      %br/
-    = f.password_field :password, autofocus: true, autocomplete: "new-password"
-  .field
-    = f.label :password_confirmation, "Confirm new password"
-    %br/
-    = f.password_field :password_confirmation, autocomplete: "new-password"
-  .actions
-    = f.submit "Change my password"
-= render "devise/shared/links"
+.flex.justify-center
+  .w-full.max-w-xs
+    %h2.font-hairline.mb-6.text-center Change Your Password
+    = form_for(resource,                                                       |
+               as: resource_name,                                              |
+               url: member_password_path(resource_name),                         |
+               html: {                                                         |
+                       method: :put,                                           |
+                       class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md" |
+               }                                                               |
+      ) do |f|                                                                 |
+      = devise_error_messages!
+      = f.hidden_field :reset_password_token
+      .mb-4
+        = f.label :password, "New Password",                  |
+          class: "block font-bold mb-2 text-gray-700 text-sm" |
+        - if @minimum_password_length
+          %small
+            %em.text-gray-600
+              (#{@minimum_password_length} characters minimum)
+        = f.password_field :password,                                                                                                         |
+          autofocus: true,                                                                                                                    |
+          autocomplete: "new-password",                                                                                                       |
+          class: "appearance-none border leading-tight focus:outline-none px-3 py-2 rounded shadow focus:shadow-outline text-gray-700 w-full" |
+      .mb-4
+        = f.label :password_confirmation,                     |
+          "Confirm New Password",                             |
+          class: "block font-bold mb-2 text-gray-700 text-sm" |
+        = f.password_field :password_confirmation,                                                                                                 |
+          autocomplete: "off",                                                                                                                     |
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
+      .mb-4
+        = f.submit "Change My Password",                                                                                                      |
+          class: "button bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full" |
+      = render "devise/shared/links"
+    = render "devise/shared/form_footer"