LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Michał Leszczyk 2022-03-29 16:07:23 +02:00
parent 0604198ca2
commit 8cdf0f86b2
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dashboard-v2/src/components/forms/SignUpForm.js
View File

@ -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"

62
packages/dashboard-v2/src/pages/auth/signup.js
View File

@ -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 && (
<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>
)}
{!settings.areAccountsEnabled && <Alert $variant="info">Sorry, registrations are currently disabled.</Alert>}
{state === State.Failure && (
<p className="text-error text-center">Something went wrong, please try again later.</p>
{settings.areAccountsEnabled && (
<>
{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">