Improve UI/UX for reset_password, signup, confirmation pages

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Improve UI/UX for reset_password, signup, confirmation pages
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent 6f556d8e
Showing 5 changed files with 37 additions and 20 deletions Show diff stats
app/views/devise/confirmations/new.html.haml
app/views/devise/passwords/edit.html.haml
app/views/devise/passwords/new.html.haml
app/views/devise/registrations/new.html.haml
app/views/layouts/devise.html.haml
 .login-box
   %h3.page-title Resend confirmation instructions
   = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
-    = devise_error_messages!
-    = f.email_field :email, placeholder: 'Email'
-    %div= f.submit "Resend confirmation instructions", class: 'btn btn-success'
+    .devise-errors
+      = devise_error_messages!
+    = f.email_field :email, placeholder: 'Email', class: "text", required: true
+    .clearfix.append-bottom-10
+      = f.submit "Resend confirmation instructions", class: 'btn btn-success'
   %hr
-  = link_to "Sign in", new_session_path(resource_name)
+  %p
+    %span.light
+      Already have login and password?
+    %strong
+      = link_to "Sign in", new_session_path(resource_name)
 = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put, class: "login-box" }) do |f|
   %h3 Change your password
-  = devise_error_messages!
+  .devise-errors
+    = devise_error_messages!
   = f.hidden_field :reset_password_token
   %div
-    = f.password_field :password, class: "text top", placeholder: "New password"
+    = f.password_field :password, class: "text top", placeholder: "New password", required: true
   %div
-    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm new password"
+    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm new password", required: true
   %div
   .clearfix.append-bottom-10
     = f.submit "Change my password", class: "btn btn-primary"
 = form_for(resource, as: resource_name, url: password_path(resource_name), html: { class: "login-box", method: :post }) do |f|
   %h3.page-title Reset password
-  = devise_error_messages!
-  = f.email_field :email, placeholder: "Email",  class: "text"
-  %br/
-  %br/
-  = f.submit "Reset password", class: "btn-primary btn"
-  .pull-right
-    = link_to "Sign in", new_session_path(resource_name), class: "btn"
-    %br/
+  .devise-errors
+    = devise_error_messages!
+  = f.email_field :email, placeholder: "Email",  class: "text", required: true
+  .clearfix.append-bottom-10
+    = f.submit "Reset password", class: "btn-primary btn"
+  %hr
+  %p
+    %span.light
+      Already have login and password?
+    %strong
+      = link_to "Sign in", new_session_path(resource_name)
 = form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "login-box" }) do |f|
   %h3.page-title Sign Up
-  %br
-  = devise_error_messages!
+  .devise-errors
+    = devise_error_messages!
   %div
     = f.text_field :name, class: "text top", placeholder: "Name", required: true
   %div
@@ -15,5 +15,10 @@
   %div
     = f.submit "Sign up", class: "btn-create btn"
   %hr
-  = link_to "Sign in", new_session_path(resource_name)
-  = link_to "Forgot your password?", new_password_path(resource_name), class: "pull-right"
+  %p
+    %span.light
+      Have an account?
+    %strong
+      = link_to "Sign in", new_session_path(resource_name)
+  %p
+    = link_to "Forgot your password?", new_password_path(resource_name)
@@ -11,5 +11,7 @@
             GitLab is open source software to collaborate on code.
             %br
             #{link_to "Sign in", new_user_session_path} or browse for #{link_to "public projects", public_projects_path}.
-        %hr
+    %hr
+    .container
+      .content
         = yield