Agile Web Development with Rails, Edition 5

15.5 Playtime 15.3 Iteration J3: Limiting Access

15.4 Iteration J4: Adding a Sidebar

Add admin links and a button to Logout

edit app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Pragprog Books Online Store</title>
    <%= csrf_meta_tags %>
 
    <%= stylesheet_link_tag 'application', media: 'all',
                            'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
  </head>
 
  <body>
    <header class="main">
      <%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %>
      <h1><%= @page_title %></h1>
    </header>
    <section class="content">
      <nav class="side_nav">
 
        <div id="cart" class="carts">
 
          <%= render_if @cart && @cart.line_items.any?, @cart %>
        </div>
 
      <%= render Order.find(session[:order_id]) if session[:order_id] -%>
 
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/questions">Questions</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
 
        <% if session[:user_id] %>
          <nav class="logged_in_nav">
            <ul>
              <li><%= link_to 'Orders',   orders_path   %></li>
              <li><%= link_to 'Products', products_path %></li>
              <li><%= link_to 'Users',    users_path    %></li>
              <li><%= button_to 'Logout', logout_path, method: :delete   %></li>
            </ul>
          </nav>
        <% end %>
      </nav>
      <main class='<%= controller.controller_name %>'>
        <%= yield %>
      </main>
    </section>
  </body>
</html>

Add some styles

edit app/assets/stylesheets/application.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will
 * include all the files listed below.
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any
 * plugin's vendor/assets/stylesheets directory can be referenced here using a
 * relative path.
 * 
 * You're free to add application-wide styles to this file and they'll appear
 * at the bottom of the compiled file so the styles you add here take
 * precedence over styles defined in any other CSS/SCSS files in this
 * directory. Styles in this file should be added after the last require_*
 * statement. It is generally better to create a new file per style scope.
 * 
 *= require_tree .
 *= require_self
 */
 
body {
  margin: 0;
  padding: 0;
}
header.main {
  text-align: center; // center on mobile
  @media (min-width: 30em) {
    text-align: left; // left align on desktop
  }
  background: #282;
  margin: 0;
  h1 {
    display: none;
  }
}
 
.notice, #notice {
  background: #ffb;
  border-radius: 0.5em;
  border: solid 0.177em #882;
  color: #882;
  font-weight: bold;
  margin-bottom: 1em;
  padding: 1em 1.414em;
  text-align: center;
}
.content {
  margin: 0;
  padding: 0;
 
  display: flex;
  display: -webkit-flex;
  flex-direction: column; // mobile is horizontally laid out
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
 
  @media (min-width: 30em) {
    flex-direction: row;  // desktop is vertically laid out
    -webkit-box-orient: horizontal;
  }
 
  nav {
    padding-bottom: 1em;
    background: #141;
    text-align: center;  // mobile has centered nav
    @media (min-width: 30em) {
      text-align: left; // desktop nav is left-aligned
      padding: 1em;     // and needs more padding
    }
 
    #cart {
      article {
        h2 {
          margin-top: 0;
        }
        background: white;
        border-radius: 0.5em;
        margin: 1em;
        padding: 1.414em;
        @media (min-width: 30em) {
          margin: 0; // desktop doesn't need this margin
        }
      }
    }
 
// START: logged_in_nav
nav.logged_in_nav {
  border-top: solid thin #bfb;
  padding: 0.354em 0;
  margin-top: 0.354em;
  input[type="submit"] {
    // Make the logout button look like a
    // link, so it matches the nav style
    background: none;
    border: none;
    color: #bfb;
    font-size: 1em;
    letter-spacing: 0.354em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
  }
  input[type="submit"]:hover {
    color: white;
  }
}
// END: logged_in_nav
 
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      @media (min-width: 30em) {
        padding-right: 1em; // give desktop some extra space
      }
      li {
        margin: 0;
        padding: 0.5em;
        text-transform: uppercase;
        letter-spacing: 0.354em;
        a {
          color: #bfb;
          text-decoration: none;
        }
        a:hover {
          background: none;
          color: white;
        }
      }
    }
  }
  main {
    padding: 0.5em;
  }
}
 
.depot_form {
  padding: 0 1em;
  h1 {
    font-size: 1.99em;
    line-height: 1.41em;
    margin-bottom: 0.5em;
    padding: 0;
  }
  .field, .actions {
    margin-bottom: 0.5em;
    padding: 0;
  }
  .actions {
    text-align: right;
    padding: 1em 0;
  }
  input, textarea, select, option {
    border: solid thin #888;
    box-sizing: border-box;
    font-size: 1em;
    padding: 0.5em;
    width: 100%;
  }
  label {
    padding: 0.5em 0;
  }
  input[type="submit"] {
    background-color: #bfb;
    border-radius: 0.354em;
    border: solid thin #888;
    color: black;
    font-size: 1.41em;
    font-weight: bold;
    padding: 0.354em 1em;
  }
  input[type="submit"]:hover {
    background-color: #9d9;
  }
  // Also, clean up the error styling
  #error_explanation {
    background-color: white;
    border-radius: 1em;
    border: solid thin red;
    margin-bottom: 0.5em;
    padding: 0.5em;
    width: 100%;
    h2 {
      background: none;
      color: red;
      font-size: 1.41em;
      line-height: 1.41em;
      padding: 1em;
    }
    ul {
      margin-top: 0;
      li {
        color: red;
        font-size: 1em;
      }
    }
  }
  .field_with_errors {
    background: none;
    color: red;
    width: 100%;
    label {
      font-weight: bold;
    }
    label::before {
      content: "! ";
    }
    input,textarea {
      background: pink;
    }
  }
}

