diff --git a/Changelog.md b/Changelog.md index 280c75ce6..eda648117 100644 --- a/Changelog.md +++ b/Changelog.md @@ -96,6 +96,7 @@ diaspora.yml file**. The existing settings from 0.4.x and before will not work a * Hide sign up button when registrations are disabled [#5612](https://github.com/diaspora/diaspora/pull/5612) * Standardize capitalization throughout the UI [#5588](https://github.com/diaspora/diaspora/pull/5588) * Display photos on the profile page as thumbnails [#5521](https://github.com/diaspora/diaspora/pull/5521) +* Unify not connected pages (sign in, sign up, forgot password) [#5391](https://github.com/diaspora/diaspora/pull/5391) ## Bug fixes * orca cannot see 'Add Contact' button [#5158](https://github.com/diaspora/diaspora/pull/5158) @@ -1252,4 +1253,3 @@ The single-post view will also be revamped/reverted, but that didn't make it int ## Cleanup in maintenance scripts and automated build environment - diff --git a/app/assets/stylesheets/new_styles/_base.scss b/app/assets/stylesheets/new_styles/_base.scss index 0d8372bb4..cf199b77c 100644 --- a/app/assets/stylesheets/new_styles/_base.scss +++ b/app/assets/stylesheets/new_styles/_base.scss @@ -33,12 +33,6 @@ a { color : $link-blue } } } -#forgot_password, -#reset_password { - background-image : image_url("texture/light-bg.png"); - height: 100%; -} - .author-name { color: inherit; } diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss index 958d837cb..51cd8b71d 100644 --- a/app/assets/stylesheets/new_styles/_forms.scss +++ b/app/assets/stylesheets/new_styles/_forms.scss @@ -1,91 +1,106 @@ +input, +input[type=email], +input[type=text], +input[type=password], +textarea { /* Bootstrap reset */ + &, + &:active, + &:invalid, + &:invalid:required, + &:focus, + &:active:focus, + &:invalid:focus, + &:invalid:required:focus { + border-color: $border-grey; + box-shadow: none; + color : $text-dark-grey; + } +} + /* 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; } } - } - input[type=submit] { - text-align : center; - display : block; - width : 100%; - padding : 8px 0; - } -} + .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; + } + } -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; + .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; + } + + ::placeholder { text-transform: uppercase; } } } diff --git a/app/assets/stylesheets/new_styles/_login.scss b/app/assets/stylesheets/new_styles/_login.scss index 8e0be0d47..a538a15e0 100644 --- a/app/assets/stylesheets/new_styles/_login.scss +++ b/app/assets/stylesheets/new_styles/_login.scss @@ -1,81 +1,16 @@ +#login, #forgot_password, #reset_password { - position : absolute; - top : 0; - left : 0; - padding-top : 200px; - min-width : 100%; + padding-top: 25px; - //color : #fff; - text-align : center; - - label { - text-transform: uppercase; - } - - input[type=text], - input[type=password] { - width : 120px; - } - - #huge-text { - font-family : Roboto-Light; - font-size : 200px; - color : #ddd; - text-shadow : 0 1px 0 #fff; - } - - #forgot_password_link { - margin : 40px; - color : $text-grey; - clear : all; - } -} - -#login { - padding-top: 20px; .branding-asterisk { margin: auto; width: 154px; height: 154px; + margin-bottom: 12px; } - .form-signin { - margin-bottom: 30px; - .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_link { - margin-top: 20px; - } + form.block-form { + max-width: 400px; } } diff --git a/app/assets/stylesheets/new_styles/_registration.scss b/app/assets/stylesheets/new_styles/_registration.scss index 90e053807..8dd83bd5f 100644 --- a/app/assets/stylesheets/new_styles/_registration.scss +++ b/app/assets/stylesheets/new_styles/_registration.scss @@ -1,48 +1,53 @@ #registration { - position:absolute; - min-width: 100%; - min-height: 100%; - background-color : #afc652; - color: #fff; + & > .container-fluid { + margin-top: 5%; + } #create-something-text { - font-family : Roboto-Light; font-size : 100px; line-height : 100px; - white-space : nowrap; } #diaspora-hearts { - font-family : Roboto-Light; - font-size : 24px; + font-size : 30px; margin-top : 0.2em; margin-bottom : 1em; white-space : nowrap; } - #sign-up-text { - font-family : Roboto-Bold; - color : #7f9448; - margin-bottom : 0.5em; + #pod-name { + text-align: center; + margin: 12px; + font-size : 35px; } - #collage { - width : 344px; - height : auto; - max-width : 95%; + #create-something-text, + #diaspora-hearts { + font-family : Roboto-Light; } form { - .control-label, - .controls { - margin-left : auto; - width : auto; + max-width: 400px; + + .captcha_img { + position: absolute; + left: 10px; + width: 120px; + top: 169px; } - .controls { - float : right; + #user_captcha { + font-size: 16px; + height: 40px; + padding: 10px 10px 10px 130px; + line-height: 20px; + box-sizing: border-box; + width: 100%; + border-bottom: 1px solid $border-grey; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } - + #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/controllers/passwords_controller.rb b/app/controllers/passwords_controller.rb index 657f89809..6f94b60b8 100644 --- a/app/controllers/passwords_controller.rb +++ b/app/controllers/passwords_controller.rb @@ -1,4 +1,4 @@ class PasswordsController < Devise::PasswordsController - layout "application", :only => [:new] - before_filter -> { @css_framework = :bootstrap }, only: [:new, :create, :edit] + layout ->(c) { request.format == :mobile ? "application" : "with_header_with_footer" } + before_filter -> { @css_framework = :bootstrap } end diff --git a/app/views/passwords/edit.haml b/app/views/passwords/edit.haml index e4316a94c..804481bb8 100644 --- a/app/views/passwords/edit.haml +++ b/app/views/passwords/edit.haml @@ -1,27 +1,29 @@ - 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 - %h1{id: "huge-text"}= AppConfig.settings.pod_name + .container-fluid + .text-center + .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 - = f.hidden_field :reset_password_token - .control-group - %label{class: "control-label", for: "user_password", style: "width: 45%; text-align: right; padding: 10px 0; overflow: hidden"} + = 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') - .controls - = f.password_field :password, :required => true, :placeholder => "••••••••", :autocapitalize => "off", :autocorrect => "off", :autofocus => true, :style => "width: 55%;" - .control-group - %label{class: "control-label", for: "user_password_confirmation", style: "width: 45%; text-align: right; padding: 10px 0; overflow: hidden"} + %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 + + %label{for: "user_password_confirmation"} = t('devise.passwords.edit.confirm_password') - .controls - = f.password_field :password_confirmation, :required => true, :placeholder => "••••••••", :autocapitalize => "off", :autocorrect => "off", :style => "width: 55%;" - = hidden_field(:user, :remember_me, :value => 1) - = f.submit t('devise.passwords.edit.change_password'), :class => "new-btn" + %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" - %br/ - %br/ - %br/ - = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name) + = hidden_field(:user, :remember_me, value: 1) + = f.submit t('devise.passwords.edit.change_password'), class: "btn btn-block" + .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 9ee0347e5..286a29d50 100644 --- a/app/views/passwords/new.haml +++ b/app/views/passwords/new.haml @@ -1,22 +1,24 @@ - 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 - %h1{id: "huge-text"}= AppConfig.settings.pod_name + .container-fluid + .text-center + .branding-asterisk + %h1 + = AppConfig.settings.pod_name - = form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => {:class => "form-horizontal block-form"}, :autocomplete => 'off') do |f| - %legend - %i= t('devise.passwords.new.no_account') unless devise_error_messages!.empty? - %fieldset - .control-group - %label{class: "control-label", for: "user_email", style: "width: 40%; text-align: center; padding: 10px 0; overflow: hidden"} + = form_for(resource, as: resource_name, url: password_path(resource_name), html: {class: "form-horizontal block-form"}, autocomplete: 'off') do |f| + - if !devise_error_messages!.empty? + %legend + %i + = t('devise.passwords.new.no_account') # this is an error message and should not be displayed as a legend + %fieldset + %label{for: "user_email"} = t('devise.passwords.new.email') - .controls - = f.text_field :email, :required => true, :autocapitalize => "off", :placeholder => "••••••••", :autocorrect => "off", :autofocus => true, :style => "width: 60%;" - = f.submit t('devise.passwords.new.send_password_instructions'), :class => "new-btn" - - %br/ - %br/ - %br/ - = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name) + %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 btn-block" + .text-center + = link_to t('devise.shared.links.sign_in'), new_session_path(resource_name) diff --git a/app/views/registrations/edit.html.haml b/app/views/registrations/edit.html.haml deleted file mode 100644 index adcdf2468..000000000 --- a/app/views/registrations/edit.html.haml +++ /dev/null @@ -1,28 +0,0 @@ -%h2 - = t('.edit', :name => resource_name.to_s.humanize) -= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| - = devise_error_messages! - %p - = f.label :email - %br/ - = f.text_field :email - %p - = f.label :password - %i = t('.leave_blank') - %br/ - = f.password_field :password - %p - = f.label :password_confirmation - %br/ - = f.password_field :password_confirmation - %p - = f.label :current_password - %i = t('.password_to_confirm') - %br/ - = f.password_field :current_password - %p - = f.submit t('.update') -%h3 t('.cancel_my_account') -%p - = t('.unhappy') #{link_to t('.cancel_my_account'), registration_path(resource_name), :data => { :confirm => t('are_you_sure') }, :method => :delete}. -= link_to t('back'), :back diff --git a/app/views/registrations/new.haml b/app/views/registrations/new.haml new file mode 100644 index 000000000..e7f2c8b92 --- /dev/null +++ b/app/views/registrations/new.haml @@ -0,0 +1,44 @@ +#registration + .container-fluid + .row-fluid + .span10.offset1 + .span7.hidden-phone + %h1#create-something-text + = t('.hey_make').html_safe + %h3#diaspora-hearts + = t('.diaspora') + .span5 + .text-center + %h2#pod-name + = AppConfig.settings.pod_name + = form_for(resource, url: registration_path(resource_name), html: {class: "form-horizontal block-form", autocomplete: "off"}) do |f| + %fieldset + %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 + + %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_]+" + + %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: "......+" + + %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? + = show_simple_captcha :object => 'user', :code_type => 'numeric' + + = 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('.sign_up'), class: "btn btn-block btn-large", data: {disable_with: t('.submitting')} diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb deleted file mode 100644 index 7cc3b57e5..000000000 --- a/app/views/registrations/new.html.erb +++ /dev/null @@ -1,81 +0,0 @@ -