@hed-hog/core 0.0.295 → 0.0.296

package/hedhog/data/setting_subgroup.yaml

@@ -0,0 +1,303 @@
+- slug: database-cleanup
+  name:
+    en: Database Cleanup
+    pt: Limpeza do Banco de Dados
+  description:
+    en: Settings for cleanup routines and database maintenance jobs
+    pt: Configurações para rotinas de limpeza e tarefas de manutenção do banco de dados
+
+- slug: session-retention
+  name:
+    en: Session Retention
+    pt: Retenção de Sessões
+  description:
+    en: Rules for retaining and removing expired user sessions
+    pt: Regras para retenção e remoção de sessões expiradas de usuários
+
+- slug: email-password-auth
+  name:
+    en: Email and Password Authentication
+    pt: Autenticação por Email e Senha
+  description:
+    en: Controls for traditional email and password sign-in
+    pt: Controles para autenticação tradicional com email e senha
+
+- slug: password-policy
+  name:
+    en: Password Policy
+    pt: Política de Senha
+  description:
+    en: Requirements and validation rules for user passwords
+    pt: Requisitos e regras de validação para senhas de usuários
+
+- slug: email-restrictions
+  name:
+    en: Email Restrictions
+    pt: Restrições de Email
+  description:
+    en: Domain allowlists and blocklists for email-based access
+    pt: Listas de permissão e bloqueio de domínios para acesso baseado em email
+
+- slug: mfa-general
+  name:
+    en: MFA General
+    pt: MFA Geral
+  description:
+    en: Core multi-factor authentication behavior and challenge settings
+    pt: Comportamento principal da autenticação multifator e configurações de desafio
+
+- slug: mfa-totp
+  name:
+    en: MFA TOTP
+    pt: MFA TOTP
+  description:
+    en: Time-based one-time password configuration
+    pt: Configuração de senhas temporárias baseadas em tempo
+
+- slug: mfa-email
+  name:
+    en: MFA Email
+    pt: MFA por Email
+  description:
+    en: Email-based multi-factor authentication settings
+    pt: Configurações de autenticação multifator baseada em email
+
+- slug: token-configuration
+  name:
+    en: Token Configuration
+    pt: Configuração de Tokens
+  description:
+    en: Access and refresh token lifetime settings
+    pt: Configurações de duração de tokens de acesso e atualização
+
+- slug: session-management
+  name:
+    en: Session Management
+    pt: Gerenciamento de Sessões
+  description:
+    en: Limits and policies for concurrent user sessions
+    pt: Limites e políticas para sessões simultâneas de usuários
+
+- slug: regional-settings
+  name:
+    en: Regional Settings
+    pt: Configurações Regionais
+  description:
+    en: Default language and timezone options for the system
+    pt: Opções padrão de idioma e fuso horário para o sistema
+
+- slug: date-time-formats
+  name:
+    en: Date and Time Formats
+    pt: Formatos de Data e Hora
+  description:
+    en: Formatting rules for dates and times across the application
+    pt: Regras de formatação para datas e horários em toda a aplicação
+
+- slug: oauth-general
+  name:
+    en: OAuth General
+    pt: OAuth Geral
+  description:
+    en: Shared settings for OAuth providers and role assignment
+    pt: Configurações compartilhadas para provedores OAuth e atribuição de funções
+
+- slug: google
+  name:
+    en: Google
+    pt: Google
+  description:
+    en: Google OAuth Provider
+    pt: Provedor OAuth do Google
+
+- slug: facebook
+  name:
+    en: Facebook
+    pt: Facebook
+  description:
+    en: Facebook OAuth Provider
+    pt: Provedor OAuth do Facebook
+
+- slug: microsoft
+  name:
+    en: Microsoft
+    pt: Microsoft
+  description:
+    en: Microsoft OAuth Provider
+    pt: Provedor OAuth da Microsoft
+
+- slug: github
+  name:
+    en: GitHub
+    pt: GitHub
+  description:
+    en: GitHub OAuth Provider
+    pt: Provedor OAuth do GitHub
+
+- slug: microsoft-entra-id
+  name:
+    en: Microsoft Entra ID
+    pt: Microsoft Entra ID
+  description:
+    en: Microsoft Entra ID (Azure AD) OAuth Provider
+    pt: Provedor OAuth Microsoft Entra ID (Azure AD)
+
+- slug: theme-selector
+  name:
+    en: Theme Selector
+    pt: Seletor de Tema
+  description:
+    en: Global theme mode selection settings
+    pt: Configurações de seleção global do modo de tema
+
+- slug: light-theme-colors
+  name:
+    en: Light Theme Colors
+    pt: Cores do Tema Claro
+  description:
+    en: Palette configuration for the light theme
+    pt: Configuração da paleta para o tema claro
+
+- slug: dark-theme-colors
+  name:
+    en: Dark Theme Colors
+    pt: Cores do Tema Escuro
+  description:
+    en: Palette configuration for the dark theme
+    pt: Configuração da paleta para o tema escuro
+
+- slug: theme-customization
+  name:
+    en: Theme Customization
+    pt: Personalização de Tema
+  description:
+    en: Layout, typography, and other theme customization options
+    pt: Opções de layout, tipografia e outras personalizações do tema
+
+- slug: branding
+  name:
+    en: Branding
+    pt: Identidade Visual
+  description:
+    en: Logo, icon, and brand presentation settings
+    pt: Configurações de logo, ícone e apresentação da marca
+
+- slug: storage-general
+  name:
+    en: Storage General
+    pt: Armazenamento Geral
+  description:
+    en: Shared configuration for file storage providers and limits
+    pt: Configuração compartilhada para provedores de armazenamento e limites
+
+- slug: local-storage
+  name:
+    en: Local Storage
+    pt: Armazenamento Local
+  description:
+    en: Filesystem-based storage configuration
+    pt: Configuração de armazenamento baseado em sistema de arquivos
+
+- slug: s3-storage
+  name:
+    en: Amazon S3 Storage
+    pt: Armazenamento Amazon S3
+  description:
+    en: AWS S3 bucket access and storage settings
+    pt: Configurações de acesso e armazenamento em bucket AWS S3
+
+- slug: abs-storage
+  name:
+    en: Azure Blob Storage
+    pt: Armazenamento Azure Blob
+  description:
+    en: Azure Blob Storage account and container settings
+    pt: Configurações de conta e contêiner do Azure Blob Storage
+
+- slug: gcs-storage
+  name:
+    en: Google Cloud Storage
+    pt: Armazenamento Google Cloud
+  description:
+    en: Google Cloud Storage authentication settings
+    pt: Configurações de autenticação do Google Cloud Storage
+
+- slug: mail-general
+  name:
+    en: Mail General
+    pt: Email Geral
+  description:
+    en: Shared mail delivery settings and provider selection
+    pt: Configurações compartilhadas de entrega de email e seleção de provedor
+
+- slug: smtp-config
+  name:
+    en: SMTP Configuration
+    pt: Configuração SMTP
+  description:
+    en: SMTP server connection and credential settings
+    pt: Configurações de conexão e credenciais do servidor SMTP
+
+- slug: gmail-config
+  name:
+    en: Gmail Configuration
+    pt: Configuração do Gmail
+  description:
+    en: OAuth settings for Gmail-based email delivery
+    pt: Configurações OAuth para envio de email via Gmail
+
+- slug: ses-config
+  name:
+    en: Amazon SES Configuration
+    pt: Configuração do Amazon SES
+  description:
+    en: AWS SES credentials and regional settings
+    pt: Credenciais e configurações regionais do AWS SES
+
+- slug: openai
+  name:
+    en: OpenAI
+    pt: OpenAI
+  description:
+    en: OpenAI service credential settings
+    pt: Configurações de credenciais do serviço OpenAI
+
+- slug: gemini
+  name:
+    en: Gemini
+    pt: Gemini
+  description:
+    en: Google Gemini service credential settings
+    pt: Configurações de credenciais do serviço Google Gemini
+
+- slug: outbox-general
+  name:
+    en: Outbox General
+    pt: Outbox Geral
+  description:
+    en: Core settings for the outbox event delivery system
+    pt: Configurações principais do sistema de entrega de eventos outbox
+
+- slug: startup-behavior
+  name:
+    en: Startup Behavior
+    pt: Comportamento na Inicialização
+  description:
+    en: Startup processing settings for pending outbox events
+    pt: Configurações de processamento na inicialização para eventos pendentes do outbox
+
+- slug: processing-config
+  name:
+    en: Processing Configuration
+    pt: Configuração de Processamento
+  description:
+    en: Background processing cadence and batch settings for outbox events
+    pt: Configurações de frequência e lotes do processamento em segundo plano dos eventos outbox
+
+- slug: retry-config
+  name:
+    en: Retry Configuration
+    pt: Configuração de Reprocessamento
+  description:
+    en: Retry, backoff, and dead letter handling for failed outbox events
+    pt: Configurações de reprocessamento, backoff e fila de falha para eventos outbox com erro

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -19,7 +19,7 @@ import {
   SettingTypeEnum,
 } from '@hed-hog/api-types';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Upload } from 'lucide-react';
