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 = { export const defaultSettings = {
areAccountsEnabled: false, areAccountsEnabled: false,
isAuthenticationRequired: true, isAuthenticationRequired: false,
isSubscriptionRequired: true, isSubscriptionRequired: false,
}; };
export const PortalSettingsContext = createContext(defaultSettings); 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 { useEffect, useState } from "react";
import { navigate } from "gatsby"; import { navigate } from "gatsby";
import bytes from "pretty-bytes";
import AuthLayout from "../../layouts/AuthLayout"; import AuthLayout from "../../layouts/AuthLayout";
@ -7,13 +8,21 @@ import { Alert } from "../../components/Alert";
import HighlightedLink from "../../components/HighlightedLink"; import HighlightedLink from "../../components/HighlightedLink";
import { SignUpForm } from "../../components/forms/SignUpForm"; import { SignUpForm } from "../../components/forms/SignUpForm";
import { usePortalSettings } from "../../contexts/portal-settings"; import { usePortalSettings } from "../../contexts/portal-settings";
import { PlansProvider, usePlans } from "../../contexts/plans";
const FreePortalHeader = () => ( const FreePortalHeader = () => {
<div className="mt-4 mb-8 font-sans"> const { plans } = usePlans();
<h3>Create your free account</h3>
<p className="font-light text-lg">Includes 100 GB storage at basic speed</p> const freePlan = plans.find(({ price }) => price === 0);
</div> 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 = () => ( const PaidPortalHeader = () => (
<div className="mt-4 mb-8 font-sans"> <div className="mt-4 mb-8 font-sans">
@ -47,39 +56,41 @@ const SignUpPage = () => {
}, [state, settings.isSubscriptionRequired]); }, [state, settings.isSubscriptionRequired]);
return ( return (
<div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen"> <PlansProvider>
<div className="mb-4 md:mb-16"> <div className="bg-white px-8 py-10 md:py-32 lg:px-16 xl:px-28 min-h-screen">
<img src="/images/logo-black-text.svg" alt="Skynet" /> <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> </div>
</PlansProvider>
{!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>
); );
}; };