run mix format

Dockerfile

@@ -1,4 +1,4 @@
-FROM elixir:1.12.2-alpine AS build
+FROM elixir:1.13-alpine AS build
 
 # install build dependencies
 RUN apk add --no-cache build-base npm git python3
@@ -34,7 +34,7 @@ RUN mix do phx.digest, gettext.extract
 RUN mix do compile, release
 
 # prepare release image
-FROM alpine:3.9 AS app
+FROM alpine:latest AS app
 
 RUN apk upgrade --no-cache && \
     apk add --no-cache bash openssl libgcc libstdc++ ncurses-libs

assets/css/app.scss

@@ -16,6 +16,24 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
   scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
 }
 
+.fa-fade {
+  animation: pulse 1s ease-in-out 0s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { scale: 0.95; opacity: 0.5; }
+  100% { scale: 1.0; opacity: 1; }
+}
+
+.phx-connected > #disconnect, #loading {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
+  opacity: 0.95 !important;
+}
+
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;

assets/tailwind.config.js

@@ -3,6 +3,7 @@ const colors = require('tailwindcss/colors')
 module.exports = {
   purge: [
     '../lib/**/*.ex',
+    '../lib/**/*.heex',
     '../lib/**/*.leex',
     '../lib/**/*.eex',
     './js/**/*.js'

docker-compose.yml

@@ -6,19 +6,26 @@ services:
     container_name: cannery
     restart: always
     environment:
-      - HOST="your.domain.com"
+      # HOST must be set!
-      - DATABASE_URL="ecto://postgres:postgres@cannery-db/cannery"
+      # - HOST=your.domain.com
+      - DATABASE_URL=ecto://postgres:postgres@cannery-db/cannery
       # Use `docker run -it shibaobun/cannery /app/priv/random.sh` to generate a secret key base
-      # - SECRET_KEY_BASE="change-me-this-is-really-important-seriously-change-it"
+      # - SECRET_KEY_BASE=change-me-this-is-really-important-seriously-change-it
       # uncomment to enable public sign ups, not recommended
-      # - REGISTRATION="public"
+      # - REGISTRATION=public
-      # - SMTP_HOST="cannery.example.tld" # must be set!
+      # SMTP host must be set!
-      # - SMTP_PORT="587" # optional
+      # - SMTP_HOST=smtp.mailserver.tld
-      # - SMTP_USERNAME="username"
+      # optional, default is 587
-      # - SMTP_PASSWORD="password"
+      # - SMTP_PORT=587
-      # - SMTP_SSL="false" # optional
+      # SMTP username/passwords must be set!
-      # - EMAIL_FROM="no-reply@cannery.example.tld" # optional
+      # - SMTP_USERNAME=username
-      # - EMAIL_NAME="Cannery" # optional
+      # - SMTP_PASSWORD=password
+      # optional, default is false
+      # - SMTP_SSL=false
+      # optional, default is format below
+      # - EMAIL_FROM=no-reply@cannery.example.tld
+      # optional, default is "Cannery"
+      # - EMAIL_NAME=Cannery
     expose:
       - "4000"
     depends_on:

lib/cannery/accounts/email_worker.ex

@@ -3,7 +3,7 @@ defmodule Cannery.EmailWorker do
   Oban worker that dispatches emails
   """
 
-  use Oban.Worker, queue: :mailers
+  use Oban.Worker, queue: :mailers, tags: ["email"]
   alias Cannery.{Accounts, Email, Mailer}
 
   @impl Oban.Worker

lib/cannery_web/components/topbar.ex

@@ -16,11 +16,10 @@ defmodule CanneryWeb.Components.Topbar do
     <nav role="navigation" class="mb-8 px-8 py-4 w-full bg-primary-400">
       <div class="flex flex-col sm:flex-row justify-between items-center">
         <div class="mb-4 sm:mb-0 sm:mr-8 flex flex-row justify-start items-center space-x-2">
-          <%= link to: Routes.live_path(Endpoint, HomeLive) do %>
+          <%= live_redirect("Cannery",
-            <h1 class="mx-2 my-1 leading-5 text-xl text-white hover:underline">
+            to: Routes.live_path(Endpoint, HomeLive),
-              Cannery
+            class: "mx-2 my-1 leading-5 text-xl text-white hover:underline"
-            </h1>
+          ) %>
-          <% end %>
 
           <%= if @title_content do %>
             <span class="mx-2 my-1">
@@ -38,47 +37,47 @@ defmodule CanneryWeb.Components.Topbar do
         >
           <%= if @current_user do %>
             <li class="mx-2 my-1">
-              <%= link(gettext("Tags"),
+              <%= live_redirect(gettext("Tags"),
-                class: "hover:underline",
+                to: Routes.tag_index_path(Endpoint, :index),
-                to: Routes.tag_index_path(Endpoint, :index)
+                class: "text-primary-600 text-white hover:underline"
               ) %>
             </li>
             <li class="mx-2 my-1">
-              <%= link(gettext("Containers"),
+              <%= live_redirect(gettext("Containers"),
-                class: "hover:underline",
+                to: Routes.container_index_path(Endpoint, :index),
-                to: Routes.container_index_path(Endpoint, :index)
+                class: "text-primary-600 text-white hover:underline"
               ) %>
             </li>
             <li class="mx-2 my-1">
-              <%= link(gettext("Ammo"),
+              <%= live_redirect(gettext("Ammo"),
-                class: "hover:underline",
+                to: Routes.ammo_type_index_path(Endpoint, :index),
-                to: Routes.ammo_type_index_path(Endpoint, :index)
+                class: "text-primary-600 text-white hover:underline"
               ) %>
             </li>
             <li class="mx-2 my-1">
-              <%= link(gettext("Manage"),
+              <%= live_redirect(gettext("Manage"),
-                class: "hover:underline",
+                to: Routes.ammo_group_index_path(Endpoint, :index),
-                to: Routes.ammo_group_index_path(Endpoint, :index)
+                class: "text-primary-600 text-white hover:underline"
               ) %>
             </li>
             <li class="mx-2 my-1">
-              <%= link(gettext("Range"),
+              <%= live_redirect(gettext("Range"),
-                class: "hover:underline",
+                to: Routes.range_index_path(Endpoint, :index),
-                to: Routes.range_index_path(Endpoint, :index)
+                class: "text-primary-600 text-white hover:underline"
               ) %>
             </li>
             <%= if @current_user.role == :admin do %>
               <li class="mx-2 my-1">
-                <%= link(gettext("Invites"),
+                <%= live_redirect(gettext("Invites"),
-                  class: "hover:underline",
+                  to: Routes.invite_index_path(Endpoint, :index),
-                  to: Routes.invite_index_path(Endpoint, :index)
+                  class: "text-primary-600 text-white hover:underline"
                 ) %>
               </li>
             <% end %>
             <li class="mx-2 my-1">
-              <%= link(@current_user.email,
+              <%= live_redirect(@current_user.email,
-                class: "hover:underline truncate",
+                to: Routes.user_settings_path(Endpoint, :edit),
-                to: Routes.user_settings_path(Endpoint, :edit)
+                class: "text-primary-600 text-white hover:underline truncate"
               ) %>
             </li>
             <li class="mx-2 my-1">
@@ -90,7 +89,8 @@ defmodule CanneryWeb.Components.Topbar do
             </li>
             <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
               <li class="mx-2 my-1">
-                <%= link to: Routes.live_dashboard_path(Endpoint, :home) do %>
+                <%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
+                  class: "text-primary-600 text-white hover:underline" do %>
                   <i class="fas fa-tachometer-alt"></i>
                 <% end %>
               </li>
@@ -98,16 +98,16 @@ defmodule CanneryWeb.Components.Topbar do
           <% else %>
             <%= if Accounts.allow_registration?() do %>
               <li class="mx-2 my-1">
-                <%= link(dgettext("actions", "Register"),
+                <%= live_redirect(dgettext("actions", "Register"),
-                  class: "hover:underline",
+                  to: Routes.user_registration_path(Endpoint, :new),
-                  to: Routes.user_registration_path(Endpoint, :new)
+                  class: "text-primary-600 text-white hover:underline truncate"
                 ) %>
               </li>
             <% end %>
             <li class="mx-2 my-1">
-              <%= link(dgettext("actions", "Log in"),
+              <%= live_redirect(dgettext("actions", "Log in"),
-                class: "hover:underline",
+                to: Routes.user_session_path(Endpoint, :new),
-                to: Routes.user_session_path(Endpoint, :new)
+                class: "text-primary-600 text-white hover:underline truncate"
               ) %>
             </li>
           <% end %>

lib/cannery_web/live/invite_live/index.html.heex

@@ -24,12 +24,11 @@
     <%= for invite <- @invites do %>
       <.invite_card invite={invite}>
         <:code_actions>
-          <form phx-submit={JS.dispatch("cannery:clipcopy", to: "#code-#{invite.id}")}>
+          <form phx-submit="copy_to_clipboard">
             <button
               type="submit"
               class="mx-2 my-1 btn btn-primary"
-              phx-click="copy_to_clipboard"
+              phx-click={JS.dispatch("cannery:clipcopy", to: "#code-#{invite.id}")}
-              phx-value-invite_id={"#code-#{invite.id}"}
             >
               <%= dgettext("actions", "Copy to clipboard") %>
             </button>

lib/cannery_web/templates/layout/app.html.heex

@@ -1,4 +1,4 @@
-<main role="main" class="container min-h-full min-w-full">
+<main role="main" class="min-h-full min-w-full">
   <header>
     <.topbar current_user={assigns[:current_user]}></.topbar>
 

lib/cannery_web/templates/layout/live.html.heex

@@ -1,4 +1,4 @@
-<main class="mb-8 container min-w-full">
+<main class="mb-8 min-w-full">
   <header>
     <.topbar current_user={assigns[:current_user]}></.topbar>
 
@@ -26,3 +26,29 @@
     <%= @inner_content %>
   </div>
 </main>
+
+<div
+  id="loading"
+  class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Loading...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-spin fa-cog"></i>
+</div>
+
+<div
+  id="disconnect"
+  class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Reconnecting...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-fade fa-satellite-dish"></i>
+</div>

priv/gettext/actions.pot

@@ -187,6 +187,6 @@ msgid "Select"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:34
+#: lib/cannery_web/live/invite_live/index.html.heex:33
 msgid "Copy to clipboard"
 msgstr ""

priv/gettext/default.pot

@@ -21,7 +21,7 @@ msgid "Access from any internet-capable device"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:91
+#: lib/cannery_web/live/invite_live/index.html.heex:90
 msgid "Admins"
 msgstr ""
 
@@ -31,7 +31,7 @@ msgid "Admins:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:53
+#: lib/cannery_web/components/topbar.ex:52
 #: lib/cannery_web/live/ammo_group_live/index.html.heex:3
 #: lib/cannery_web/live/range_live/index.html.heex:61
 msgid "Ammo"
@@ -108,7 +108,7 @@ msgid "Container"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:47
+#: lib/cannery_web/components/topbar.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 msgid "Containers"
 msgstr ""
@@ -144,7 +144,7 @@ msgid "Description:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:60
+#: lib/cannery_web/live/invite_live/index.html.heex:59
 msgid "Disable"
 msgstr ""
 
@@ -182,7 +182,7 @@ msgid "Edit Tag"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:64
+#: lib/cannery_web/live/invite_live/index.html.heex:63
 msgid "Enable"
 msgstr ""
 
@@ -225,7 +225,7 @@ msgid "Invite Only"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:72
+#: lib/cannery_web/components/topbar.ex:71
 #: lib/cannery_web/live/invite_live/index.html.heex:3
 msgid "Invites"
 msgstr ""
@@ -273,7 +273,7 @@ msgid "Magazine, Clip, Ammo Box, etc"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:59
+#: lib/cannery_web/components/topbar.ex:58
 msgid "Manage"
 msgstr ""
 
@@ -424,7 +424,7 @@ msgid "Self-host your own instance, or use an instance from someone you trust."
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:80
+#: lib/cannery_web/live/invite_live/index.html.heex:79
 msgid "Set Unlimited"
 msgstr ""
 
@@ -464,7 +464,7 @@ msgid "Stored in"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:41
+#: lib/cannery_web/components/topbar.ex:40
 #: lib/cannery_web/live/container_live/show.html.heex:60
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 msgid "Tags"
@@ -509,7 +509,7 @@ msgid "Type:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:120
+#: lib/cannery_web/live/invite_live/index.html.heex:119
 msgid "Users"
 msgstr ""
 
@@ -544,7 +544,7 @@ msgid "No tags for this container"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:65
+#: lib/cannery_web/components/topbar.ex:64
 #: lib/cannery_web/live/ammo_group_live/index.html.heex:39
 msgid "Range"
 msgstr ""
@@ -737,3 +737,13 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:140
 msgid "Firing type"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/live.html.heex:50
+msgid "Reconnecting..."
+msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/live.html.heex:37
+msgid "Loading..."
+msgstr ""

priv/gettext/en/LC_MESSAGES/actions.po

@@ -188,6 +188,6 @@ msgid "Select"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:34
+#: lib/cannery_web/live/invite_live/index.html.heex:33
 msgid "Copy to clipboard"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -22,7 +22,7 @@ msgid "Access from any internet-capable device"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:91
+#: lib/cannery_web/live/invite_live/index.html.heex:90
 msgid "Admins"
 msgstr ""
 
@@ -32,7 +32,7 @@ msgid "Admins:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:53
+#: lib/cannery_web/components/topbar.ex:52
 #: lib/cannery_web/live/ammo_group_live/index.html.heex:3
 #: lib/cannery_web/live/range_live/index.html.heex:61
 msgid "Ammo"
@@ -109,7 +109,7 @@ msgid "Container"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:47
+#: lib/cannery_web/components/topbar.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 msgid "Containers"
 msgstr ""
@@ -145,7 +145,7 @@ msgid "Description:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:60
+#: lib/cannery_web/live/invite_live/index.html.heex:59
 msgid "Disable"
 msgstr ""
 
@@ -183,7 +183,7 @@ msgid "Edit Tag"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:64
+#: lib/cannery_web/live/invite_live/index.html.heex:63
 msgid "Enable"
 msgstr ""
 
@@ -226,7 +226,7 @@ msgid "Invite Only"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:72
+#: lib/cannery_web/components/topbar.ex:71
 #: lib/cannery_web/live/invite_live/index.html.heex:3
 msgid "Invites"
 msgstr ""
@@ -274,7 +274,7 @@ msgid "Magazine, Clip, Ammo Box, etc"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:59
+#: lib/cannery_web/components/topbar.ex:58
 msgid "Manage"
 msgstr ""
 
@@ -425,7 +425,7 @@ msgid "Self-host your own instance, or use an instance from someone you trust."
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:80
+#: lib/cannery_web/live/invite_live/index.html.heex:79
 msgid "Set Unlimited"
 msgstr ""
 
@@ -465,7 +465,7 @@ msgid "Stored in"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:41
+#: lib/cannery_web/components/topbar.ex:40
 #: lib/cannery_web/live/container_live/show.html.heex:60
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 msgid "Tags"
@@ -510,7 +510,7 @@ msgid "Type:"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:120
+#: lib/cannery_web/live/invite_live/index.html.heex:119
 msgid "Users"
 msgstr ""
 
@@ -545,7 +545,7 @@ msgid "No tags for this container"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:65
+#: lib/cannery_web/components/topbar.ex:64
 #: lib/cannery_web/live/ammo_group_live/index.html.heex:39
 msgid "Range"
 msgstr ""
@@ -738,3 +738,13 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:140
 msgid "Firing type"
 msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/live.html.heex:50
+msgid "Reconnecting..."
+msgstr ""
+
+#, elixir-autogen, elixir-format
+#: lib/cannery_web/templates/layout/live.html.heex:37
+msgid "Loading..."
+msgstr ""

priv/gettext/en/LC_MESSAGES/prompts.po

@@ -79,8 +79,8 @@ msgid "Ammo group updated successfully"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:103
+#: lib/cannery_web/live/invite_live/index.html.heex:102
-#: lib/cannery_web/live/invite_live/index.html.heex:132
+#: lib/cannery_web/live/invite_live/index.html.heex:131
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
@@ -93,7 +93,7 @@ msgid "Are you sure you want to delete %{name}?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:50
+#: lib/cannery_web/live/invite_live/index.html.heex:49
 msgid "Are you sure you want to delete the invite for %{name}?"
 msgstr ""
 
@@ -110,12 +110,12 @@ msgid "Are you sure you want to delete your account?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:87
+#: lib/cannery_web/components/topbar.ex:86
 msgid "Are you sure you want to log out?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:75
+#: lib/cannery_web/live/invite_live/index.html.heex:74
 msgid "Are you sure you want to make %{name} unlimited?"
 msgstr ""
 

priv/gettext/prompts.pot

@@ -78,8 +78,8 @@ msgid "Ammo group updated successfully"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:103
+#: lib/cannery_web/live/invite_live/index.html.heex:102
-#: lib/cannery_web/live/invite_live/index.html.heex:132
+#: lib/cannery_web/live/invite_live/index.html.heex:131
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 
@@ -92,7 +92,7 @@ msgid "Are you sure you want to delete %{name}?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:50
+#: lib/cannery_web/live/invite_live/index.html.heex:49
 msgid "Are you sure you want to delete the invite for %{name}?"
 msgstr ""
 
@@ -109,12 +109,12 @@ msgid "Are you sure you want to delete your account?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/components/topbar.ex:87
+#: lib/cannery_web/components/topbar.ex:86
 msgid "Are you sure you want to log out?"
 msgstr ""
 
 #, elixir-autogen, elixir-format
-#: lib/cannery_web/live/invite_live/index.html.heex:75
+#: lib/cannery_web/live/invite_live/index.html.heex:74
 msgid "Are you sure you want to make %{name} unlimited?"
 msgstr ""