+import { Eye, EyeOff, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
@@ -34,6 +34,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   const component =
     setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
   const [localValue, setLocalValue] = useState(setting.value);
+  const [showSecretValue, setShowSecretValue] = useState(false);
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const isTextInputRef = useRef<boolean>(false);
 
@@ -154,7 +155,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           type="text"
           value={parsedValue || ''}
           onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-          className={cn(className, 'bg-background min-w-[200px]')}
+          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
         />
       );
 
@@ -167,19 +168,38 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           onChange={(e) =>
             handleChangeValue(formatValue(parseFloat(e.target.value) || 0))
           }
-          className={cn(className, 'bg-background min-w-[200px]')}
+          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
         />
       );
 
     case SettingComponentEnum.INPUT_SECRET:
       isTextInputRef.current = true;
       return (
-        <Input
-          type="password"
-          value={parsedValue || ''}
-          onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-          className={cn(className, 'bg-background min-w-[200px]')}
-        />
+        <div className="relative w-full min-w-0 md:min-w-50">
+          <Input
+            type={showSecretValue ? 'text' : 'password'}
+            value={parsedValue || ''}
+            onChange={(e) => handleChangeValue(formatValue(e.target.value))}
+            className={cn(
+              className,
+              'w-full min-w-0 bg-background pr-10 md:min-w-50'
+            )}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+            onClick={() => setShowSecretValue((prev) => !prev)}
+            aria-label={showSecretValue ? 'Hide password' : 'Show password'}
+          >
+            {showSecretValue ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
       );
 
     case SettingComponentEnum.INPUT_FILE:
@@ -242,17 +262,17 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
       };
 
       return (
-        <div className="flex flex-col gap-2 min-w-[200px]">
+        <div className="flex w-full min-w-0 flex-col gap-2 md:min-w-50">
           {parsedValue && (
             <div>
               <img
                 src={parsedValue || ''}
                 alt={t('uploadedFileAlt')}
-                className="w-[200px]"
+                className="max-w-full md:w-50"
               />
             </div>
           )}
-          <div className="flex items-center gap-2">
+          <div className="flex w-full min-w-0 items-center gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -274,7 +294,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               type="text"
               value={parsedValue || ''}
               onChange={(e) => handleChangeValue(formatValue(e.target.value))}
-              className="flex-1 bg-background w-[150px]"
+              className="min-w-0 flex-1 bg-background"
               placeholder={t('fileUrlPlaceholder')}
               disabled={isUploading}
             />
@@ -301,7 +321,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           : [];
         return (
           <div
-            className={cn('flex flex-col space-y-2 min-w-[200px]', className)}
+            className={cn(
+              'flex w-full min-w-0 flex-col space-y-2 md:min-w-50',
+              className
+            )}
           >
             {options.map((option) => (
               <div key={option.id} className="flex items-center space-x-2">
@@ -332,7 +355,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           onCheckedChange={(checked) =>
             handleChangeValue(formatValue(checked), true)
           }
-          className={cn(className, 'min-w-[200px]')}
+          className={cn(className)}
         />
       );
 
@@ -344,7 +367,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           onValueChange={(val) => handleChangeValue(formatValue(val), true)}
         >
           <SelectTrigger
-            className={cn('w-full bg-background min-w-[200px]', className)}
+            className={cn(
+              'w-full min-w-0 bg-background md:min-w-50',
+              className
+            )}
           >
             <SelectValue placeholder={t('selectOption')} />
           </SelectTrigger>
@@ -364,7 +390,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         <RadioGroup
           value={parsedValue?.toString() || ''}
           onValueChange={(val) => handleChangeValue(formatValue(val), true)}
-          className={cn(className, 'min-w-[200px]')}
+          className={cn(className, 'w-full min-w-0 md:min-w-50')}
         >
           {radioOptions.map((option) => (
             <div key={option.id} className="flex items-center space-x-2">
@@ -382,7 +408,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
     case SettingComponentEnum.COLOR_PICKER:
       isTextInputRef.current = true;
       return (
-        <div className="flex items-center gap-2 min-w-[200px] max-w-[200px]">
+        <div className="flex w-full min-w-0 items-center gap-2 md:max-w-50">
           <Input
             type="color"
             value={parsedValue || '#000000'}

package/hedhog/frontend/app/configurations/[slug]/page.tsx.ejs

@@ -1,13 +1,43 @@
 'use client';
 
-import { Card, CardContent } from '@/components/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import { PaginatedResult } from '@/types/pagination-result';
-import { Setting } from '@hed-hog/api-types';
+import { Setting, SettingSubgroup } from '@hed-hog/api-types';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { Loader } from 'lucide-react';
 import { useParams } from 'next/navigation';
+import { useMemo } from 'react';
 import { SettingField } from './components/setting-field';
 
+type SettingSection = {
+  key: string;
+  subgroupId: number | null;
+  subgroup: SettingSubgroup | null;
+  settings: Setting[];
+};
+
+type SettingWithLegacySubgroup = Setting & {
+  subgroup_id?: number | null;
+};
+
+const getLocalizedValue = (
+  value?: string | Record<string, string>
+): string | undefined => {
+  if (!value) return undefined;
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  return value.en || Object.values(value)[0];
+};
+
 export default function Page() {
   const params = useParams();
   const slug = params?.slug;
@@ -23,39 +53,116 @@ export default function Page() {
     },
   });
 
+  const groupedSections = useMemo<SettingSection[]>(() => {
+    const sectionsMap = new Map<string, SettingSection>();
+
+    for (const setting of (settings?.data ||
+      []) as SettingWithLegacySubgroup[]) {
+      const subgroupId =
+        setting.subgroupId ??
+        setting.subgroup_id ??
+        setting.setting_subgroup?.id ??
+        null;
+      const subgroup = setting.setting_subgroup ?? null;
+      const sectionKey =
+        subgroupId === null ? 'ungrouped' : `subgroup-${subgroupId}`;
+
+      if (!sectionsMap.has(sectionKey)) {
+        sectionsMap.set(sectionKey, {
+          key: sectionKey,
+          subgroupId,
+          subgroup,
+          settings: [],
+        });
+      }
+
+      sectionsMap.get(sectionKey)?.settings.push(setting);
+    }
+
+    const sections = Array.from(sectionsMap.values());
+
+    sections.forEach((section) => {
+      section.settings.sort((a, b) => a.slug.localeCompare(b.slug));
+    });
+
+    sections.sort((a, b) => {
+      if (a.subgroupId === null && b.subgroupId !== null) return 1;
+      if (a.subgroupId !== null && b.subgroupId === null) return -1;
+
+      const aSlug = a.subgroup?.slug || '';
+      const bSlug = b.subgroup?.slug || '';
+
+      const slugSort = aSlug.localeCompare(bSlug);
+      if (slugSort !== 0) return slugSort;
+
+      return (
+        (a.subgroupId ?? Number.MAX_SAFE_INTEGER) -
+        (b.subgroupId ?? Number.MAX_SAFE_INTEGER)
+      );
+    });
+
+    return sections;
+  }, [settings?.data]);
+
   if (!slug) {
     return <></>;
   }
 
   return (
-    <div className="space-y-6">
-      <form className="space-y-4">
-        <Card className="border-none bg-accent">
-          {isLoading && (
+    <div className="min-w-0 space-y-6">
+      <form className="min-w-0 space-y-6">
+        {isLoading && (
+          <Card className="border-none bg-accent">
             <CardContent className="flex h-32 w-full items-center justify-center">
               <Loader className="animate-spin text-muted-foreground w-4 h-4" />
             </CardContent>
-          )}
-          {(settings?.data || []).map((setting: Setting) => (
-            <CardContent
-              key={setting.id}
-              className="flex-col gap-4 border-b last:border-0 border-border pb-4"
-            >
-              <div className="flex justify-between items-center">
-                <div className="flex-col">
-                  <label className="font-semibold">{setting.name}</label>
-                  <p className="text-muted-foreground text-sm">
-                    {setting.description}
-                  </p>
-                </div>
-
-                <div className="h-full flex items-center">
-                  <SettingField setting={setting} />
-                </div>
-              </div>
-            </CardContent>
-          ))}
-        </Card>
+          </Card>
+        )}
+
+        {!isLoading &&
+          groupedSections.map((section) => {
+            const subgroupName = getLocalizedValue(section.subgroup?.name);
+            const subgroupDescription = getLocalizedValue(
+              section.subgroup?.description
+            );
+
+            return (
+              <Card key={section.key} className="min-w-0 border-none bg-accent">
+                {section.subgroup && (
+                  <CardHeader className="pb-3">
+                    <CardTitle>
+                      {subgroupName || section.subgroup.slug}
+                    </CardTitle>
+                    {subgroupDescription && (
+                      <CardDescription>{subgroupDescription}</CardDescription>
+                    )}
+                  </CardHeader>
+                )}
+
+                <CardContent className="min-w-0 space-y-4">
+                  {section.settings.map((setting: Setting) => (
+                    <div
+                      key={setting.id}
+                      className="flex min-w-0 flex-col gap-3 border-b border-border pb-4 last:border-0 last:pb-0 md:flex-row md:items-center md:justify-between md:gap-4"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <label className="block font-semibold">
+                          {setting.name}
+                        </label>
+                        <p className="text-muted-foreground text-sm wrap-break-word">
+                          {setting.description}
+                        </p>
+                      </div>
+
+                      <div className="flex w-full min-w-0 items-center md:h-full md:w-auto md:max-w-full md:justify-end">
+                        <SettingField setting={setting} />
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+            );
+          })}
       </form>
     </div>
   );