nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unify mobile and desktop registration and session forms

Browse source
This commit is contained in:
Steffen van Bergerem 2016-03-21 18:25:28 +01:00
parent 6bec0dbbb9
commit 832c85d835
9 changed files with 118 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/stylesheets/mobile/mobile.scss
View file

@ -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 {

42
app/views/registrations/_form.haml
View file

@ -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"),

2
app/views/registrations/new.haml
View file

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

46
app/views/registrations/new.mobile.haml
View file

@ -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

44
app/views/sessions/_form.haml Normal file
View file

@ -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"

29
app/views/sessions/new.html.haml
View file

@ -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?

36
app/views/sessions/new.mobile.haml
View file

@ -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

2
features/mobile/invitations.feature
View file

@ -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"

13
features/mobile/signs_up.feature
View file

@ -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"