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/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@ -1,17 +1,37 @@
-%h2 Log in
-= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-  .field
-    = f.label :email
-    %br/
-    = f.email_field :email, autofocus: true, autocomplete: "email"
-  .field
-    = f.label :password
-    %br/
-    = f.password_field :password, autocomplete: "current-password"
-  - if devise_mapping.rememberable?
-    .field
-      = f.check_box :remember_me
-      = f.label :remember_me
-  .actions
-    = f.submit "Log in"
-= render "devise/shared/links"
+.flex.justify-center
+  .w-full.max-w-xs
+    %h1.font-hairline.mb-6.text-center Log In
+    = form_for(resource,                                                       |
+               as: resource_name,                                              |
+               url: session_path(resource_name),                               |
+               html: {                                                         |
+                       class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md" |
+               }                                                               |
+      ) do |f|                                                                 |
+      = devise_simple_error_messages!
+      - if flash.present?
+        .bg-red-100.border-l-4.border-red-500.text-red-700.p-4.mb-4{:role => "alert"}
+          %p.font-bold Oops!
+          - flash.each do |name, msg|
+            = content_tag :p,                          |
+              msg.humanize,                            |
+              id: "flash_#{name}" if msg.is_a?(String) |
+      .mb-4
+        = f.label :email, class: "block text-gray-700 text-sm font-bold mb-2"
+        = f.email_field :email, autofocus: true, autocomplete: "email",                                                                       |
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight foucs:outline-none focus:shadow-outline" |
+      .mb-4
+        = f.label :password, class: "block text-gray-700 text-sm font-bold mb-2"
+        = f.password_field :password,                                                                                                         |
+          autocomplete: "current-password",                                                                                                   |
+          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
+      - if devise_mapping.rememberable?
+        .mb-4
+          = f.check_box :remember_me, class: "mr-2 leading-tight"
+          = f.label :remember_me,                                      |
+            class: "align-baseline inline-block text-gray-700 text-sm" |
+      .mb-4
+        = f.submit "Log in",                                                                                                                  |
+          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"