cloud: add disabled signup button

Author: acco

assets/css/app.css

@@ -252,3 +252,42 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  .tooltip {
+    position: relative;
+  }
+
+  .tooltip:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: white;
+    color: #374151;
+    border: 1px solid #d1d5db;
+    padding: 8px 12px;
+    border-radius: 3px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    z-index: 1000;
+    pointer-events: none;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .tooltip:hover::before {
+    content: "";
+    position: absolute;
+    bottom: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: #d1d5db;
+    z-index: 1000;
+    pointer-events: none;
+  }
+}

lib/sequin_web/live/user_login_live.ex

@@ -98,13 +98,24 @@ defmodule SequinWeb.UserLoginLive do
           </.simple_form>
         </div>
 
-        <%= if @account_self_signup? do %>
-          <p class="mt-6 text-center text-sm">
-            Don't have an account?
-            <.link navigate={~p"/register"} class="font-semibold text-brand hover:underline">
-              Sign up
-            </.link>
-          </p>
+        <%= cond do %>
+          <% @account_self_signup? -> %>
+            <p class="mt-6 text-center text-sm">
+              Don't have an account?
+              <.link navigate={~p"/register"} class="font-semibold text-brand hover:underline">
+                Sign up
+              </.link>
+            </p>
+          <% not @account_self_signup? and not @self_hosted -> %>
+            <p class="mt-6 text-center text-sm">
+              <.button
+                disabled
+                data-tooltip="Signups for Sequin Cloud are disabled."
+                class="w-full !bg-gray-400 hover:bg-gray-300 cursor-not-allowed tooltip"
+              >
+                Sign up
+              </.button>
+            </p>
         <% end %>
       </div>
     </div>
@@ -135,6 +146,7 @@ defmodule SequinWeb.UserLoginLive do
       |> assign(accepting_invite?: accepting_invite?(session))
       |> assign(accepting_team_invite?: accepting_team_invite?(session))
       |> assign(account_self_signup?: accepting_team_invite?(session) || Sequin.feature_enabled?(:account_self_signup))
+      |> assign(self_hosted: Application.fetch_env!(:sequin, :self_hosted))
       |> assign(display_default_user_login?: Sequin.Accounts.only_default_user_and_first_login?())
 
     {:ok, socket, temporary_assigns: [form: form]}