Login form tweaks (#9005)

* Login form tweaks - Improve consistency - Add tooltips * Cleanup ServerInfo list * Slight layout tweaks
inventree · Feb 1, 2025 · bef6270 · bef6270
1 parent 855afde
commit bef6270
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 81 deletions.
diff --git a/src/frontend/src/components/forms/AuthFormOptions.tsx b/src/frontend/src/components/forms/AuthFormOptions.tsx
@@ -1,4 +1,4 @@
-import { Center, Group, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Center, Group, Text, Tooltip } from '@mantine/core';
 import { IconServer } from '@tabler/icons-react';
 
 import { useServerApiState } from '../../states/ApiState';
@@ -21,7 +21,13 @@ export function AuthFormOptions({
         <LanguageToggle />
         {window.INVENTREE_SETTINGS.show_server_selector && (
           <Tooltip label={hostname}>
-            <IconServer onClick={toggleHostEdit} />
+            <ActionIcon
+              size='lg'
+              variant='transparent'
+              onClick={toggleHostEdit}
+            >
+              <IconServer />
+            </ActionIcon>
           </Tooltip>
         )}
         <Text c={'dimmed'}>

diff --git a/src/frontend/src/components/forms/InstanceOptions.tsx b/src/frontend/src/components/forms/InstanceOptions.tsx
@@ -1,12 +1,28 @@
-import { Trans } from '@lingui/macro';
-import { Divider, Group, Select, Text, Title } from '@mantine/core';
+import { Trans, t } from '@lingui/macro';
+import {
+  ActionIcon,
+  Divider,
+  Group,
+  Paper,
+  Select,
+  Table,
+  Text
+} from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
-import { IconCheck } from '@tabler/icons-react';
+import {
+  IconApi,
+  IconCheck,
+  IconInfoCircle,
+  IconPlugConnected,
+  IconServer,
+  IconServerSpark
+} from '@tabler/icons-react';
 
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import type { HostList } from '../../states/states';
 import { EditButton } from '../buttons/EditButton';
+import { StylishText } from '../items/StylishText';
 import { HostOptionsForm } from './HostOptionsForm';
 
 export function InstanceOptions({
@@ -39,11 +55,10 @@ export function InstanceOptions({
 
   return (
     <>
-      <Title order={3}>
-        <Trans>Select destination instance</Trans>
-      </Title>
-      <Group>
-        <Group>
+      <Paper p='xl' withBorder>
+        <StylishText size='xl'>{t`Select Server`}</StylishText>
+        <Divider p='xs' />
+        <Group gap='xs' wrap='nowrap'>
           <Select
             value={hostKey}
             onChange={ChangeHost}
@@ -55,29 +70,29 @@ export function InstanceOptions({
             editing={HostListEdit}
             disabled={HostListEdit}
           />
+          <EditButton
+            setEditing={setHostEdit}
+            editing={true}
+            disabled={HostListEdit}
+            saveIcon={<IconCheck />}
+          />
         </Group>
-        <EditButton
-          setEditing={setHostEdit}
-          editing={true}
-          disabled={HostListEdit}
-          saveIcon={<IconCheck />}
-        />
-      </Group>
 
-      {HostListEdit ? (
-        <>
-          <Divider my={'sm'} />
-          <Text>
-            <Trans>Edit possible host options</Trans>
-          </Text>
-          <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
-        </>
-      ) : (
-        <>
-          <Divider my={'sm'} />
-          <ServerInfo hostList={hostList} hostKey={hostKey} />
-        </>
-      )}
+        {HostListEdit ? (
+          <>
+            <Divider my={'sm'} />
+            <Text>
+              <Trans>Edit host options</Trans>
+            </Text>
+            <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
+          </>
+        ) : (
+          <>
+            <Divider my={'sm'} />
+            <ServerInfo hostList={hostList} hostKey={hostKey} />
+          </>
+        )}
+      </Paper>
     </>
   );
 }
@@ -91,27 +106,66 @@ function ServerInfo({
 }>) {
   const [server] = useServerApiState((state) => [state.server]);
 
+  const items: any[] = [
+    {
+      key: 'server',
+      label: t`Server`,
+      value: hostList[hostKey]?.host,
+      icon: <IconServer />
+    },
+    {
+      key: 'name',
+      label: t`Name`,
+      value: server.instance,
+      icon: <IconInfoCircle />
+    },
+    {
+      key: 'version',
+      label: t`Version`,
+      value: server.version,
+      icon: <IconInfoCircle />
+    },
+    {
+      key: 'api',
+      label: t`API Version`,
+      value: server.apiVersion,
+      icon: <IconApi />
+    },
+    {
+      key: 'plugins',
+      label: t`Plugins`,
+      value: server.plugins_enabled ? t`Enabled` : t`Disabled`,
+      icon: <IconPlugConnected />,
+      color: server.plugins_enabled ? 'green' : 'red'
+    },
+    {
+      key: 'worker',
+      label: t`Worker`,
+      value: server.worker_running ? t`Running` : t`Stopped`,
+      icon: <IconServerSpark />,
+      color: server.worker_running ? 'green' : 'red'
+    }
+  ];
+
   return (
-    <Text>
-      {hostList[hostKey]?.host}
-      <br />
-      <Trans>Version: {server.version}</Trans>
-      <br />
-      <Trans>API:{server.apiVersion}</Trans>
-      <br />
-      <Trans>Name: {server.instance}</Trans>
-      <br />
-      <Trans>
-        State:{' '}
-        <Text span c={server.worker_running ? 'green' : 'red'}>
-          worker
-        </Text>{' '}
-        ({server.worker_pending_tasks}),{' '}
-        <Text span c={server.plugins_enabled ? 'green' : 'red'}>
-          plugins
-        </Text>
-        {server.plugins_enabled ? ` (${server.active_plugins.length})` : null}
-      </Trans>
-    </Text>
+    <Table striped p='xs'>
+      <Table.Tbody>
+        {items.map((item) => (
+          <Table.Tr key={item.key} p={2}>
+            <Table.Td>
+              <ActionIcon size='xs' variant='transparent' color={item.color}>
+                {item.icon}
+              </ActionIcon>
+            </Table.Td>
+            <Table.Td>
+              <Text size='sm'>{item.label}</Text>
+            </Table.Td>
+            <Table.Td>
+              <Text size='sm'>{item.value}</Text>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
   );
 }
diff --git a/src/frontend/src/components/items/ColorToggle.tsx b/src/frontend/src/components/items/ColorToggle.tsx
@@ -1,24 +1,34 @@
-import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
+import {
+  ActionIcon,
+  Group,
+  Tooltip,
+  useMantineColorScheme
+} from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 
+import { t } from '@lingui/macro';
 import { vars } from '../../theme';
 
 export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
     <Group justify='center'>
-      <ActionIcon
-        onClick={toggleColorScheme}
-        size='lg'
-        style={{
-          color:
-            colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
-        }}
-        variant='transparent'
-      >
-        {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
-      </ActionIcon>
+      <Tooltip label={t`Toggle color scheme`}>
+        <ActionIcon
+          onClick={toggleColorScheme}
+          size='lg'
+          style={{
+            color:
+              colorScheme === 'dark'
+                ? vars.colors.yellow[4]
+                : vars.colors.blue[6]
+          }}
+          variant='transparent'
+        >
+          {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
+        </ActionIcon>
+      </Tooltip>
     </Group>
   );
 }
diff --git a/src/frontend/src/components/items/LanguageToggle.tsx b/src/frontend/src/components/items/LanguageToggle.tsx
@@ -1,7 +1,8 @@
-import { ActionIcon, Group } from '@mantine/core';
+import { ActionIcon, Group, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconLanguage } from '@tabler/icons-react';
 
+import { t } from '@lingui/macro';
 import { LanguageSelect } from './LanguageSelect';
 
 export function LanguageToggle() {
@@ -16,13 +17,15 @@ export function LanguageToggle() {
         padding: open === true ? 8 : 0
       }}
     >
-      <ActionIcon
-        onClick={() => toggle.toggle()}
-        size='lg'
-        variant='transparent'
-      >
-        <IconLanguage />
-      </ActionIcon>
+      <Tooltip label={t`Select language`}>
+        <ActionIcon
+          onClick={() => toggle.toggle()}
+          size='lg'
+          variant='transparent'
+        >
+          <IconLanguage />
+        </ActionIcon>
+      </Tooltip>
       {open && (
         <Group>
           <LanguageSelect />

diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import {
   BackgroundImage,
   Center,
@@ -18,6 +18,7 @@ import {
   RegistrationForm
 } from '../../components/forms/AuthenticationForm';
 import { InstanceOptions } from '../../components/forms/InstanceOptions';
+import { StylishText } from '../../components/items/StylishText';
 import { defaultHostKey } from '../../defaults/defaultHostList';
 import {
   checkLoginState,
@@ -128,14 +129,11 @@ export default function Login() {
               />
             ) : (
               <>
-                <Paper radius='md' p='xl' withBorder>
-                  <Text size='lg' fw={500}>
-                    {loginMode ? (
-                      <Trans>Welcome, log in below</Trans>
-                    ) : (
-                      <Trans>Register below</Trans>
-                    )}
-                  </Text>
+                <Paper p='xl' withBorder>
+                  <StylishText size='xl'>
+                    {loginMode ? t`Login` : t`Register`}
+                  </StylishText>
+                  <Divider p='xs' />
                   {loginMode ? <AuthenticationForm /> : <RegistrationForm />}
                   <ModeSelector loginMode={loginMode} setMode={setMode} />
                   {LoginMessage}