Fix header tools so login and logout are not both shown after authent…

packages/layout/locales/de/common.json

@@ -3,6 +3,10 @@
     "languageSwitcher": {
       "switchTo": "Zu {{ lang }} wechseln"
     },
+    "tools": {
+      "login": "Anmelden",
+      "logout": "Abmelden"
+    },
     "contenttypes": {
       "common": {
         "size": "Größe:"

packages/layout/locales/en/common.json

@@ -3,6 +3,10 @@
     "languageSwitcher": {
       "switchTo": "Switch to {{ lang }}"
     },
+    "tools": {
+      "login": "Log in",
+      "logout": "Log out"
+    },
     "contenttypes": {
       "common": {
         "size": "Size:"

packages/layout/locales/it/common.json

@@ -3,6 +3,10 @@
     "languageSwitcher": {
       "switchTo": "Passa a {{ lang }}"
     },
+    "tools": {
+      "login": "Accedi",
+      "logout": "Esci"
+    },
     "contenttypes": {
       "common": {
         "size": "Dimensione:"

packages/layout/news/+header-tools-auth.bugfix

@@ -0,0 +1 @@
+Show only the login or logout header tool based on authentication state instead of always rendering both in development. @aryan7081

packages/layout/slots/Tools.tsx

@@ -1,31 +1,23 @@
-import { Link } from 'react-aria-components';
+import { useTranslation } from 'react-i18next';
+import { Link } from '@plone/components';
+import { useRouteLoaderData } from 'react-router';
+import type { RootLoader } from '@plone/aurora/app/root';
 
 const HeaderTools = () => {
-  const links = [
-    {
-      id: '1',
-      label: 'login',
-      icon: '🔧',
-      url: '/login',
-    },
-    {
-      id: '2',
-      label: 'logout',
-      icon: '🔨',
-      url: '/logout',
-    },
-  ];
-  // Inline styles since this is temporary during seven development
-  return import.meta.env.DEV ? (
-    <div style={{ display: 'flex', gap: '16px' }}>
-      {links.map((tool) => (
-        <Link key={tool.id} href={tool.url}>
-          <span>{tool.icon}</span>
-          <span>{tool.label}</span>
-        </Link>
-      ))}
-    </div>
-  ) : null;
+  const { t } = useTranslation();
+  const rootData = useRouteLoaderData<RootLoader>('root');
+  const isAuthenticated = rootData?.isAuthenticated ?? false;
+
+  // Convenience auth links while developing Plone Aurora.
+  if (!import.meta.env.DEV) {
+    return null;
+  }
+
+  return isAuthenticated ? (
+    <Link href="/logout">{t('layout.tools.logout', 'Log out')}</Link>
+  ) : (
+    <Link href="/login">{t('layout.tools.login', 'Log in')}</Link>
+  );
 };
 
 export default HeaderTools;