mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-31 23:10:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: clean up admin user management and password reset UI

Browse source 
- Moved all user details and password reset functionality to server admin level
- Add stylish, contextual password reset dialog for server admins
- General code and translation cleanup
This commit is contained in:
Adrian Astles 2025-07-15 05:35:52 +08:00
parent ada1100925
commit 3e975acc73
10 changed files with 508 additions and 388 deletions
Download patch file Download diff file Expand all files Collapse all files

9
messages/en-US.json
View file

@ -711,6 +711,7 @@
"accessRoleRemovedDescription": "The role has been successfully removed.",
"accessRoleRequiredRemove": "Before deleting this role, please select a new role to transfer existing members to.",
"manage": "Manage",
"manageUser": "Manage User",
"sitesNotFound": "No sites found.",
"pangolinServerAdmin": "Server Admin - Pangolin",
"licenseTierProfessional": "Professional License",
@ -875,7 +876,7 @@
"pincodeInvalid": "Invalid code",
"passwordErrorRequestReset": "Failed to request reset:",
"passwordErrorReset": "Failed to reset password:",
"passwordResetSuccess": "Password reset successfully! Back to log in...",
"passwordResetSuccess": "Password reset successfully!",
"passwordReset": "Reset Password",
"passwordResetDescription": "Follow the steps to reset your password",
"passwordResetSent": "We'll send a password reset code to this email address.",
@ -1147,7 +1148,6 @@
"createAdminAccount": "Create Admin Account",
"setupErrorCreateAdmin": "An error occurred while creating the server admin account.",
"passwordReset": "Password Reset",
"passwordResetAdminDescription": "Generate a password reset link for this user.",
"passwordResetAdminInstructions": "Clicking the button below will send a password reset email to the user. They will be able to set a new password using the link provided.",
"passwordResetSent": "Password Reset Sent",
"passwordResetSentDescription": "A password reset email has been sent to {email}.",
@ -1170,5 +1170,8 @@
"securitySettingsUpdated": "Security Settings Updated",
"securitySettingsUpdatedDescription": "Your security settings have been updated successfully",
"securitySettingsError": "Security Settings Error",
"saveSecuritySettings": "Save Security Settings"
"saveSecuritySettings": "Save Security Settings",
"sendEmailNotification": "Send Email Notification",
"linkCopied": "Link Copied",
"linkCopiedDescription": "The reset link has been copied to your clipboard"
}

18
server/routers/external.ts
View file

