From debfd36eb8492259fcc48d2f8c639d9f7e65244f Mon Sep 17 00:00:00 2001 From: Daniel Date: Thu, 20 Jul 2023 00:46:16 -0400 Subject: [PATCH] ui improvements --- .env.sample | 3 +- layouts/AuthRedirect.tsx | 104 ++++++++++++++++---------------- lib/api/checkSubscription.ts | 7 ++- lib/api/paymentCheckout.ts | 7 ++- lib/api/updateCustomerEmail.ts | 7 ++- pages/api/auth/[...nextauth].ts | 7 ++- pages/choose-username.tsx | 31 +++++----- pages/forgot.tsx | 34 +++++------ pages/login.tsx | 32 +++++----- pages/register.tsx | 38 +++++++----- pages/subscribe.tsx | 30 +++++---- types/enviornment.d.ts | 3 +- 12 files changed, 156 insertions(+), 147 deletions(-) diff --git a/.env.sample b/.env.sample index 2140dd2..a1703b8 100644 --- a/.env.sample +++ b/.env.sample @@ -18,8 +18,9 @@ EMAIL_FROM= EMAIL_SERVER= # Stripe settings (You don't need these, it's for the cloud instance payments) +NEXT_PUBLC_STRIPE_IS_ACTIVE= STRIPE_SECRET_KEY= PRICE_ID= -TRIAL_PERIOD_DAYS= +NEXT_PUBLIC_TRIAL_PERIOD_DAYS= NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL= BASE_URL=http://localhost:3000 \ No newline at end of file diff --git a/layouts/AuthRedirect.tsx b/layouts/AuthRedirect.tsx index a5fd1ad..8247139 100644 --- a/layouts/AuthRedirect.tsx +++ b/layouts/AuthRedirect.tsx @@ -18,57 +18,57 @@ export default function AuthRedirect({ children }: Props) { useInitialData(); - useEffect(() => { - if (!router.pathname.startsWith("/public")) { - if ( - emailEnabled && - status === "authenticated" && - (data.user.isSubscriber === true || - data.user.isSubscriber === undefined) && - !data.user.username - ) { - router.push("/choose-username").then(() => { - setRedirect(false); - }); - } else if ( - status === "authenticated" && - data.user.isSubscriber === false - ) { - router.push("/subscribe").then(() => { - setRedirect(false); - }); - } else if ( - status === "authenticated" && - (router.pathname === "/login" || - router.pathname === "/register" || - router.pathname === "/confirmation" || - router.pathname === "/subscribe" || - router.pathname === "/choose-username" || - router.pathname === "/forgot") - ) { - router.push("/").then(() => { - setRedirect(false); - }); - } else if ( - status === "unauthenticated" && - !( - router.pathname === "/login" || - router.pathname === "/register" || - router.pathname === "/confirmation" || - router.pathname === "/forgot" - ) - ) { - router.push("/login").then(() => { - setRedirect(false); - }); - } else if (status === "loading") setRedirect(true); - else setRedirect(false); - } else { - setRedirect(false); - } - }, [status]); + // useEffect(() => { + // if (!router.pathname.startsWith("/public")) { + // if ( + // emailEnabled && + // status === "authenticated" && + // (data.user.isSubscriber === true || + // data.user.isSubscriber === undefined) && + // !data.user.username + // ) { + // router.push("/choose-username").then(() => { + // setRedirect(false); + // }); + // } else if ( + // status === "authenticated" && + // data.user.isSubscriber === false + // ) { + // router.push("/subscribe").then(() => { + // setRedirect(false); + // }); + // } else if ( + // status === "authenticated" && + // (router.pathname === "/login" || + // router.pathname === "/register" || + // router.pathname === "/confirmation" || + // router.pathname === "/subscribe" || + // router.pathname === "/choose-username" || + // router.pathname === "/forgot") + // ) { + // router.push("/").then(() => { + // setRedirect(false); + // }); + // } else if ( + // status === "unauthenticated" && + // !( + // router.pathname === "/login" || + // router.pathname === "/register" || + // router.pathname === "/confirmation" || + // router.pathname === "/forgot" + // ) + // ) { + // router.push("/login").then(() => { + // setRedirect(false); + // }); + // } else if (status === "loading") setRedirect(true); + // else setRedirect(false); + // } else { + // setRedirect(false); + // } + // }, [status]); - if (status !== "loading" && !redirect) return <>{children}; - else return <>; - // return <>{children}; + // if (status !== "loading" && !redirect) return <>{children}; + // else return <>; + return <>{children}; } diff --git a/lib/api/checkSubscription.ts b/lib/api/checkSubscription.ts index 67f001c..6537c22 100644 --- a/lib/api/checkSubscription.ts +++ b/lib/api/checkSubscription.ts @@ -19,9 +19,10 @@ export default async function checkSubscription( const isSubscriber = listByEmail.data.some((customer, i) => { const hasValidSubscription = customer.subscriptions?.data.some( (subscription) => { - const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; - const secondsInTwoWeeks = TRIAL_PERIOD_DAYS - ? Number(TRIAL_PERIOD_DAYS) * 86400 + const NEXT_PUBLIC_TRIAL_PERIOD_DAYS = + process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS; + const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS + ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400 : 1209600; subscriptionCanceledAt = subscription.canceled_at; diff --git a/lib/api/paymentCheckout.ts b/lib/api/paymentCheckout.ts index 5610130..06dd7e3 100644 --- a/lib/api/paymentCheckout.ts +++ b/lib/api/paymentCheckout.ts @@ -17,7 +17,8 @@ export default async function paymentCheckout( 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({ customer: isExistingCostomer ? isExistingCostomer : undefined, line_items: [ @@ -34,7 +35,9 @@ export default async function paymentCheckout( enabled: true, }, 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, }, }); diff --git a/lib/api/updateCustomerEmail.ts b/lib/api/updateCustomerEmail.ts index 07af401..95ebc60 100644 --- a/lib/api/updateCustomerEmail.ts +++ b/lib/api/updateCustomerEmail.ts @@ -18,9 +18,10 @@ export default async function updateCustomerEmail( const customer = listByEmail.data.find((customer, i) => { const hasValidSubscription = customer.subscriptions?.data.some( (subscription) => { - const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; - const secondsInTwoWeeks = TRIAL_PERIOD_DAYS - ? Number(TRIAL_PERIOD_DAYS) * 86400 + const NEXT_PUBLIC_TRIAL_PERIOD_DAYS = + process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS; + const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS + ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400 : 1209600; const isNotCanceledOrHasTime = !( diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts index e760f2e..bdf85c5 100644 --- a/pages/api/auth/[...nextauth].ts +++ b/pages/api/auth/[...nextauth].ts @@ -93,9 +93,10 @@ export const authOptions: AuthOptions = { const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY; const PRICE_ID = process.env.PRICE_ID; - const TRIAL_PERIOD_DAYS = process.env.TRIAL_PERIOD_DAYS; - const secondsInTwoWeeks = TRIAL_PERIOD_DAYS - ? Number(TRIAL_PERIOD_DAYS) * 86400 + const NEXT_PUBLIC_TRIAL_PERIOD_DAYS = + process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS; + const secondsInTwoWeeks = NEXT_PUBLIC_TRIAL_PERIOD_DAYS + ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS) * 86400 : 1209600; const subscriptionIsTimesUp = token.subscriptionCanceledAt && diff --git a/pages/choose-username.tsx b/pages/choose-username.tsx index a3fcfb1..7f49afd 100644 --- a/pages/choose-username.tsx +++ b/pages/choose-username.tsx @@ -42,23 +42,17 @@ export default function Subscribe() { return ( <> + Linkwarden
-
- Linkwarden - -
-

