auth session

hngprojects · Jul 25, 2024 · 91ed48a · 91ed48a
1 parent ac1c7c1
commit 91ed48a
Show file tree

Hide file tree

Showing 17 changed files with 247 additions and 193 deletions.
diff --git a/package.json b/package.json
@@ -41,14 +41,17 @@
     "@types/jest-axe": "^3.5.9",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cookies-next": "^4.2.1",
     "framer-motion": "^11.3.8",
     "input-otp": "^1.2.4",
     "jest-axe": "^9.0.0",
+    "jose": "^5.6.3",
     "lenis": "^1.1.6",
     "lucide-react": "^0.400.0",
     "moment": "^2.30.1",
     "next": "14.2.5",
     "next-auth": "5.0.0-beta.19",
+    "next-nprogress-bar": "^2.3.13",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/actions/login.ts b/src/actions/login.ts
@@ -0,0 +1,17 @@
+"use server";
+
+import { createSession, deleteSession } from "~/lib/services/session";
+
+interface Properties {
+  email: string;
+  password: string;
+}
+
+export const loginUser = async (data: Properties) => {
+  const { email } = data;
+  await createSession(email);
+};
+
+export async function deleteUserCookie() {
+  deleteSession();
+}
diff --git a/src/app/(auth-routes)/layout.tsx b/src/app/(auth-routes)/layout.tsx
@@ -1,10 +1,14 @@
+import { Suspense } from "react";
+
 import Navbar from "~/components/layouts/navbar";
 
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Navbar is_auth_path />
-      <div className="mx-auto w-5/6">{children}</div>
+      <div className="mx-auto w-5/6">
+        <Suspense>{children}</Suspense>
+      </div>
     </>
   );
 }