@ -493,6 +493,17 @@ authenticated.delete(
verifyUserIsServerAdmin,
user.adminRemoveUser
);
authenticated.post(
"/admin/user/:userId/password",
verifyUserIsServerAdmin,
user.adminResetUserPassword
);
authenticated.post(
"/admin/user/:userId",
verifyUserIsServerAdmin,
user.adminUpdateUser
);
authenticated.put(
"/org/:orgId/user",
@ -517,12 +528,7 @@ authenticated.post(
user.updateUser
);
authenticated.post(
"/org/:orgId/user/:userId/reset-password",
verifyOrgAccess,
verifyUserHasAction(ActionsEnum.getOrgUser),
user.adminResetUserPassword
);
authenticated.get(
"/org/:orgId/users",

103
server/routers/user/adminResetUserPassword.ts
View file

@ -3,8 +3,8 @@ import { z } from "zod";
import { fromError } from "zod-validation-error";
import createHttpError from "http-errors";
import { db } from "@server/db";
import { passwordResetTokens, users, orgs } from "@server/db";
import { eq, and } from "drizzle-orm";
import { passwordResetTokens, users } from "@server/db";
import { eq } from "drizzle-orm";
import { alphabet, generateRandomString } from "oslo/crypto";
import { createDate, TimeSpan } from "oslo";
import { hashPassword } from "@server/auth/password";
@ -15,19 +15,18 @@ import logger from "@server/logger";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import { OpenAPITags, registry } from "@server/openApi";
import { ActionsEnum, checkUserActionPermission } from "@server/auth/actions";
import { UserType } from "@server/types/UserTypes";
const adminResetUserPasswordParamsSchema = z
.object({
orgId: z.string(),
userId: z.string()
})
.strict();
const adminResetUserPasswordBodySchema = z
.object({
sendEmail: z.boolean().optional().default(true)
sendEmail: z.boolean().optional().default(true),
expirationHours: z.number().int().positive().optional().default(24)
})
.strict();
@ -39,8 +38,8 @@ export type AdminResetUserPasswordResponse = {
registry.registerPath({
method: "post",
path: "/org/{orgId}/user/{userId}/reset-password",
description: "Generate a password reset link for a user (admin only).",
path: "/admin/user/{userId}/password",
description: "Generate a password reset link for a user (server admin only).",
tags: [OpenAPITags.User],
request: {
params: adminResetUserPasswordParamsSchema,
@ -82,40 +81,10 @@ export async function adminResetUserPassword(
);
}
const { orgId, userId } = parsedParams.data;
const { sendEmail: shouldSendEmail } = parsedBody.data;
// Check if the requesting user has permission to manage users in this org
const hasPermission = await checkUserActionPermission(ActionsEnum.getOrgUser, req);
if (!hasPermission) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"Insufficient permissions to reset user passwords"
)
);
}
const { userId } = parsedParams.data;
const { sendEmail: shouldSendEmail, expirationHours } = parsedBody.data;
try {
// Get the organization settings
const orgResult = await db
.select()
.from(orgs)
.where(eq(orgs.orgId, orgId))
.limit(1);
if (!orgResult || !orgResult.length) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
"Organization not found"
)
);
}
const org = orgResult[0];
// Get the target user
const targetUser = await db
.select()
@ -156,9 +125,6 @@ export async function adminResetUserPassword(
const token = generateRandomString(16, alphabet("0-9", "A-Z", "a-z"));
const tokenHash = await hashPassword(token);
// Use organization's password reset token expiry setting
const expiryHours = org.passwordResetTokenExpiryHours || 1;
// Store reset token in database
await db.transaction(async (trx) => {
// Delete any existing reset tokens for this user
@ -171,7 +137,7 @@ export async function adminResetUserPassword(
userId: userId,
email: user.email!,
tokenHash,
expiresAt: createDate(new TimeSpan(expiryHours, "h")).getTime()
expiresAt: createDate(new TimeSpan(expirationHours, "h")).getTime()
});
});
@ -181,31 +147,40 @@ export async function adminResetUserPassword(
// Send email if requested
if (shouldSendEmail) {
try {
await sendEmail(
ResetPasswordCode({
email: user.email!,
code: token,
link: resetUrl
}),
{
from: config.getNoReplyEmail(),
to: user.email!,
subject: "Password Reset - Initiated by Administrator"
}
);
emailSent = true;
// Check if email is configured
if (!config.getRawConfig().email) {
logger.info(
`Admin ${req.user!.userId} initiated password reset for user ${userId} in org ${orgId}. Email sent to ${user.email}. Token expires in ${expiryHours} hours.`
`Server admin ${req.user!.userId} generated password reset link for user ${userId}. Email not configured, no email sent. Token expires in ${expirationHours} hours.`
);
} catch (e) {
logger.error("Failed to send admin-initiated password reset email", e);
// Don't fail the request if email fails, just log it
emailSent = false;
} else {
try {
await sendEmail(
ResetPasswordCode({
email: user.email!,
code: token,
link: resetUrl
}),
{
from: config.getNoReplyEmail(),
to: user.email!,
subject: "Password Reset - Initiated by Server Administrator"
}
);
emailSent = true;
logger.info(
`Server admin ${req.user!.userId} initiated password reset for user ${userId}. Email sent to ${user.email}. Token expires in ${expirationHours} hours.`
);
} catch (e) {
logger.error("Failed to send server admin-initiated password reset email", e);
// Don't fail the request if email fails, just log it
emailSent = false;
}
}
} else {
logger.info(
`Admin ${req.user!.userId} generated password reset link for user ${userId} in org ${orgId}. No email sent. Token expires in ${expiryHours} hours.`
`Server admin ${req.user!.userId} generated password reset link for user ${userId}. No email sent. Token expires in ${expirationHours} hours.`
);
}
@ -223,7 +198,7 @@ export async function adminResetUserPassword(
});
} catch (e) {
logger.error("Failed to generate admin password reset", e);
logger.error("Failed to generate server admin password reset", e);
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,

95
server/routers/user/adminUpdateUser.ts Normal file
View file

@ -0,0 +1,95 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import { db } from "@server/db";
import { users } from "@server/db";
import { eq } from "drizzle-orm";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import logger from "@server/logger";
const updateUserBodySchema = z.object({
name: z.string().min(1).max(255)
});
const updateUserParamsSchema = z.object({
userId: z.string()
});
export async function adminUpdateUser(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedParams = updateUserParamsSchema.safeParse(req.params);
if (!parsedParams.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Invalid user ID"
)
);
}
const parsedBody = updateUserBodySchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
"Invalid request body"
)
);
}
const { userId } = parsedParams.data;
const { name } = parsedBody.data;
// Check if requester is server admin
if (!req.user?.serverAdmin) {
return next(
createHttpError(
HttpCode.FORBIDDEN,
"Only server admins can update user details"
)
);
}
// Check if the user exists
const existingUser = await db
.select()
.from(users)
.where(eq(users.userId, userId))
.limit(1);
if (existingUser.length === 0) {
return next(
createHttpError(
HttpCode.NOT_FOUND,
`User with ID ${userId} not found`
)
);
}
// Update user details
await db
.update(users)
.set({
name
})
.where(eq(users.userId, userId));
return response(res, {
data: { userId, name },
success: true,
error: false,
message: "User updated successfully",
status: HttpCode.OK
});
} catch (error) {
logger.error(error);
return next(
createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
);
}
}

