Merge pull request #6764 from svbergerem/unify-registration-session-form

Unify mobile and desktop registration and session forms

Changelog.md

@@ -93,6 +93,7 @@ Contributions are very welcome, the hard work is done!
 * Refactor mentions input, now based on typeahead.js [#6728](https://github.com/diaspora/diaspora/pull/6728)
 * Optimized the pod up checks [#6727](https://github.com/diaspora/diaspora/pull/6727)
 * Prune and do not create aspect visibilities for public posts [#6732](https://github.com/diaspora/diaspora/pull/6732)
+* Optimized mobile login and registration forms [#6764](https://github.com/diaspora/diaspora/pull/6764)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/stylesheets/mobile/mobile.scss

@@ -127,14 +127,28 @@ textarea { resize: vertical; }
   text-shadow: 1px 1px 20px rgb(126, 240, 77); }
 
 #login_form {
-  padding: 0;
-
   /* ensure url bar is banished from view on iOS */
   margin-bottom: 40px !important;
 
   .login-container {
     padding: 10px;
     label, legend { text-transform: uppercase; }
+    .form-control { margin-bottom: 20px; }
+    .form-group { margin: 10px 0; }
+  }
+}
+
+footer {
+  margin-bottom: 20px;
+  text-align: center;
+
+  ul {
+    padding-left: 0;
+
+    li {
+      list-style: none;
+      margin-bottom: 5px;
+    }
   }
 }
 
@@ -599,10 +613,6 @@ form#new_user.new_user input.btn {
   }
 }
 
-input#user_password, #user_username, #user_password_confirmation, #user_email {
-  height: 30px;
-}
-
 #flash_notice,
 #flash_alert,
 #flash_error {

app/views/registrations/_form.haml

@@ -1,8 +1,16 @@
 = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f|
 
   %fieldset
-    = f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel"
+    - if mobile
-    %i.entypo-mail
+      %legend
+        = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
+        = t("aspects.aspect_stream.make_something")
+
+    - if mobile
+      = f.label :email, t("registrations.new.email"), class: "control-label", id: "emailLabel"
+    - else
+      = f.label :email, t("registrations.new.email"), class: "sr-only control-label", id: "emailLabel"
+      %i.entypo-mail
     = f.email_field :email,
                     autofocus:   true,
                     class:       "input-block-level form-control",
@@ -12,9 +20,13 @@
                     title:       t("registrations.new.enter_email"),
                     aria:        {labelledby: "emailLabel"}
 
-    %label#usernameLabel.sr-only.control-label{for: "user_username"}
+    - if mobile
-      = t("registrations.new.username")
+      %label.control-label#usernameLabel{for: "user_username"}
-    %i.entypo-user
+        = t("registrations.new.username")
+    - else
+      %label.sr-only.control-label#usernameLabel{for: "user_username"}
+        = t("registrations.new.username")
+      %i.entypo-user
     = f.text_field :username,
                    class:       "input-block-level form-control",
                    placeholder: t("registrations.new.username"),
@@ -23,9 +35,13 @@
                    pattern:     "[A-Za-z0-9_]+",
                    aria:        {labelledby: "usernameLabel"}
 
-    %label#passwordLabel.sr-only.control-label{for: "user_password"}
+    - if mobile
-      = t("registrations.new.password")
+      %label.control-label#passwordLabel{for: "user_password"}
-    %i.entypo-lock
+        = t("registrations.new.password")
+    - else
+      %label.sr-only.control-label#passwordLabel{for: "user_password"}
+        = t("registrations.new.password")
+      %i.entypo-lock
     = f.password_field :password,
                        class:       "input-block-level form-control",
                        placeholder: t("registrations.new.password"),
@@ -34,9 +50,13 @@
                        pattern:     "......+",
                        aria:        {labelledby: "passwordLabel"}
 
-    %label#passwordConfirmationLabel.sr-only.control-label{for: "user_password_confirmation"}
+    - if mobile
-      = t("registrations.new.password_confirmation")
+      %label.control-label#passwordConfirmationLabel{for: "user_password_confirmation"}
-    %i.entypo-lock
+        = t("registrations.new.password_confirmation")
+    - else
+      %label.sr-only.control-label#passwordConfirmationLabel{for: "user_password_confirmation"}
+        = t("registrations.new.password_confirmation")
+      %i.entypo-lock
     = f.password_field :password_confirmation,
                        class:       "input-block-level form-control",
                        placeholder: t("registrations.new.password_confirmation"),

