feat: add sso login

2025-06-27 17:01:21 +00:00 · 2025-05-23 10:41:49 +02:00 · 2025-05-23 10:41:49 +02:00 · 6e2166f1a7
commit 6e2166f1a7
parent d5dee1c261
6 changed files with 112 additions and 92 deletions
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@ -1,7 +1,7 @@
 'use client';

 import { Button, Input } from '@nextui-org/react';
-import { signIn } from 'next-auth/react';
+import { getSession, signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';

@ -15,60 +15,86 @@ export default function LoginPage() {
    event.preventDefault();
    const res = await signIn('credentials', { username, password, redirect: false });
    if (res?.ok) {
-      router.replace('/');
+      const session = await getSession();
+      const roles = session?.user?.roles ?? [];
+
+      if (roles.includes('wcfm_vendor') || roles.includes('administrator')) {
+        window.location.href = `${process.env.NEXT_PUBLIC_WOOCOMMERCE}/sso-login?sso_token=${session!.user.token}`;
+      } else {
+        router.replace('/');
+      }
    } else {
      setError('Invalid username or password');
    }
  };

  return (
-    <section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
-      <h1 className="text-2xl font-bold">Login</h1>
-      <div className="flex w-full max-w-md flex-col">
-        {error && <p className="text-red-500">{error}</p>}
-        <form onSubmit={handleLogin} className="flex flex-col">
-          <div className="mt-4">
-            <Input
-              type="text"
-              id="username"
-              label="Username"
-              labelPlacement="outside"
-              placeholder="Insert username"
-              size="lg"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-            />
-          </div>
-          <div className="mt-6">
-            <Input
-              type="password"
-              id="password"
-              label="Password"
-              labelPlacement="outside"
-              placeholder="Insert password"
-              size="lg"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </div>
-          <div className="mt-6">
-            <Button
-              type="submit"
-              className="flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-3 text-lg font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            >
-              Login
-            </Button>
+    <section className="mx-auto mt-10 max-w-screen-xl px-4 pb-10">
+      <h1 className="mb-12 text-center text-4xl font-bold">Login</h1>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        <div className="flex flex-col items-center justify-center rounded-xl bg-gray-50 p-8 shadow-md dark:bg-gray-900">
+          <h2 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
+            Sei un cliente?
+          </h2>
+          <div className="w-full max-w-md">
+            {error && <p className="mb-2 text-red-500">{error}</p>}
+            <form onSubmit={handleLogin} className="flex flex-col">
+              <div className="mt-2">
+                <Input
+                  type="text"
+                  id="username"
+                  label="Username"
+                  labelPlacement="outside"
+                  placeholder="Insert username"
+                  size="lg"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="mt-6">
+                <Input
+                  type="password"
+                  id="password"
+                  label="Password"
+                  labelPlacement="outside"
+                  placeholder="Insert password"
+                  size="lg"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="mt-6">
+                <Button
+                  type="submit"
+                  className="w-full bg-indigo-600 text-white hover:bg-indigo-700"
+                >
+                  Login
+                </Button>
+              </div>
+              <span className="mt-6 block text-center text-sm text-gray-600 dark:text-gray-300">
+                Don't have an account?{' '}
+                <a href="/signup" className="text-indigo-600 hover:underline">
+                  Sign up
+                </a>
+              </span>
+            </form>
          </div>
+        </div>

-          <span className="mt-6 block text-center text-sm text-gray-600 dark:text-gray-300">
-            Don't have an account?{' '}
-            <a href="/signup" className="text-indigo-600 hover:underline">
-              Sign up
-            </a>
-          </span>
-        </form>
+        {/* Box Venditore */}
+        <div className="flex flex-col items-center rounded-xl bg-gray-50 p-8 shadow-md dark:bg-gray-900">
+          <h2 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
+            Sei un venditore?
+          </h2>
+          <p className="mb-6 text-center text-gray-600 dark:text-gray-300">
+            Accedi alla tua area riservata per gestire i tuoi prodotti e ordini.
+          </p>
+          <a href={process.env.NEXT_PUBLIC_WOOCOMMERCE} target="_blank" rel="noopener noreferrer">
+            <Button className="w-full bg-indigo-600 text-white hover:bg-indigo-700">Accedi</Button>
+          </a>
+        </div>
      </div>
    </section>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@ -21,7 +21,7 @@ import Bg2 from '../assets/images/slide-bg-02.webp';
 async function Products({ category }: { category: Category }) {
  const products: Product[] = await woocommerce.get('products', {
    category: category.id.toString(),
-    author: 1, // Use admin user to get all products
+    author: 1 // Use admin user to get all products
  });

  return <ThreeItemGrid products={products} />;
--- a/app/profile/@user/page.tsx
+++ b/app/profile/@user/page.tsx
@ -1,63 +1,33 @@
-'use server';
-
 import { authOptions } from 'lib/auth/config';
 import { woocommerce } from 'lib/woocomerce/woocommerce';
 import { getServerSession } from 'next-auth';
 import { getTranslations } from 'next-intl/server';
+import VendorArea from './vendor-area';

 export default async function PersonalArea() {
  const session = await getServerSession(authOptions);
  const t = await getTranslations('ProfilePage');
+
  if (!session?.user?.customer_id) {
    return { status: 401, body: { error: 'User not logged' } };
  }

-  const customer = await woocommerce.get('customers', { id: session?.user.customer_id });
+  const user = session.user;
+  const { first_name, last_name, email } = await woocommerce.get('customers', {
+    id: user.customer_id
+  });

  return (
    <section className="mt-4 grid max-w-screen-2xl gap-4 px-4 pb-4">
      <h1 className="text-2xl font-bold">{t('area')}</h1>
      <div className="flex flex-col">
-        <label
-          htmlFor="name"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          First Name
-        </label>
-        <input
-          type="text"
-          id="name"
-          name="name"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.first_name}
-          disabled
-        />
-        <label
-          htmlFor="last_name"
-          className="mt-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          Last Name
-        </label>
-        <input
-          type="text"
-          id="last_name"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.last_name}
-          disabled
-        />
-        <label
-          htmlFor="email"
-          className="mt-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
-          Email
-        </label>
-        <input
-          type="email"
-          id="email"
-          className="mt-1 block w-full rounded-md border-gray-300 py-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          value={customer.email}
-          disabled
-        />
+        {user.roles.includes('wcfm_vendor') && <VendorArea token={user.token} />}
+        <label className="mt-4 text-sm font-medium">First Name</label>
+        <input value={first_name} disabled />
+        <label className="mt-2 text-sm font-medium">Last Name</label>
+        <input value={last_name} disabled />
+        <label className="mt-2 text-sm font-medium">Email</label>
+        <input value={email} disabled />
      </div>
    </section>
  );
--- a/app/profile/@user/vendor-area.tsx
+++ b/app/profile/@user/vendor-area.tsx
@ -0,0 +1,21 @@
+'use client';
+
+import { Button } from '@headlessui/react';
+
+export default function VendorArea({ token }: { token: string }) {
+  const handleClick = () => {
+    window.open(`${process.env.NEXT_PUBLIC_WOOCOMMERCE}/sso-login?sso_token=${token}`);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <h2 className="mb-4 text-2xl font-semibold">Sei un venditore</h2>
+      <p className="mb-6 text-center">
+        Accedi alla tua area riservata per gestire i tuoi prodotti e ordini.
+      </p>
+      <Button className="w-full bg-indigo-600 text-white hover:bg-indigo-700" onClick={handleClick}>
+        Accedi
+      </Button>
+    </div>
+  );
+}
--- a/lib/woocomerce/storeApi.ts
+++ b/lib/woocomerce/storeApi.ts
@ -45,7 +45,7 @@ function createStoreApiClient({
        method,
        url: baseURL + url,
        data,
-        headers,
+        headers
      });

      return response;
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@ -9,6 +9,7 @@ declare module 'next-auth' {
      user_email: string;
      user_nicename: string;
      user_display_name: string;
+      roles: string[];
    };
  }

@ -18,6 +19,7 @@ declare module 'next-auth' {
    user_email: string;
    user_nicename: string;
    user_display_name: string;
+    roles: string[];
  }
 }

@ -29,6 +31,7 @@ declare module 'next-auth/jwt' {
      user_email: string;
      user_nicename: string;
      user_display_name: string;
+      roles: string[];
    };
  }
 }