Adding simple_form, adding profile settings, header image

Gemfile

@@ -35,6 +35,7 @@ gem 'redis', '~>3.2'
 gem 'fast_blank'
 gem 'htmlentities'
 gem 'onebox'
+gem 'simple_form'
 
 group :development, :test do
   gem 'rspec-rails'

Gemfile.lock

@@ -267,6 +267,9 @@ GEM
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
     sexp_processor (4.7.0)
+    simple_form (3.2.1)
+      actionpack (> 4, < 5.1)
+      activemodel (> 4, < 5.1)
     simplecov (0.11.2)
       docile (~> 1.1.0)
       json (~> 1.8)
@@ -351,6 +354,7 @@ DEPENDENCIES
   rubocop
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
+  simple_form
   simplecov
   sqlite3
   therubyracer

README.md

@@ -13,17 +13,24 @@ Mastodon is a federated microblogging engine. An alternative implementation of t
 - Public pages for profiles and single statuses
 - Sign up, login, forgotten passwords and changing password
 - Mentions and URLs converted to links in statuses
+- REST API, including home and mention timelines
+- OAuth2 provider system for the API
 
 Missing:
 
 - Media attachments (photos, videos)
-- Home timeline, notifications timeline
 - UI to post, reblog, favourite, follow and unfollow
 - Upload header image for profile page
 - Deleting statuses, deletion propagation
+- Streaming API
 
 ## Configuration
 
 - `LOCAL_DOMAIN` should be the domain/hostname of your instance. This is **absolutely required** as it is used for generating unique IDs for everything federation-related
 - `LOCAL_HTTPS` set it to `true` if HTTPS works on your website. This is used to generate canonical URLs, which is also important when generating and parsing federation-related IDs
 - `HUB_URL` should be the URL of the PubsubHubbub service that your instance is going to use. By default it is the open service of Superfeedr
+
+## Requirements
+
+- PostgreSQL
+- Redis

app/assets/javascripts/settings.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/accounts.scss

