feat(dashboard-v2): prepare /signup page for free & paid portals

packages/dashboard-v2/src/components/forms/SignUpForm.js

@@ -61,11 +61,6 @@ export const SignUpForm = ({ onSuccess, onFailure }) => (
   >
     {({ errors, touched }) => (
       <Form className="flex flex-col gap-4">
-        <div className="mt-4 mb-8">
-          <h3>Create your free account</h3>
-          <p className="font-light font-sans text-lg">Includes 100 GB storage at basic speed</p>
-        </div>
-
         <TextField
           type="text"
           id="email"

packages/dashboard-v2/src/pages/auth/signup.js

@@ -1,10 +1,32 @@
 import { useEffect, useState } from "react";
+import { navigate } from "gatsby";
 
 import AuthLayout from "../../layouts/AuthLayout";
 
+import { Alert } from "../../components/Alert";
 import HighlightedLink from "../../components/HighlightedLink";
 import { SignUpForm } from "../../components/forms/SignUpForm";
-import { navigate } from "gatsby";
+import { usePortalSettings } from "../../contexts/portal-settings";
+
+const FreePortalHeader = () => (
+  <div className="mt-4 mb-8 font-sans">
+    <h3>Create your free account</h3>
+    <p className="font-light text-lg">Includes 100 GB storage at basic speed</p>
+  </div>
+);
+
+const PaidPortalHeader = () => (
+  <div className="mt-4 mb-8 font-sans">
+    <h3>Create your account</h3>
+    <p className="font-light text-sm">
+      If you're looking for a free portal, try{" "}
+      <HighlightedLink as="a" href="https://skynetfree.net">
+        SkynetFree.net
+      </HighlightedLink>{" "}
+      with 100GB of free storage.
+    </p>
+  </div>
+);
 
 const State = {
   Pure: "PURE",
@@ -14,34 +36,44 @@ const State = {
 
 const SignUpPage = () => {
   const [state, setState] = useState(State.Pure);
+  const { settings } = usePortalSettings();
 
   useEffect(() => {
     if (state === State.Success) {
-      const timer = setTimeout(() => navigate("/"), 3000);
+      const timer = setTimeout(() => navigate(settings.isSubscriptionRequired ? "/upgrade" : "/"), 3000);
 
       return () => clearTimeout(timer);
     }
-  }, [state]);
+  }, [state, settings.isSubscriptionRequired]);
 
   return (
     <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
       <div className="mb-4 md:mb-16">
         <img src="/images/logo-black-text.svg" alt="Skynet" />
       </div>
-      {state !== State.Success && (
-        <SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
-      )}
 
-      {state === State.Success && (
+      {!settings.areAccountsEnabled && <Alert $variant="info">Sorry, registrations are currently disabled.</Alert>}
-        <div className="text-center">
-          <p className="text-primary font-semibold">Please check your inbox and confirm your email address.</p>
-          <p>You will be redirected to your dashboard shortly.</p>
-          <HighlightedLink to="/">Click here to go there now.</HighlightedLink>
-        </div>
-      )}
 
-      {state === State.Failure && (
+      {settings.areAccountsEnabled && (
-        <p className="text-error text-center">Something went wrong, please try again later.</p>
+        <>
+          {settings.isSubscriptionRequired ? <PaidPortalHeader /> : <FreePortalHeader />}
+
+          {state !== State.Success && (
+            <SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
+          )}
+
+          {state === State.Success && (
+            <div className="text-center">
+              <p className="text-primary font-semibold">Please check your inbox and confirm your email address.</p>
+              <p>You will be redirected to your dashboard shortly.</p>
+              <HighlightedLink to="/">Click here to go there now.</HighlightedLink>
+            </div>
+          )}
+
+          {state === State.Failure && (
+            <p className="text-error text-center">Something went wrong, please try again later.</p>
+          )}
+        </>
       )}
 
       <p className="text-sm text-center mt-8">