Merge pull request #39 from CloudFire-LLC/fix-minor-ui-issues

Fix minor ui issues

apps/fg_http/lib/fg_http/rules/rule.ex

@@ -13,7 +13,7 @@ defmodule FgHttp.Rules.Rule do
     field :action, RuleActionEnum, default: "drop"
     field :priority, :integer, default: 0
     field :enabled, :boolean, default: true
-    field :port, :string
+    field :port_number, :integer
     field :protocol, RuleProtocolEnum, default: "all"
 
     belongs_to :device, Device
@@ -23,7 +23,17 @@ defmodule FgHttp.Rules.Rule do
 
   def changeset(rule, attrs) do
     rule
-    |> cast(attrs, [:device_id, :priority, :action, :destination, :port, :protocol, :enabled])
+    |> cast(attrs, [
+      :device_id,
+      :priority,
+      :action,
+      :destination,
+      :port_number,
+      :protocol,
+      :enabled
+    ])
     |> validate_required([:device_id, :priority, :action, :destination, :protocol, :enabled])
+    |> validate_number(:priority, greater_than_or_equal_to: 0, less_than_or_equal_to: 100)
+    |> validate_number(:port_number, greater_than_or_equal_to: 0, less_than_or_equal_to: 65_535)
   end
 end

apps/fg_http/lib/fg_http_web/templates/device/edit.html.eex

@@ -1,5 +1,5 @@
-<h3 class="title is-3">Edit Device</h3>
+<div class="content">
+  <h3>Edit Device</h3>
 
-<%= render "form.html", Map.put(assigns, :action, Routes.device_path(@conn, :update, @device)) %>
-
-<span><%= link "Back", to: Routes.device_path(@conn, :index) %></span>
+  <%= render "form.html", Map.put(assigns, :action, Routes.device_path(@conn, :update, @device)) %>
+</div>

apps/fg_http/lib/fg_http_web/templates/device/form.html.eex

@@ -2,7 +2,7 @@
   <div class="column is-4">
     <%= form_for @changeset, @action, fn f -> %>
       <%= if @changeset.action do %>
-        <div>
+        <div class="notification is-danger">
           <p>Oops, something went wrong! Please check the errors below.</p>
         </div>
       <% end %>
@@ -12,14 +12,21 @@
         <div class="control">
           <%= text_input f, :name, class: "input" %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :name %>
         </p>
       </div>
 
       <div class="field">
         <div class="control">
-          <%= submit "Save", class: "button is-primary" %>
+          <div class="level">
+            <div class="level-left">
+              <%= link "Back", to: Routes.device_path(@conn, :index), class: "button" %>
+            </div>
+            <div class="level-right">
+              <%= submit "Save", class: "button is-primary" %>
+            </div>
+          </div>
         </div>
       </div>
     <% end %>

apps/fg_http/lib/fg_http_web/templates/device/index.html.eex

@@ -1,32 +1,34 @@
-<h1 class="title">Listing Devices</h1>
+<div class="content">
+  <h3>Listing Devices</h3>
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Rules</th>
-      <th>Public key</th>
-      <th>Last IP</th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-  <%= for device <- @devices do %>
-    <tr>
-      <td><%= device.name %></td>
-      <td><%= link rules_title(device), to: Routes.device_rule_path(@conn, :index, device) %></td>
-      <td><%= device.public_key %></td>
-      <td><%= device.last_ip || "Never connected" %></td>
-      <td>
-        <span><%= link "Show", to: Routes.device_path(@conn, :show, device) %></span>
-        |
-        <span><%= link "Edit", to: Routes.device_path(@conn, :edit, device) %></span>
-        |
-        <span><%= link "Delete", to: Routes.device_path(@conn, :delete, device), method: :delete, data: [confirm: "Are you sure?"] %></span>
-      </td>
-    </tr>
-  <% end %>
-  </tbody>
-</table>
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Rules</th>
+        <th>Public key</th>
+        <th>Last IP</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+    <%= for device <- @devices do %>
+      <tr>
+        <td><%= device.name %></td>
+        <td><%= link rules_title(device), to: Routes.device_rule_path(@conn, :index, device) %></td>
+        <td><%= device.public_key %></td>
+        <td><%= device.last_ip || "Never connected" %></td>
+        <td class="has-text-right">
+          <span><%= link "Show", to: Routes.device_path(@conn, :show, device) %></span>
+          |
+          <span><%= link "Edit", to: Routes.device_path(@conn, :edit, device) %></span>
+          |
+          <span><%= link "Delete", to: Routes.device_path(@conn, :delete, device), method: :delete, data: [confirm: "Are you sure?"] %></span>
+        </td>
+      </tr>
+    <% end %>
+    </tbody>
+  </table>
+</div>
 
 <%= link "New Device", to: Routes.device_path(@conn, :new), class: "button is-primary" %>