Log out

get /admin
The Pragmatic Bookshelf

Welcome

It's 2017-11-13 10:47:52 -0500. We have 3 orders.

post /logout
You are being redirected.
get http://localhost:3000/
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00
  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00
  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00

Demonstrate that everybody can get to the store

get /
The Pragmatic Bookshelf

Your Pragmatic Catalog

  • Rails, Angular, Postgres, and Bootstrap

    Powerful, Effective, and Efficient Full-Stack Web Development As a Rails developer, you care about user experience and performance, but you also want simple and maintainable code. Achieve all that by embracing the full stack of web development, from styling with Bootstrap, building an interactive user interface with AngularJS, to storing data quickly and reliably in PostgreSQL. Take a holistic view of full-stack development to create usable, high-performing applications, and learn to use these technologies effectively in a Ruby on Rails environment.

    $45.00
  • Ruby Performance Optimization

    Why Ruby Is Slow, and How to Fix It You don’t have to accept slow Ruby or Rails performance. In this comprehensive guide to Ruby optimization, you’ll learn how to write faster Ruby code—but that’s just the beginning. See exactly what makes Ruby and Rails code slow, and how to fix it. Alex Dymo will guide you through perils of memory and CPU optimization, profiling, measuring, performance testing, garbage collection, and tuning. You’ll find that all those “hard” things aren’t so difficult after all, and your code will run orders of magnitude faster.

    $46.00
  • Seven Mobile Apps in Seven Weeks

    Native Apps, Multiple Platforms Answer the question “Can we build this for ALL the devices?” with a resounding YES. This book will help you get there with a real-world introduction to seven platforms, whether you’re new to mobile or an experienced developer needing to expand your options. Plus, you’ll find out which cross-platform solution makes the most sense for your needs.

    $26.00

Demonstrate that login is required to see the products

get /products
You are being redirected.
get http://localhost:3000/login
The Pragmatic Bookshelf

Please Log In

Log in

get /login
The Pragmatic Bookshelf

Please Log In

post /login
You are being redirected.
get http://localhost:3000/admin
The Pragmatic Bookshelf

Welcome

It's 2017-11-13 10:47:52 -0500. We have 3 orders.

Demonstrate logged in users can see the products

get /products
The Pragmatic Bookshelf

Products

New product

Rails, Angular, Postgres, and Bootstrap

Powerful, Effective, and Efficient Full-Stack Web Development As...

Seven Mobile Apps in Seven Weeks

Native Apps, Multiple Platforms Answer the question “Can we buil...

Ruby Performance Optimization

Why Ruby Is Slow, and How to Fix It You don’t have to accept sl...

Demonstrate logged in users can see the users

get /users
The Pragmatic Bookshelf

Users

Name
dave Show Edit Destroy

New User

Show that the tests fail (good!)

rails test
Run options: --seed 18402
 
# Running:
 
.....................................................
 
Finished in 4.472860s, 11.8492 runs/s, 23.2513 assertions/s.
53 runs, 104 assertions, 0 failures, 0 errors, 0 skips
edit app/models/user.rb
class User < ApplicationRecord
  validates :name, presence: true, uniqueness: true
  has_secure_password
 
  after_destroy :ensure_an_admin_remains
 
  class Error < StandardError
  end
 
  private
    def ensure_an_admin_remains
      if User.count.zero?
        raise Error.new "Can't delete last user"
      end
    end     
end
edit app/controllers/users_controller.rb
class UsersController < ApplicationController
  before_action :set_user, only: [:show, :edit, :update, :destroy]
 
  # GET /users
  # GET /users.json
  def index
    @users = User.order(:name)
  end
 
  # GET /users/1
  # GET /users/1.json
  def show
  end
 
  # GET /users/new
  def new
    @user = User.new
  end
 
  # GET /users/1/edit
  def edit
  end
 
  # POST /users
  # POST /users.json
  def create
    @user = User.new(user_params)
 
    respond_to do |format|
      if @user.save
        format.html { redirect_to users_url,
          notice: "User #{@user.name} was successfully created." }
        format.json { render :show, status: :created, location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors,
          status: :unprocessable_entity }
      end
    end
  end
 
  # PATCH/PUT /users/1
  # PATCH/PUT /users/1.json
  def update
    respond_to do |format|
      if @user.update(user_params)
        format.html { redirect_to users_url,
          notice: "User #{@user.name} was successfully updated." }
        format.json { render :show, status: :ok, location: @user }
      else
        format.html { render :edit }
        format.json { render json: @user.errors,
          status: :unprocessable_entity }
      end
    end
  end
 
  # DELETE /users/1
  # DELETE /users/1.json
  def destroy
    @user.destroy
    respond_to do |format|
      format.html { redirect_to users_url,
        notice: '"User #{@user.name} deleted"' }
      format.json { head :no_content }
    end
  end
 
  rescue_from 'User::Error' do |exception|
    redirect_to users_url, notice: exception.message
  end
 
  private
    # Use callbacks to share common setup or constraints between actions.
    def set_user
      @user = User.find(params[:id])
    end
 
    # Never trust parameters from the scary internet, only allow the white list through.
    def user_params
      params.require(:user).permit(:name, :password, :password_confirmation)
    end
end

15.5 Playtime 15.3 Iteration J3: Limiting Access