Merge branch 'dev' into clients-pops-dev

src/app/admin/users/AdminUsersTable.tsx

@@ -3,7 +3,7 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { UsersDataTable } from "./AdminUsersDataTable";
 import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown } from "lucide-react";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
@@ -12,6 +12,12 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
+import {
+    DropdownMenu,
+    DropdownMenuItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
 
 export type GlobalUserRow = {
     id: string;
@@ -22,6 +28,8 @@ export type GlobalUserRow = {
     idpId: number | null;
     idpName: string;
     dateCreated: string;
+    twoFactorEnabled: boolean | null;
+    twoFactorSetupRequested: boolean | null;
 };
 
 type Props = {
@@ -138,23 +146,79 @@ export default function UsersTable({ users }: Props) {
                 );
             }
         },
+        {
+            accessorKey: "twoFactorEnabled",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("twoFactor")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const userRow = row.original;
+
+                return (
+                    <div className="flex flex-row items-center gap-2">
+                        <span>
+                            {userRow.twoFactorEnabled ||
+                            userRow.twoFactorSetupRequested ? (
+                                <span className="text-green-500">
+                                    {t("enabled")}
+                                </span>
+                            ) : (
+                                <span>{t("disabled")}</span>
+                            )}
+                        </span>
+                    </div>
+                );
+            }
+        },
         {
             id: "actions",
             cell: ({ row }) => {
                 const r = row.original;
                 return (
                     <>
-                        <div className="flex items-center justify-end">
+                        <div className="flex items-center justify-end gap-2">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelected(r);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        {t("delete")}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
                             <Button
                                 variant={"secondary"}
                                 size="sm"
-                                className="ml-2"
                                 onClick={() => {
-                                    setSelected(r);
-                                    setIsDeleteModalOpen(true);
+                                    router.push(`/admin/users/${r.id}`);
                                 }}
                             >
-                                {t("delete")}
+                                {t("edit")}
+                                <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
                         </div>
                     </>

src/app/admin/users/[userId]/general/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { Button } from "@app/components/ui/button";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
+import { useParams } from "next/navigation";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSectionDescription,
+    SettingsSectionBody,
+    SettingsSectionForm
+} from "@app/components/Settings";
+import { UserType } from "@server/types/UserTypes";
+
+export default function GeneralPage() {
+    const { userId } = useParams();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+
+    const [loadingData, setLoadingData] = useState(true);
+    const [loading, setLoading] = useState(false);
+    const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
+    const [userType, setUserType] = useState<UserType | null>(null);
+
+    useEffect(() => {
+        // Fetch current user 2FA status
+        const fetchUserData = async () => {
+            setLoadingData(true);
+            try {
+                const response = await api.get(`/user/${userId}`);
+                if (response.status === 200) {
+                    const userData = response.data.data;
+                    setTwoFactorEnabled(
+                        userData.twoFactorEnabled ||
+                            userData.twoFactorSetupRequested
+                    );
+                    setUserType(userData.type);
+                }
+            } catch (error) {
+                console.error("Failed to fetch user data:", error);
+                toast({
+                    variant: "destructive",
+                    title: t("userErrorDelete"),
+                    description: formatAxiosError(error, t("userErrorDelete"))
+                });
+            }
+            setLoadingData(false);
+        };
+
+        fetchUserData();
+    }, [userId]);
+
+    const handleTwoFactorToggle = (enabled: boolean) => {
+        setTwoFactorEnabled(enabled);
+    };
+
+    const handleSaveSettings = async () => {
+        setLoading(true);
+
+        try {
+            console.log("twoFactorEnabled", twoFactorEnabled);
+            await api.post(`/user/${userId}/2fa`, {
+                twoFactorSetupRequested: twoFactorEnabled
+            });
+
+            setTwoFactorEnabled(twoFactorEnabled);
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: t("otpErrorEnable"),
+                description: formatAxiosError(
+                    error,
+                    t("otpErrorEnableDescription")
+                )
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    if (loadingData) {
+        return null;
+    }
+
+    return (
+        <>
+            <SettingsContainer>
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("general")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("userDescription2")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        <SettingsSectionForm>
+                            <div className="space-y-6">
+                                <SwitchInput
+                                    id="two-factor-auth"
+                                    label={t("otpAuth")}
+                                    checked={twoFactorEnabled}
+                                    disabled={userType !== UserType.Internal}
+                                    onCheckedChange={handleTwoFactorToggle}
+                                />
+                            </div>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+                </SettingsSection>
+            </SettingsContainer>
+
+            <div className="flex justify-end mt-6">
+                <Button
+                    type="button"
+                    loading={loading}
+                    disabled={loading}
+                    onClick={handleSaveSettings}
+                >
+                    {t("targetTlsSubmit")}
+                </Button>
+            </div>
+        </>
+    );
+}

src/app/admin/users/[userId]/layout.tsx

@@ -0,0 +1,55 @@
+import { internal } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { redirect } from "next/navigation";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { AdminGetUserResponse } from "@server/routers/user/adminGetUser";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { cache } from "react";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { getTranslations } from 'next-intl/server';
+
+interface UserLayoutProps {
+    children: React.ReactNode;
+    params: Promise<{ userId: string }>;
+}
+
+export default async function UserLayoutProps(props: UserLayoutProps) {
+    const params = await props.params;
+
+    const { children } = props;
+
+    const t = await getTranslations();
+
+    let user = null;
+    try {
+        const getUser = cache(async () =>
+            internal.get<AxiosResponse<AdminGetUserResponse>>(
+                `/user/${params.userId}`,
+                await authCookieHeader()
+            )
+        );
+        const res = await getUser();
+        user = res.data.data;
+    } catch {
+        redirect(`/admin/users`);
+    }
+
+    const navItems = [
+        {
+            title: t('general'),
+            href: "/admin/users/{userId}/general"
+        }
+    ];
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={`${user?.email || user?.name || user?.username}`}
+                description={t('userDescription2')}
+            />
+            <HorizontalTabs items={navItems}>
+                {children}
+            </HorizontalTabs>
+        </>
+    );
+} 

src/app/admin/users/[userId]/page.tsx

@@ -0,0 +1,8 @@
+import { redirect } from "next/navigation";
+
+export default async function UserPage(props: {
+    params: Promise<{ userId: string }>;
+}) {
+    const { userId } = await props.params;
+    redirect(`/admin/users/${userId}/general`);
+} 

src/app/admin/users/page.tsx

@@ -38,7 +38,9 @@ export default async function UsersPage(props: PageProps) {
             idpId: row.idpId,
             idpName: row.idpName || t('idpNameInternal'),
             dateCreated: row.dateCreated,
-            serverAdmin: row.serverAdmin
+            serverAdmin: row.serverAdmin,
+            twoFactorEnabled: row.twoFactorEnabled,
+            twoFactorSetupRequested: row.twoFactorSetupRequested
         };
     });