From 832c85d835501d69580e768b317722ed6bc64519 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Mon, 21 Mar 2016 18:25:28 +0100
Subject: [PATCH] Unify mobile and desktop registration and session forms
---
app/assets/stylesheets/mobile/mobile.scss | 22 ++++++++---
app/views/registrations/_form.haml | 42 +++++++++++++++------
app/views/registrations/new.haml | 2 +-
app/views/registrations/new.mobile.haml | 46 +++--------------------
app/views/sessions/_form.haml | 44 ++++++++++++++++++++++
app/views/sessions/new.html.haml | 29 +-------------
app/views/sessions/new.mobile.haml | 36 ++++++------------
features/mobile/invitations.feature | 2 +-
features/mobile/signs_up.feature | 13 ++++---
9 files changed, 118 insertions(+), 118 deletions(-)
create mode 100644 app/views/sessions/_form.haml
diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss
index 074376d2bb..6b59d01b29 100644
--- a/app/assets/stylesheets/mobile/mobile.scss
+++ b/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 {
diff --git a/app/views/registrations/_form.haml b/app/views/registrations/_form.haml
index edd2603414..56bbb04fbb 100644
--- a/app/views/registrations/_form.haml
+++ b/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"
- %i.entypo-mail
+ - if mobile
+ %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"}
- = t("registrations.new.username")
- %i.entypo-user
+ - if mobile
+ %label.control-label#usernameLabel{for: "user_username"}
+ = 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"}
- = t("registrations.new.password")
- %i.entypo-lock
+ - if mobile
+ %label.control-label#passwordLabel{for: "user_password"}
+ = 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"}
- = t("registrations.new.password_confirmation")
- %i.entypo-lock
+ - if mobile
+ %label.control-label#passwordConfirmationLabel{for: "user_password_confirmation"}
+ = 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"),
diff --git a/app/views/registrations/new.haml b/app/views/registrations/new.haml
index 510b607b66..96f9c27334 100644
--- a/app/views/registrations/new.haml
+++ b/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}
diff --git a/app/views/registrations/new.mobile.haml b/app/views/registrations/new.mobile.haml
index fa117e0b0a..3b6eee1eeb 100644
--- a/app/views/registrations/new.mobile.haml
+++ b/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|
- %fieldset
- %legend
- = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
- = t("aspects.aspect_stream.make_something")
+ = render partial: "form", locals: {mobile: true}
- .form-group
- = f.label :username, t("username")
- = f.text_field :username, class: "form-control", placeholder: "jedi_guy"
-
- .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
+%footer.footer
+ %ul
+ %li= link_to t("devise.shared.links.sign_in"), new_session_path(resource_name)
+ %li= link_to t("layouts.application.toggle"), toggle_mobile_path
diff --git a/app/views/sessions/_form.haml b/app/views/sessions/_form.haml
new file mode 100644
index 0000000000..ba56cbf041
--- /dev/null
+++ b/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"
diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml
index 32e9f53b36..fff5c04977 100644
--- a/app/views/sessions/new.html.haml
+++ b/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|
- %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"
+ = render partial: "form", locals: {mobile: false}
.text-center
- if display_password_reset_link?
diff --git a/app/views/sessions/new.mobile.haml b/app/views/sessions/new.mobile.haml
index e33a4bd9ae..4c72aaaa56 100644
--- a/app/views/sessions/new.mobile.haml
+++ b/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|
- %fieldset
- %legend
- = image_tag("branding/logos/header-logo2x.png", height: 40, width: 40)
- = t("devise.sessions.new.login")
+ = render partial: "form", locals: {mobile: true}
- .form-group
- = f.label :username, t("username")
- = f.text_field :username, autofocus: true, class: "form-control", autocapitalize: "none", autocorrect: "off"
-
- .form-group
- = f.label :password, t("password")
- = f.password_field :password, class: "form-control"
- = hidden_field(:user, :remember_me, value: 1)
-
- .form-group
- = 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
+%footer.footer
+ %ul
+ - if display_password_reset_link?
+ %li
+ = link_to t("devise.shared.links.forgot_your_password"),
+ new_password_path(resource_name),
+ id: "forgot_password_link"
+ - if display_registration_link?
+ %li= link_to t("devise.shared.links.sign_up"), new_registration_path(resource_name)
+ %li= link_to t("layouts.application.toggle"), toggle_mobile_path
diff --git a/features/mobile/invitations.feature b/features/mobile/invitations.feature
index 2291d7feab..c4dce29d33 100644
--- a/features/mobile/invitations.feature
+++ b/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"
diff --git a/features/mobile/signs_up.feature b/features/mobile/signs_up.feature
index 6eb75c3f9b..1786bed439 100644
--- a/features/mobile/signs_up.feature
+++ b/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"
--
GitLab