apps/fg_http/lib/fg_http_web/templates/device/new.html.eex

@@ -1,11 +1,13 @@
-<h3 class="title is-3">New Device</h3>
+<div class="content">
+  <h3>New Device</h3>
 
-<%= if @changeset.action do %>
-  <p>
-  The following errors occurred when creating this Device:
+  <%= if @changeset.action do %>
+    <div class="notification is-danger">
+    The following errors occurred when creating this Device:
 
-  <%= aggregated_errors(@changeset) %>
-  </p>
-<% end %>
+    <%= aggregated_errors(@changeset) %>
+    </div>
+  <% end %>
 
-<%= live_render(@conn, FgHttpWeb.NewDeviceLive, session: %{"user_id" => @session.id}) %>
+  <%= live_render(@conn, FgHttpWeb.NewDeviceLive, session: %{"user_id" => @session.id}) %>
+</div>

apps/fg_http/lib/fg_http_web/templates/layout/flash.html.eex

@@ -1,16 +1,18 @@
 <%= unless is_nil(get_flash(@conn, :info)) and is_nil(get_flash(@conn, :error)) do %>
   <div class="container">
-    <div class="notification">
-      <%= if get_flash(@conn, :info) do %>
+    <%= if get_flash(@conn, :info) do %>
+      <div class="notification is-info">
         <div class="flash-info">
           <%= get_flash(@conn, :info) %>
         </div>
-      <% end %>
-      <%= if get_flash(@conn, :error) do %>
+      </div>
+    <% end %>
+    <%= if get_flash(@conn, :error) do %>
+      <div class="notification is-danger">
         <div class="flash-error">
           <%= get_flash(@conn, :error) %>
         </div>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   </div>
 <% end %>

apps/fg_http/lib/fg_http_web/templates/rule/edit.html.eex

@@ -1,5 +1,5 @@
-<h3 class="title is-3">Edit Rule</h3>
+<div class="content">
+  <h3>Edit Rule</h3>
 
-<%= render "form.html", Map.put(assigns, :action, Routes.rule_path(@conn, :update, @rule)) %>
-
-<span><%= link "Back", to: Routes.device_rule_path(@conn, :index, @rule.device_id) %></span>
+  <%= render "form.html", Map.put(assigns, :action, Routes.rule_path(@conn, :update, @rule)) %>
+</div>

apps/fg_http/lib/fg_http_web/templates/rule/form.html.eex

@@ -2,11 +2,21 @@
   <div class="column is-4">
     <%= form_for @changeset, @action, [], fn f -> %>
       <%= if @changeset.action do %>
-        <div>
+        <div class="notification is-danger">
           <p>Oops, something went wrong! Please check the errors below.</p>
         </div>
       <% end %>
 
+      <div class="field">
+        <%= label f, :action, class: "label" %>
+        <div class="select">
+          <%= select f, :action, action_options_for_select() %>
+        </div>
+        <p class="help is-danger">
+          <%= error_tag f, :action %>
+        </p>
+      </div>
+
       <div class="field">
         <%= label f, :destination, class: "label" %>
         <div class="control">
@@ -17,18 +27,18 @@
             placeholder: "IPv4/6 CIDR range or address"
           %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :destination %>
         </p>
       </div>
 
       <div class="field">
