xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

ui improvements

This commit is contained in:
Daniel 2023-07-20 00:46:16 -04:00
parent a45774a479
commit debfd36eb8
12 changed files with 156 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.sample
View File

@ -18,8 +18,9 @@ EMAIL_FROM=
EMAIL_SERVER= EMAIL_SERVER=
# Stripe settings (You don't need these, it's for the cloud instance payments) # Stripe settings (You don't need these, it's for the cloud instance payments)
NEXT_PUBLC_STRIPE_IS_ACTIVE=
STRIPE_SECRET_KEY= STRIPE_SECRET_KEY=
PRICE_ID= PRICE_ID=
TRIAL_PERIOD_DAYS= NEXT_PUBLIC_TRIAL_PERIOD_DAYS=
NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL= NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
BASE_URL=http://localhost:3000 BASE_URL=http://localhost:3000

104
layouts/AuthRedirect.tsx
View File

@ -18,57 +18,57 @@ export default function AuthRedirect({ children }: Props) {
useInitialData(); useInitialData();
useEffect(() => { // useEffect(() => {
if (!router.pathname.startsWith("/public")) { // if (!router.pathname.startsWith("/public")) {
if ( // if (
emailEnabled && // emailEnabled &&
status === "authenticated" && // status === "authenticated" &&
(data.user.isSubscriber === true || // (data.user.isSubscriber === true ||
data.user.isSubscriber === undefined) && // data.user.isSubscriber === undefined) &&
!data.user.username // !data.user.username
) { // ) {
router.push("/choose-username").then(() => { // router.push("/choose-username").then(() => {
setRedirect(false); // setRedirect(false);
}); // });
} else if ( // } else if (
status === "authenticated" && // status === "authenticated" &&
data.user.isSubscriber === false // data.user.isSubscriber === false
) { // ) {
router.push("/subscribe").then(() => { // router.push("/subscribe").then(() => {
setRedirect(false); // setRedirect(false);
}); // });
} else if ( // } else if (
status === "authenticated" && // status === "authenticated" &&
(router.pathname === "/login" || // (router.pathname === "/login" ||
router.pathname === "/register" || // router.pathname === "/register" ||
router.pathname === "/confirmation" || // router.pathname === "/confirmation" ||
router.pathname === "/subscribe" || // router.pathname === "/subscribe" ||
router.pathname === "/choose-username" || // router.pathname === "/choose-username" ||
router.pathname === "/forgot") // router.pathname === "/forgot")
) { // ) {
router.push("/").then(() => { // router.push("/").then(() => {
setRedirect(false); // setRedirect(false);
}); // });
} else if ( // } else if (
status === "unauthenticated" && // status === "unauthenticated" &&
!( // !(
router.pathname === "/login" || // router.pathname === "/login" ||
router.pathname === "/register" || // router.pathname === "/register" ||
router.pathname === "/confirmation" || // router.pathname === "/confirmation" ||
router.pathname === "/forgot" // router.pathname === "/forgot"
) // )
) { // ) {
router.push("/login").then(() => { // router.push("/login").then(() => {
setRedirect(false); // setRedirect(false);
}); // });
} else if (status === "loading") setRedirect(true); // } else if (status === "loading") setRedirect(true);
else setRedirect(false); // else setRedirect(false);
} else { // } else {
setRedirect(false); // setRedirect(false);
} // }
}, [status]); // }, [status]);
if (status !== "loading" && !redirect) return <>{children}</>; // if (status !== "loading" && !redirect) return <>{children}</>;
else return <></>; // else return <></>;
// return <>{children}</>; return <>{children}</>;
} }

7
lib/api/checkSubscription.ts
View File

