@c-rex/components 0.1.14 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "files": [
     "src"
   ],

package/src/navbar/navbar.tsx

@@ -2,7 +2,7 @@ import { FC } from "react";
 import Link from "next/link";
 import { SignInBtn } from "./sign-in-out-btns";
 import { getServerSession } from "next-auth";
-import { getConfigs } from "@c-rex/utils/next-cookies";
+import { getClientConfigs, getServerConfigs } from "@c-rex/utils/next-cookies";
 import { SettingsMenu } from "./settings";
 import { UserMenu } from "./user-menu";
 import { SearchInput } from "./search-input";
@@ -14,10 +14,12 @@ interface NavBarProps {
 }
 
 export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter }) => {
-    const configs = await getConfigs();
+    const clientConfigs = await getClientConfigs();
+    const serverConfigs = await getServerConfigs();
+
 
     let session: any;
-    if (configs.OIDC.user.enabled) {
+    if (clientConfigs.OIDC.userEnabled) {
         session = await getServerSession();
     }
 
@@ -42,17 +44,17 @@ export const NavBar: FC<NavBarProps> = async ({ title, showInput, showPkgFilter
             <div className="flex items-center gap-2 absolute sm:static top-4 h-14 sm:h-min right-4">
                 <SearchInput showInput={showInput} showPkgFilter={showPkgFilter} placedOn="NAVBAR" />
 
-                {configs.OIDC.user.enabled && (
+                {clientConfigs.OIDC.userEnabled && (
                     <>
                         {session ? (
-                            <UserMenu session={session} />
+                            <UserMenu session={session} OIDCEndPoint={serverConfigs.OIDC.user.issuer} />
                         ) : (
                             <SignInBtn />
                         )}
                     </>
                 )}
 
-                {configs.languageSwitcher.enabled && (
+                {clientConfigs.languageSwitcher.enabled && (
                     <SettingsMenu />
                 )}
             </div>

package/src/navbar/sign-in-out-btns.tsx

@@ -1,21 +1,35 @@
 "use client"
 
-import React from "react";
+import React, { useState } from "react";
 import { signIn } from "next-auth/react";
 import { Button } from "@c-rex/ui/button";
 import { useTranslations } from "next-intl";
 
 export const SignInBtn = () => {
     const t = useTranslations("user")
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+
+    const handleSignIn = () => {
+        setIsLoading(true);
+        signIn("crex", { prompt: "login", callbackUrl: "/" });
+    }
+
     return (
         <Button
             className="gap-2 px-5 md:flex"
             variant="default"
             size="sm"
             rounded="full"
-            onClick={() => signIn("crex", { callbackUrl: "/" })}
+            disabled={isLoading}
+            onClick={handleSignIn}
         >
-            <span>{t("signIn")}</span>
+            {isLoading ? (
+                <div className="flex items-center justify-center py-4">
+                    <div className="animate-spin rounded-full h-5 w-5 border-2 border-gray-300 border-t-gray-950" />
+                </div>
+            ) : (
+                <span>{t("signIn")}</span>
+            )}
         </Button>
     );
 }

package/src/navbar/user-menu.tsx

@@ -11,19 +11,17 @@ import {
 } from "@c-rex/ui/dropdown-menu"
 import { CircleUser } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { signOut } from "next-auth/react";
 
 
 interface Props {
     session: any
+    OIDCEndPoint: string
 }
 
-export const UserMenu: FC<Props> = ({ session }) => {
-    const t = useTranslations();
-    const { configs } = useAppConfig();
 
-    const endpoint = configs.OIDC.user.issuer.split("oidc/")[0];
+export const UserMenu: FC<Props> = ({ session, OIDCEndPoint }) => {
+    const t = useTranslations();
 
     return (
         <DropdownMenu>
@@ -38,18 +36,21 @@ export const UserMenu: FC<Props> = ({ session }) => {
                 <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                     <DropdownMenuItem>
-                        <a href={`${endpoint}oidc/Profile`} target="_blank" rel="noreferrer">
+                        <a href={`${OIDCEndPoint}oidc/Profile`} target="_blank" rel="noreferrer">
                             Profile settings
                         </a>
                     </DropdownMenuItem>
 
                     <DropdownMenuItem>
-                        <a href={`${endpoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
+                        <a href={`${OIDCEndPoint}oidc/Profile/ChangePassword`} target="_blank" rel="noreferrer">
                             Change password
                         </a>
                     </DropdownMenuItem>
 
-                    <DropdownMenuItem onClick={() => signOut()} className='text-red-500 focus:text-red-500'>
+                    <DropdownMenuItem
+                        onClick={() => signOut({ callbackUrl: "/api/auth/logout" })}
+                        className='text-red-500 focus:text-red-500'
+                    >
                         {t("user.signOut")}
                     </DropdownMenuItem>
                 </DropdownMenuGroup>