From e2f05302ab0dca45b16406018db8f99b16212b7d Mon Sep 17 00:00:00 2001 From: James Wyndham Date: Thu, 22 Feb 2024 11:54:51 +0800 Subject: [PATCH] feature - added better signin and login --- Frontend/app/(auth)/actions.ts | 13 ++++- Frontend/app/layout.tsx | 11 +++-- Frontend/components/Header.tsx | 56 +++++++++++++++++----- Frontend/components/Modals/ModalSignIn.tsx | 23 ++++++--- Frontend/sections/AccountContent.tsx | 16 +++---- Frontend/tailwind.config.ts | 1 + 6 files changed, 86 insertions(+), 34 deletions(-) diff --git a/Frontend/app/(auth)/actions.ts b/Frontend/app/(auth)/actions.ts index 388dae8..001b095 100644 --- a/Frontend/app/(auth)/actions.ts +++ b/Frontend/app/(auth)/actions.ts @@ -158,10 +158,20 @@ export async function isAuthenticated() { 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() { cookies().delete("pb_auth"); - redirect('/blogs'); + redirect('/'); } export async function createCheckoutSession(price_id: string) { @@ -212,7 +222,6 @@ export async function getSubscriptions() { pb.authStore.loadFromCookie(cookie?.value || ''); const userId = (pb.authStore.model as User).id const subscriptions = await pb.collection("subscription").getFullList({filter: `user_id="${userId}" && status="active"`}); - console.log('here') console.log('app/(auth)/actions', 'subscriptions', subscriptions) if (subscriptions.length === 0){ return []; diff --git a/Frontend/app/layout.tsx b/Frontend/app/layout.tsx index ef21675..ef931cd 100644 --- a/Frontend/app/layout.tsx +++ b/Frontend/app/layout.tsx @@ -1,7 +1,7 @@ import "./globals.css"; import type { Metadata } from "next"; 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 "react-toastify/dist/ReactToastify.css"; import Header from "@/components/Header"; @@ -20,6 +20,12 @@ const arimo = Arimo({ subsets: ["latin"], }); +const indieFlower = Indie_Flower({ + variable: "--accent-font", + weight: "400", + subsets: ["latin"], +}); + export const metadata: Metadata = { title: "FastPocket", description: "FastPocket", @@ -31,12 +37,11 @@ export default async function RootLayout({ children: React.ReactNode; }) { const isUserLoggedIn = await isAuthenticated(cookies()); - console.log(isUserLoggedIn); return ( diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx index e5c67e0..83d39d1 100644 --- a/Frontend/components/Header.tsx +++ b/Frontend/components/Header.tsx @@ -1,21 +1,29 @@ "use client"; -import React from "react"; +import React, { useEffect, useState } from "react"; import Navigation from "./Navigation"; import ModalSignUp from "@/components/Modals/ModalSignUp"; import ModalSignIn from "@/components/Modals/ModalSignIn"; -import { logout } from "@/app/(auth)/actions"; -import { getAuthCookie } from "@/app/(auth)/actions"; -import { SourceModal } from "@/types"; +import { getAuthCookie, getUser, logout } from "@/app/(auth)/actions"; +import { SourceModal, User } from "@/types"; import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime"; import pb from "@/lib/pocketbase"; import { useTheme } from "next-themes"; +import Link from "next/link"; +import Icon from "./Icon"; interface HeaderProps { isUserLoggedIn: boolean; } -function Header({ isUserLoggedIn }: HeaderProps) { +export default function Header({ isUserLoggedIn }: HeaderProps) { + const [user, setUser] = useState(); + useEffect(() => { + (async () => { + const user = await getUser(); + setUser(user as User); + })(); + }, []); const { theme, setTheme } = useTheme(); return (
@@ -107,12 +115,36 @@ function Header({ isUserLoggedIn }: HeaderProps) { ) : ( - +
+
+
+ +
+
+
    +
  • + +
    + + {user?.displayName} +
    + +
    • +
  • logout()}> +
    + + Logout +
    +
    • +
+
)} @@ -123,5 +155,3 @@ function Header({ isUserLoggedIn }: HeaderProps) {
); } - -export default Header; diff --git a/Frontend/components/Modals/ModalSignIn.tsx b/Frontend/components/Modals/ModalSignIn.tsx index d491e11..06cd127 100644 --- a/Frontend/components/Modals/ModalSignIn.tsx +++ b/Frontend/components/Modals/ModalSignIn.tsx @@ -5,6 +5,7 @@ import colors from "@/utils/colors"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import { signInValidationSchema } from "@/utils/form"; +import { login } from "@/app/(auth)/actions"; function ModalSignIn() { const { @@ -15,6 +16,20 @@ function ModalSignIn() { } = useForm({ 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 ( <>

Lets kick some more ass?

-
{ - console.log(data); - reset(); - })} - className="w-full md:w-2/3" - > +
)} */}
-
-

+
+

Your Subscription

{subscription ? ( <> -

- {subscription?.product?.name} -

-

+

{subscription?.product?.name}

+

{subscription.product?.description}

) : ( <> -

+

{"You haven’t upgraded your workflow yet"}

diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts index bf077cc..727b62e 100644 --- a/Frontend/tailwind.config.ts +++ b/Frontend/tailwind.config.ts @@ -14,6 +14,7 @@ const config: Config = { fontFamily: { heading: 'var(--heading-font)', body: 'var(--heading-font)', + accent: 'var(--accent-font)', }, fontSize: { xs: "0.75rem",