-        <%= label f, :port, class: "label" %>
+        <%= label f, :port_number, class: "label" %>
         <div class="control">
-          <%= text_input f, :port, class: "input", placeholder: "1 - 65535" %>
+          <%= text_input f, :port_number, class: "input", placeholder: "1 - 65535" %>
         </div>
-        <p class="help">
-          <%= error_tag f, :port %>
+        <p class="help is-danger">
+          <%= error_tag f, :port_number %>
         </p>
       </div>
 
@@ -37,7 +47,7 @@
         <div class="select">
           <%= select f, :protocol, protocol_options_for_select() %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :protocol %>
         </p>
       </div>
@@ -47,7 +57,7 @@
         <div class="control">
           <%= text_input f, :priority, class: "input" %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :priority %>
         </p>
       </div>
@@ -57,7 +67,7 @@
           <%= checkbox f, :enabled, class: "checkbox" %>
           Enabled
         </label>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :enabled %>
         </p>
       </div>

apps/fg_http/lib/fg_http_web/templates/rule/index.html.eex

@@ -1,39 +1,40 @@
-<h1 class="title">Listing Rules for Device <%= @device.name %></h1>
+<div class="content">
+  <h3>Listing Rules for Device <%= @device.name %></h3>
 
-<table class="table">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Action</th>
+        <th>Destination</th>
+        <th>Port Number</th>
+        <th>Protocol</th>
+        <th>Priority</th>
+        <th>Enabled</th>
 
-  <thead>
-    <tr>
-      <th>Action</th>
-      <th>Destination</th>
-      <th>Port</th>
-      <th>Protocol</th>
-      <th>Priority</th>
-      <th>Enabled</th>
-
-      <th></th>
-    </tr>
-  </thead>
-<%= for rule <- @rules do %>
-  <tbody>
-    <tr>
-      <td><%= rule.action %></td>
-      <td><%= rule.destination %></td>
-      <td><%= rule.port %></td>
-      <td><%= rule.protocol %></td>
-      <td><%= rule.priority %></td>
-      <td><%= rule.enabled %></td>
-      <td>
-        <span><%= link "Show", to: Routes.rule_path(@conn, :show, rule) %></span>
-        |
-        <span><%= link "Edit", to: Routes.rule_path(@conn, :edit, rule) %></span>
-        |
-        <span><%= link "Delete", to: Routes.rule_path(@conn, :delete, rule), method: :delete, data: [confirm: "Are you sure?"] %></span>
-      </td>
-    </tr>
-<% end %>
-  </tbody>
-</table>
+        <th></th>
+      </tr>
+    </thead>
+  <%= for rule <- @rules do %>
+    <tbody>
+      <tr>
+        <td><%= rule.action %></td>
+        <td><%= rule.destination %></td>
+        <td><%= rule.port_number %></td>
+        <td><%= rule.protocol %></td>
+        <td><%= rule.priority %></td>
+        <td><%= rule.enabled %></td>
+        <td class="has-text-right">
+          <span><%= link "Show", to: Routes.rule_path(@conn, :show, rule) %></span>
+          |
+          <span><%= link "Edit", to: Routes.rule_path(@conn, :edit, rule) %></span>
+          |
+          <span><%= link "Delete", to: Routes.rule_path(@conn, :delete, rule), method: :delete, data: [confirm: "Are you sure?"] %></span>
+        </td>
+      </tr>
+  <% end %>
+    </tbody>
+  </table>
+</div>
 
 <%=
   link "New Rule",

apps/fg_http/lib/fg_http_web/templates/rule/new.html.eex

@@ -1,3 +1,5 @@
-<h3 class="title is-3">New Rule for Device <%= @device.name %></h3>
+<div class="content">
+  <h3>New Rule for Device <%= @device.name %></h3>
 
-<%= render "form.html", Map.put(assigns, :action, Routes.device_rule_path(@conn, :create, @device)) %>
+  <%= render "form.html", Map.put(assigns, :action, Routes.device_rule_path(@conn, :create, @device)) %>
+</div>