1
server/routers/user/index.ts
View file

@ -11,6 +11,7 @@ export * from "./listInvitations";
export * from "./removeInvitation";
export * from "./createOrgUser";
export { updateUser } from "./updateUser";
export { adminUpdateUser } from "./adminUpdateUser";
export { adminResetUserPassword } from "./adminResetUserPassword";
export type { AdminResetUserPasswordBody, AdminResetUserPasswordResponse } from "./adminResetUserPassword";
export * from "./updateUser2FA";

308
src/app/[orgId]/settings/access/users/[userId]/details/page.tsx
View file

@ -1,308 +0,0 @@
"use client";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { toast } from "@app/hooks/useToast";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@app/components/ui/button";
import {
SettingsContainer,
SettingsSection,
SettingsSectionHeader,
SettingsSectionTitle,
SettingsSectionDescription,
SettingsSectionBody,
SettingsSectionForm,
SettingsSectionFooter
} from "@app/components/Settings";
import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
import { useParams, useRouter } from "next/navigation";
import { AlertTriangle, Mail, InfoIcon, Copy, Link } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Separator } from "@app/components/ui/separator";
export default function UserDetailsPage() {
const { orgUser: user } = userOrgUserContext();
const api = createApiClient(useEnvContext());
const { env } = useEnvContext();
const { orgId } = useParams();
const router = useRouter();
const [loading, setLoading] = useState(false);
const [resetLoading, setResetLoading] = useState(false);
const [resetLink, setResetLink] = useState<string | null>(null);
const t = useTranslations();
const formSchema = z.object({
name: z.string().min(1, { message: t('nameRequired') }).max(255),
email: z.string().email({ message: t('emailInvalid') })
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: user?.name || "",
email: user?.email || ""
}
});
async function onSubmit(values: z.infer<typeof formSchema>) {
setLoading(true);
try {
const res = await api.post(`/org/${orgId}/user/${user?.userId}`, {
name: values.name,
email: values.email
});
if (res.status === 200) {
toast({
variant: "default",
title: t('userUpdated'),
description: t('userUpdatedDescription')
});
router.refresh();
}
} catch (e) {
toast({
variant: "destructive",
title: t('userErrorUpdate'),
description: formatAxiosError(
e,
t('userErrorUpdateDescription')
)
});
} finally {
setLoading(false);
}
}
async function onResetPassword() {
setResetLoading(true);
try {
const res = await api.post(`/org/${orgId}/user/${user?.userId}/reset-password`, {
sendEmail: env.email.emailEnabled
});
if (res.status === 200) {
const responseData = res.data.data;
if (env.email.emailEnabled) {
toast({
variant: "default",
title: t('passwordResetSent'),
description: t('passwordResetSentDescription', { email: user?.email || "" })
});
setResetLink(null);
} else {
// Show the manual reset link when SMTP is not configured
setResetLink(responseData.resetLink);
toast({
variant: "default",
title: t('passwordReset'),
description: "Password reset link generated successfully"
});
}
}
} catch (e) {
toast({
variant: "destructive",
title: t('passwordResetError'),
description: formatAxiosError(
e,
t('passwordResetErrorDescription')
)
});
} finally {
setResetLoading(false);
}
}
async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text);
toast({
variant: "default",
title: "Copied!",
description: "Reset link copied to clipboard"
});
} catch (e) {
toast({
variant: "destructive",
title: "Copy failed",
description: "Failed to copy to clipboard. Please copy manually."
});
}
}
const isExternalUser = user?.type !== "internal";
return (
<SettingsContainer>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t('userDetailsTitle')}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('userDetailsDescription')}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('name')}</FormLabel>
<FormControl>
<Input
placeholder={t('namePlaceholder')}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>{t('email')}</FormLabel>
<FormControl>
<Input
type="email"
placeholder={t('emailPlaceholder')}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</SettingsSectionForm>
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
type="submit"
disabled={loading}
onClick={form.handleSubmit(onSubmit)}
>
{loading ? t('saving') : t('saveChanges')}
</Button>
</SettingsSectionFooter>
</SettingsSection>
<Separator className="my-6" />
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t('passwordReset')}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t('passwordResetAdminDescription')}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
{!env.email.emailEnabled && (
<Alert variant="neutral" className="mb-4">
<InfoIcon className="h-4 w-4" />
<AlertTitle className="font-semibold">
{t('otpEmailSmtpRequired')}
</AlertTitle>
<AlertDescription>
When SMTP is not configured, you'll receive a manual reset link to share with the user.
</AlertDescription>
</Alert>
)}
{isExternalUser ? (
<Alert>
<AlertTriangle className="h-4 w-4" />
<AlertTitle>{t('passwordResetUnavailable')}</AlertTitle>
<AlertDescription>
{t('passwordResetExternalUserDescription')}
</AlertDescription>
</Alert>
) : (
<div className="space-y-4">
<p className="text-sm text-muted-foreground">
{env.email.emailEnabled
? t('passwordResetAdminInstructions')
: "Click the button below to generate a password reset link that you can manually share with the user."
}
</p>
{resetLink && (
<Alert className="border-green-200 bg-green-50">
<Link className="h-4 w-4 text-green-600" />
<AlertTitle className="text-green-800">Reset Link Generated</AlertTitle>
<AlertDescription className="text-green-700">
<div className="mt-2 space-y-2">
<p className="text-sm">Share this link with the user to reset their password:</p>
<div className="flex items-center gap-2 p-2 bg-white border rounded border-green-200">
<code className="flex-1 text-xs break-all">{resetLink}</code>
<Button
variant="outline"
size="sm"
onClick={() => copyToClipboard(resetLink)}
className="shrink-0"
>
<Copy className="h-3 w-3" />
</Button>
</div>
<p className="text-xs text-green-600">
This link will expire in 1 hour.
</p>
</div>
</AlertDescription>
</Alert>
)}
</div>
)}
</SettingsSectionBody>
<SettingsSectionFooter>
<Button
variant="outline"
disabled={resetLoading || isExternalUser}
onClick={onResetPassword}
className="flex items-center gap-2"
>
{env.email.emailEnabled ? (
<Mail className="h-4 w-4" />
) : (
<Link className="h-4 w-4" />
)}
{resetLoading
? t('passwordResetSending')
: env.email.emailEnabled
? t('passwordResetSendEmail')
: "Generate Reset Link"
}
</Button>
</SettingsSectionFooter>
</SettingsSection>
</SettingsContainer>
);
}