@ -19,9 +19,10 @@ export default async function checkSubscription(
const isSubscriber = listByEmail.data.some((customer, i) => { const isSubscriber = listByEmail.data.some((customer, i) => {
const hasValidSubscription = customer.subscriptions?.data.some( const hasValidSubscription = customer.subscriptions?.data.some(
(subscription) => { (subscription) => {
const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
const secondsInTwoWeeks = TRIAL_PERIOD_DAYS process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
? Number(TRIAL_PERIOD_DAYS) * 86400 const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
: 1209600; : 1209600;
subscriptionCanceledAt = subscription.canceled_at; subscriptionCanceledAt = subscription.canceled_at;

7
lib/api/paymentCheckout.ts
View File

@ -17,7 +17,8 @@ export default async function paymentCheckout(
const isExistingCostomer = listByEmail?.data[0]?.id || undefined; const isExistingCostomer = listByEmail?.data[0]?.id || undefined;
const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
const session = await stripe.checkout.sessions.create({ const session = await stripe.checkout.sessions.create({
customer: isExistingCostomer ? isExistingCostomer : undefined, customer: isExistingCostomer ? isExistingCostomer : undefined,
line_items: [ line_items: [
@ -34,7 +35,9 @@ export default async function paymentCheckout(
enabled: true, enabled: true,
}, },
subscription_data: { subscription_data: {
trial_period_days: TRIAL_PERIOD_DAYS ? Number(TRIAL_PERIOD_DAYS) : 14, trial_period_days: NEXT_PUBLIC_TRIAL_PERIOD_DAYS
? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS)
: 14,
}, },
}); });

7
lib/api/updateCustomerEmail.ts
View File

@ -18,9 +18,10 @@ export default async function updateCustomerEmail(
const customer = listByEmail.data.find((customer, i) => { const customer = listByEmail.data.find((customer, i) => {
const hasValidSubscription = customer.subscriptions?.data.some( const hasValidSubscription = customer.subscriptions?.data.some(
(subscription) => { (subscription) => {
const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
const secondsInTwoWeeks = TRIAL_PERIOD_DAYS process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
? Number(TRIAL_PERIOD_DAYS) * 86400 const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
: 1209600; : 1209600;
const isNotCanceledOrHasTime = !( const isNotCanceledOrHasTime = !(

7
pages/api/auth/[...nextauth].ts
View File

@ -93,9 +93,10 @@ export const authOptions: AuthOptions = {
const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY; const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
const PRICE_ID = process.env.PRICE_ID; const PRICE_ID = process.env.PRICE_ID;
const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
const secondsInTwoWeeks = TRIAL_PERIOD_DAYS process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
? Number(TRIAL_PERIOD_DAYS) * 86400 const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS
? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400
: 1209600; : 1209600;
const subscriptionIsTimesUp = const subscriptionIsTimesUp =
token.subscriptionCanceledAt && token.subscriptionCanceledAt &&

31
pages/choose-username.tsx
View File

@ -42,23 +42,17 @@ export default function Subscribe() {
return ( return (
<> <>
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="flex flex-col gap-2 justify-between items-center mb-5"> <p className="text-xl text-sky-500 w-fit font-bold">
<Image Choose a Username (Last step)
src="/linkwarden.png" </p>
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto"
/>
<div className="text-center">
<p className="text-3xl text-sky-500">One Last Step...</p>
<p className="font-semibold text-sky-400">
Please choose a username to start using your account.
</p>
</div>
</div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
@ -85,7 +79,7 @@ export default function Subscribe() {
<SubmitButton <SubmitButton
onClick={submitUsername} onClick={submitUsername}
label="Choose Username" label="Complete Registration"
className="mt-2 w-full text-center" className="mt-2 w-full text-center"
loading={submitLoader} loading={submitLoader}
/> />
@ -97,6 +91,9 @@ export default function Subscribe() {
Sign Out Sign Out
</div> </div>
</div> </div>
<p className="text-center text-xs text-gray-500 my-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</> </>
); );
} }

34
pages/forgot.tsx
View File

@ -39,20 +39,21 @@ export default function Forgot() {
return ( return (
<> <>
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5"> <p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p>
<Image <p className="text-md text-gray-500 mt-1">
src="/linkwarden.png" Enter your Email so we can send you a link to recover your account.
width={1694} </p>
height={483} <p className="text-md text-gray-500 mt-1">
alt="Linkwarden" Make sure to change your password in the profile settings afterwards.
className="h-12 w-fit" </p>
/>
<div className="text-center sm:text-right">
<p className="text-3xl text-sky-500">Password Reset</p>
</div>
</div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">Email</p>
@ -63,10 +64,6 @@ export default function Forgot() {
onChange={(e) => setForm({ ...form, email: e.target.value })} onChange={(e) => setForm({ ...form, email: e.target.value })}
className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100" className="w-full rounded-md p-2 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
/> />
<p className="text-md text-gray-500 mt-1">
Make sure to change your password in the profile settings
afterwards.
</p>
</div> </div>
<SubmitButton <SubmitButton
@ -81,6 +78,9 @@ export default function Forgot() {
</Link> </Link>
</div> </div>
</div> </div>
<p className="text-center text-xs text-gray-500 my-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</> </>
); );
} }

32
pages/login.tsx
View File

@ -46,23 +46,20 @@ export default function Login() {
return ( return (
<> <>
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<p className="text-xl font-semibold text-sky-500 text-center">
Sign in to your account
</p>
<div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 my-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="text-right flex flex-col gap-2 sm:flex-row justify-between items-center mb-5"> <p className="text-xl text-sky-500 w-fit font-bold">
<Image Enter your credentials
src="/linkwarden.png" </p>
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
/>
<div className="text-center sm:text-right">
<p className="text-3xl text-sky-500">Welcome back</p>
<p className="text-md font-semibold text-sky-400">
Sign in to your account
</p>
</div>
</div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Username Username
@ -112,6 +109,9 @@ export default function Login() {
</Link> </Link>
</div> </div>
</div> </div>
<p className="text-center text-xs text-gray-500 mb-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</> </>
); );
} }

38
pages/register.tsx
View File

@ -90,23 +90,26 @@ export default function Register() {
return ( return (
<> <>
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<div className="text-center">
<p className="text-xl font-semibold text-sky-500">
{process.env.NEXT_PUBLIC_STRIPE_IS_ACTIVE
? `Start using our premium services with a ${
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
}-day free trial!`
: "Create a new account"}
</p>
</div>
<div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mx-auto my-10 flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5"> <p className="text-xl text-sky-500 w-fit font-bold">
<Image Enter your details
src="/linkwarden.png" </p>
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
/>
<div className="text-center sm:text-right">
<p className="text-3xl text-sky-500">Get started</p>
<p className="text-md font-semibold text-sky-400">
Create a new account
</p>
</div>
</div>
<div> <div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1"> <p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Display Name Display Name
@ -197,6 +200,9 @@ export default function Register() {
</Link> </Link>
</div> </div>
</div> </div>
<p className="text-center text-xs text-gray-500 mb-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</> </>
); );
} }

30
pages/subscribe.tsx
View File

@ -26,23 +26,18 @@ export default function Subscribe() {
return ( return (
<> <>
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto mt-10"
/>
<p className="text-xl font-semibold text-sky-500 text-center">
{process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then
$5/month afterwards
</p>
<div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100"> <div className="p-2 mt-10 mx-auto flex flex-col gap-3 justify-between sm:w-[28rem] w-80 bg-slate-50 rounded-md border border-sky-100">
<div className="flex flex-col gap-2 sm:flex-row justify-between items-center mb-5">
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
/>
<div className="text-center sm:text-right">
<p className="text-3xl text-sky-500">14 days free trial</p>
<p className="text-md font-semibold text-sky-400">
Then $5/month afterwards
</p>
</div>
</div>
<div> <div>
<p className="text-md text-gray-500 mt-1"> <p className="text-md text-gray-500 mt-1">
You will be redirected to Stripe. You will be redirected to Stripe.
@ -70,6 +65,9 @@ export default function Subscribe() {
Sign Out Sign Out
</div> </div>
</div> </div>
<p className="text-center text-xs text-gray-500 my-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</> </>
); );
} }

3
types/enviornment.d.ts vendored
View File

@ -17,10 +17,11 @@ declare global {
EMAIL_FROM?: string; EMAIL_FROM?: string;
EMAIL_SERVER?: string; EMAIL_SERVER?: string;
NEXT_PUBLC_STRIPE_IS_ACTIVE?: boolean;
STRIPE_SECRET_KEY?: string; STRIPE_SECRET_KEY?: string;
PRICE_ID?: string; PRICE_ID?: string;
NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL?: string; NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL?: string;
TRIAL_PERIOD_DAYS?: string; NEXT_PUBLIC_TRIAL_PERIOD_DAYS?: string;
BASE_URL?: string; BASE_URL?: string;
} }
} }