diff --git a/.rubocop.yml b/.rubocop.yml index f28b3e3..075169f 100644 --- a/.rubocop.yml +++ b/.rubocop.yml @@ -26,3 +26,4 @@ Metrics/BlockLength: - 'Guardfile' - 'db/schema.rb' - 'spec/**/*' + - 'config/initializers/simple_form_bootstrap.rb' diff --git a/Gemfile b/Gemfile index f95627f..60fdb40 100644 --- a/Gemfile +++ b/Gemfile @@ -16,6 +16,7 @@ gem 'puma', '~> 3.0' gem 'rails', '~> 5.0.1' gem 'rainbow', '>= 2.1.0', '< 2.2.0' # workaround for bundler errors gem 'sass-rails', '~> 5.0' +gem 'simple_form' gem 'slim-rails' gem 'turbolinks', '~> 5' gem 'uglifier', '>= 1.3.0' diff --git a/Gemfile.lock b/Gemfile.lock index b45abdb..421e883 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -245,6 +245,9 @@ GEM shellany (0.0.1) shoulda-matchers (3.1.1) activesupport (>= 4.0.0) + simple_form (3.4.0) + actionpack (> 4, < 5.1) + activemodel (> 4, < 5.1) simplecov (0.12.0) docile (~> 1.1.0) json (>= 1.8, < 3) @@ -329,6 +332,7 @@ DEPENDENCIES sass-rails (~> 5.0) selenium-webdriver shoulda-matchers + simple_form simplecov slim-rails spring diff --git a/app/views/devise/confirmations/new.html.slim b/app/views/devise/confirmations/new.html.slim index 9ae25d2..bdad045 100644 --- a/app/views/devise/confirmations/new.html.slim +++ b/app/views/devise/confirmations/new.html.slim @@ -1,11 +1,7 @@ -h2 - | Resend confirmation instructions -= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| +h2 Resend confirmation instructions += simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| = devise_error_messages! - .field - = f.label :email - br - = f.email_field :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) - .actions - = f.submit "Resend confirmation instructions" + = f.input :email, autofocus: true, value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) + = f.button :submit, "Resend confirmation instructions" + = render "devise/shared/links" diff --git a/app/views/devise/passwords/edit.html.slim b/app/views/devise/passwords/edit.html.slim index a4e9ca5..89b65cc 100644 --- a/app/views/devise/passwords/edit.html.slim +++ b/app/views/devise/passwords/edit.html.slim @@ -1,6 +1,6 @@ h2 | Change your password -= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| += simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| = devise_error_messages! = f.hidden_field :reset_password_token .field @@ -18,5 +18,5 @@ h2 br = f.password_field :password_confirmation, autocomplete: "off" .actions - = f.submit "Change my password" + = f.button :submit, "Change my password" = render "devise/shared/links" diff --git a/app/views/devise/passwords/new.html.slim b/app/views/devise/passwords/new.html.slim index 5910ebd..de5003c 100644 --- a/app/views/devise/passwords/new.html.slim +++ b/app/views/devise/passwords/new.html.slim @@ -1,11 +1,7 @@ -h2 - | Forgot your password? -= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| +h2 Forgot your password? += simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| = devise_error_messages! - .field - = f.label :email - br - = f.email_field :email, autofocus: true - .actions - = f.submit "Send me reset password instructions" + = f.input :email, autofocus: true + = f.button :submit, "Send me reset password instructions" + = render "devise/shared/links" diff --git a/app/views/devise/registrations/edit.html.slim b/app/views/devise/registrations/edit.html.slim index 4011c58..ebdc79a 100644 --- a/app/views/devise/registrations/edit.html.slim +++ b/app/views/devise/registrations/edit.html.slim @@ -1,12 +1,11 @@ -h2 - | Edit +h2 Edit = resource_name.to_s.humanize -= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| += simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| = devise_error_messages! .field = f.label :email br - = f.email_field :email, autofocus: true + = f.input :email, autofocus: true - if devise_mapping.confirmable? && resource.pending_reconfirmation? div | Currently waiting confirmation for: @@ -33,7 +32,7 @@ h2 br = f.password_field :current_password, autocomplete: "off" .actions - = f.submit "Update" + = f.button :submit, "Update" h3 | Cancel my account p diff --git a/app/views/devise/registrations/new.html.slim b/app/views/devise/registrations/new.html.slim index d7aa08a..51bf2f6 100644 --- a/app/views/devise/registrations/new.html.slim +++ b/app/views/devise/registrations/new.html.slim @@ -1,23 +1,11 @@ h2 Sign up -= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| += simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| = devise_error_messages! - .field - = f.label :name - br - = f.text_field :name, autofocus: true - .field - = f.label :email - br - = f.email_field :email - .field - = f.label :password - - if @minimum_password_length - em - | ( - = @minimum_password_length - | characters minimum) - br - = f.password_field :password, autocomplete: "off" + = f.input :name, autofocus: true + = f.input :email + - if @minimum_password_length + = f.input :password, autocomplete: 'off', hint: "(#{@minimum_password_length} characters minimum)" .actions - = f.submit "Sign up" + = f.button :submit, "Sign up" + = render "devise/shared/links" diff --git a/app/views/devise/sessions/new.html.slim b/app/views/devise/sessions/new.html.slim index fc4dbe3..4a6b023 100644 --- a/app/views/devise/sessions/new.html.slim +++ b/app/views/devise/sessions/new.html.slim @@ -1,18 +1,11 @@ -h2 - | Sign in -= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| - .field - = f.label :email - br - = f.email_field :email, autofocus: true - .field - = f.label :password - br - = f.password_field :password, autocomplete: "off" +h2 Sign in += simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| + .field = f.input :email, autofocus: true + .field = f.input :password, autocomplete: "off" - if devise_mapping.rememberable? .field = f.check_box :remember_me = f.label :remember_me - .actions - = f.submit "Sign in" + = f.button :submit, "Sign in" + = render "devise/shared/links" diff --git a/app/views/devise/unlocks/new.html.slim b/app/views/devise/unlocks/new.html.slim index 19da5b5..086f1c1 100644 --- a/app/views/devise/unlocks/new.html.slim +++ b/app/views/devise/unlocks/new.html.slim @@ -1,11 +1,7 @@ -h2 - | Resend unlock instructions -= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| +h2 Resend unlock instructions += simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| = devise_error_messages! - .field - = f.label :email - br - = f.email_field :email, autofocus: true - .actions - = f.submit "Resend unlock instructions" + = f.email_field :email, autofocus: true + = f.button :submit, "Resend unlock instructions" + = render "devise/shared/links" diff --git a/app/views/rooms/_form.html.slim b/app/views/rooms/_form.html.slim index e532866..eda41f3 100644 --- a/app/views/rooms/_form.html.slim +++ b/app/views/rooms/_form.html.slim @@ -1,7 +1,3 @@ -= form_for(room, url: rooms_path) do |f| - .field - = f.label :name - br - = f.text_field :name - .actions - = f.submit submit_button_text += simple_form_for(room, url: rooms_path) do |f| + = f.input :name + = f.button :submit, submit_button_text diff --git a/config/initializers/simple_form.rb b/config/initializers/simple_form.rb new file mode 100644 index 0000000..5e93660 --- /dev/null +++ b/config/initializers/simple_form.rb @@ -0,0 +1,169 @@ +# Use this setup block to configure all options available in SimpleForm. +SimpleForm.setup do |config| + # Wrappers are used by the form builder to generate a + # complete input. You can remove any component from the + # wrapper, change the order or even add your own to the + # stack. The options given below are used to wrap the + # whole input. + config.wrappers :default, class: :input, + hint_class: :field_with_hint, error_class: :field_with_errors do |b| + ## Extensions enabled by default + # Any of these extensions can be disabled for a + # given input by passing: `f.input EXTENSION_NAME => false`. + # You can make any of these extensions optional by + # renaming `b.use` to `b.optional`. + + # Determines whether to use HTML5 (:email, :url, ...) + # and required attributes + b.use :html5 + + # Calculates placeholders automatically from I18n + # You can also pass a string as f.input placeholder: "Placeholder" + b.use :placeholder + + ## Optional extensions + # They are disabled unless you pass `f.input EXTENSION_NAME => true` + # to the input. If so, they will retrieve the values from the model + # if any exists. If you want to enable any of those + # extensions by default, you can change `b.optional` to `b.use`. + + # Calculates maxlength from length validations for string inputs + # and/or database column lengths + b.optional :maxlength + + # Calculate minlength from length validations for string inputs + b.optional :minlength + + # Calculates pattern from format validations for string inputs + b.optional :pattern + + # Calculates min and max from length validations for numeric inputs + b.optional :min_max + + # Calculates readonly automatically from readonly attributes + b.optional :readonly + + ## Inputs + b.use :label_input + b.use :hint, wrap_with: { tag: :span, class: :hint } + b.use :error, wrap_with: { tag: :span, class: :error } + + ## full_messages_for + # If you want to display the full error message for the attribute, you can + # use the component :full_error, like: + # + # b.use :full_error, wrap_with: { tag: :span, class: :error } + end + + # The default wrapper to be used by the FormBuilder. + config.default_wrapper = :default + + # Define the way to render check boxes / radio buttons with labels. + # Defaults to :nested for bootstrap config. + # inline: input + label + # nested: label > input + config.boolean_style = :nested + + # Default class for buttons + config.button_class = 'btn' + + # Method used to tidy up errors. Specify any Rails Array method. + # :first lists the first message for each field. + # Use :to_sentence to list all errors for each field. + # config.error_method = :first + + # Default tag used for error notification helper. + config.error_notification_tag = :div + + # CSS class to add for error notification helper. + config.error_notification_class = 'error_notification' + + # ID to add for error notification helper. + # config.error_notification_id = nil + + # Series of attempts to detect a default label method for collection. + # config.collection_label_methods = [ :to_label, :name, :title, :to_s ] + + # Series of attempts to detect a default value method for collection. + # config.collection_value_methods = [ :id, :to_s ] + + # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none. + # config.collection_wrapper_tag = nil + + # You can define the class to use on all collection wrappers. Defaulting to none. + # config.collection_wrapper_class = nil + + # You can wrap each item in a collection of radio/check boxes with a tag, + # defaulting to :span. + # config.item_wrapper_tag = :span + + # You can define a class to use in all item wrappers. Defaulting to none. + # config.item_wrapper_class = nil + + # How the label text should be generated altogether with the required text. + # config.label_text = lambda { |label, required, explicit_label| "#{required} #{label}" } + + # You can define the class to use on all labels. Default is nil. + # config.label_class = nil + + # You can define the default class to be used on forms. Can be overriden + # with `html: { :class }`. Defaulting to none. + # config.default_form_class = nil + + # You can define which elements should obtain additional classes + # config.generate_additional_classes_for = [:wrapper, :label, :input] + + # Whether attributes are required by default (or not). Default is true. + # config.required_by_default = true + + # Tell browsers whether to use the native HTML5 validations (novalidate form option). + # These validations are enabled in SimpleForm's internal config but disabled by default + # in this configuration, which is recommended due to some quirks from different browsers. + # To stop SimpleForm from generating the novalidate option, enabling the HTML5 validations, + # change this configuration to true. + config.browser_validations = false + + # Collection of methods to detect if a file type was given. + # config.file_methods = [ :mounted_as, :file?, :public_filename ] + + # Custom mappings for input types. This should be a hash containing a regexp + # to match as key, and the input type that will be used when the field name + # matches the regexp as value. + # config.input_mappings = { /count/ => :integer } + + # Custom wrappers for input types. This should be a hash containing an input + # type as key and the wrapper that will be used for all inputs with specified type. + # config.wrapper_mappings = { string: :prepend } + + # Namespaces where SimpleForm should look for custom input classes that + # override default inputs. + # config.custom_inputs_namespaces << "CustomInputs" + + # Default priority for time_zone inputs. + # config.time_zone_priority = nil + + # Default priority for country inputs. + # config.country_priority = nil + + # When false, do not use translations for labels. + # config.translate_labels = true + + # Automatically discover new inputs in Rails' autoload path. + # config.inputs_discovery = true + + # Cache SimpleForm inputs discovery + # config.cache_discovery = !Rails.env.development? + + # Default class for inputs + # config.input_class = nil + + # Define the default class of the input wrapper of the boolean input. + config.boolean_label_class = 'checkbox' + + # Defines if the default input wrapper class should be included in radio + # collection wrappers. + # config.include_default_input_wrapper_class = true + + # Defines which i18n scope will be used in Simple Form. + # config.i18n_scope = 'simple_form' +end diff --git a/config/initializers/simple_form_bootstrap.rb b/config/initializers/simple_form_bootstrap.rb new file mode 100644 index 0000000..c7705e8 --- /dev/null +++ b/config/initializers/simple_form_bootstrap.rb @@ -0,0 +1,154 @@ +# Use this setup block to configure all options available in SimpleForm. +SimpleForm.setup do |config| + config.error_notification_class = 'alert alert-danger' + config.button_class = 'btn btn-default' + config.boolean_label_class = nil + + config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :minlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + b.use :label, class: 'control-label' + + b.use :input, class: 'form-control' + b.use :error, wrap_with: { tag: 'span', class: 'help-block' } + b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + + config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :minlength + b.optional :readonly + b.use :label, class: 'control-label' + + b.use :input + b.use :error, wrap_with: { tag: 'span', class: 'help-block' } + b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + + config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.optional :readonly + + b.wrapper tag: 'div', class: 'checkbox' do |ba| + ba.use :label_input + end + + b.use :error, wrap_with: { tag: 'span', class: 'help-block' } + b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + + config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.optional :readonly + b.use :label, class: 'control-label' + b.use :input + b.use :error, wrap_with: { tag: 'span', class: 'help-block' } + b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + + config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :minlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + b.use :label, class: 'col-sm-3 control-label' + + b.wrapper tag: 'div', class: 'col-sm-9' do |ba| + ba.use :input, class: 'form-control' + ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } + ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + end + + config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :minlength + b.optional :readonly + b.use :label, class: 'col-sm-3 control-label' + + b.wrapper tag: 'div', class: 'col-sm-9' do |ba| + ba.use :input + ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } + ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + end + + config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.optional :readonly + + b.wrapper tag: 'div', class: 'col-sm-offset-3 col-sm-9' do |wr| + wr.wrapper tag: 'div', class: 'checkbox' do |ba| + ba.use :label_input + end + + wr.use :error, wrap_with: { tag: 'span', class: 'help-block' } + wr.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + end + + config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.optional :readonly + + b.use :label, class: 'col-sm-3 control-label' + + b.wrapper tag: 'div', class: 'col-sm-9' do |ba| + ba.use :input + ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } + ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + end + + config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.use :placeholder + b.optional :maxlength + b.optional :minlength + b.optional :pattern + b.optional :min_max + b.optional :readonly + b.use :label, class: 'sr-only' + + b.use :input, class: 'form-control' + b.use :error, wrap_with: { tag: 'span', class: 'help-block' } + b.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + + config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-error' do |b| + b.use :html5 + b.optional :readonly + b.use :label, class: 'control-label' + b.wrapper tag: 'div', class: 'form-inline' do |ba| + ba.use :input, class: 'form-control' + ba.use :error, wrap_with: { tag: 'span', class: 'help-block' } + ba.use :hint, wrap_with: { tag: 'p', class: 'help-block' } + end + end + # Wrappers for forms and inputs using the Bootstrap toolkit. + # Check the Bootstrap docs (http://getbootstrap.com) + # to learn about the different styles for forms and inputs, + # buttons and other elements. + config.default_wrapper = :vertical_form + config.wrapper_mappings = { + check_boxes: :vertical_radio_and_checkboxes, + radio_buttons: :vertical_radio_and_checkboxes, + file: :vertical_file_input, + boolean: :vertical_boolean, + datetime: :multi_select, + date: :multi_select, + time: :multi_select + } +end diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml new file mode 100644 index 0000000..2374383 --- /dev/null +++ b/config/locales/simple_form.en.yml @@ -0,0 +1,31 @@ +en: + simple_form: + "yes": 'Yes' + "no": 'No' + required: + text: 'required' + mark: '*' + # You can uncomment the line below if you need to overwrite the whole required html. + # When using html, text and mark won't be used. + # html: '*' + error_notification: + default_message: "Please review the problems below:" + # Examples + # labels: + # defaults: + # password: 'Password' + # user: + # new: + # email: 'E-mail to sign in.' + # edit: + # email: 'E-mail.' + # hints: + # defaults: + # username: 'User name to sign in.' + # password: 'No special characters, please.' + # include_blanks: + # defaults: + # age: 'Rather not say' + # prompts: + # defaults: + # age: 'Select your age' diff --git a/lib/templates/slim/scaffold/_form.html.slim b/lib/templates/slim/scaffold/_form.html.slim new file mode 100644 index 0000000..a2ff775 --- /dev/null +++ b/lib/templates/slim/scaffold/_form.html.slim @@ -0,0 +1,10 @@ += simple_form_for(@<%= singular_table_name %>) do |f| + = f.error_notification + + .form-inputs +<%- attributes.each do |attribute| -%> + = f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> +<%- end -%> + + .form-actions + = f.button :submit