app/views/registrations/new.haml

@@ -9,4 +9,4 @@
             %h2#pod-name
               = AppConfig.settings.pod_name
 
-            = render partial: 'form'
+            = render partial: "form", locals: {mobile: false}

app/views/registrations/new.mobile.haml

@@ -10,45 +10,9 @@
 
   #login_form
     .login-container
-      = form_for(resource, as: resource_name, html: {class: 'new_user_form'}, url: registration_path(resource_name)) do |f|
+      = render partial: "form", locals: {mobile: true}
-        %fieldset
-          %legend
-            = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
-            = t("aspects.aspect_stream.make_something")
 
-          .form-group
+%footer.footer
-            = f.label :username, t("username")
+  %ul
-            = f.text_field :username, class: "form-control", placeholder: "jedi_guy"
+    %li= link_to t("devise.shared.links.sign_in"), new_session_path(resource_name)
-
+    %li= link_to t("layouts.application.toggle"), toggle_mobile_path
-          .form-group
-            = f.label :email, t("email")
-            = f.text_field :email, class: "form-control", placeholder: "luke@hoth.net"
-
-          .form-group
-            = f.label :password, t("password")
-            = f.password_field :password, class: "form-control", placeholder: "••••••••"
-
-          .form-group
-            = f.label :password_confirmation, t("password_confirmation")
-            = f.password_field :password_confirmation, class: "form-control", placeholder: "••••••••"
-
-          - if AppConfig.settings.captcha.enable?
-            = show_simple_captcha object: "user",
-                                  code_type: "numeric",
-                                  class: "simple-captcha-image",
-                                  input_html: {class: "form-control captcha-input"}
-
-          = invite_hidden_tag(invite)
-
-          - if AppConfig.settings.terms.enable?
-            = t("registrations.new.terms",
-              terms_link: link_to(t("registrations.new.terms_link"), terms_path, target: "_blank")).html_safe
-
-          .form-group
-            = f.submit t("registrations.new.create_my_account"),
-              class: "btn btn-primary",
-              disable_with: t("registrations.new.submitting")
-            = link_to t("devise.sessions.new.sign_in"), new_user_session_path, class: "btn btn-link pull-right"
-
-%footer
-  = link_to t('layouts.application.toggle'), toggle_mobile_path

app/views/sessions/_form.haml

@@ -0,0 +1,44 @@
+= form_for resource, as:           resource_name,
+                     url:          session_path(resource_name),
+                     html:         {class: "block-form"},
+                     autocomplete: "off" do |f|
+  %fieldset
+    - if mobile
+      %legend
+        = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
+        = t("devise.sessions.new.login")
+
+    - if mobile
+      %label#usernameLabel{for: "user_username"}
+        = t("registrations.new.username")
+    - else
+      %label.sr-only#usernameLabel{for: "user_username"}
+        = t("registrations.new.username")
+      %i.entypo-user
+    = f.text_field :username,
+                   placeholder: t("registrations.new.username"),
+                   class: "input-block-level form-control",
+                   required: true,
+                   pattern: "[A-Za-z0-9_.@\-]+",
+                   autocapitalize: "none",
+                   autocorrect: "off",
+                   autofocus: true,
+                   aria: {labelledby: "usernameLabel"}
+
+    - if mobile
+      %label#passwordLabel{for: "user_password"}
+        = t("registrations.new.password")
+    - else
+      %label.sr-only#passwordLabel{for: "user_password"}
+        = t("registrations.new.password")
+      %i.entypo-lock
+    = f.password_field :password,
+                       placeholder: t("registrations.new.password"),
+                       class: "input-block-level form-control",
+                       required: true,
+                       autocapitalize: "none",
+                       autocorrect: "off",
+                       aria: {labelledby: "passwordLabel"}
+
+  = f.hidden_field :remember_me, value: 1
+  = f.submit t("devise.sessions.new.sign_in"), class: "btn btn-large btn-block btn-primary"

app/views/sessions/new.html.haml

@@ -7,34 +7,7 @@
     %h1
       = AppConfig.settings.pod_name
 
