diff --git a/app/assets/stylesheets/colors.css.scss b/app/assets/stylesheets/colors.css.scss index e915ba9b8..d89947905 100644 --- a/app/assets/stylesheets/colors.css.scss +++ b/app/assets/stylesheets/colors.css.scss @@ -7,7 +7,7 @@ $background-blue: #E7F2F7; $grey: #2B2B2B; $light-grey: #DDDDDD; -$border-grey: #DDDDDD; +$border-grey: #CCCCCC; $border-dark-grey: #999999; $link-grey: #777777; diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss index 958d837cb..f4f35b8a3 100644 --- a/app/assets/stylesheets/new_styles/_forms.scss +++ b/app/assets/stylesheets/new_styles/_forms.scss @@ -1,91 +1,128 @@ +input, +textarea { /* Bootstrap reset */ + &, + &:active, + &:invalid, + &:invalid:required, { + border-color: $border-grey; + box-shadow: none; + } + + &:focus, + &:active:focus, + &:invalid:focus, + &:invalid:required:focus { + border-color: $border-dark-grey; + box-shadow: none; + } +} + /* autocomplete colors */ input:-webkit-autofill{ background-color: #fff !important; background-image: none !important; } - +/* Forms described here are only used on the public pages at the moment */ form.block-form { - display : inline-block; + margin: 20px auto; label { color : $text-dark-grey; - } - - input { - &:invalid, - &:invalid:required, - &:invalid:required:focus { - box-shadow : none; - - border : none; - color : $text-dark-grey; - } + position: absolute; + top: -9999px; + left: -9999px; } fieldset { - box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7); - margin-bottom : 1em; - background-color : #fff; - border : 1px solid $border-dark-grey; - border-radius: 5px; + margin-bottom: 1em; + background-color: #fff; + position: relative; /* To correctly place the entypo icon */ - input[type=text], - input[type=email], - input[type=password] { - box-shadow: 0 0 0 0; - border-radius: 0; - border : none; - background : transparent; - padding : 10px; - margin-bottom : 0; + input { + color : $text-dark-grey; + margin: 0px; + border-bottom-width: 0px; + border-radius: 0px; } - /* mainly bootstrap overrides */ - .control-group { - margin : 0; - border-bottom : 1px solid $border-grey; + .form-control { + font-size: 16px; + height: 40px; + padding: 10px; + padding-left: 40px; + } - .control-label, - input[type=text], - input[type=password], - .field_with_errors label { - padding : 10px; - margin : 0; - } - - .controls { margin-left : 100px; position : relative; } - .control-label { width : 80px; } - - .controls .field_with_errors input { - background : { - image : image-url('invalid_fat@2x.png'); - repeat : no-repeat; - position : 197px; - size: 20px 20px; - } + .form-control:first-of-type { + &, + &:focus, + &:invalid, + &:invalid:focus, + &:invalid:required, + &:invalid:required:focus { + border-top-left-radius: 5px; + border-top-right-radius: 5px; } } + + .form-control:last-of-type { + &, + &:focus, + &:invalid, + &:invalid:focus, + &:invalid:required, + &:invalid:required:focus { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-width: 1px; + } + } + + .form-control:focus { + &, + &:invalid, + &:invalid:required { + border-color: $border-dark-grey; + border-bottom-width: 1px; + } + /* remove the border of the element under the one with the focus */ + & + label + .entypo + .form-control { + border-top-width: 0px; + } + } + + .entypo { + position: absolute; + top: 10px; + left: 10px; + width: 20px; + text-align: center; + color: $text-grey; + font-size: 20px; + } + + .entypo:nth-of-type(2) { + top: 50px; + } + + .entypo:nth-of-type(3) { + top: 90px; + } + + .entypo:nth-of-type(4) { + top: 130px; + } + + input:-moz-placeholder { text-transform: uppercase; } + input::-webkit-input-placeholder { text-transform: uppercase; } + input:-ms-input-placeholder { text-transform: uppercase; } } input[type=submit] { - text-align : center; - display : block; - width : 100%; - padding : 8px 0; - } -} - -textarea, input[type=text], input[type=password], input[type=search] { - &:focus, - &:invalid, - &:invalid:focus, - &:invalid:required, - &:invalid:required:focus { - border: 1px solid $border-dark-grey; - outline: none; - box-shadow: none; - color : $text-dark-grey; + text-align: center; + display: block; + width: 100%; + padding: 8px 0; } } diff --git a/app/assets/stylesheets/new_styles/_login.scss b/app/assets/stylesheets/new_styles/_login.scss index bb2c120f7..a538a15e0 100644 --- a/app/assets/stylesheets/new_styles/_login.scss +++ b/app/assets/stylesheets/new_styles/_login.scss @@ -1,91 +1,16 @@ #login, #forgot_password, #reset_password { - padding-top: 20px; - + padding-top: 25px; + .branding-asterisk { margin: auto; width: 154px; height: 154px; - margin-bottom: 30px; + margin-bottom: 12px; } - - .span4.offset4 { - margin-bottom: 30px; - } - - label { - text-transform: uppercase; - text-align: right; - padding: 10px 0; - overflow: hidden; - } - - #new_user { - display: block; - margin: auto; + + form.block-form { max-width: 400px; - margin-bottom: 30px; - } -} - -#login { - .form-signin { - .form-control { - font-size: 16px; - height: auto; - padding: 10px; - padding-left: 40px; - } - fieldset { - margin-bottom: 20px; - } - .entypo { - position: relative; - display: inline-block; - width: 20px; - text-align: center; - top: -6px; - left: 12px; - color: $text-grey; - font-size: 20px; - } - input[type=text], input[type=password] { - &:focus { - border: 1px solid #ccc; - } - } - input[type=text] { - margin-bottom: -24px; - border-radius: 5px 5px 0 0; - } - input[type=password] { - margin-bottom: -23px; - border-radius: 0 0 5px 5px; - } - } -} - -#forgot_password { - label { - width: 40%; - } - - input[type=password] { - width: 60%; - } -} - -#reset_password { - label { - width: 45%; - } - - input[type=password] { - width: 55%; - } - - #new_user { - width: 500px; } } diff --git a/app/assets/stylesheets/new_styles/_registration.scss b/app/assets/stylesheets/new_styles/_registration.scss index 1e3a58917..7afa68640 100644 --- a/app/assets/stylesheets/new_styles/_registration.scss +++ b/app/assets/stylesheets/new_styles/_registration.scss @@ -1,5 +1,4 @@ #registration { - & > .container-fluid { margin-top: 5%; } @@ -15,7 +14,7 @@ margin-bottom : 1em; white-space : nowrap; } - + #pod-name { text-align: center; margin: 12px; @@ -33,16 +32,41 @@ } form { - .control-label, - .controls { - margin-left : auto; - width : auto; + .form-control:last-of-type { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } - .controls { - float : right; + .captcha { + border: 1px solid $border-grey; + border-top: 0px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + + .captcha_img { + float: left; + margin-top: 3px; + } + + #user_captcha { + float: right; + width: 69%; + border: 0px; + border-radius: 0px; + border-bottom-right-radius: 5px; + border-left: 1px solid $border-grey; + + &:focus { + border: solid 1px $border-dark-grey; + /* Sorry about this dirty hack, the only way I found to correctly display the grey border */ + position: relative; + top: -1px; + margin-right: -1px; + margin-bottom: -2px; + } + } } - + #terms > a { color: inherit; text-decoration: underline; diff --git a/app/assets/stylesheets/sessions.css.scss b/app/assets/stylesheets/sessions.css.scss deleted file mode 100644 index f693641f0..000000000 --- a/app/assets/stylesheets/sessions.css.scss +++ /dev/null @@ -1,162 +0,0 @@ -// Copyright (c) 2010-2011, Diaspora Inc. This file is -// licensed under the Affero General Public License version 3 or later. See -// the COPYRIGHT file. - -@font-face { - font-family: 'BrandonGrotesqueLightRegular'; - src: url('brandongrotesque_light/Brandon_light-webfont.eot'); - src: local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg'); - font: { - weight: normal; - style: normal; - } -} - -#flash_notice, -#flash_error, -#flash_alert { - z-index: 100; - top: 32px; - position: absolute; - color: #000; - width: 400px; - margin: 0 0 0 -200px; - left: 50%; - text-align: center; - font-size: 14px; - padding: 3px 0; -} - -#flash_notice { - background-color: #CFC; - border: solid 1px #6C6; -} - -#flash_error, -#flash_alert { - background-color: #FCC; - border: solid 1px #C66; -} - -.fieldWithErrors { - display: inline; -} - -.error_messages { - width: 400px; - border: 2px solid #CF0000; - padding: 0; - padding-bottom: 12px; - margin-bottom: 20px; - background-color: #f0f0f0; - font-size: 12px; - h2 { - text-align: left; - padding: 5px 5px 5px 15px; - margin: 0; - font: { - weight: bold; - size: 12px; - } - background-color: #c00; - } - p { - margin: 8px 10px; - } - ul { - margin: 0; - } -} - -/* via blueprint */ -html { - font-size: 100.01%; -} - -/* via blueprint */ -body { - font: { - size: 75%; - family: "Helvetica Neue", Arial, Helvetica, sans-serif; - } - color: #222; - background: #fff; - - margin-left: 100px; -} - -/* via blueprint */ -input[type=text], -input[type=password], -textarea, select { - background-color: #fff; - border: 1px solid #bbb; -} - -/* via blueprint */ -input[type=text]:focus, -input[type=password]:focus, -input.text:focus, -input.title:focus, -textarea:focus, select:focus { - border-color: #666; -} - -#huge_text { - font: { - size: 40px; - family: 'BrandonGrotesqueLightRegular'; - } - line-height: 120px; - color: #333; - text-shadow: 0 1px 1px #999; -} - -input { - font-size: 14px; -} - -form p { - position: relative; - padding: 0; -} - -label { - color: #999; - position: absolute; - padding-top: 7px; - left: 8px; - font: { - size: 14px; - weight: normal; - } -} - -input[type='text'], -input[type='password'] { - font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; - padding: 0.3em; - width: 395px; - border-top: 1px solid #999; -} - -#user { - display: inline; - width: 500px; - .username { - width: 200px; - display: inline; - - input { - display: inline; - width: 200px; - } - } - - .user_network { - width: 200px; - display: inline; - font-size: 18px; - } -} - diff --git a/app/views/passwords/edit.haml b/app/views/passwords/edit.haml index 75dca2f85..8731edc34 100644 --- a/app/views/passwords/edit.haml +++ b/app/views/passwords/edit.haml @@ -1,5 +1,5 @@ - content_for :page_title do - = "#{AppConfig.settings.pod_name} / #{t('devise.passwords.edit.change_password')}" + = "#{AppConfig.settings.pod_name} - #{t('devise.passwords.edit.change_password')}" #reset_password .container-fluid @@ -7,23 +7,23 @@ .branding-asterisk %h1 = AppConfig.settings.pod_name - + = form_for(resource, as: resource_name, url: password_path(resource_name), html: {class: "form-horizontal block-form", method: :put }, autocomplete: 'off') do |f| %fieldset + %label{for: "user_password"} + = t('devise.passwords.edit.new_password') + %i.entypo.lock + = f.password_field :password, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.new_password'), autocapitalize: "none", autocorrect: "off", autofocus: true + = f.hidden_field :reset_password_token - .control-group - %label{class: "control-label", for: "user_password"} - = t('devise.passwords.edit.new_password') - .controls - = f.password_field :password, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off", autofocus: true - .control-group - %label{class: "control-label", for: "user_password_confirmation"} - = t('devise.passwords.edit.confirm_password') - .controls - = f.password_field :password_confirmation, required: true, placeholder: "••••••••", autocapitalize: "off", autocorrect: "off" - = hidden_field(:user, :remember_me, value: 1) + + %label{for: "user_password_confirmation"} + = t('devise.passwords.edit.confirm_password') + %i.entypo.lock + = f.password_field :password_confirmation, class: "input-block-level form-control", required: true, placeholder: t('devise.passwords.edit.confirm_password'), autocapitalize: "none", autocorrect: "off" + + = hidden_field(:user, :remember_me, value: 1) = f.submit t('devise.passwords.edit.change_password'), class: "btn" .text-center = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name) - diff --git a/app/views/passwords/new.haml b/app/views/passwords/new.haml index 5201694b2..b7a35f6a6 100644 --- a/app/views/passwords/new.haml +++ b/app/views/passwords/new.haml @@ -1,5 +1,5 @@ - content_for :page_title do - = "#{AppConfig.settings.pod_name} / #{t('devise.passwords.new.forgot_password')}" + = "#{AppConfig.settings.pod_name} - #{t('devise.passwords.new.forgot_password')}" #forgot_password .container-fluid @@ -12,15 +12,13 @@ - if !devise_error_messages!.empty? %legend %i - = t('devise.passwords.new.no_account') + = t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend %fieldset - .control-group - %label{class: "control-label", for: "user_email"} - = t('devise.passwords.new.email') - .controls - = f.text_field :email, required: true, autocapitalize: "off", placeholder: "••••••••", autocorrect: "off", autofocus: true + %label{for: "user_email"} + = t('devise.passwords.new.email') + %i.entypo.mail + = f.text_field :email, class: "input-block-level form-control", required: true, autocapitalize: "off", placeholder: t('devise.passwords.new.email'), autocorrect: "off", autofocus: true = f.submit t('devise.passwords.new.send_password_instructions'), class: "btn" .text-center = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name) - diff --git a/app/views/registrations/new.haml b/app/views/registrations/new.haml index c57c0d9ea..d21685f55 100644 --- a/app/views/registrations/new.haml +++ b/app/views/registrations/new.haml @@ -2,50 +2,45 @@ .container-fluid .row-fluid .span10.offset1 - .span6 + .span7.hidden-phone %h1#create-something-text = t('.hey_make').html_safe %h3#diaspora-hearts = t('.diaspora') - .span6 + .span5 .pull-right %h2#pod-name = AppConfig.settings.pod_name - %h4#sign-up-text - = t('.sign_up') = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f| %fieldset - .control-group - %label.control-label{for: "user_email"} - = t('.email') - .controls - = f.email_field :email, placeholder: "luke@hoth.net", title: t('registrations.new.enter_email'), required: true + %label.control-label{for: "user_email"} + = t('.email') + %i.entypo.mail + = f.email_field :email, class: "input-block-level form-control", placeholder: t('.email'), title: t('registrations.new.enter_email'), required: true - .control-group - %label.control-label{for: "user_username"} - = t('.username') - .controls - = f.text_field :username, placeholder: "jedi_guy", title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+" + %label.control-label{for: "user_username"} + = t('.username') + %i.entypo.user + = f.text_field :username, class: "input-block-level form-control", placeholder: t('.username'), title: t('registrations.new.enter_username'), required: true, pattern: "[A-Za-z0-9_]+" - .control-group - %label.control-label{for: "user_password"} - = t('.password') - .controls - = f.password_field :password, placeholder: "••••••••", title: t('registrations.new.enter_password'), required: true, pattern: "......+" + %label.control-label{for: "user_password"} + = t('.password') + %i.entypo.lock + = f.password_field :password, class: "input-block-level form-control", placeholder: t('.password'), title: t('registrations.new.enter_password'), required: true, pattern: "......+" - .control-group - %label.control-label{for: "user_password_confirmation"} - = t('.password_confirmation') - .controls - = f.password_field :password_confirmation, placeholder: "••••••••", title: t('registrations.new.enter_password_again'), required: true, pattern: "......+" + %label.control-label{for: "user_password_confirmation"} + = t('.password_confirmation') + %i.entypo.lock + = f.password_field :password_confirmation, class: "input-block-level form-control", placeholder: t('.password_confirmation'), title: t('registrations.new.enter_password_again'), required: true, pattern: "......+" - if AppConfig.settings.captcha.enable? - #captcha.control-group + .captcha = show_simple_captcha(object: 'user', code_type: 'numeric') - + %div{style: "clear:both;"} + = invite_hidden_tag(invite) - + - if AppConfig.settings.terms.enable? %p#terms.text-center = t('.terms', terms_link: link_to(t('.terms_link'), terms_path, target: "_blank")).html_safe - = f.submit t('.continue'), class: "btn", data: {disable_with: t('.submitting')} + = f.submit t('.sign_up'), class: "btn", data: {disable_with: t('.submitting')} diff --git a/app/views/sessions/new.html.haml b/app/views/sessions/new.html.haml index ffcedfa56..97d6a67f1 100644 --- a/app/views/sessions/new.html.haml +++ b/app/views/sessions/new.html.haml @@ -1,5 +1,5 @@ - content_for :page_title do - = AppConfig.settings.pod_name + " / " + t('devise.sessions.new.sign_in') + = AppConfig.settings.pod_name + " - " + t('devise.sessions.new.sign_in') .container-fluid#login .text-center @@ -7,30 +7,36 @@ %h1 = AppConfig.settings.pod_name - = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'form-signin'}, autocomplete: 'off' do |f| + = form_for resource, as: resource_name, url: session_path(resource_name), html: {class: 'block-form'}, autocomplete: 'off' do |f| %fieldset - = f.text_field :username, - placeholder: t('registrations.new.username'), - class: 'input-block-level form-control', - required: true, - pattern: '[A-Za-z0-9_.@\-]+', - autocapitalize: 'off', - autocorrect: 'off', - autofocus: true + %label{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 - = f.password_field :password, - placeholder: t('registrations.new.password'), - class: 'input-block-level form-control', - required: true + %label{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' = f.hidden_field :remember_me, value: 1 - = f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block green' + = f.submit t('devise.sessions.new.sign_in'), class: 'btn btn-large btn-block' .text-center - - if display_registration_link? - = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name) - \- - if display_password_reset_link? = link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), id: "forgot_password_link" + %br + - if display_registration_link? + = link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name) diff --git a/app/views/simple_captcha/_simple_captcha.haml b/app/views/simple_captcha/_simple_captcha.haml index bc7d70bc4..f8adfb468 100644 --- a/app/views/simple_captcha/_simple_captcha.haml +++ b/app/views/simple_captcha/_simple_captcha.haml @@ -1,4 +1,3 @@ -.control-label +.captcha_img = simple_captcha_options[:image] -.controls - = simple_captcha_options[:field] \ No newline at end of file += simple_captcha_options[:field] diff --git a/config/locales/devise/devise.en.yml b/config/locales/devise/devise.en.yml index e1269d7bc..b9465ff04 100644 --- a/config/locales/devise/devise.en.yml +++ b/config/locales/devise/devise.en.yml @@ -30,13 +30,13 @@ en: updated: 'Your password was changed successfully. You are now signed in.' edit: change_password: "Change my password" - new_password: "New password" - confirm_password: "Confirm password" + new_password: "NEW PASSWORD" + confirm_password: "CONFIRM PASSWORD" new: forgot_password: "Forgot your password?" no_account: 'No account with this email exists' reset_password: "Reset password" - email: "Email address" + email: "EMAIL ADDRESS" send_password_instructions: "Send me reset password instructions" confirmations: send_instructions: 'You will receive an email with instructions about how to confirm your account in a few minutes.' diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 720a0aa19..79628c54d 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -829,15 +829,15 @@ en: subject: "Your diaspora* account has been flagged for removal due to inactivity" body: |- Hello, - + It looks as though you no longer want your account at %{pod_url}, as you haven’t used it for %{after_days} days. To ensure our active users get the best performance from this diaspora* pod, we’d like to remove unwanted accounts from our database. - + We’d love you to stay part of diaspora*’s community, and you’re welcome to keep your account live if you want to. - + If you want to keep your account live, all you need to do is to sign in to your account before %{remove_after}. When you sign in, take a moment to have a look around diaspora*. It has changed a lot since you last looked in, and we think you’ll like the improvements we’ve made. Follow some #tags to find content you love. - + Sign in here: %{login_url}. If you’ve forgotten your sign-in details, you can ask for a reminder on that page. - + Hoping to see you again, The diaspora* email robot! @@ -1014,7 +1014,6 @@ en: username: "USERNAME" password: "PASSWORD" password_confirmation: "PASSWORD CONFIRMATION" - continue: "Continue" submitting: "Submitting..." terms: "By creating an account you accept the %{terms_link}." terms_link: "terms of service" diff --git a/features/desktop/change_password.feature b/features/desktop/change_password.feature index 7c604faf6..da03e0989 100644 --- a/features/desktop/change_password.feature +++ b/features/desktop/change_password.feature @@ -12,16 +12,18 @@ Feature: Change password Then I should be on the stream page Scenario: Reset my password - Given a user with email "forgetful@users.net" + Given a user named "Georges Abitbol" with email "forgetful@users.net" Given I am on forgot password page When I fill out forgot password form with "forgetful@users.net" And I submit forgot password form Then I should see "You will receive an email with instructions" When I follow the "Change my password" link from the last sent email - Then I should see "NEW PASSWORD" When I fill out reset password form with "supersecret" and "supersecret" And I submit reset password form Then I should be on the stream page + And I sign out manually + And I sign in manually as "georges_abitbol" with password "supersecret" + Then I should be on the stream page Scenario: Attempt to reset password with invalid email Given I am on forgot password page