@hed-hog/core 0.0.276 → 0.0.279

package/hedhog/frontend/app/dashboard/components/widgets/user-sessions.tsx.ejs

@@ -86,29 +86,32 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
   const router = useRouter();
 
   return (
-    <Card className="flex h-full flex-col">
+    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
       <CardHeader className="shrink-0 pb-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Globe className="h-5 w-5 text-blue-600" />
-            <div>
-              <CardTitle className="text-base font-semibold">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-center gap-2">
+            <Globe className="h-4 w-4 text-blue-600 sm:h-5 sm:w-5" />
+            <div className="min-w-0">
+              <CardTitle className="text-sm font-semibold sm:text-base">
                 {t('title')}
               </CardTitle>
-              <CardDescription>{t('description')}</CardDescription>
+              <CardDescription className="text-xs sm:text-sm">
+                {t('description')}
+              </CardDescription>
             </div>
           </div>
           <Button
             variant="outline"
             size="sm"
             onClick={() => router.push('/core/account/sessions')}
+            className="h-8 w-full shrink-0 gap-1.5 px-2.5 text-xs sm:h-9 sm:w-auto sm:text-sm"
           >
             <Info className="h-3.5 w-3.5" />
             {t('moreInfo')}
           </Button>
         </div>
       </CardHeader>
-      <CardContent className="flex-1 overflow-auto pt-0">
+      <CardContent className="flex min-h-0 flex-1 overflow-auto pt-0">
         <div className="flex flex-col gap-2">
           {sessions.map((session, index) => {
             const ua = session.user_agent ?? '';
@@ -134,21 +137,21 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
             return (
               <div
                 key={session.id}
-                className={`group flex items-center gap-3 rounded-xl border p-3.5 transition-all duration-200 hover:shadow-sm ${
+                className={`group flex items-center gap-2.5 rounded-xl border p-3 transition-all duration-200 hover:shadow-sm sm:gap-3 sm:p-3.5 ${
                   isCurrent
                     ? 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-800 dark:bg-emerald-950/30'
                     : 'bg-card hover:bg-muted/30'
                 }`}
               >
                 <div
-                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg ${
+                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg sm:h-10 sm:w-10 ${
                     isCurrent
                       ? 'bg-emerald-100 dark:bg-emerald-900/50'
                       : 'bg-muted'
                   }`}
                 >
                   <DeviceIcon
-                    className={`h-5 w-5 ${
+                    className={`h-4 w-4 sm:h-5 sm:w-5 ${
                       isCurrent
                         ? 'text-emerald-600 dark:text-emerald-400'
                         : 'text-muted-foreground'
@@ -156,8 +159,8 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
                   />
                 </div>
                 <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="min-w-0 wrap-break-word text-[13px] font-medium text-foreground sm:text-sm">
                       {device}
                     </span>
                     {isCurrent && (
@@ -166,10 +169,10 @@ function SessionsContent({ sessions }: { sessions: SessionData[] }) {
                       </Badge>
                     )}
                   </div>
-                  <span className="text-xs text-muted-foreground">
+                  <span className="wrap-break-word text-[11px] text-muted-foreground sm:text-xs">
                     {browser} &middot; {ip}
                   </span>
-                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground/70">
+                  <div className="flex flex-wrap items-center gap-2 text-[10px] text-muted-foreground/70 sm:gap-3 sm:text-[11px]">
                     <span className="flex items-center gap-1">
                       <Clock className="h-3 w-3" />
                       {relativeTime}

package/hedhog/frontend/app/dashboard/dashboard.css.ejs

@@ -34,8 +34,12 @@
   opacity: 0.45;
 }
 
-.dashboard-grid .react-grid-item:hover > .react-resizable-handle.react-resizable-handle-se,
-.dashboard-grid .react-grid-item.resizing > .react-resizable-handle.react-resizable-handle-se {
+.dashboard-grid
+  .react-grid-item:hover
+  > .react-resizable-handle.react-resizable-handle-se,
+.dashboard-grid
+  .react-grid-item.resizing
+  > .react-resizable-handle.react-resizable-handle-se {
   opacity: 1;
 }
 
@@ -43,11 +47,15 @@
   display: none;
 }
 
-.dashboard-grid .react-grid-item > .react-resizable-handle:not(.react-resizable-handle-se) {
+.dashboard-grid
+  .react-grid-item
+  > .react-resizable-handle:not(.react-resizable-handle-se) {
   display: none;
 }
 
-.dashboard-grid .react-grid-item > .react-resizable-handle.react-resizable-handle-se {
+.dashboard-grid
+  .react-grid-item
+  > .react-resizable-handle.react-resizable-handle-se {
   bottom: 0;
   right: 0;
   cursor: se-resize;
@@ -102,3 +110,11 @@
 .dashboard-widget > [data-slot='card'] > [data-slot='card-header'] {
   padding-top: 0;
 }
+
+@media (max-width: 639px) {
+  .dashboard-widget > [data-slot='card'] {
+    gap: 0.625rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+}

package/hedhog/frontend/app/dashboard/page.tsx.ejs

@@ -1,14 +1,29 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-
-export default function DashboardRedirectPage() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.replace('/core/dashboard/default');
-  }, [router]);
-
-  return null;
-}
+'use client';
+
+import { Dashboard } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function DashboardRedirectPage() {
+  const router = useRouter();
+  const { request, currentLocaleCode } = useApp();
+
+  const { data: dashboardData, isLoading } = useQuery<Dashboard | null>({
+    queryKey: ['dashboard-home-redirect', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<Dashboard | null>({
+        url: '/dashboard-core/home',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (isLoading) return;
+
+    router.replace(`/core/dashboard/${dashboardData?.slug ?? 'default'}`);
+  }, [dashboardData?.slug, isLoading, router]);
+
+  return null;
+}

package/hedhog/frontend/app/mail/log/page.tsx.ejs

@@ -51,10 +51,9 @@ export default function MailLogPage() {
   const [pageSize, setPageSize] = useState(10);
   const { request, getSettingValue } = useApp();
 
-  const {
-    data: { data, total },
-    refetch: refetchLogs,
-  } = useQuery<PaginationResult<MailSent>>({
+  const { data: logsResult, refetch: refetchLogs } = useQuery<
+    PaginationResult<MailSent>
+  >({
     queryKey: ['mail-sent', debouncedSearch, page, pageSize],
     queryFn: async () => {
       const response = await request({
@@ -67,13 +66,8 @@ export default function MailLogPage() {
       });
       return response.data as PaginationResult<MailSent>;
     },
-    initialData: {
-      data: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-    },
-  });
+  });
+  const { data = [], total = 0 } = logsResult ?? {};
 
   useEffect(() => {
     if (data) {

package/hedhog/frontend/app/users/page.tsx.ejs

@@ -7,6 +7,16 @@ import {
   StatsCards,
 } from '@/components/entity-list';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -95,6 +105,7 @@ export default function UserPage() {
   const t = useTranslations('core.UserPage');
   const userActivityT = useTranslations('core.UserActivity');
   const { request, currentLocaleCode, getSettingValue } = useApp();
+  const minPasswordLength = Number(getSettingValue('password-min-length')) || 6;
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -103,6 +114,14 @@ export default function UserPage() {
   const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
   const [editFormError, setEditFormError] = useState<string | null>(null);
+  const [resetFormError, setResetFormError] = useState<string | null>(null);
+  const [isResetPasswordDialogOpen, setIsResetPasswordDialogOpen] =
+    useState(false);
+  const [isResetResultDialogOpen, setIsResetResultDialogOpen] = useState(false);
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+  const [showResetPassword, setShowResetPassword] = useState(false);
+  const [showResetPasswordResult, setShowResetPasswordResult] = useState(false);
+  const [resetPasswordResult, setResetPasswordResult] = useState('');
   const [photo, setPhoto] = useState<number | null | undefined>(null);
 
   const [page, setPage] = useState(1);
@@ -173,9 +192,57 @@ export default function UserPage() {
     },
   });
 
+  const resetPasswordSchema = z.object({
+    password: z.string().min(minPasswordLength, t('errorPassword')),
+  });
+
+  const resetPasswordForm = useForm<z.infer<typeof resetPasswordSchema>>({
+    resolver: zodResolver(resetPasswordSchema),
+    defaultValues: {
+      password: '',
+    },
+  });
+
   const [activeTab, setActiveTab] = useState('overview');
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
 
+  const generateRandomPassword = (length = 16) => {
+    const lowercase = 'abcdefghijkmnopqrstuvwxyz';
+    const uppercase = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
+    const numbers = '23456789';
+    const symbols = '@#$%&*!?-_+';
+    const allChars = `${lowercase}${uppercase}${numbers}${symbols}`;
+
+    const groups = [lowercase, uppercase, numbers, symbols];
+    const randomValues = new Uint32Array(length + groups.length);
+    globalThis.crypto.getRandomValues(randomValues);
+
+    const chars: string[] = [];
+
+    groups.forEach((group, index) => {
+      chars.push(group[randomValues[index] % group.length]);
+    });
+
+    for (let i = groups.length; i < randomValues.length; i++) {
+      chars.push(allChars[randomValues[i] % allChars.length]);
+    }
+
+    for (let i = chars.length - 1; i > 0; i--) {
+      const j = randomValues[i] % (i + 1);
+      [chars[i], chars[j]] = [chars[j], chars[i]];
+    }
+
+    return chars.slice(0, length).join('');
+  };
+
+  const openResetPasswordDialog = () => {
+    const generatedPassword = generateRandomPassword();
+    resetPasswordForm.reset({ password: generatedPassword });
+    setResetFormError(null);
+    setShowResetPassword(false);
+    setIsResetPasswordDialogOpen(true);
+  };
+
   useEffect(() => {
     if (editingUser) {
       editForm.reset({
@@ -270,6 +337,50 @@ export default function UserPage() {
     }
   };
 
+  const onResetPasswordSubmit = async () => {
+    if (!editingUser?.id) {
+      return;
+    }
+
+    setIsResettingPassword(true);
+    setResetFormError(null);
+    try {
+      const { password } = resetPasswordForm.getValues();
+      const response = await request<{ password: string }>({
+        url: `/user/${editingUser.id}/reset-password`,
+        method: 'PATCH',
+        data: {
+          password,
+        },
+      });
+
+      setResetPasswordResult(response.data.password);
+      setIsResetPasswordDialogOpen(false);
+      setIsResetResultDialogOpen(true);
+      refetch();
+      toast.success(t('passwordResetSuccess'));
+    } catch (err) {
+      const e: any = err;
+      const msg =
+        e?.response?.data?.message ||
+        e?.response?.data?.error ||
+        e?.message ||
+        t('serverError');
+      setResetFormError(String(msg));
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
+  const copyResetPassword = async () => {
+    try {
+      await navigator.clipboard.writeText(resetPasswordResult);
+      toast.success(t('passwordCopied'));
+    } catch {
+      toast.error(t('passwordCopyError'));
+    }
+  };
+
   const handleAvatarClick = () => {
     const input = document.createElement('input');
     input.type = 'file';
@@ -568,17 +679,17 @@ export default function UserPage() {
           />
         </div>
 
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogHeader>
-              <DialogTitle>{t('dialogAddUserTitle')}</DialogTitle>
-              <DialogDescription>{t('description')}</DialogDescription>
-            </DialogHeader>
+        <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <SheetContent className="w-full sm:max-w-lg overflow-y-auto gap-0">
+            <SheetHeader>
+              <SheetTitle>{t('dialogAddUserTitle')}</SheetTitle>
+              <SheetDescription>{t('description')}</SheetDescription>
+            </SheetHeader>
             <div className="w-full border-t pt-1 mt-1" />
             <Form {...form}>
               <form
                 onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-4"
+                className="px-4 gap-4 w-full flex flex-col pt-2"
               >
                 <FormField
                   control={form.control}
@@ -661,15 +772,18 @@ export default function UserPage() {
                 </Button>
               </form>
             </Form>
-          </DialogContent>
-        </Dialog>
+          </SheetContent>
+        </Sheet>
 
         {editingUser && (
           <Sheet
             open={!!editingUser}
-            onOpenChange={() => {
+            onOpenChange={(open) => {
               setEditingUser(null);
               setPhoto(null);
+              setIsResetPasswordDialogOpen(false);
+              setIsResetResultDialogOpen(false);
+              setResetPasswordResult('');
             }}
           >
             <SheetContent className="w-full sm:max-w-4xl overflow-y-auto gap-0">
@@ -1118,6 +1232,28 @@ export default function UserPage() {
                   value="credentials"
                   className="space-y-4 mt-4  p-4 pt-0"
                 >
+                  <Card className="border-amber-200 bg-amber-50/50">
+                    <CardHeader className="pb-2">
+                      <CardTitle className="text-sm">
+                        {t('passwordResetTitle')}
+                      </CardTitle>
+                      <CardDescription>
+                        {t('passwordResetDescription')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex flex-col gap-3">
+                      <div className="text-xs text-muted-foreground">
+                        {t('passwordResetNotice')}
+                      </div>
+                      <div>
+                        <Button type="button" onClick={openResetPasswordDialog}>
+                          <RefreshCcw className="h-4 w-4 mr-2" />
+                          {t('buttonResetPassword')}
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+
                   <div className="space-y-3">
                     <h4 className="text-sm font-medium">
                       {t('connectedAccountsTitle')}
@@ -1165,6 +1301,191 @@ export default function UserPage() {
                       })}
                     </div>
                   </div>
+
+                  <AlertDialog
+                    open={isResetPasswordDialogOpen}
+                    onOpenChange={(open) => {
+                      setIsResetPasswordDialogOpen(open);
+                      if (!open) {
+                        setResetFormError(null);
+                      }
+                    }}
+                  >
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>
+                          {t('passwordResetDialogTitle')}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                          {t('passwordResetDialogDescription')}
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+
+                      <Form {...resetPasswordForm}>
+                        <form className="space-y-4">
+                          <FormField
+                            control={resetPasswordForm.control}
+                            name="password"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>
+                                  {t('passwordResetFieldLabel')}
+                                </FormLabel>
+                                <FormControl>
+                                  <div className="space-y-2">
+                                    <div className="relative">
+                                      <Input
+                                        type={
+                                          showResetPassword
+                                            ? 'text'
+                                            : 'password'
+                                        }
+                                        {...field}
+                                        className="pr-10"
+                                      />
+                                      <button
+                                        type="button"
+                                        onClick={() =>
+                                          setShowResetPassword(
+                                            (state) => !state
+                                          )
+                                        }
+                                        className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-sm text-muted-foreground hover:bg-muted/50"
+                                        aria-label={
+                                          showResetPassword
+                                            ? t('hidePassword')
+                                            : t('showPassword')
+                                        }
+                                      >
+                                        {showResetPassword ? (
+                                          <EyeOff className="h-4 w-4" />
+                                        ) : (
+                                          <Eye className="h-4 w-4" />
+                                        )}
+                                      </button>
+                                    </div>
+
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      onClick={() => {
+                                        resetPasswordForm.setValue(
+                                          'password',
+                                          generateRandomPassword(),
+                                          {
+                                            shouldValidate: true,
+                                            shouldDirty: true,
+                                          }
+                                        );
+                                      }}
+                                    >
+                                      <RefreshCcw className="h-4 w-4 mr-2" />
+                                      {t('buttonRegeneratePassword')}
+                                    </Button>
+                                  </div>
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+
+                          {resetFormError && (
+                            <Alert variant="destructive">
+                              <AlertTitle>{t('verifyYourInput')}</AlertTitle>
+                              <AlertDescription>
+                                {resetFormError}
+                              </AlertDescription>
+                            </Alert>
+                          )}
+                        </form>
+                      </Form>
+
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+                        <AlertDialogAction
+                          disabled={isResettingPassword}
+                          onClick={async (event) => {
+                            event.preventDefault();
+                            const valid = await resetPasswordForm.trigger();
+                            if (!valid) {
+                              return;
+                            }
+
+                            await onResetPasswordSubmit();
+                          }}
+                        >
+                          {isResettingPassword
+                            ? t('passwordResetSubmitting')
+                            : t('passwordResetConfirm')}
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+
+                  <Dialog
+                    open={isResetResultDialogOpen}
+                    onOpenChange={(open) => {
+                      setIsResetResultDialogOpen(open);
+                      if (!open) {
+                        setResetPasswordResult('');
+                        setShowResetPasswordResult(false);
+                      }
+                    }}
+                  >
+                    <DialogContent className="sm:max-w-lg">
+                      <DialogHeader>
+                        <DialogTitle>{t('passwordResultTitle')}</DialogTitle>
+                        <DialogDescription>
+                          {t('passwordResultDescription')}
+                        </DialogDescription>
+                      </DialogHeader>
+
+                      <div className="space-y-3">
+                        <div className="relative">
+                          <Input
+                            readOnly
+                            value={resetPasswordResult}
+                            type={showResetPasswordResult ? 'text' : 'password'}
+                            className="pr-10"
+                          />
+                          <button
+                            type="button"
+                            onClick={() =>
+                              setShowResetPasswordResult((state) => !state)
+                            }
+                            className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-sm text-muted-foreground hover:bg-muted/50"
+                            aria-label={
+                              showResetPasswordResult
+                                ? t('hidePassword')
+                                : t('showPassword')
+                            }
+                          >
+                            {showResetPasswordResult ? (
+                              <EyeOff className="h-4 w-4" />
+                            ) : (
+                              <Eye className="h-4 w-4" />
+                            )}
+                          </button>
+                        </div>
+
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={copyResetPassword}
+                          >
+                            {t('buttonCopyPassword')}
+                          </Button>
+                          <Button
+                            type="button"
+                            onClick={() => setIsResetResultDialogOpen(false)}
+                          >
+                            {t('close')}
+                          </Button>
+                        </div>
+                      </div>
+                    </DialogContent>
+                  </Dialog>
                 </TabsContent>
 
                 <TabsContent