feature - added better signin and login
This commit is contained in:
James Wyndham
parent
edbf656701
commit
e2f05302ab
|
|
@ -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<Subscription>({filter: `user_id="${userId}" && status="active"`});
|
||||
console.log('here')
|
||||
console.log('app/(auth)/actions', 'subscriptions', subscriptions)
|
||||
if (subscriptions.length === 0){
|
||||
return [];
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<html
|
||||
lang="en"
|
||||
className={`h-full ${raleway.variable} ${arimo.variable}`}
|
||||
className={`h-full ${raleway.variable} ${arimo.variable} ${indieFlower.variable}`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<PHProvider>
|
||||
|
|
|
|||
|
|
@ -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<User | undefined>();
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const user = await getUser();
|
||||
setUser(user as User);
|
||||
})();
|
||||
}, []);
|
||||
const { theme, setTheme } = useTheme();
|
||||
return (
|
||||
<header className="absolute w-full z-30">
|
||||
|
|
@ -107,12 +115,36 @@ function Header({ isUserLoggedIn }: HeaderProps) {
|
|||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => logout()}
|
||||
className={`btn btn-error text-primary-content ml-2`}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<div className="dropdown dropdown-end">
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
className="btn btn-ghost btn-circle avatar"
|
||||
>
|
||||
<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>
|
||||
</nav>
|
||||
|
|
@ -123,5 +155,3 @@ function Header({ isUserLoggedIn }: HeaderProps) {
|
|||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<input
|
||||
|
|
@ -45,13 +60,7 @@ function ModalSignIn() {
|
|||
</h3>
|
||||
<p className="text-sm md:text-base">Lets kick some more ass?</p>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit((data) => {
|
||||
console.log(data);
|
||||
reset();
|
||||
})}
|
||||
className="w-full md:w-2/3"
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="w-full md:w-2/3">
|
||||
<div className="relative mt-6">
|
||||
<input
|
||||
{...register("email")}
|
||||
|
|
|
|||
|
|
@ -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="w-full bg-gray-100 dark:bg-gray-700 p-8 rounded">
|
||||
<h3 className="font-architects-daughter text-xl text-secondary mb-2">
|
||||
<div className="w-full bg-base-200 p-8 rounded text-base-content">
|
||||
<h3 className="font-accent text-xl text-secondary mb-2">
|
||||
Your Subscription
|
||||
</h3>
|
||||
{subscription ? (
|
||||
<>
|
||||
<h2 className="text-3xl mb-3 text-black ">
|
||||
{subscription?.product?.name}
|
||||
</h2>
|
||||
<p className="text-lg text-black mb-4">
|
||||
<h2 className="text-3xl mb-3 ">{subscription?.product?.name}</h2>
|
||||
<p className="text-lg mb-4">
|
||||
{subscription.product?.description}
|
||||
</p>
|
||||
<button
|
||||
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
|
||||
</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"}
|
||||
</p>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const config: Config = {
|
|||
fontFamily: {
|
||||
heading: 'var(--heading-font)',
|
||||
body: 'var(--heading-font)',
|
||||
accent: 'var(--accent-font)',
|
||||
},
|
||||
fontSize: {
|
||||
xs: "0.75rem",
|
||||
|
|
|
|||
Loading…
Reference in New Issue