timniel
/
Quiz-PDF
forked from mrwyndham/fastpocket
1
0
Fork 0
Code Pull Requests Activity

feature - added better signin and login

This commit is contained in:
James Wyndham 2024-02-22 11:54:51 +08:00
parent edbf656701
commit e2f05302ab
6 changed files with 86 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Frontend/app/(auth)/actions.ts
View File

@ -158,10 +158,20 @@ export async function isAuthenticated() {
return undefined; return undefined;
} }
} }
export async function getUser() {
try {
const cookie = cookies().get('pb_auth');
if(!cookie) return false;
pb.authStore.loadFromCookie(cookie?.value || '');
return pb.authStore.model;
} catch (error) {
return undefined;
}
}
export async function logout() { export async function logout() {
cookies().delete("pb_auth"); cookies().delete("pb_auth");
redirect('/blogs'); redirect('/');
} }
export async function createCheckoutSession(price_id: string) { export async function createCheckoutSession(price_id: string) {
@ -212,7 +222,6 @@ export async function getSubscriptions() {
pb.authStore.loadFromCookie(cookie?.value || ''); pb.authStore.loadFromCookie(cookie?.value || '');
const userId = (pb.authStore.model as User).id const userId = (pb.authStore.model as User).id
const subscriptions = await pb.collection("subscription").getFullList<Subscription>({filter: `user_id="${userId}" && status="active"`}); const subscriptions = await pb.collection("subscription").getFullList<Subscription>({filter: `user_id="${userId}" && status="active"`});
console.log('here')
console.log('app/(auth)/actions', 'subscriptions', subscriptions) console.log('app/(auth)/actions', 'subscriptions', subscriptions)
if (subscriptions.length === 0){ if (subscriptions.length === 0){
return []; return [];

11
Frontend/app/layout.tsx
View File

@ -1,7 +1,7 @@
import "./globals.css"; import "./globals.css";
import type { Metadata } from "next"; import type { Metadata } from "next";
import "../app/globals.css"; import "../app/globals.css";
import { Arimo, Raleway } from "next/font/google"; import { Arimo, Raleway, Indie_Flower } from "next/font/google";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
import Header from "@/components/Header"; import Header from "@/components/Header";
@ -20,6 +20,12 @@ const arimo = Arimo({
subsets: ["latin"], subsets: ["latin"],
}); });
const indieFlower = Indie_Flower({
variable: "--accent-font",
weight: "400",
subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "FastPocket", title: "FastPocket",
description: "FastPocket", description: "FastPocket",
@ -31,12 +37,11 @@ export default async function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const isUserLoggedIn = await isAuthenticated(cookies()); const isUserLoggedIn = await isAuthenticated(cookies());
console.log(isUserLoggedIn);
return ( return (
<html <html
lang="en" lang="en"
className={`h-full ${raleway.variable} ${arimo.variable}`} className={`h-full ${raleway.variable} ${arimo.variable} ${indieFlower.variable}`}
suppressHydrationWarning suppressHydrationWarning
> >
<PHProvider> <PHProvider>

56
Frontend/components/Header.tsx
View File

@ -1,21 +1,29 @@
"use client"; "use client";
import React from "react"; import React, { useEffect, useState } from "react";
import Navigation from "./Navigation"; import Navigation from "./Navigation";
import ModalSignUp from "@/components/Modals/ModalSignUp"; import ModalSignUp from "@/components/Modals/ModalSignUp";
import ModalSignIn from "@/components/Modals/ModalSignIn"; import ModalSignIn from "@/components/Modals/ModalSignIn";
import { logout } from "@/app/(auth)/actions"; import { getAuthCookie, getUser, logout } from "@/app/(auth)/actions";
import { getAuthCookie } from "@/app/(auth)/actions"; import { SourceModal, User } from "@/types";
import { SourceModal } from "@/types";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"; import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import pb from "@/lib/pocketbase"; import pb from "@/lib/pocketbase";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import Link from "next/link";
import Icon from "./Icon";
interface HeaderProps { interface HeaderProps {
isUserLoggedIn: boolean; isUserLoggedIn: boolean;
} }
function Header({ isUserLoggedIn }: HeaderProps) { export default function Header({ isUserLoggedIn }: HeaderProps) {
const [user, setUser] = useState<User | undefined>();
useEffect(() => {
(async () => {
const user = await getUser();
setUser(user as User);
})();
}, []);
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
return ( return (
<header className="absolute w-full z-30"> <header className="absolute w-full z-30">
@ -107,12 +115,36 @@ function Header({ isUserLoggedIn }: HeaderProps) {
</button> </button>
</> </>
) : ( ) : (
<button <div className="dropdown dropdown-end">
onClick={() => logout()} <div
className={`btn btn-error text-primary-content ml-2`} tabIndex={0}
> role="button"
Logout className="btn btn-ghost btn-circle avatar"
</button> >
<div className="w-6 rounded-full !flex justify-center items-center bg-base-300">
<Icon name="Person24Filled" />
</div>
</div>
<ul
tabIndex={0}
className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
>
<li>
<Link href="/account">
<div className=" capitalize flex flex-row gap-x-2">
<Icon name="Person24Filled" />
{user?.displayName}
</div>
</Link>
</li>
<li onClick={() => logout()}>
<div className="capitalize flex flex-row gap-x-2">
<Icon name="SignOut24Filled" />
Logout
</div>
</li>
</ul>
</div>
)} )}
</div> </div>
</nav> </nav>
@ -123,5 +155,3 @@ function Header({ isUserLoggedIn }: HeaderProps) {
</header> </header>
); );
} }
export default Header;

23
Frontend/components/Modals/ModalSignIn.tsx
View File

@ -5,6 +5,7 @@ import colors from "@/utils/colors";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup"; import { yupResolver } from "@hookform/resolvers/yup";
import { signInValidationSchema } from "@/utils/form"; import { signInValidationSchema } from "@/utils/form";
import { login } from "@/app/(auth)/actions";
function ModalSignIn() { function ModalSignIn() {
const { const {
@ -15,6 +16,20 @@ function ModalSignIn() {
} = useForm({ } = useForm({
resolver: yupResolver(signInValidationSchema), resolver: yupResolver(signInValidationSchema),
}); });
const onSubmit = async (data: any) => {
try {
//login user
if (
(await login({ email: data.email, password: data.password })).success
) {
reset();
document.getElementById("sign-in-modal")?.click();
}
} catch (error) {
console.log("heyaa");
}
};
return ( return (
<> <>
<input <input
@ -45,13 +60,7 @@ function ModalSignIn() {
</h3> </h3>
<p className="text-sm md:text-base">Lets kick some more ass?</p> <p className="text-sm md:text-base">Lets kick some more ass?</p>
</div> </div>
<form <form onSubmit={handleSubmit(onSubmit)} className="w-full md:w-2/3">
onSubmit={handleSubmit((data) => {
console.log(data);
reset();
})}
className="w-full md:w-2/3"
>
<div className="relative mt-6"> <div className="relative mt-6">
<input <input
{...register("email")} {...register("email")}

16
Frontend/sections/AccountContent.tsx
View File

@ -141,33 +141,31 @@ function AccountContent({ user }: ManageSubscriptionProps) {
<></> <></>
)} */} )} */}
<div className="max-w-6xl mx-auto mb-2 h-full w-full px-6"> <div className="max-w-6xl mx-auto mb-2 h-full w-full px-6">
<div className="w-full bg-gray-100 dark:bg-gray-700 p-8 rounded"> <div className="w-full bg-base-200 p-8 rounded text-base-content">
<h3 className="font-architects-daughter text-xl text-secondary mb-2"> <h3 className="font-accent text-xl text-secondary mb-2">
Your Subscription Your Subscription
</h3> </h3>
{subscription ? ( {subscription ? (
<> <>
<h2 className="text-3xl mb-3 text-black "> <h2 className="text-3xl mb-3 ">{subscription?.product?.name}</h2>
{subscription?.product?.name} <p className="text-lg mb-4">
</h2>
<p className="text-lg text-black mb-4">
{subscription.product?.description} {subscription.product?.description}
</p> </p>
<button <button
onClick={manageSubscription} onClick={manageSubscription}
className="btn text-base capitalize !rounded-md text-base-300 bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8" className="btn text-base-content capitalize !rounded-md text-base-300 bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
> >
Manage Subscription Manage Subscription
</button> </button>
</> </>
) : ( ) : (
<> <>
<p className="text-lg text-black mb-4"> <p className="text-lg text-base-content mb-4">
{"You haven’t upgraded your workflow yet"} {"You haven’t upgraded your workflow yet"}
</p> </p>
<button <button
onClick={() => router.push("/pricing")} onClick={() => router.push("/pricing")}
className="px-10 py-2 text-base capitalize !rounded-3xl text-black bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto" className="px-10 py-2 text-base capitalize !rounded-3xl text-primary-content bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
> >
Upgrade Upgrade
</button> </button>

1
Frontend/tailwind.config.ts
View File

@ -14,6 +14,7 @@ const config: Config = {
fontFamily: { fontFamily: {
heading: 'var(--heading-font)', heading: 'var(--heading-font)',
body: 'var(--heading-font)', body: 'var(--heading-font)',
accent: 'var(--accent-font)',
}, },
fontSize: { fontSize: {
xs: "0.75rem", xs: "0.75rem",