diff --git a/src/app/(auth-routes)/login/page.tsx b/src/app/(auth-routes)/login/page.tsx
@@ -2,13 +2,16 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Eye, EyeOff, ShieldCheck } from "lucide-react";
+import { useRouter } from "next-nprogress-bar";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
+import { loginUser } from "~/actions/login";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { Button } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
 import {
@@ -20,6 +23,7 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
+import { simulateDelay } from "~/lib/utils";
 
 const loginSchema = z.object({
   email: z.string().email({ message: "Invalid email format" }),
@@ -46,6 +50,9 @@ const getInputClassName = (hasError: boolean, isValid: boolean) => {
 const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false);
   const router = useRouter();
+  const searchP = useSearchParams();
+  const callback_url = searchP.get("callbackUrl");
+  const [isLoading, startTransition] = useTransition();
 
   const form = useForm<LoginFormData>({
     resolver: zodResolver(loginSchema),
@@ -57,8 +64,17 @@ const LoginPage = () => {
     },
   });
 
-  const onSubmit = () => {
-    router.push("/");
+  const onSubmit = async (values: z.infer<typeof loginSchema>) => {
+    startTransition(async () => {
+      await simulateDelay(3);
+      await loginUser(values);
+
+      if (callback_url) {
+        router.push(callback_url);
+      } else {
+        router.push("/");
+      }
+    });
   };
 
   const togglePasswordVisibility = () => {
@@ -78,7 +94,10 @@ const LoginPage = () => {
         </div>
 
         <div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
-          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
+          <Button
+            disabled
+            className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
+          >
             <Image
               src="/images/goggle.svg"
               width={20}
@@ -88,7 +107,10 @@ const LoginPage = () => {
             />
             Sign in with Google
           </Button>
-          <Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
+          <Button
+            disabled
+            className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50"
+          >
             <Image
               src="/images/facebook.svg"
               width={20}
@@ -120,6 +142,7 @@ const LoginPage = () => {
                   </FormLabel>
                   <FormControl>
                     <Input
+                      disabled={isLoading}
                       placeholder="Enter Email Address"
                       {...field}
                       className={getInputClassName(
@@ -142,6 +165,7 @@ const LoginPage = () => {
                   <FormControl>
                     <div className="relative">
                       <Input
+                        disabled={isLoading}
                         type={showPassword ? "text" : "password"}
                         placeholder="Enter Password"
                         {...field}
@@ -207,12 +231,20 @@ const LoginPage = () => {
               size="default"
               className="h-12 w-full rounded-md bg-primary px-4 py-3 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
             >
-              Login
+              {isLoading ? (
+                <span className="flex items-center gap-x-2">
+                  <span className="animate-pulse">Logging in...</span>{" "}
+                  <LoadingSpinner className="size-4 animate-spin sm:size-5" />
+                </span>
+              ) : (
+                <span>Login</span>
+              )}
             </Button>
           </form>
         </Form>
 
         <Button
+          disabled
           type="button"
           variant="outline"
           size="default"

diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-view.tsx
@@ -1,15 +1,15 @@
 import { AnimatePresence, motion } from "framer-motion";
-import { Loader2, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useTransition } from "react";
 
 import BlurImage from "~/components/miscellaneous/blur-image";
+import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import { Button } from "~/components/ui/button";
 import { toast } from "~/components/ui/use-toast";
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
 import { useProducts } from "~/hooks/admin-product/use-products.persistence";
-import { cn, formatPrice } from "~/lib/utils";
+import { cn, formatPrice, simulateDelay } from "~/lib/utils";
 
-const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 const ProductDetailView = () => {
   const { products, deleteProduct } = useProducts();
   const [isLoading, startTransition] = useTransition();
@@ -34,7 +34,7 @@ const ProductDetailView = () => {
 
     setIsDelete(true);
     startTransition(async () => {
-      await delay(3000);
+      await simulateDelay(3);
       updateOpen(false);
       deleteProduct(id);
       toast({
@@ -150,7 +150,7 @@ const ProductDetailView = () => {
               {isLoading ? (
                 <span className="flex items-center gap-x-2">
                   <span className="animate-pulse">Deleting...</span>{" "}
-                  <Loader2 className="size-4 animate-spin sm:size-5" />
+                  <LoadingSpinner className="size-4 animate-spin sm:size-5" />
                 </span>
               ) : (
                 <span>Delete</span>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -81,6 +81,16 @@
   }
 }
 
+#nprogress .bar {
+  background: linear-gradient(90deg, #fff0bf, #f85318) !important;
+  box-shadow: 10px 0px 20px rgba(255, 240, 191, 0.641) !important;
+  position: fixed;
+  z-index: 99999999 !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px !important;
+}
 @layer base {
   * {
     @apply border-border;
@@ -143,6 +153,16 @@
   }
 }
 
+.show_scrollbar::-webkit-scrollbar {
+  height: 8px;
+}
+.show_scrollbar ::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+}
+.hide_scrollbar::-webkit-scrollbar {
+  height: 0.1px;
+  width: 0.1px;
+}
 /* Custom Scrollbar Styling */
 /* For Webkit Browsers */
 ::-webkit-scrollbar {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -20,10 +20,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Providers>
-          {children}
-          <Toaster />
-        </Providers>
+        {children}
+        <Toaster />
+        <Providers />
       </body>
     </html>
   );

diff --git a/src/components/common/logo/index.tsx b/src/components/common/logo/index.tsx
@@ -5,7 +5,7 @@ const Logo = () => {
   return (
     <Link
       href="/"
-      className="h-[37px] w-full max-w-[283px] md:h-[52px]"
+      className="h-[37px] w-full max-w-[200px] md:h-[52px] lg:max-w-[283px]"
       data-testid="logo"
     >
       <Image

diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
@@ -33,16 +33,16 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
   });
   return (
     <nav
-      className={`${scrolling ? "shadow-md" : "shadow-none"} sticky left-0 right-0 top-0 z-[10000000000000] bg-background px-4`}
+      className={`${scrolling ? "shadow-md" : "shadow-none"} sticky left-0 right-0 top-0 z-[10000000000000] w-full bg-background px-4`}
     >
       <div
-        className={`${scrolling ? "py-2" : "py-4 md:py-9"} mx-auto flex w-full max-w-[1200px] items-center justify-between gap-2 transition-all duration-500`}
+        className={`${scrolling ? "py-2" : "py-4 md:py-9"} flex w-full items-center justify-between gap-x-4 transition-all duration-500`}
       >
         <div className="md:hidden">
           <Menu className="text-nuetral-black-1 h-6 w-6 cursor-pointer transition-colors duration-300 hover:text-neutral-dark-1/50" />
         </div>
         <Logo />
-        <div className="hidden w-full max-w-[330px] items-center justify-between gap-2 md:flex">
+        <div className="hidden w-full items-center justify-center gap-x-4 md:flex lg:gap-x-8 xl:gap-x-16">
           {navlinks?.map((item, index) => {
             return (
               <Link
@@ -56,16 +56,16 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
           })}
         </div>
         {!is_auth_path && (
-          <div className="hidden w-full max-w-[280px] items-center justify-between gap-2 md:flex">
+          <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
-              className="grid h-[44px] place-items-center rounded-md border border-primary px-8 text-primary"
+              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary px-4 text-primary lg:px-8"
             >
               Log in
             </Link>
             <Link
               href="/sign-up"
-              className="grid h-[44px] place-items-center rounded-md border border-primary bg-primary px-8 text-white"
+              className="grid h-[44px] place-items-center whitespace-nowrap rounded-md border border-primary bg-primary px-4 text-white lg:px-8"
             >
               Get Started
             </Link>