Move password reset to user settings and add integration API for password reset.

- Move password reset from admin table to user general settings
- Add resetUserPassword action and integration API endpoint
- Fix API key auth compatibility in adminResetUserPassword
This commit is contained in:
Adrian Astles 2025-07-15 07:28:16 +08:00
parent ec8d3569d3
commit 5220ec9d59
10 changed files with 332 additions and 239 deletions

View file

@ -2,37 +2,35 @@
# https://docs.fossorial.io/Pangolin/Configuration/config
app:
dashboard_url: "https://{{.DashboardDomain}}"
dashboard_url: "https://localhost:3002"
log_level: "info"
domains:
domain1:
base_domain: "{{.BaseDomain}}"
base_domain: "localhost"
cert_resolver: "letsencrypt"
server:
secret: "{{.Secret}}"
secret: "your_secret_key_here"
cors:
origins: ["https://{{.DashboardDomain}}"]
origins: ["https://localhost:3002"]
methods: ["GET", "POST", "PUT", "DELETE", "PATCH"]
allowed_headers: ["X-CSRF-Token", "Content-Type"]
credentials: false
gerbil:
start_port: 51820
base_endpoint: "{{.DashboardDomain}}"
base_endpoint: "localhost"
{{if .EnableEmail}}
email:
smtp_host: "{{.EmailSMTPHost}}"
smtp_port: {{.EmailSMTPPort}}
smtp_user: "{{.EmailSMTPUser}}"
smtp_pass: "{{.EmailSMTPPass}}"
no_reply: "{{.EmailNoReply}}"
{{end}}
smtp_host: "sandbox.smtp.mailtrap.io"
smtp_port: 587
smtp_user: "4eeaed7a73e4cd"
smtp_pass: "c214cff4be2633"
no_reply: "noreply@example.com"
flags:
require_email_verification: {{.EnableEmail}}
require_email_verification: true
disable_signup_without_invite: true
disable_user_create_org: false
allow_raw_resources: true

View file

@ -973,6 +973,7 @@
"actionUpdateOrg": "Update Organization",
"actionUpdateUser": "Update User",
"actionGetUser": "Get User",
"actionResetUserPassword": "Reset User Password",
"actionGetOrgUser": "Get Organization User",
"actionListOrgDomains": "List Organization Domains",
"actionCreateSite": "Create Site",

View file

