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,20 +36,28 @@ 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>
+
+      {!settings.areAccountsEnabled && <Alert $variant="info">Sorry, registrations are currently disabled.</Alert>}
+
+      {settings.areAccountsEnabled && (
+        <>
+          {settings.isSubscriptionRequired ? <PaidPortalHeader /> : <FreePortalHeader />}
+
           {state !== State.Success && (
             <SignUpForm onSuccess={() => setState(State.Success)} onFailure={() => setState(State.Failure)} />
           )}
@@ -43,6 +73,8 @@ const SignUpPage = () => {
           {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">
         Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>