94 lines
2.7 KiB
JavaScript
94 lines
2.7 KiB
JavaScript
import { useCallback, useState } from "react";
|
|
|
|
import AuthLayout from "../../layouts/AuthLayout";
|
|
|
|
import { Alert } from "../../components/Alert";
|
|
import HighlightedLink from "../../components/HighlightedLink";
|
|
import { SignUpForm } from "../../components/forms/SignUpForm";
|
|
import { usePortalSettings } from "../../contexts/portal-settings";
|
|
import { PlansProvider, usePlans } from "../../contexts/plans";
|
|
import { Metadata } from "../../components/Metadata";
|
|
import { useUser } from "../../contexts/user";
|
|
import humanBytes from "../../lib/humanBytes";
|
|
|
|
const FreePortalHeader = () => {
|
|
const { plans } = usePlans();
|
|
|
|
const freePlan = plans.find(({ price }) => price === 0);
|
|
const freeStorage = freePlan?.limits ? humanBytes(freePlan.limits?.storageLimit, { binary: true }) : null;
|
|
|
|
return (
|
|
<div className="mt-4 mb-8 font-sans">
|
|
<h3>Create your free account</h3>
|
|
{freeStorage && <p className="font-light text-lg">Includes {freeStorage} 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",
|
|
Success: "SUCCESS",
|
|
Failure: "FAILURE",
|
|
};
|
|
|
|
const SignUpPage = () => {
|
|
const [state, setState] = useState(State.Pure);
|
|
const { settings } = usePortalSettings();
|
|
const { mutate: refreshUserState } = useUser();
|
|
|
|
const onUserCreated = useCallback(
|
|
(newUser) => {
|
|
refreshUserState(newUser);
|
|
},
|
|
[refreshUserState]
|
|
);
|
|
|
|
return (
|
|
<PlansProvider>
|
|
<Metadata>
|
|
<title>Sign Up</title>
|
|
</Metadata>
|
|
<div className="flex flex-col">
|
|
{!settings.areAccountsEnabled && <Alert $variant="info">Accounts are not enabled on this portal.</Alert>}
|
|
|
|
{settings.areAccountsEnabled && (
|
|
<>
|
|
{settings.isSubscriptionRequired ? <PaidPortalHeader /> : <FreePortalHeader />}
|
|
|
|
{state !== State.Success && (
|
|
<>
|
|
<SignUpForm onSuccess={onUserCreated} onFailure={() => setState(State.Failure)} />
|
|
|
|
<p className="text-sm text-center mt-8">
|
|
Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
|
|
</p>
|
|
</>
|
|
)}
|
|
|
|
{state === State.Failure && (
|
|
<p className="text-error text-center">Something went wrong, please try again later.</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</PlansProvider>
|
|
);
|
|
};
|
|
|
|
SignUpPage.Layout = AuthLayout;
|
|
|
|
export default SignUpPage;
|