apps/fg_http/lib/fg_http_web/templates/rule/show.html.eex

@@ -2,22 +2,22 @@
   <h3>Show Rule</h3>
 
   <dl>
-    <dt>Action:</dt>
+    <dt><strong>Action:</strong></dt>
     <dd><%= @rule.action %></dd>
 
-    <dt>Destination:</dt>
+    <dt><strong>Destination:</strong></dt>
     <dd><%= @rule.destination %></dd>
 
-    <dt>Port:</dt>
-    <dd><%= @rule.port %></dd>
+    <dt><strong>Port Number:</strong></dt>
+    <dd><%= @rule.port_number %></dd>
 
-    <dt>Protocol:</dt>
+    <dt><strong>Protocol:</strong></dt>
     <dd><%= @rule.protocol %></dd>
 
-    <dt>Priority</dt>
+    <dt><strong>Priority:</strong></dt>
     <dd><%= @rule.priority %></dd>
 
-    <dt>Enabled:</dt>
+    <dt><strong>Enabled:</strong></dt>
     <dd><%= @rule.enabled %></dd>
   </dl>
 

apps/fg_http/lib/fg_http_web/templates/session/new.html.eex

@@ -15,7 +15,7 @@
         <div class="control">
           <%= text_input(f, :email, class: "input") %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :email %>
         </p>
       </div>
@@ -25,7 +25,7 @@
         <div class="control">
           <%= password_input(f, :password, class: "input") %>
         </div>
-        <p class="help">
+        <p class="help is-danger">
           <%= error_tag f, :password %>
         </p>
       </div>

apps/fg_http/lib/fg_http_web/templates/user/edit.html.eex

@@ -1,59 +1,69 @@
-<h3 class="title is-3">Edit Account</h3>
 
 <div class="columns">
   <div class="column is-4">
-    <%= form_for @changeset, Routes.user_path(@conn, :update), fn f -> %>
-      <%= if @changeset.action do %>
+    <div class="content">
+      <h3>Edit Account</h3>
+
+      <%= form_for @changeset, Routes.user_path(@conn, :update), fn f -> %>
+        <%= if @changeset.action do %>
+          <div>
+            <p>Oops, something went wrong! Please check the errors below.</p>
+          </div>
+        <% end %>
+
+        <div class="field">
+          <%= label f, :email, class: "label" %>
+
+          <div class="control">
+            <%= text_input f, :email, class: "input" %>
+          </div>
+          <p class="help is-danger">
+            <%= error_tag f, :email %>
+          </p>
         <div>
-          <p>Oops, something went wrong! Please check the errors below.</p>
+
+        <div class="field">
+          <%= label f, :password, class: "label" %>
+          <div class="control">
+            <%= password_input f, :password, class: "input password" %>
+          </div>
+          <p class="help is-danger">
+            <%= error_tag f, :password %>
+          </p>
+        </div>
+
+        <div class="field">
+          <%= label f, :password_confirmation, class: "label" %>
+          <div class="control">
+            <%= password_input f, :password_confirmation, class: "input password" %>
+          </div>
+          <p class="help is-danger">
+            <%= error_tag f, :password_confirmation %>
+          </p>
+        </div>
+
+        <div class="field">
+          <%= label f, :current_password, class: "label" %>
+          <%= password_input f, :current_password, class: "input password" %>
+
+          <p class="help is-danger">
+            <%= error_tag f, :current_password %>
+          </p>
+        </div>
+
+        <div class="field">
+          <div class="control">
+            <div class="level">
+              <div class="level-left">
+                <%= link "Back", to: Routes.user_path(@conn, :show), class: "button" %>
+              </div>
+              <div class="level-right">
+                <%= submit "Save", class: "button is-primary" %>
+              </div>
+            </div>
+          </div>
         </div>
       <% end %>