@@ -1,10 +1,24 @@
 .card {
-  background: $primary-color image-url('background-photo.jpeg');
+  background: #282c37;
   background-size: cover;
   padding: 60px 0;
   padding-bottom: 10px;
   border-radius: 4px 4px 0 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  position: relative;
+
+  &:after {
+    background: rgba(0, 0, 0, 0.5);
+    display: block;
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
 
   .name {
     display: block;
@@ -13,6 +27,8 @@
     color: #fff;
     font-weight: 500;
     text-align: center;
+    position: relative;
+    z-index: 2;
 
     small {
       display: block;
@@ -26,6 +42,8 @@
     width: 120px;
     margin: 0 auto;
     margin-bottom: 15px;
+    position: relative;
+    z-index: 2;
 
     img {
       width: 120px;
@@ -38,6 +56,8 @@
   .details {
     display: flex;
     margin-top: 30px;
+    position: relative;
+    z-index: 2;
   }
 
   .counter {

app/assets/stylesheets/settings.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the settings controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/controllers/settings_controller.rb

@@ -0,0 +1,27 @@
+class SettingsController < ApplicationController
+  layout 'dashboard'
+
+  before_action :authenticate_user!
+  before_action :set_account
+
+  def show
+  end
+
+  def update
+    if @account.update(account_params)
+      redirect_to settings_path
+    else
+      render action: :show
+    end
+  end
+
+  private
+
+  def account_params
+    params.require(:account).permit(:display_name, :note, :avatar, :header)
+  end
+
+  def set_account
+    @account = current_user.account
+  end
+end

app/helpers/settings_helper.rb

@@ -0,0 +1,2 @@
+module SettingsHelper
+end

app/models/account.rb

@@ -8,6 +8,10 @@ class Account < ActiveRecord::Base
   has_attached_file :avatar, styles: { large: '300x300#', medium: '96x96#', small: '48x48#' }, default_url: 'avatars/missing.png'
   validates_attachment_content_type :avatar, content_type: /\Aimage\/.*\Z/
 
+  # Header upload
+  has_attached_file :header, styles: { medium: '700x335#' }
+  validates_attachment_content_type :header, content_type: /\Aimage\/.*\Z/
+
   # Timelines
   has_many :stream_entries, inverse_of: :account
   has_many :statuses, inverse_of: :account

app/views/accounts/show.html.haml

@@ -2,7 +2,7 @@
   %link{ rel: 'salmon', href: api_salmon_url(@account.id) }/
   %link{ rel: 'alternate', type: 'application/atom+xml', href: account_url(@account, format: 'atom') }/
 
-.card
+.card{ style: "background-image: url(#{@account.header.url(:medium)})" }
   .avatar= image_tag @account.avatar.url(:large)
   %h1.name
     = @account.display_name.blank? ? @account.username : @account.display_name

app/views/layouts/dashboard.html.haml

@@ -17,6 +17,10 @@
           = link_to oauth_authorized_applications_path do
             = fa_icon 'shield'
             Authorized apps
+        %li{ class: active_nav_class(settings_path) }
+          = link_to settings_path do
+            = fa_icon 'user'
+            Edit profile
     .dashboard__content
       .dashboard__top-bar
         = content_for?(:page_title) ? yield(:page_title) : 'Mastodon'

app/views/settings/show.html.haml

@@ -0,0 +1,6 @@
+= simple_form_for @account, url: settings_path, method: :put do |f|
+  = f.input :display_name
+  = f.input :note
+  = f.input :avatar
+  = f.input :header
+  = f.button :submit

config/initializers/simple_form.rb

@@ -0,0 +1,165 @@
+# 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
+    b.optional :maxlength
+
+    # 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

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: '<abbr title="required">*</abbr>'
+    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'

config/routes.rb

@@ -14,6 +14,8 @@ Rails.application.routes.draw do
     resources :stream_entries, path: 'updates', only: [:show]
   end
 
+  resource :settings, only: [:show, :update]
+
   namespace :api do
     # PubSubHubbub
     resources :subscriptions, only: [:show]

db/migrate/20160312193225_add_attachment_header_to_accounts.rb

@@ -0,0 +1,11 @@
+class AddAttachmentHeaderToAccounts < ActiveRecord::Migration
+  def self.up
+    change_table :accounts do |t|
+      t.attachment :header
+    end
+  end
+
+  def self.down
+    remove_attachment :accounts, :header
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20160306172223) do
+ActiveRecord::Schema.define(version: 20160312193225) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -36,6 +36,10 @@ ActiveRecord::Schema.define(version: 20160306172223) do
     t.string   "avatar_content_type"
     t.integer  "avatar_file_size"
     t.datetime "avatar_updated_at"
+    t.string   "header_file_name"
+    t.string   "header_content_type"
+    t.integer  "header_file_size"
+    t.datetime "header_updated_at"
   end
 
   add_index "accounts", ["username", "domain"], name: "index_accounts_on_username_and_domain", unique: true, using: :btree

lib/templates/haml/scaffold/_form.html.haml

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

spec/controllers/settings_controller_spec.rb

@@ -0,0 +1,16 @@
+require 'rails_helper'
+
+RSpec.describe SettingsController, type: :controller do
+
+  before do
+    sign_in :user, Fabricate(:user)
+  end
+
+  describe "GET #show" do
+    it "returns http success" do
+      get :show
+      expect(response).to have_http_status(:success)
+    end
+  end
+
+end

spec/fabricators/user_fabricator.rb

@@ -0,0 +1,5 @@
+Fabricator(:user) do
+  account
+  email    "alice@example.com"
+  password "123456789"
+end

spec/helpers/settings_helper_spec.rb

@@ -0,0 +1,15 @@
+require 'rails_helper'
+
+# Specs in this file have access to a helper object that includes
+# the SettingsHelper. For example:
+#
+# describe SettingsHelper do
+#   describe "string concat" do
+#     it "concats two strings with spaces" do
+#       expect(helper.concat_strings("this","that")).to eq("this that")
+#     end
+#   end
+# end
+RSpec.describe SettingsHelper, type: :helper do
+  pending "add some examples to (or delete) #{__FILE__}"
+end