Flash: Show client and server specific disconnected flashes

zoonk · Jun 28, 2024 · 16e94c7 · 16e94c7
1 parent 192c3a9
commit 16e94c7
Show file tree

Hide file tree

Showing 16 changed files with 139 additions and 66 deletions.
diff --git a/lib/components/flash.ex b/lib/components/flash.ex
@@ -20,7 +20,7 @@ defmodule ZoonkWeb.Components.Flash do
       <.flash kind={:info} flash={@flash} />
       <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
   """
-  attr :id, :string, default: "flash", doc: "the optional id of flash container"
+  attr :id, :string, doc: "the optional id of flash container"
   attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
   attr :title, :string, default: nil
   attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
@@ -70,11 +70,34 @@ defmodule ZoonkWeb.Components.Flash do
 
   def flash_group(assigns) do
     ~H"""
-    <.flash kind={:info} title={gettext("Success!")} flash={@flash} />
-    <.flash kind={:error} title={gettext("Error!")} flash={@flash} />
-    <.flash id="disconnected" kind={:error} title={gettext("We can't find the internet")} phx-disconnected={show("#disconnected")} phx-connected={hide("#disconnected")} hidden>
-      <%= gettext("Attempting to reconnect") %> <.icon name="tabler-refresh" class="ml-1 h-3 w-3 animate-spin" />
-    </.flash>
+    <div>
+      <.flash kind={:info} title={gettext("Success!")} flash={@flash} />
+      <.flash kind={:error} title={gettext("Error!")} flash={@flash} />
+
+      <.flash
+        id="client-error"
+        kind={:error}
+        title={gettext("We can't find the internet")}
+        phx-disconnected={show(".phx-client-error #client-error")}
+        phx-connected={hide("#client-error")}
+        hidden
+      >
+        <%= gettext("Attempting to reconnect") %>
+        <.icon name="tabler-refresh" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+
+      <.flash
+        id="server-error"
+        kind={:error}
+        title={gettext("Something went wrong!")}
+        phx-disconnected={show(".phx-server-error #server-error")}
+        phx-connected={hide("#server-error")}
+        hidden
+      >
+        <%= gettext("Hang in there while we get back on track") %>
+        <.icon name="tabler-refresh" class="ml-1 h-3 w-3 animate-spin" />
+      </.flash>
+    </div>
     """
   end
 end
diff --git a/priv/gettext/de/LC_MESSAGES/default.po b/priv/gettext/de/LC_MESSAGES/default.po
@@ -11,27 +11,27 @@ msgstr ""
 "Language: de\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: lib/components/flash.ex:74
+#: lib/components/flash.ex:85
 #, elixir-autogen, elixir-format
 msgid "Attempting to reconnect"
 msgstr "Versuch einer erneuten Verbindung"
 
-#: lib/components/flash.ex:72
+#: lib/components/flash.ex:75
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr "Fehler!"
 
-#: lib/components/flash.ex:71
+#: lib/components/flash.ex:74
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr "Erfolg!"
 
-#: lib/components/flash.ex:73
+#: lib/components/flash.ex:80
 #, elixir-autogen, elixir-format
 msgid "We can't find the internet"
 msgstr "Wir können das Internet nicht finden"
 
-#: lib/components/flash.ex:53
+#: lib/components/flash.ex:55
 #: lib/components/modal.ex:53
 #, elixir-autogen, elixir-format
 msgid "close"
@@ -402,3 +402,13 @@ msgstr "Einrichtung"
 #, elixir-autogen, elixir-format
 msgid "Icon"
 msgstr "Icon"
+
+#: lib/components/flash.ex:97
+#, elixir-autogen, elixir-format
+msgid "Hang in there while we get back on track"
+msgstr "Halten Sie durch, während wir wieder auf Kurs kommen"
+
+#: lib/components/flash.ex:92
+#, elixir-autogen, elixir-format
+msgid "Something went wrong!"
+msgstr "Etwas ist schief gelaufen!"
diff --git a/priv/gettext/de/LC_MESSAGES/errors.po b/priv/gettext/de/LC_MESSAGES/errors.po
@@ -21,7 +21,7 @@ msgid "has already been taken"
 msgstr "ist bereits vergeben"
 
 ## From Ecto.Changeset.put_change/3
-#: lib/accounts/user_schema.ex:187
+#: lib/accounts/user_schema.ex:190
 #, elixir-autogen
 msgid "is invalid"
 msgstr "ist ungültig"
@@ -120,27 +120,27 @@ msgstr "muss gleich %{number} sein"
 msgid "can only contain letters, numbers, dashes and underscores"
 msgstr "darf nur Buchstaben, Zahlen, Bindestriche und Unterstriche enthalten"
 
-#: lib/accounts/user_schema.ex:76
+#: lib/accounts/user_schema.ex:77
 #, elixir-autogen, elixir-format
 msgid "at least one digit or punctuation character"
 msgstr "mindestens eine Ziffer oder ein Satzzeichen"
 
-#: lib/accounts/user_schema.ex:74
+#: lib/accounts/user_schema.ex:75
 #, elixir-autogen, elixir-format
 msgid "at least one lower case character"
 msgstr "mindestens ein Kleinbuchstabe"
 
-#: lib/accounts/user_schema.ex:75
+#: lib/accounts/user_schema.ex:76
 #, elixir-autogen, elixir-format
 msgid "at least one upper case character"
 msgstr "mindestens ein Großbuchstabe"
 
-#: lib/accounts/user_schema.ex:119
+#: lib/accounts/user_schema.ex:120
 #, elixir-autogen, elixir-format
 msgid "did not change"
 msgstr "hat sich nicht verändert"
 
-#: lib/accounts/user_schema.ex:150
+#: lib/accounts/user_schema.ex:151
 #, elixir-autogen, elixir-format
 msgid "does not match password"
 msgstr "stimmt nicht mit dem Passwort überein"

diff --git a/priv/gettext/de/LC_MESSAGES/orgs.po b/priv/gettext/de/LC_MESSAGES/orgs.po
@@ -226,7 +226,7 @@ msgstr "Markiere diese Option, wenn dies die richtige Antwort ist."
 msgid "Could not add option!"
 msgstr "Konnte keine Option hinzufügen!"
 
-#: lib/dashboard/courses/course_view.ex:51
+#: lib/dashboard/courses/course_view.ex:54
 #, elixir-autogen, elixir-format
 msgid "Could not change the lesson order!"
 msgstr "Konnte die Reihenfolge der Lektionen nicht ändern!"

diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
@@ -11,27 +11,27 @@
 msgid ""
 msgstr ""
 
-#: lib/components/flash.ex:74
+#: lib/components/flash.ex:85
 #, elixir-autogen, elixir-format
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/components/flash.ex:72
+#: lib/components/flash.ex:75
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr ""
 
-#: lib/components/flash.ex:71
+#: lib/components/flash.ex:74
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr ""
 
-#: lib/components/flash.ex:73
+#: lib/components/flash.ex:80
 #, elixir-autogen, elixir-format
 msgid "We can't find the internet"
 msgstr ""
 
-#: lib/components/flash.ex:53
+#: lib/components/flash.ex:55
 #: lib/components/modal.ex:53
 #, elixir-autogen, elixir-format
 msgid "close"
@@ -402,3 +402,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Icon"
 msgstr ""
+
+#: lib/components/flash.ex:97
+#, elixir-autogen, elixir-format
+msgid "Hang in there while we get back on track"
+msgstr ""
+
+#: lib/components/flash.ex:92
+#, elixir-autogen, elixir-format
+msgid "Something went wrong!"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
@@ -11,27 +11,27 @@ msgstr ""
 "Language: en\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: lib/components/flash.ex:74
+#: lib/components/flash.ex:85
 #, elixir-autogen, elixir-format
 msgid "Attempting to reconnect"
 msgstr ""
 
-#: lib/components/flash.ex:72
+#: lib/components/flash.ex:75
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr ""
 
-#: lib/components/flash.ex:71
+#: lib/components/flash.ex:74
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr ""
 
-#: lib/components/flash.ex:73
+#: lib/components/flash.ex:80
 #, elixir-autogen, elixir-format
 msgid "We can't find the internet"
 msgstr ""
 
-#: lib/components/flash.ex:53
+#: lib/components/flash.ex:55
 #: lib/components/modal.ex:53
 #, elixir-autogen, elixir-format
 msgid "close"
@@ -402,3 +402,13 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Icon"
 msgstr ""
+
+#: lib/components/flash.ex:97
+#, elixir-autogen, elixir-format
+msgid "Hang in there while we get back on track"
+msgstr "Hang in there while we get back on track"
+
+#: lib/components/flash.ex:92
+#, elixir-autogen, elixir-format
+msgid "Something went wrong!"
+msgstr "Something went wrong!"
diff --git a/priv/gettext/en/LC_MESSAGES/errors.po b/priv/gettext/en/LC_MESSAGES/errors.po
@@ -21,7 +21,7 @@ msgid "has already been taken"
 msgstr ""
 
 ## From Ecto.Changeset.put_change/3
-#: lib/accounts/user_schema.ex:187
+#: lib/accounts/user_schema.ex:190
 #, elixir-autogen
 msgid "is invalid"
 msgstr ""
@@ -120,27 +120,27 @@ msgstr ""
 msgid "can only contain letters, numbers, dashes and underscores"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:76
+#: lib/accounts/user_schema.ex:77
 #, elixir-autogen, elixir-format
 msgid "at least one digit or punctuation character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:74
+#: lib/accounts/user_schema.ex:75
 #, elixir-autogen, elixir-format
 msgid "at least one lower case character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:75
+#: lib/accounts/user_schema.ex:76
 #, elixir-autogen, elixir-format
 msgid "at least one upper case character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:119
+#: lib/accounts/user_schema.ex:120
 #, elixir-autogen, elixir-format
 msgid "did not change"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:150
+#: lib/accounts/user_schema.ex:151
 #, elixir-autogen, elixir-format
 msgid "does not match password"
 msgstr ""

diff --git a/priv/gettext/en/LC_MESSAGES/orgs.po b/priv/gettext/en/LC_MESSAGES/orgs.po
@@ -226,7 +226,7 @@ msgstr ""
 msgid "Could not add option!"
 msgstr ""
 
-#: lib/dashboard/courses/course_view.ex:51
+#: lib/dashboard/courses/course_view.ex:54
 #, elixir-autogen, elixir-format
 msgid "Could not change the lesson order!"
 msgstr ""

diff --git a/priv/gettext/errors.pot b/priv/gettext/errors.pot
@@ -18,7 +18,7 @@ msgid "has already been taken"
 msgstr ""
 
 ## From Ecto.Changeset.put_change/3
-#: lib/accounts/user_schema.ex:187
+#: lib/accounts/user_schema.ex:190
 #, elixir-autogen
 msgid "is invalid"
 msgstr ""
@@ -117,27 +117,27 @@ msgstr ""
 msgid "can only contain letters, numbers, dashes and underscores"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:76
+#: lib/accounts/user_schema.ex:77
 #, elixir-autogen, elixir-format
 msgid "at least one digit or punctuation character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:74
+#: lib/accounts/user_schema.ex:75
 #, elixir-autogen, elixir-format
 msgid "at least one lower case character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:75
+#: lib/accounts/user_schema.ex:76
 #, elixir-autogen, elixir-format
 msgid "at least one upper case character"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:119
+#: lib/accounts/user_schema.ex:120
 #, elixir-autogen, elixir-format
 msgid "did not change"
 msgstr ""
 
-#: lib/accounts/user_schema.ex:150
+#: lib/accounts/user_schema.ex:151
 #, elixir-autogen, elixir-format
 msgid "does not match password"
 msgstr ""

diff --git a/priv/gettext/orgs.pot b/priv/gettext/orgs.pot
@@ -226,7 +226,7 @@ msgstr ""
 msgid "Could not add option!"
 msgstr ""
 
-#: lib/dashboard/courses/course_view.ex:51
+#: lib/dashboard/courses/course_view.ex:54
 #, elixir-autogen, elixir-format
 msgid "Could not change the lesson order!"
 msgstr ""

diff --git a/priv/gettext/pt/LC_MESSAGES/default.po b/priv/gettext/pt/LC_MESSAGES/default.po
@@ -11,27 +11,27 @@ msgstr ""
 "Language: pt\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: lib/components/flash.ex:74
+#: lib/components/flash.ex:85
 #, elixir-autogen, elixir-format
 msgid "Attempting to reconnect"
 msgstr "Tentando reconectar"
 
-#: lib/components/flash.ex:72
+#: lib/components/flash.ex:75
 #, elixir-autogen, elixir-format
 msgid "Error!"
 msgstr "Erro!"
 
-#: lib/components/flash.ex:71
+#: lib/components/flash.ex:74
 #, elixir-autogen, elixir-format
 msgid "Success!"
 msgstr "Sucesso!"
 
-#: lib/components/flash.ex:73
+#: lib/components/flash.ex:80
 #, elixir-autogen, elixir-format
 msgid "We can't find the internet"
 msgstr "Não foi possível conectar à internet"
 
-#: lib/components/flash.ex:53
+#: lib/components/flash.ex:55
 #: lib/components/modal.ex:53
 #, elixir-autogen, elixir-format
 msgid "close"
@@ -402,3 +402,13 @@ msgstr "Configuração"
 #, elixir-autogen, elixir-format
 msgid "Icon"
 msgstr "Ícone"
+
+#: lib/components/flash.ex:97
+#, elixir-autogen, elixir-format
+msgid "Hang in there while we get back on track"
+msgstr "Aguarde enquanto voltamos ao normal"
+
+#: lib/components/flash.ex:92
+#, elixir-autogen, elixir-format
+msgid "Something went wrong!"
+msgstr "Algo deu errado!"