-
-      <div class="field">
-        <%= label f, :email, class: "label" %>
-
-        <div class="control">
-          <%= text_input f, :email, class: "input" %>
-        </div>
-        <p class="help">
-          <%= error_tag f, :email %>
-        </p>
-      <div>
-
-      <div class="field">
-        <%= label f, :password, class: "label" %>
-        <div class="control">
-          <%= password_input f, :password, class: "input password" %>
-        </div>
-        <p class="help">
-          <%= error_tag f, :password %>
-        </p>
-      </div>
-
-      <div class="field">
-        <%= label f, :password_confirmation, class: "label" %>
-        <div class="control">
-          <%= password_input f, :password_confirmation, class: "input password" %>
-        </div>
-        <p class="help">
-          <%= error_tag f, :password_confirmation %>
-        </p>
-      </div>
-
-      <div class="field">
-        <%= label f, :current_password, class: "label" %>
-        <%= password_input f, :current_password, class: "input password" %>
-
-        <p class="help">
-          <%= error_tag f, :current_password %>
-        </p>
-      </div>
-
-      <div class="field">
-        <div class="control">
-          <%= submit "Save", class: "button is-primary" %>
-        </div>
-      </div>
-    <% end %>
+    </div>
   </div>
 </div>

apps/fg_http/lib/fg_http_web/templates/user/new.html.eex

@@ -16,7 +16,7 @@
           <div class="control">
             <%= text_input(f, :email, class: "input") %>
           </div>
-          <p class="help">
+          <p class="help is-danger">
             <%= error_tag f, :email %>
           </p>
         </div>
@@ -26,7 +26,7 @@
           <div class="control">
             <%= password_input(f, :password, class: "input") %>
           </div>
-          <p class="help">
+          <p class="help is-danger">
             <%= error_tag f, :password %>
           </p>
         </div>
@@ -36,7 +36,7 @@
           <div class="control">
             <%= password_input(f, :password_confirmation, class: "input") %>
           </div>
-          <p class="help">
+          <p class="help is-danger">
             <%= error_tag f, :password_confirmation %>
           </p>
         </div>

apps/fg_http/lib/fg_http_web/templates/user/show.html.eex

@@ -1,5 +1,5 @@
 <div class="columns">
-  <div class="column is-4 is-offset-4">
+  <div class="column is-4">
     <div class="content">
       <h3>Your Account</h3>
 
@@ -14,7 +14,7 @@
       </dl>
 
       <div class="level">
-        <%= link("Edit", to: Routes.user_path(@conn, :edit), class: "button is-primary") %>
+        <%= link("Change Password", to: Routes.user_path(@conn, :edit), class: "button is-primary") %>
         <%= link "Delete your account",
             to: Routes.user_path(@conn, :delete),
             method: :delete,

apps/fg_http/lib/fg_http_web/views/device_view.ex

@@ -12,6 +12,6 @@ defmodule FgHttpWeb.DeviceView do
   end
 
   defp reverse_concat(word, number) do
-    "#{number}" <> "#{word}"
+    "#{number} " <> "#{word}"
   end
 end

apps/fg_http/lib/fg_http_web/views/rule_view.ex

@@ -4,4 +4,8 @@ defmodule FgHttpWeb.RuleView do
   def protocol_options_for_select do
     RuleProtocolEnum.__enum_map__()
   end
+
+  def action_options_for_select do
+    RuleActionEnum.__enum_map__()
+  end
 end

apps/fg_http/priv/repo/migrations/20200228154815_create_rules.exs

@@ -11,7 +11,7 @@ defmodule FgHttp.Repo.Migrations.CreateRules do
       add :action, RuleActionEnum.type(), default: "drop", null: false
       add :priority, :integer, default: 0, null: false
       add :enabled, :boolean, default: false, null: false
-      add :port, :string
+      add :port_number, :integer
       add :device_id, references(:devices, on_delete: :delete_all), null: false
 
       timestamps(type: :utc_datetime_usec)

apps/fg_http/test/fg_http_web/controllers/rule_controller_test.exs

@@ -5,7 +5,7 @@ defmodule FgHttpWeb.RuleControllerTest do
 
   @valid_create_attrs %{
     destination: "1.1.1.1",
-    port: "53",
+    port_number: 53,
     protocol: "udp",
     action: "accept"
   }