Add files

src/renderer/features/servers/components/add-server-form.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { Stack, Group, Checkbox } from '@mantine/core';
+import { Button, PasswordInput, SegmentedControl, TextInput } from '/@/renderer/components';
+import { useForm } from '@mantine/form';
+import { useFocusTrap } from '@mantine/hooks';
+import { closeAllModals } from '@mantine/modals';
+import { nanoid } from 'nanoid/non-secure';
+import { jellyfinApi } from '/@/renderer/api/jellyfin.api';
+import { navidromeApi } from '/@/renderer/api/navidrome.api';
+import { subsonicApi } from '/@/renderer/api/subsonic.api';
+import { AuthenticationResponse } from '/@/renderer/api/types';
+import { toast } from '/@/renderer/components';
+import { useAuthStoreActions } from '/@/renderer/store';
+import { ServerType } from '/@/renderer/types';
+
+const SERVER_TYPES = [
+  { label: 'Jellyfin', value: ServerType.JELLYFIN },
+  { label: 'Navidrome', value: ServerType.NAVIDROME },
+  { label: 'Subsonic', value: ServerType.SUBSONIC },
+];
+
+const AUTH_FUNCTIONS = {
+  [ServerType.JELLYFIN]: jellyfinApi.authenticate,
+  [ServerType.NAVIDROME]: navidromeApi.authenticate,
+  [ServerType.SUBSONIC]: subsonicApi.authenticate,
+};
+
+interface AddServerFormProps {
+  onCancel: () => void;
+}
+
+export const AddServerForm = ({ onCancel }: AddServerFormProps) => {
+  const focusTrapRef = useFocusTrap(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const { addServer } = useAuthStoreActions();
+
+  const form = useForm({
+    initialValues: {
+      legacyAuth: false,
+      name: '',
+      password: '',
+      type: ServerType.JELLYFIN,
+      url: 'http://',
+      username: '',
+    },
+  });
+
+  const isSubmitDisabled =
+    !form.values.name || !form.values.url || !form.values.username || !form.values.password;
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    const authFunction = AUTH_FUNCTIONS[values.type];
+
+    if (!authFunction) {
+      return toast.error({ message: 'Selected server type is invalid' });
+    }
+
+    try {
+      setIsLoading(true);
+      const data: AuthenticationResponse = await authFunction(values.url, {
+        legacy: values.legacyAuth,
+        password: values.password,
+        username: values.username,
+      });
+
+      addServer({
+        credential: data.credential,
+        id: nanoid(),
+        name: values.name,
+        ndCredential: data.ndCredential,
+        type: values.type,
+        url: values.url,
+        userId: data.userId,
+        username: data.username,
+      });
+
+      toast.success({ message: 'Server added' });
+      closeAllModals();
+    } catch (err: any) {
+      setIsLoading(false);
+      return toast.error({ message: err?.message });
+    }
+
+    return setIsLoading(false);
+  });
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack
+        ref={focusTrapRef}
+        m={5}
+      >
+        <SegmentedControl
+          data={SERVER_TYPES}
+          {...form.getInputProps('type')}
+        />
+        <Group grow>
+          <TextInput
+            data-autofocus
+            label="Name"
+            {...form.getInputProps('name')}
+          />
+          <TextInput
+            label="Url"
+            {...form.getInputProps('url')}
+          />
+        </Group>
+        <TextInput
+          label="Username"
+          {...form.getInputProps('username')}
+        />
+        <PasswordInput
+          label="Password"
+          {...form.getInputProps('password')}
+        />
+        {form.values.type === ServerType.SUBSONIC && (
+          <Checkbox
+            label="Enable legacy authentication"
+            {...form.getInputProps('legacyAuth', { type: 'checkbox' })}
+          />
+        )}
+        <Group position="right">
+          <Button
+            variant="subtle"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            disabled={isSubmitDisabled}
+            loading={isLoading}
+            type="submit"
+            variant="filled"
+          >
+            Add
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

