@hed-hog/core 0.0.387 → 0.0.393

package/hedhog/frontend/app/users/user-sheet.tsx.ejs

@@ -11,10 +11,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Card,
-  CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
@@ -29,6 +29,7 @@ import {
 } from '@/components/ui/form';
 import { FormActions } from '@/components/ui/form-actions';
 import { Input } from '@/components/ui/input';
+import { NameInput } from '@/components/ui/name-input';
 import {
   formatIntegrationProviderName,
   IntegrationLogo,
@@ -61,20 +62,16 @@ import {
   EyeOff,
   Fingerprint,
   Key,
-  KeyRound,
-  LogOut,
-  LucideIcon,
   Mail,
   Monitor,
+  MonitorSmartphone,
   ScrollText,
   RefreshCcw,
   Save,
   Shield,
   ShieldCheck,
-  ShieldOff,
   Trash2,
   UserCircle,
-  UserIcon,
   Users,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -82,10 +79,17 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { useCoreAccess } from '../_lib/hooks/use-core-access';
 import { ActiveSessions } from './active-session';
+import { UserDevices } from './user-devices';
 import { UserIdentifiersSection } from './identifiers';
 import { PermissionsSection } from './permissions';
+import {
+  MAX_RECENT_ACTIVITIES,
+  UserActivityTimeline,
+} from './user-activity-timeline';
 import { UserLogs } from './user-logs';
+import { UserMails } from './user-mails';
 
 export type UserSheetProps = {
   open: boolean;
@@ -318,7 +322,7 @@ function UserCreateSheet({
                 <FormItem>
                   <FormLabel>{t('formNameLabel')}</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <NameInput {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -414,8 +418,24 @@ function UserEditSheet({
 }) {
   const t = useTranslations('core.UserPage');
   const userActivityT = useTranslations('core.UserActivity');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const {
+    request,
+    currentLocaleCode,
+    getSettingValue,
+    user: currentUser,
+  } = useApp();
   const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
+  // A aba de permissões concede/revoga papéis de outra conta. Só aparece para
+  // quem tem `admin` ou `admin-user-permission` — os mesmos papéis que o
+  // RoleGuard exige em POST/DELETE /user/:userId/role/:roleId. Enquanto a
+  // consulta a /auth/roles não responde, a aba fica escondida.
+  const { canManageUserPermissions } = useCoreAccess();
+  // Resetar a própria senha por aqui força `requires_reset` na conta logada
+  // sem passar pelo fluxo de troca (que exige a senha atual). Como o admin
+  // não sabe essa senha nova gerada, ele fica preso na tela de troca forçada
+  // assim que a sessão revalidar — por isso essa ação some para a própria conta.
+  const isSelf =
+    !!currentUser?.id && !!userId && Number(currentUser.id) === Number(userId);
   const enabledOAuthProviders = useMemo(
     () =>
       OAUTH_PROVIDER_TOGGLE_MAP.filter(
@@ -763,10 +783,12 @@ function UserEditSheet({
                 <Fingerprint className="h-4 w-4" />
                 <span>{t('tabIdentifiers')}</span>
               </TabsTrigger>
-              <TabsTrigger value="permissions">
-                <ShieldCheck className="h-4 w-4" />
-                <span>{t('tabPermissions')}</span>
-              </TabsTrigger>
+              {canManageUserPermissions && (
+                <TabsTrigger value="permissions">
+                  <ShieldCheck className="h-4 w-4" />
+                  <span>{t('tabPermissions')}</span>
+                </TabsTrigger>
+              )}
               <TabsTrigger value="mfa">
                 <Shield className="h-4 w-4" />
                 <span>{t('tabMfa')}</span>
@@ -775,6 +797,14 @@ function UserEditSheet({
                 <Monitor className="h-4 w-4" />
                 <span>{t('tabSessions')}</span>
               </TabsTrigger>
+              <TabsTrigger value="devices">
+                <MonitorSmartphone className="h-4 w-4" />
+                <span>{t('tabDevices')}</span>
+              </TabsTrigger>
+              <TabsTrigger value="emails">
+                <Mail className="h-4 w-4" />
+                <span>{t('tabEmails')}</span>
+              </TabsTrigger>
               <TabsTrigger value="logs">
                 <ScrollText className="h-4 w-4" />
                 <span>{t('tabLogs')}</span>
@@ -1003,65 +1033,22 @@ function UserEditSheet({
             <div className="space-y-3">
               <div className="flex items-center justify-between">
                 <h4 className="text-sm font-semibold flex items-center gap-2">
-                  <Shield className="h-4 w-4" />
+                  <Activity className="h-4 w-4" />
                   {t('recentActivityTitle')}
                 </h4>
+                {Boolean(editingUser.user_activity?.length) && (
+                  <Badge variant="secondary" className="text-[10px]">
+                    {t('activityEventsCount', {
+                      count: Math.min(
+                        editingUser.user_activity?.length ?? 0,
+                        MAX_RECENT_ACTIVITIES
+                      ),
+                    })}
+                  </Badge>
+                )}
               </div>
 
-              <Card className="rounded-md p-0">
-                <CardContent className="p-4 gap-2 flex flex-col">
-                  {editingUser.user_activity?.length ? (
-                    <div className="space-y-3">
-                      {editingUser.user_activity
-                        ?.slice(0, 5)
-                        .map((activity, index) => {
-                          const actionIcons: Record<string, LucideIcon> = {
-                            login: UserIcon,
-                            forgotPassword: KeyRound,
-                            logout: LogOut,
-                            resetPassword: RefreshCcw,
-                            revokeAllSessions: ShieldOff,
-                            revokeSession: Shield,
-                          };
-                          const Icon = actionIcons[activity.action] || UserIcon;
-
-                          return (
-                            <div
-                              key={index}
-                              className="flex items-start gap-3 border-b pb-3 last:border-none"
-                            >
-                              <div className="rounded-md bg-blue-50 p-2">
-                                <Icon className="w-4 h-4 text-gray-600" />
-                              </div>
-                              <div className="flex-1">
-                                <p className="text-sm font-medium">
-                                  {userActivityT(activity.action)}
-                                </p>
-                                <p className="text-[11px] text-gray-500 mt-1">
-                                  {activity.created_at &&
-                                    formatDistanceToNow(
-                                      new Date(activity.created_at),
-                                      {
-                                        addSuffix: true,
-                                        locale:
-                                          currentLocaleCode === 'en'
-                                            ? enUS
-                                            : ptBR,
-                                      }
-                                    )}
-                                </p>
-                              </div>
-                            </div>
-                          );
-                        })}
-                    </div>
-                  ) : (
-                    <span className="text-sm text-muted-foreground">
-                      {t('noRecentActivity')}
-                    </span>
-                  )}
-                </CardContent>
-              </Card>
+              <UserActivityTimeline activities={editingUser.user_activity} />
             </div>
 
             <div className="flex justify-end">
@@ -1112,7 +1099,7 @@ function UserEditSheet({
                     <FormItem>
                       <FormLabel>{t('editNameLabel')}</FormLabel>
                       <FormControl>
-                        <Input
+                        <NameInput
                           placeholder={t('editNamePlaceholder')}
                           {...field}
                         />
@@ -1165,19 +1152,27 @@ function UserEditSheet({
                   {t('passwordLastChangedUnavailable')}
                 </p>
               )}
-              <p className="text-xs text-muted-foreground">
-                {t('passwordResetNotice')}
-              </p>
-              <div className="flex flex-col gap-2">
-                <Button
-                  type="button"
-                  onClick={openResetPasswordDialog}
-                  className="w-full sm:w-fit"
-                >
-                  <RefreshCcw className="mr-2 h-4 w-4" />
-                  {t('buttonResetPassword')}
-                </Button>
-              </div>
+              {isSelf ? (
+                <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900">
+                  {t('passwordResetSelfNotice')}
+                </p>
+              ) : (
+                <>
+                  <p className="text-xs text-muted-foreground">
+                    {t('passwordResetNotice')}
+                  </p>
+                  <div className="flex flex-col gap-2">
+                    <Button
+                      type="button"
+                      onClick={openResetPasswordDialog}
+                      className="w-full sm:w-fit"
+                    >
+                      <RefreshCcw className="mr-2 h-4 w-4" />
+                      {t('buttonResetPassword')}
+                    </Button>
+                  </div>
+                </>
+              )}
             </div>
 
             <div className="space-y-3">
@@ -1428,26 +1423,28 @@ function UserEditSheet({
           </TabsContent>
 
           {/* Permissions Tab */}
-          <TabsContent value="permissions" className="space-y-4 mt-4 p-4 pt-0">
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h4 className="text-sm font-semibold flex items-center gap-2">
-                    <ShieldCheck className="h-4 w-4" />
-                    {t('permissionsTitle')}
-                  </h4>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    {t('permissionsDescription')}
-                  </p>
+          {canManageUserPermissions && (
+            <TabsContent value="permissions" className="space-y-4 mt-4 p-4 pt-0">
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h4 className="text-sm font-semibold flex items-center gap-2">
+                      <ShieldCheck className="h-4 w-4" />
+                      {t('permissionsTitle')}
+                    </h4>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {t('permissionsDescription')}
+                    </p>
+                  </div>
                 </div>
+                <PermissionsSection
+                  userId={editingUser.id!}
+                  userName={editingUser.name ?? undefined}
+                  onRoleChange={handleRefreshUser}
+                />
               </div>
-              <PermissionsSection
-                userId={editingUser.id!}
-                userName={editingUser.name ?? undefined}
-                onRoleChange={handleRefreshUser}
-              />
-            </div>
-          </TabsContent>
+            </TabsContent>
+          )}
 
           {/* MFA Tab */}
           <TabsContent value="mfa" className="space-y-4 mt-4 p-4 pt-0">
@@ -1496,6 +1493,16 @@ function UserEditSheet({
             />
           </TabsContent>
 
+          {/* Devices Tab */}
+          <TabsContent value="devices" className="space-y-4 mt-4 p-4 pt-0">
+            <UserDevices editingUser={editingUser} />
+          </TabsContent>
+
+          {/* Emails Tab */}
+          <TabsContent value="emails" className="space-y-4 mt-4 p-4 pt-0">
+            <UserMails editingUser={editingUser} />
+          </TabsContent>
+
           {/* Logs Tab */}
           <TabsContent value="logs" className="space-y-4 mt-4 p-4 pt-0">
             <UserLogs editingUser={editingUser} />