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

fix: portal-aware amount of free storage on signup page

This commit is contained in:
Michał Leszczyk 2022-03-30 15:35:36 +02:00
parent 51c3d4af94
commit 36c18e4f6a
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dashboard-v2/src/contexts/portal-settings/PortalSettingsContext.js
View File

@ -2,8 +2,8 @@ import { createContext } from "react";
export const defaultSettings = {
areAccountsEnabled: false,
isAuthenticationRequired: true,
isSubscriptionRequired: true,
isAuthenticationRequired: false,
isSubscriptionRequired: false,
};
export const PortalSettingsContext = createContext(defaultSettings);

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

@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { navigate } from "gatsby";
import bytes from "pretty-bytes";
import AuthLayout from "../../layouts/AuthLayout";
@ -7,13 +8,21 @@ 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";
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 FreePortalHeader = () => {
const { plans } = usePlans();
const freePlan = plans.find(({ price }) => price === 0);
const freeStorage = freePlan ? bytes(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">
@ -47,39 +56,41 @@ const SignUpPage = () => {
}, [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" />
<PlansProvider>
<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)} />
)}
{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">
Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
</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)} />
)}
{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">
Already have an account? <HighlightedLink to="/auth/login">Sign in</HighlightedLink>
</p>
</div>
</PlansProvider>
);
};