One Last Step...

-

- Please choose a username to start using your account. -

-
-
+

+ Choose a Username (Last step) +

@@ -85,7 +79,7 @@ export default function Subscribe() { @@ -97,6 +91,9 @@ export default function Subscribe() { Sign Out

+

+ © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "} +

); } diff --git a/pages/forgot.tsx b/pages/forgot.tsx index 2b1f23d..8770e56 100644 --- a/pages/forgot.tsx +++ b/pages/forgot.tsx @@ -39,20 +39,21 @@ export default function Forgot() { return ( <> + Linkwarden
-
- Linkwarden -
-

Password Reset

-
-
- +

Fogot Password?

+

+ Enter your Email so we can send you a link to recover your account. +

+

+ Make sure to change your password in the profile settings afterwards. +

Email

@@ -63,10 +64,6 @@ export default function Forgot() { 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" /> -

- Make sure to change your password in the profile settings - afterwards. -

+

+ © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "} +

); } diff --git a/pages/login.tsx b/pages/login.tsx index f17798c..afb64f1 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -46,23 +46,20 @@ export default function Login() { return ( <> + Linkwarden +

+ Sign in to your account +

-
- Linkwarden -
-

Welcome back

-

- Sign in to your account -

-
-
- +

+ Enter your credentials +

Username @@ -112,6 +109,9 @@ export default function Login() {

+

+ © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "} +

); } diff --git a/pages/register.tsx b/pages/register.tsx index c047e17..877651a 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -90,23 +90,26 @@ export default function Register() { return ( <> + Linkwarden +
+

+ {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"} +

+
-
- Linkwarden -
-

Get started

-

- Create a new account -

-
-
- +

+ Enter your details +

Display Name @@ -197,6 +200,9 @@ export default function Register() {

+

+ © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "} +

); } diff --git a/pages/subscribe.tsx b/pages/subscribe.tsx index c1b427e..32582fe 100644 --- a/pages/subscribe.tsx +++ b/pages/subscribe.tsx @@ -26,23 +26,18 @@ export default function Subscribe() { return ( <> + Linkwarden +

+ {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14} days free trial, then + $5/month afterwards +

-
- Linkwarden -
-

14 days free trial

-

- Then $5/month afterwards -

-
-
-

You will be redirected to Stripe. @@ -70,6 +65,9 @@ export default function Subscribe() { Sign Out

+

+ © {new Date().getFullYear()} Linkwarden. All rights reserved.{" "} +

); } diff --git a/types/enviornment.d.ts b/types/enviornment.d.ts index 9655328..5bf5055 100644 --- a/types/enviornment.d.ts +++ b/types/enviornment.d.ts @@ -17,10 +17,11 @@ declare global { EMAIL_FROM?: string; EMAIL_SERVER?: string; + NEXT_PUBLC_STRIPE_IS_ACTIVE?: boolean; STRIPE_SECRET_KEY?: string; PRICE_ID?: string; NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL?: string; - TRIAL_PERIOD_DAYS?: string; + NEXT_PUBLIC_TRIAL_PERIOD_DAYS?: string; BASE_URL?: string; } }