4
src/app/[orgId]/settings/access/users/[userId]/layout.tsx
View file

@ -44,10 +44,6 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
}
const navItems = [
{
title: t('userDetails'),
href: `/${params.orgId}/settings/access/users/${params.userId}/details`
},
{
title: t('accessControls'),
href: `/${params.orgId}/settings/access/users/${params.userId}/access-controls`

2
src/app/[orgId]/settings/access/users/[userId]/page.tsx
View file

@ -4,5 +4,5 @@ export default async function UserPage(props: {
params: Promise<{ orgId: string; userId: string }>;
}) {
const { orgId, userId } = await props.params;
redirect(`/${orgId}/settings/access/users/${userId}/details`);
redirect(`/${orgId}/settings/access/users/${userId}/access-controls`);
}

345
src/app/admin/users/AdminUserManagement.tsx Normal file
View file

@ -0,0 +1,345 @@
"use client";
import { useState } from "react";
import { Button } from "@app/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@app/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import { Input } from "@app/components/ui/input";
import { Checkbox } from "@app/components/ui/checkbox";
import { Label } from "@app/components/ui/label";
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 { Key, Mail, Copy, Link, Settings, User } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@app/components/ui/tabs";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
type AdminUserManagementProps = {
userId: string;
userEmail: string;
userName: string;
userType: string;
userUsername: string;
};
export default function AdminUserManagement({
userId,
userEmail,
userName,
userType,
userUsername,
}: AdminUserManagementProps) {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [passwordLoading, setPasswordLoading] = useState(false);
const [sendEmail, setSendEmail] = useState(true);
const [resetLink, setResetLink] = useState<string | undefined>();
const [activeTab, setActiveTab] = useState("details");
const api = createApiClient(useEnvContext());
const { env } = useEnvContext();
const t = useTranslations();
const isExternalUser = userType !== "internal";
// Don't render the button for external users
if (isExternalUser) {
return null;
}
// Form schema for user details
const formSchema = z.object({
name: z.string().min(1, { message: t('nameRequired') }).max(255)
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: userName || ""
}
});
const handleUpdateUser = async (values: z.infer<typeof formSchema>) => {
setLoading(true);
try {
const res = await api.post(`/admin/user/${userId}`, {
name: values.name
});
if (res.status === 200) {
toast({
title: t('userUpdated'),
description: t('userUpdatedDescription'),
});
}
} catch (e) {
toast({
variant: "destructive",
title: t('userErrorUpdate'),
description: formatAxiosError(e, t('userErrorUpdateDescription')),
});
} finally {
setLoading(false);
}
};
const handleResetPassword = async () => {
setPasswordLoading(true);
try {
const response = await api.post(`/admin/user/${userId}/password`, {
sendEmail,
expirationHours: 24
});
const data = response.data.data;
if (data.resetLink) {
setResetLink(data.resetLink);
}
toast({
title: t('passwordResetSuccess'),
description: data.emailSent
? `Password reset email sent to ${userEmail}`
: data.message,
});
if (env.email.emailEnabled && sendEmail && data.emailSent) {
setOpen(false);
}
} catch (error) {
toast({
variant: "destructive",
title: t('passwordResetError'),
description: formatAxiosError(error, t('passwordResetErrorDescription')),
});
} finally {
setPasswordLoading(false);
}
};
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
toast({
title: t('linkCopied'),
description: t('linkCopiedDescription'),
});
} catch (e) {
toast({
variant: "destructive",
title: "Copy failed",
description: "Failed to copy to clipboard. Please copy manually.",
});
}
};
const handleClose = () => {
setOpen(false);
setResetLink(undefined);
setSendEmail(true);
form.reset();
};
return (
<>
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Settings className="h-4 w-4 mr-2" />
{t('manage')}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<User className="h-4 w-4" />
{t('manageUser')}
</DialogTitle>
<DialogDescription>
Manage user details and settings for <strong>{userName || userEmail}</strong>
</DialogDescription>
</DialogHeader>
<Tabs defaultValue="details" className="w-full" onValueChange={setActiveTab}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="details" className="flex items-center gap-2">
<User className="h-4 w-4" />
{t('userDetails')}
</TabsTrigger>
<TabsTrigger value="password" className="flex items-center gap-2">
<Key className="h-4 w-4" />
{t('passwordReset')}
</TabsTrigger>
</TabsList>
<TabsContent value="details" className="space-y-4 mt-4">
<Form {...form}>
<form onSubmit={form.handleSubmit(handleUpdateUser)} className="space-y-4">
<p className="text-sm text-muted-foreground mb-4">
Update user information. Email addresses cannot be changed via the UI.
</p>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('name')}</FormLabel>
<FormControl>
<Input
placeholder={t('namePlaceholder')}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="text-sm text-muted-foreground">
<p><strong>Email:</strong> {userEmail}</p>
</div>
<div className="text-sm text-muted-foreground">
<p><strong>Username:</strong> {userUsername}</p>
<p><strong>Type:</strong> {userType}</p>
</div>
</form>
</Form>
</TabsContent>
<TabsContent value="password" className="space-y-4 mt-4">
{!env.email.emailEnabled && (
<Alert variant="neutral">
<AlertTitle className="font-semibold">
{t('otpEmailSmtpRequired')}
</AlertTitle>
<AlertDescription>
Email is not configured. A reset link will be generated for you to share manually.
</AlertDescription>
</Alert>
)}
{env.email.emailEnabled && (
<div className="space-y-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<div className="flex items-center gap-2">
<Mail className="h-5 w-5 text-blue-600" />
<h4 className="font-medium text-blue-900">Email Notification</h4>
</div>
<p className="text-sm text-blue-700">
Send a password reset email to the user with a secure reset link.
</p>
<div className="flex items-center space-x-2">
<Checkbox
id="sendEmail"
checked={sendEmail}
onCheckedChange={(checked) => setSendEmail(checked as boolean)}
/>
<Label htmlFor="sendEmail" className="text-sm font-medium text-blue-900">
{t('sendEmailNotification')}
</Label>
</div>
</div>
)}
{resetLink && !sendEmail && (
<Alert className="border-green-200 bg-green-50">
<Link className="h-4 w-4 text-green-600" />
<AlertTitle className="text-green-800">Reset Link Generated</AlertTitle>
<AlertDescription className="text-green-700">
<div className="mt-2 space-y-2">
<p className="text-sm">Share this link with the user:</p>
<div className="flex items-center gap-2 p-2 bg-white border rounded border-green-200">
<Input
value={resetLink}
readOnly
className="text-xs"
/>
<Button
variant="outline"
size="sm"
onClick={() => copyToClipboard(resetLink)}
className="shrink-0"
>
<Copy className="h-3 w-3" />
</Button>
</div>
<p className="text-xs text-green-600">
This link expires in 24 hours.
</p>
</div>
</AlertDescription>
</Alert>
)}
</TabsContent>
</Tabs>
<DialogFooter>
<Button variant="outline" onClick={handleClose}>
{resetLink ? 'Close' : t('cancel')}
</Button>
{activeTab === "details" && (
<Button
type="submit"
disabled={loading}
onClick={form.handleSubmit(handleUpdateUser)}
>
{loading ? t('saving') : t('saveChanges')}
</Button>
)}
{activeTab === "password" && !resetLink && (
<Button
onClick={handleResetPassword}
disabled={passwordLoading}
className="flex items-center gap-2"
>
{passwordLoading ? (
<>
<Key className="h-4 w-4 animate-spin" />
{t('passwordResetSending')}
</>
) : (
<>
{env.email.emailEnabled && sendEmail ? (
<Mail className="h-4 w-4" />
) : (
<Link className="h-4 w-4" />
)}
{env.email.emailEnabled && sendEmail
? t('passwordResetSendEmail')
: "Generate Reset Link"
}
</>
)}
</Button>
)}
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}

11
src/app/admin/users/AdminUsersTable.tsx
View file

@ -12,6 +12,7 @@ import { formatAxiosError } from "@app/lib/api";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from "next-intl";
import AdminUserManagement from "./AdminUserManagement";
export type GlobalUserRow = {
id: string;
@ -144,10 +145,16 @@ export default function UsersTable({ users }: Props) {
const r = row.original;
return (
<>
<div className="flex items-center justify-end">
<div className="flex items-center justify-end gap-2">
<AdminUserManagement
userId={r.id}
userEmail={r.email || ""}
userName={r.name || r.username}
userType={r.type}
userUsername={r.username}
/>
<Button
variant={"outlinePrimary"}
className="ml-2"
onClick={() => {
setSelected(r);
setIsDeleteModalOpen(true);