src/renderer/features/servers/components/edit-server-form.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { Checkbox, Stack, Group } from '@mantine/core';
+import { Button, PasswordInput, TextInput, toast } from '/@/renderer/components';
+import { useForm } from '@mantine/form';
+import { closeAllModals } from '@mantine/modals';
+import { nanoid } from 'nanoid/non-secure';
+import { RiInformationLine } from 'react-icons/ri';
+import { jellyfinApi } from '/@/renderer/api/jellyfin.api';
+import { navidromeApi } from '/@/renderer/api/navidrome.api';
+import { subsonicApi } from '/@/renderer/api/subsonic.api';
+import { AuthenticationResponse } from '/@/renderer/api/types';
+import { useAuthStoreActions } from '/@/renderer/store';
+import { ServerListItem, ServerType } from '/@/renderer/types';
+
+interface EditServerFormProps {
+  isUpdate?: boolean;
+  onCancel: () => void;
+  server: ServerListItem;
+}
+
+const AUTH_FUNCTIONS = {
+  [ServerType.JELLYFIN]: jellyfinApi.authenticate,
+  [ServerType.NAVIDROME]: navidromeApi.authenticate,
+  [ServerType.SUBSONIC]: subsonicApi.authenticate,
+};
+
+export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormProps) => {
+  const { updateServer, setCurrentServer } = useAuthStoreActions();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm({
+    initialValues: {
+      legacyAuth: false,
+      name: server?.name,
+      password: '',
+      type: server?.type,
+      url: server?.url,
+      username: server?.username,
+    },
+  });
+
+  const isSubsonic = form.values.type === ServerType.SUBSONIC;
+
+  const isSubmitDisabled =
+    !form.values.name || !form.values.url || !form.values.username || !form.values.password;
+
+  const handleSubmit = form.onSubmit(async (values) => {
+    const authFunction = AUTH_FUNCTIONS[values.type];
+
+    if (!authFunction) {
+      return toast.error({ message: 'Selected server type is invalid' });
+    }
+
+    try {
+      setIsLoading(true);
+      const data: AuthenticationResponse = await authFunction(values.url, {
+        legacy: values.legacyAuth,
+        password: values.password,
+        username: values.username,
+      });
+
+      const serverItem = {
+        credential: data.credential,
+        id: nanoid(),
+        name: values.name,
+        ndCredential: data.ndCredential,
+        type: values.type,
+        url: values.url,
+        userId: data.userId,
+        username: data.username,
+      };
+
+      updateServer(server.id, serverItem);
+      setCurrentServer(serverItem);
+
+      toast.success({ message: 'Server updated' });
+    } catch (err: any) {
+      setIsLoading(false);
+      return toast.error({ message: err?.message });
+    }
+
+    if (isUpdate) closeAllModals();
+    return setIsLoading(false);
+  });
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack>
+        <TextInput
+          required
+          label="Name"
+          rightSection={form.isDirty('name') && <RiInformationLine color="red" />}
+          {...form.getInputProps('name')}
+        />
+        <TextInput
+          required
+          label="Url"
+          rightSection={form.isDirty('url') && <RiInformationLine color="red" />}
+          {...form.getInputProps('url')}
+        />
+        <TextInput
+          label="Username"
+          rightSection={form.isDirty('username') && <RiInformationLine color="red" />}
+          {...form.getInputProps('username')}
+        />
+        <PasswordInput
+          label="Password"
+          {...form.getInputProps('password')}
+        />
+        {isSubsonic && (
+          <Checkbox
+            label="Enable legacy authentication"
+            {...form.getInputProps('legacyAuth', {
+              type: 'checkbox',
+            })}
+          />
+        )}
+        <Group position="right">
+          <Button
+            variant="subtle"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button
+            disabled={isSubmitDisabled}
+            loading={isLoading}
+            type="submit"
+            variant="filled"
+          >
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

src/renderer/features/servers/components/server-list-item.tsx

@@ -0,0 +1,75 @@
+import { Stack, Group, Divider } from '@mantine/core';
+import { Button, Text, TimeoutButton } from '/@/renderer/components';
+import { useDisclosure } from '@mantine/hooks';
+import { RiDeleteBin2Line, RiEdit2Fill } from 'react-icons/ri';
+import { EditServerForm } from '/@/renderer/features/servers/components/edit-server-form';
+import { ServerSection } from '/@/renderer/features/servers/components/server-section';
+import { useAuthStoreActions } from '/@/renderer/store';
+import { ServerListItem as ServerItem } from '/@/renderer/types';
+
+interface ServerListItemProps {
+  server: ServerItem;
+}
+
+export const ServerListItem = ({ server }: ServerListItemProps) => {
+  const [edit, editHandlers] = useDisclosure(false);
+  const { deleteServer } = useAuthStoreActions();
+
+  const handleDeleteServer = () => {
+    deleteServer(server.id);
+  };
+
+  return (
+    <Stack
+      mt="1rem"
+      p="1rem"
+      spacing="xl"
+    >
+      <ServerSection
+        title={
+          <Group position="apart">
+            <Text>Server details</Text>
+            <Group spacing="md" />
+          </Group>
+        }
+      >
+        {edit ? (
+          <EditServerForm
+            server={server}
+            onCancel={() => editHandlers.toggle()}
+          />
+        ) : (
+          <Group position="apart">
+            <Group>
+              <Stack>
+                <Text>URL</Text>
+                <Text>Username</Text>
+              </Stack>
+              <Stack>
+                <Text size="sm">{server.url}</Text>
+                <Text size="sm">{server.username}</Text>
+              </Stack>
+            </Group>
+            <Group>
+              <Button
+                tooltip={{ label: 'Edit server details' }}
+                variant="subtle"
+                onClick={() => editHandlers.toggle()}
+              >
+                <RiEdit2Fill />
+              </Button>
+            </Group>
+          </Group>
+        )}
+      </ServerSection>
+      <Divider my="xl" />
+      <TimeoutButton
+        leftIcon={<RiDeleteBin2Line />}
+        timeoutProps={{ callback: handleDeleteServer, duration: 1500 }}
+        variant="subtle"
+      >
+        Remove server
+      </TimeoutButton>
+    </Stack>
+  );
+};

src/renderer/features/servers/components/server-list.tsx

@@ -0,0 +1,66 @@
+import { Group } from '@mantine/core';
+import { Accordion, Button, ContextModalVars } from '/@/renderer/components';
+import { openContextModal } from '@mantine/modals';
+import { RiAddFill, RiServerFill } from 'react-icons/ri';
+import { AddServerForm } from '/@/renderer/features/servers/components/add-server-form';
+import { ServerListItem } from '/@/renderer/features/servers/components/server-list-item';
+import { useServerList } from '/@/renderer/store';
+import { titleCase } from '/@/renderer/utils';
+
+export const ServerList = () => {
+  const serverListQuery = useServerList();
+
+  const handleAddServerModal = () => {
+    openContextModal({
+      innerProps: {
+        modalBody: (vars: ContextModalVars) => (
+          <AddServerForm onCancel={() => vars.context.closeModal(vars.id)} />
+        ),
+      },
+      modal: 'base',
+      title: 'Add server',
+    });
+  };
+
+  return (
+    <>
+      <Group
+        mb={10}
+        position="right"
+        sx={{
+          position: 'absolute',
+          right: 55,
+          transform: 'translateY(-4rem)',
+        }}
+      >
+        <Button
+          autoFocus
+          compact
+          leftIcon={<RiAddFill size={15} />}
+          size="sm"
+          variant="filled"
+          onClick={handleAddServerModal}
+        >
+          Add server
+        </Button>
+      </Group>
+      <Accordion variant="separated">
+        {serverListQuery?.map((s) => (
+          <Accordion.Item
+            key={s.id}
+            value={s.name}
+          >
+            <Accordion.Control icon={<RiServerFill size={15} />}>
+              <Group position="apart">
+                {titleCase(s.type)} - {s.name}
+              </Group>
+            </Accordion.Control>
+            <Accordion.Panel>
+              <ServerListItem server={s} />
+            </Accordion.Panel>
+          </Accordion.Item>
+        ))}
+      </Accordion>
+    </>
+  );
+};

src/renderer/features/servers/components/server-section.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components';
+
+interface ServerSectionProps {
+  children: React.ReactNode;
+  title: string | React.ReactNode;
+}
+
+const Container = styled.div``;
+
+const Section = styled.div`
+  padding: 1rem;
+  border: 1px dashed var(--generic-border-color);
+`;
+
+export const ServerSection = ({ title, children }: ServerSectionProps) => {
+  return (
+    <Container>
+      {React.isValidElement(title) ? title : <Text>{title}</Text>}
+      <Section>{children}</Section>
+    </Container>
+  );
+};