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=
# 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

104
layouts/AuthRedirect.tsx
View File

@ -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}</>;
}

7
lib/api/checkSubscription.ts
View File

@ -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;

7
lib/api/paymentCheckout.ts
View File

@ -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,
},
});

7
lib/api/updateCustomerEmail.ts
View File

@ -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 = !(

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 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 &&

19
pages/choose-username.tsx
View File

@ -42,23 +42,17 @@ export default function Subscribe() {
return (
<>
<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">
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit mx-auto"
className="h-12 w-fit mx-auto mt-10"
/>
<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.
<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">
<p className="text-xl text-sky-500 w-fit font-bold">
Choose a Username (Last step)
</p>
</div>
</div>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
@ -85,7 +79,7 @@ export default function Subscribe() {
<SubmitButton
onClick={submitUsername}
label="Choose Username"
label="Complete Registration"
className="mt-2 w-full text-center"
loading={submitLoader}
/>
@ -97,6 +91,9 @@ export default function Subscribe() {
Sign Out
</div>
</div>
<p className="text-center text-xs text-gray-500 my-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</>
);
}

24
pages/forgot.tsx
View File

@ -39,20 +39,21 @@ export default function Forgot() {
return (
<>
<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"
className="h-12 w-fit mx-auto mt-10"
/>
<div className="text-center sm:text-right">
<p className="text-3xl text-sky-500">Password Reset</p>
</div>
</div>
<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">
<p className="text-xl text-sky-500 w-fit font-bold">Fogot Password?</p>
<p className="text-md text-gray-500 mt-1">
Enter your Email so we can send you a link to recover your account.
</p>
<p className="text-md text-gray-500 mt-1">
Make sure to change your password in the profile settings afterwards.
</p>
<div>
<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 })}
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>
<SubmitButton
@ -81,6 +78,9 @@ export default function Forgot() {
</Link>
</div>
</div>
<p className="text-center text-xs text-gray-500 my-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</>
);
}

18
pages/login.tsx
View File

@ -46,23 +46,20 @@ export default function Login() {
return (
<>
<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">
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
className="h-12 w-fit mx-auto mt-10"
/>
<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">
<p className="text-xl font-semibold text-sky-500 text-center">
Sign in to your account
</p>
</div>
</div>
<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">
<p className="text-xl text-sky-500 w-fit font-bold">
Enter your credentials
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Username
@ -112,6 +109,9 @@ export default function Login() {
</Link>
</div>
</div>
<p className="text-center text-xs text-gray-500 mb-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</>
);
}

24
pages/register.tsx
View File

@ -90,23 +90,26 @@ export default function Register() {
return (
<>
<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">
<Image
src="/linkwarden.png"
width={1694}
height={483}
alt="Linkwarden"
className="h-12 w-fit"
className="h-12 w-fit mx-auto mt-10"
/>
<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
<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>
<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">
<p className="text-xl text-sky-500 w-fit font-bold">
Enter your details
</p>
<div>
<p className="text-sm text-sky-500 w-fit font-semibold mb-1">
Display Name
@ -197,6 +200,9 @@ export default function Register() {
</Link>
</div>
</div>
<p className="text-center text-xs text-gray-500 mb-10">
© {new Date().getFullYear()} Linkwarden. All rights reserved.{" "}
</p>
</>
);
}

18
pages/subscribe.tsx
View File

@ -26,23 +26,18 @@ export default function Subscribe() {
return (
<>
<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"
className="h-12 w-fit mx-auto mt-10"
/>
<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 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>
</div>
<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>
<p className="text-md text-gray-500 mt-1">
You will be redirected to Stripe.
@ -70,6 +65,9 @@ export default function Subscribe() {
Sign Out
</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_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;
}
}