Add translation values to activity log output

Author: DaneEveritt

resources/lang/en/activity.php

@@ -26,8 +26,8 @@
             'delete' => 'Deleted API key <strong>:identifier</strong>',
         ],
         'ssh-key' => [
-            'create' => 'Added SSH key (<strong>:fingerprint</strong>) to account',
-            'delete' => 'Removed SSH key (<strong>:fingerprint</strong>) from account',
+            'create' => 'Added SSH key <strong>:fingerprint</strong> to account',
+            'delete' => 'Removed SSH key <strong>:fingerprint</strong> from account',
         ],
         'two-factor' => [
             'create' => 'Enabled two-factor authentication for account',

resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx

@@ -13,9 +13,11 @@ import { useLocation } from 'react-router';
 import Spinner from '@/components/elements/Spinner';
 import { styles as btnStyles } from '@/components/elements/button/index';
 import classNames from 'classnames';
+import Translate from '@/components/elements/Translate';
 
 export default () => {
     const location = useLocation();
+
     const { clearAndAddHttpError } = useFlashKey('account');
     const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
     const { data, isValidating, error } = useActivityLogs(filters, {
@@ -90,6 +92,11 @@ export default () => {
                                         </Tooltip>
                                     }
                                 </div>
+                                <p className={'mt-1 text-sm'}>
+                                    <Translate ns={'activity'} values={activity.properties}>
+                                        {activity.event.replace(':', '.')}
+                                    </Translate>
+                                </p>
                                 <div className={'mt-1 flex items-center text-sm'}>
                                     <Link
                                         to={`?${queryTo({ ip: activity.ip })}`}

resources/scripts/components/elements/Translate.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Trans, TransProps, useTranslation } from 'react-i18next';
+
+type Props = Omit<TransProps, 't'>;
+
+export default ({ ns, children, ...props }: Props) => {
+    const { t } = useTranslation(ns);
+
+    return (
+        <Trans t={t} {...props}>
+            {children}
+        </Trans>
+    );
+};

resources/scripts/i18n.ts

@@ -19,7 +19,8 @@ i18n
         backend: {
             backend: I18NextHttpBackend,
             backendOption: {
-                loadPath: `/locales/locale.json?locale={{lng}}&namespace={{ns}}&hash=${hash}`,
+                loadPath: '/locales/locale.json?locale={{lng}}&namespace={{ns}}',
+                queryStringParams: { hash },
                 allowMultiLoading: true,
             } as BackendOptions,
         } as Record<string, any>,
@@ -30,6 +31,4 @@ i18n
         },
     });
 
-i18n.loadNamespaces([ 'validation' ]).catch(console.error);
-
 export default i18n;