@ -87,7 +87,8 @@ export enum ActionsEnum {
setApiKeyOrgs = "setApiKeyOrgs",
listApiKeyActions = "listApiKeyActions",
listApiKeys = "listApiKeys",
getApiKey = "getApiKey"
getApiKey = "getApiKey",
resetUserPassword = "resetUserPassword"
}
export async function checkUserActionPermission(

View file

@ -388,6 +388,13 @@ authenticated.post(
user.updateUser2FA
);
authenticated.post(
"/user/:userId/password",
verifyApiKeyIsRoot,
verifyApiKeyHasAction(ActionsEnum.resetUserPassword),
user.adminResetUserPassword
);
authenticated.get(
"/user/:userId",
verifyApiKeyIsRoot,

View file

@ -145,12 +145,15 @@ export async function adminResetUserPassword(
let emailSent = false;
// Get the admin identifier (either user ID or API key ID)
const adminId = req.user?.userId || req.apiKey?.apiKeyId || 'unknown';
// Send email if requested
if (shouldSendEmail) {
// Check if email is configured
if (!config.getRawConfig().email) {
logger.info(
`Server admin ${req.user!.userId} generated password reset link for user ${userId}. Email not configured, no email sent. Token expires in ${expirationHours} hours.`
`Server admin ${adminId} generated password reset link for user ${userId}. Email not configured, no email sent. Token expires in ${expirationHours} hours.`
);
emailSent = false;
} else {
@ -170,7 +173,7 @@ export async function adminResetUserPassword(
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.`
`Server admin ${adminId} 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);
@ -180,7 +183,7 @@ export async function adminResetUserPassword(
}
} else {
logger.info(
`Server admin ${req.user!.userId} generated password reset link for user ${userId}. No email sent. Token expires in ${expirationHours} hours.`
`Server admin ${adminId} generated password reset link for user ${userId}. No email sent. Token expires in ${expirationHours} hours.`
);
}

View file

@ -20,16 +20,12 @@ import {
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 { Settings, User } from "lucide-react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -51,13 +47,8 @@ export default function AdminUserManagement({
}: 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";
@ -104,62 +95,8 @@ export default function AdminUserManagement({
}
};
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();
};
@ -179,23 +116,11 @@ export default function AdminUserManagement({
{t('manageUser')}
</DialogTitle>
<DialogDescription>
Manage user details and settings for <strong>{userName || userEmail}</strong>
Manage user details 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">
<div 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">
@ -226,83 +151,12 @@ export default function AdminUserManagement({
</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')}
{t('cancel')}
</Button>
{activeTab === "details" && (
<Button
type="submit"
disabled={loading}
@ -310,33 +164,6 @@ export default function AdminUserManagement({
>
{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>

View file

@ -12,7 +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";
import {
DropdownMenu,
DropdownMenuItem,
@ -187,13 +187,7 @@ export default function UsersTable({ users }: Props) {
const r = row.original;
return (
<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}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button

View file

@ -19,6 +19,7 @@ import {
SettingsSectionForm
} from "@app/components/Settings";
import { UserType } from "@server/types/UserTypes";
import AdminPasswordReset from "@app/components/AdminPasswordReset";
export default function GeneralPage() {
const { userId } = useParams();
@ -29,6 +30,8 @@ export default function GeneralPage() {
const [loading, setLoading] = useState(false);
const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);
const [userType, setUserType] = useState<UserType | null>(null);
const [userEmail, setUserEmail] = useState<string>("");
const [userName, setUserName] = useState<string>("");
useEffect(() => {
// Fetch current user 2FA status
@ -43,6 +46,8 @@ export default function GeneralPage() {
userData.twoFactorSetupRequested
);
setUserType(userData.type);
setUserEmail(userData.email || "");
setUserName(userData.name || userData.username || "");
}
} catch (error) {
console.error("Failed to fetch user data:", error);
@ -117,6 +122,30 @@ export default function GeneralPage() {
</SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
<SettingsSection>
<SettingsSectionHeader>
<SettingsSectionTitle>
{t("passwordReset")}
</SettingsSectionTitle>
<SettingsSectionDescription>
{t("passwordResetAdminInstructions")}
</SettingsSectionDescription>
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<div className="space-y-6">
<AdminPasswordReset
userId={userId as string}
userEmail={userEmail}
userName={userName}
userType={userType || ""}
/>
</div>
</SettingsSectionForm>
</SettingsSectionBody>
</SettingsSection>
</SettingsContainer>
<div className="flex justify-end mt-6">

View file

@ -0,0 +1,232 @@
"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 { 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 } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
type AdminPasswordResetProps = {
userId: string;
userEmail: string;
userName: string;
userType: string;
};
export default function AdminPasswordReset({
userId,
userEmail,
userName,
userType,
}: AdminPasswordResetProps) {
const api = createApiClient(useEnvContext());
const { env } = useEnvContext();
const t = useTranslations();
const [open, setOpen] = useState(false);
const [passwordLoading, setPasswordLoading] = useState(false);
const [sendEmail, setSendEmail] = useState(env.email.emailEnabled);
const [resetLink, setResetLink] = useState<string | undefined>();
const isExternalUser = userType !== "internal";
// Don't render the button for external users
if (isExternalUser) {
return null;
}
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);
};
return (
<>
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="outline" size="sm">
<Key className="h-4 w-4 mr-2" />
{t('passwordReset')}
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[600px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Key className="h-4 w-4" />
{t('passwordReset')}
</DialogTitle>
<DialogDescription>
Reset password for <strong>{userName || userEmail}</strong>
</DialogDescription>
</DialogHeader>
<div 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 || !env.email.emailEnabled) && (
<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>
)}
</div>
<DialogFooter>
<Button variant="outline" onClick={handleClose}>
{resetLink ? 'Close' : t('cancel')}
</Button>
{!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>
</>
);
}

View file

@ -113,7 +113,8 @@ function getActionsCategories(root: boolean) {
actionsByCategory["User"] = {
[t('actionUpdateUser')]: "updateUser",
[t('actionGetUser')]: "getUser"
[t('actionGetUser')]: "getUser",
[t('actionResetUserPassword')]: "resetUserPassword"
};
}