From 679274465b3a2aaf87a13553f08104d6d3f1d275 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 5 Oct 2022 18:57:33 +0200 Subject: [PATCH] Add server rules to sign-up flow (#19296) --- .../auth/registrations_controller.rb | 16 +++++- .../styles/mastodon/containers.scss | 6 +-- app/javascript/styles/mastodon/forms.scss | 49 ++++++++++++++++--- app/views/auth/registrations/new.html.haml | 29 ++++++----- app/views/auth/registrations/rules.html.haml | 20 ++++++++ config/locales/en.yml | 11 +++-- 6 files changed, 101 insertions(+), 30 deletions(-) create mode 100644 app/views/auth/registrations/rules.html.haml diff --git a/app/controllers/auth/registrations_controller.rb b/app/controllers/auth/registrations_controller.rb index 7e86e01ba..84a802447 100644 --- a/app/controllers/auth/registrations_controller.rb +++ b/app/controllers/auth/registrations_controller.rb @@ -14,6 +14,8 @@ class Auth::RegistrationsController < Devise::RegistrationsController before_action :set_body_classes, only: [:new, :create, :edit, :update] before_action :require_not_suspended!, only: [:update] before_action :set_cache_headers, only: [:edit, :update] + before_action :set_rules, only: :new + before_action :require_rules_acceptance!, only: :new before_action :set_registration_form_time, only: :new skip_before_action :require_functional!, only: [:edit, :update] @@ -55,7 +57,7 @@ class Auth::RegistrationsController < Devise::RegistrationsController def configure_sign_up_params devise_parameter_sanitizer.permit(:sign_up) do |u| - u.permit({ account_attributes: [:username], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password) + u.permit({ account_attributes: [:username, :display_name], invite_request_attributes: [:text] }, :email, :password, :password_confirmation, :invite_code, :agreement, :website, :confirm_password) end end @@ -138,6 +140,18 @@ class Auth::RegistrationsController < Devise::RegistrationsController forbidden if current_account.suspended? end + def set_rules + @rules = Rule.ordered + end + + def require_rules_acceptance! + return if @rules.empty? || (session[:accept_token].present? && params[:accept] == session[:accept_token]) + + @accept_token = session[:accept_token] = SecureRandom.hex + + set_locale { render :rules } + end + def set_cache_headers response.headers['Cache-Control'] = 'no-cache, no-store, max-age=0, must-revalidate' end diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index 5703a64e3..01ee56219 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -9,11 +9,7 @@ } .logo-container { - margin: 100px auto 50px; - - @media screen and (max-width: 500px) { - margin: 40px auto 0; - } + margin: 50px auto; h1 { display: flex; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index a6419821f..3d67f3b56 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -6,9 +6,10 @@ code { } .form-container { - max-width: 400px; + max-width: 450px; padding: 20px; - margin: 0 auto; + padding-bottom: 50px; + margin: 50px auto; } .indicator-icon { @@ -124,13 +125,34 @@ code { } .title { - color: #d9e1e8; - font-size: 20px; - line-height: 28px; - font-weight: 400; + font-size: 28px; + line-height: 33px; + font-weight: 700; + margin-bottom: 15px; + } + + .lead { + font-size: 17px; + line-height: 22px; + color: $secondary-text-color; margin-bottom: 30px; } + .rules-list { + list-style: decimal; + font-size: 17px; + line-height: 22px; + font-weight: 500; + background: transparent; + border: 0; + padding: 0.5em 1em !important; + margin-bottom: 30px; + + li { + border-color: lighten($ui-base-color, 8%); + } + } + .hint { color: $darker-text-color; @@ -461,6 +483,11 @@ code { } } + .stacked-actions { + margin-top: 30px; + margin-bottom: 15px; + } + button, .button, .block-button { @@ -512,6 +539,16 @@ code { } } + .button.button-tertiary { + padding: 9px; + + &:hover, + &:focus, + &:active { + padding: 10px; + } + } + select { appearance: none; box-sizing: border-box; diff --git a/app/views/auth/registrations/new.html.haml b/app/views/auth/registrations/new.html.haml index 6981195ed..5eb3f937c 100644 --- a/app/views/auth/registrations/new.html.haml +++ b/app/views/auth/registrations/new.html.haml @@ -5,6 +5,9 @@ = render partial: 'shared/og', locals: { description: description_for_sign_up } = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { novalidate: false }) do |f| + %h1.title= t('auth.sign_up.title', domain: site_hostname) + %p.lead= t('auth.sign_up.preamble') + = render 'shared/error_messages', object: resource - if @invite.present? && @invite.autofollow? @@ -12,31 +15,27 @@ %p.hint= t('invites.invited_by') = render 'application/card', account: @invite.user.account - = f.simple_fields_for :account do |ff| - .fields-group - = ff.input :username, wrapper: :with_label, autofocus: true, label: t('simple_form.labels.defaults.username'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: t('simple_form.hints.defaults.username', domain: site_hostname) - .fields-group - = f.input :email, wrapper: :with_label, label: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' } - - .fields-group - = f.input :password, wrapper: :with_label, label: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off', :minlength => User.password_length.first, :maxlength => User.password_length.last } - - .fields-group - = f.input :password_confirmation, wrapper: :with_label, label: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' } - = f.input :confirm_password, as: :string, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' } - - = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' } + = f.simple_fields_for :account do |ff| + = ff.input :display_name, wrapper: :with_label, label: false, required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.display_name'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.display_name') } + = ff.input :username, wrapper: :with_label, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username'), pattern: '[a-zA-Z0-9_]+', maxlength: 30 }, append: "@#{site_hostname}", hint: false + = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false + = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'new-password', :minlength => User.password_length.first, :maxlength => User.password_length.last }, hint: false + = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'new-password' }, hint: false + = f.input :confirm_password, as: :string, placeholder: t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: t('simple_form.labels.defaults.password')), :autocomplete => 'off' }, hint: false + = f.input :website, as: :url, wrapper: :with_label, label: t('simple_form.labels.defaults.honeypot', label: 'Website'), required: false, input_html: { 'aria-label' => t('simple_form.labels.defaults.honeypot', label: 'Website'), :autocomplete => 'off' } - if approved_registrations? && !@invite.present? .fields-group = f.simple_fields_for :invite_request, resource.invite_request || resource.build_invite_request do |invite_request_fields| = invite_request_fields.input :text, as: :text, wrapper: :with_block_label, required: Setting.require_invite_text + + = hidden_field_tag :accept, params[:accept] = f.input :invite_code, as: :hidden .fields-group - = f.input :agreement, as: :boolean, wrapper: :with_label, label: whitelist_mode? ? t('auth.checkbox_agreement_without_rules_html', terms_path: terms_path) : t('auth.checkbox_agreement_html', rules_path: about_more_path, terms_path: terms_path), required: true + = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.privacy_policy_agreement_html', rules_path: about_more_path, privacy_policy_path: privacy_policy_path), required: true .actions = f.button :button, @invite.present? ? t('auth.register') : sign_up_message, type: :submit diff --git a/app/views/auth/registrations/rules.html.haml b/app/views/auth/registrations/rules.html.haml new file mode 100644 index 000000000..a41581b32 --- /dev/null +++ b/app/views/auth/registrations/rules.html.haml @@ -0,0 +1,20 @@ +- content_for :page_title do + = t('auth.register') + +- content_for :header_tags do + = render partial: 'shared/og', locals: { description: description_for_sign_up } + +.simple_form + %h1.title= t('auth.rules.title') + %p.lead= t('auth.rules.preamble', domain: site_hostname) + + %ol.rules-list + - @rules.each do |rule| + %li + .rules-list__text= rule.text + + .stacked-actions + = link_to t('auth.rules.accept'), new_user_registration_path(accept: @accept_token), class: 'button' + = link_to t('auth.rules.back'), root_path, class: 'button button-tertiary' + +.form-footer= render 'auth/shared/links' diff --git a/config/locales/en.yml b/config/locales/en.yml index 8f4ea652b..5050cee42 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1001,10 +1001,8 @@ en: warning: Be very careful with this data. Never share it with anyone! your_token: Your access token auth: - apply_for_account: Request an invite + apply_for_account: Get on waitlist change_password: Password - checkbox_agreement_html: I agree to the server rules and terms of service - checkbox_agreement_without_rules_html: I agree to the terms of service delete_account: Delete account delete_account_html: If you wish to delete your account, you can proceed here. You will be asked for confirmation. description: @@ -1023,6 +1021,7 @@ en: migrate_account: Move to a different account migrate_account_html: If you wish to redirect this account to a different one, you can configure it here. or_log_in_with: Or log in with + privacy_policy_agreement_html: I have read and agree to the privacy policy providers: cas: CAS saml: SAML @@ -1030,12 +1029,18 @@ en: registration_closed: "%{instance} is not accepting new members" resend_confirmation: Resend confirmation instructions reset_password: Reset password + rules: + preamble: These are set and enforced by the %{domain} moderators. + title: Some ground rules. security: Security set_new_password: Set new password setup: email_below_hint_html: If the below e-mail address is incorrect, you can change it here and receive a new confirmation e-mail. email_settings_hint_html: The confirmation e-mail was sent to %{email}. If that e-mail address is not correct, you can change it in account settings. title: Setup + sign_up: + preamble: With an account on this Mastodon server, you'll be able to follow any other person on the network, regardless of where their account is hosted. + title: Let's get you set up on %{domain}. status: account_status: Account status confirming: Waiting for e-mail confirmation to be completed.