-  = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f|
+  = render partial: "form", locals: {mobile: false}
-    %fieldset
-      %label#usernameLabel.sr-only{for: "user_username"}
-        = t('registrations.new.username')
-      %i.entypo-user
-      = f.text_field :username,
-                     placeholder: t("registrations.new.username"),
-                     class: "input-block-level form-control",
-                     required: true,
-                     pattern: "[A-Za-z0-9_.@\-]+",
-                     autocapitalize: "none",
-                     autocorrect: "off",
-                     autofocus: true,
-                     aria: {labelledby: "usernameLabel"}
-
-      %label#passwordLabel.sr-only{for: "user_password"}
-        = t('registrations.new.password')
-      %i.entypo-lock
-      = f.password_field :password,
-                         placeholder: t("registrations.new.password"),
-                         class: "input-block-level form-control",
-                         required: true,
-                         autocapitalize: "none",
-                         autocorrect: "off",
-                         aria: {labelledby: "passwordLabel"}
-
-    = f.hidden_field :remember_me, value: 1
-    = f.submit t("devise.sessions.new.sign_in"), class: "btn btn-large btn-block btn-primary"
 
   .text-center
     - if display_password_reset_link?

app/views/sessions/new.mobile.haml

@@ -10,29 +10,15 @@
 
   #login_form
     .login-container
-      = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
+      = render partial: "form", locals: {mobile: true}
-        %fieldset
-          %legend
-            = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
-            = t("devise.sessions.new.login")
 
-          .form-group
+%footer.footer
-            = f.label :username, t("username")
+  %ul
-            = f.text_field :username, autofocus: true, class: "form-control", autocapitalize: "none", autocorrect: "off"
+    - if display_password_reset_link?
-
+      %li
-          .form-group
+        = link_to t("devise.shared.links.forgot_your_password"),
-            = f.label :password, t("password")
+          new_password_path(resource_name),
-            = f.password_field :password, class: "form-control"
+          id: "forgot_password_link"
-            = hidden_field(:user, :remember_me, value: 1)
+    - if display_registration_link?
-
+      %li= link_to t("devise.shared.links.sign_up"), new_registration_path(resource_name)
-          .form-group
+    %li= link_to t("layouts.application.toggle"), toggle_mobile_path
-            = f.submit t("devise.sessions.new.sign_in"), class: "btn btn-primary"
-            - if display_registration_link?
-              = link_to t("devise.shared.links.sign_up"), new_registration_path(resource_name),
-                      class: "btn btn-default pull-right"
-
-%footer
-  - if display_password_reset_link?
-    = link_to t("devise.passwords.new.forgot_password"), new_password_path(resource_name)
-
-  = link_to t("layouts.application.toggle"), toggle_mobile_path

features/mobile/invitations.feature

@@ -9,6 +9,6 @@ Feature: Invitations
     Given I have been invited by "alice@alice.alice"
     And I am on my acceptance form page
     When I fill in the new user form
-    And I press "Create my account!"
+    And I press "Sign up"
     Then I should see the "welcome to diaspora" message
     And I should be able to friend "alice@alice.alice"

features/mobile/signs_up.feature

@@ -6,28 +6,31 @@ Feature: New user registration
 
   Background:
     Given I am on the login page
-    And I follow "Sign up" within "#login_form"
+    And I follow "Sign up" within "#main-nav"
 
   Scenario: user signs up and goes to getting started
     When I fill in the new user form
-    And I submit the form
+    And I press "Sign up"
     Then I should be on the getting started page
     Then I should see the 'getting started' contents
 
   Scenario: user fills in bogus data - client side validation
     When I fill in the following:
         | user_username        | $%&(/&%$&/=)(/    |
-    And I submit the form
+    And I press "Sign up"
     Then I should not be able to sign up
+    And I should have a validation error on "user_username, user_password, user_email"
 
     When I fill in the following:
         | user_username     | valid_user                        |
         | user_email        | this is not a valid email $%&/()( |
-    And I submit the form
+    And I press "Sign up"
     Then I should not be able to sign up
+    And I should have a validation error on "user_password, user_email"
 
     When I fill in the following:
         | user_email        | valid@email.com        |
         | user_password     | 1                      |
-    And I submit the form
+    And I press "Sign up"
     Then I should not be able to sign up
+    And I should have a validation error on "user_password, user_password_confirmation"