Changed from username and password to api key for jellyfin

src/components/Board/Customize/Appearance/AppearanceCustomization.tsx

@@ -16,7 +16,11 @@ import { useTranslation } from 'next-i18next';
 import { highlight, languages } from 'prismjs';
 import Editor from 'react-simple-code-editor';
 import { useColorTheme } from '~/tools/color';
-import { BackgroundImageAttachment, BackgroundImageRepeat, BackgroundImageSize } from '~/types/settings';
+import {
+  BackgroundImageAttachment,
+  BackgroundImageRepeat,
+  BackgroundImageSize,
+} from '~/types/settings';
 
 import { useBoardCustomizationFormContext } from '../form';
 

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -110,7 +110,7 @@ export const EditAppModal = ({
 
     // also close the parent modal
     context.closeAll();
-    umami.track('Add app', { name:  values.name });
+    umami.track('Add app', { name: values.name });
   };
 
   const [activeTab, setActiveTab] = useState<EditAppModalTab>('general');

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx

@@ -21,6 +21,7 @@ interface GenericSecretInputProps {
   label: string;
   value: string;
   setIcon: Icon;
+  required: boolean;
   secretIsPresent: boolean;
   type: AppIntegrationPropertyAccessabilityType;
   onClickUpdateButton: (value: string | undefined) => void;
@@ -31,6 +32,7 @@ export const GenericSecretInput = ({
   value,
   setIcon,
   secretIsPresent,
+  required,
   type,
   onClickUpdateButton,
   ...props
@@ -105,7 +107,7 @@ export const GenericSecretInput = ({
           <Flex gap={10} justify="end" align="end">
             {displayUpdateField === true ? (
               <PasswordInput
-                required
+                required={required}
                 defaultValue={value}
                 placeholder="new secret"
                 styles={{ root: { width: 200 } }}

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -7,7 +7,7 @@ import {
   AppIntegrationPropertyType,
   AppIntegrationType,
   AppType,
-  IntegrationField,
+  IntegrationFieldType,
   integrationFieldDefinitions,
   integrationFieldProperties,
 } from '~/types/app';
@@ -31,12 +31,12 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
     }
 
     const requiredProperties = Object.entries(integrationFieldDefinitions).filter(([k, v]) => {
-      const val = integrationFieldProperties[integrationType];
-      return val.includes(k as IntegrationField);
+      const property = integrationFieldProperties[integrationType];
+      return property.map((a) => a.type).includes(k as IntegrationFieldType);
     })!;
     return requiredProperties.map(([k, value]) => ({
       type: value.type,
-      field: k as IntegrationField,
+      field: k as IntegrationFieldType,
       value: undefined,
       isDefined: false,
     }));
@@ -186,6 +186,6 @@ export const availableIntegrations = [
   {
     value: 'homeAssistant',
     image: 'https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/home-assistant.png',
-    label: 'Home Assistant'
-  }
+    label: 'Home Assistant',
+  },
 ] as const satisfies Readonly<SelectItem[]>;

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx

@@ -4,7 +4,6 @@ import { IconKey } from '@tabler/icons-react';
 import {
   AppIntegrationPropertyType,
   AppType,
-  IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
 } from '~/types/app';
@@ -26,18 +25,18 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
     <Stack spacing="xs" mb="md">
       {displayedProperties.map((property, index) => {
         const [_, definition] = Object.entries(integrationFieldDefinitions).find(
-          ([key]) => property === key
+          ([key]) => property.type === key
         )!;
 
         let indexInFormValue =
-          form.values.integration?.properties.findIndex((p) => p.field === property) ?? -1;
+          form.values.integration?.properties.findIndex((p) => p.field === property.type) ?? -1;
         if (indexInFormValue === -1) {
           const { type } = Object.entries(integrationFieldDefinitions).find(
-            ([k, v]) => k === property
+            ([k, v]) => k === property.type
           )![1];
           const newProperty: AppIntegrationPropertyType = {
             type,
-            field: property as IntegrationField,
+            field: property.type,
             isDefined: false,
           };
           form.insertListItem('integration.properties', newProperty);
@@ -47,14 +46,18 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
 
         const isPresent = formValue?.isDefined;
         const accessabilityType = formValue?.type;
+        console.log(
+          `index: ${index}, indexInFormValue: ${indexInFormValue}, isPresent: ${isPresent}, accessabilityType: ${accessabilityType}`
+        );
 
         if (!definition) {
           return (
             <GenericSecretInput
+              required={property.isRequired}
               onClickUpdateButton={(value) => {
-                form.setFieldValue(`integration.properties.${index}.value`, value);
+                form.setFieldValue(`integration.properties.${indexInFormValue}.value`, value);
                 form.setFieldValue(
-                  `integration.properties.${index}.isDefined`,
+                  `integration.properties.${indexInFormValue}.isDefined`,
                   value !== undefined
                 );
               }}
@@ -63,23 +66,27 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
               secretIsPresent={isPresent}
               setIcon={IconKey}
               type={accessabilityType}
-              {...form.getInputProps(`integration.properties.${index}.value`)}
+              {...form.getInputProps(`integration.properties.${indexInFormValue}.value`)}
             />
           );
         }
 
         return (
           <GenericSecretInput
+            required={property.isRequired}
             onClickUpdateButton={(value) => {
-              form.setFieldValue(`integration.properties.${index}.value`, value);
-              form.setFieldValue(`integration.properties.${index}.isDefined`, value !== undefined);
+              form.setFieldValue(`integration.properties.${indexInFormValue}.value`, value);
+              form.setFieldValue(
+                `integration.properties.${indexInFormValue}.isDefined`,
+                value !== undefined
+              );
             }}
             key={`input-${definition.label}`}
             label={definition.label}
             secretIsPresent={isPresent}
             setIcon={definition.icon}
             type={accessabilityType}
-            {...form.getInputProps(`integration.properties.${index}.value`)}
+            {...form.getInputProps(`integration.properties.${indexInFormValue}.value`)}
           />
         );
       })}

src/components/Dashboard/Modals/RenameBoard/RenameBoardModal.tsx

@@ -1,35 +1,42 @@
-import { modals } from '@mantine/modals';
 import { Alert, Button, TextInput } from '@mantine/core';
-import { api } from '~/utils/api';
 import { useForm, zodResolver } from '@mantine/form';
-import { z } from 'zod';
+import { modals } from '@mantine/modals';
 import { IconAlertCircle } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { z } from 'zod';
+import { api } from '~/utils/api';
 import { configNameSchema } from '~/validations/boards';
 
 type RenameBoardModalProps = {
   boardName: string;
   configNames: string[];
   onClose: () => void;
-}
+};
 
 export const RenameBoardModal = ({ boardName, configNames, onClose }: RenameBoardModalProps) => {
   const { t } = useTranslation(['manage/boards', 'common']);
 
   const utils = api.useUtils();
-  const { mutateAsync: mutateRenameBoardAsync, isLoading, isError, error } = api.boards.renameBoard.useMutation({
+  const {
+    mutateAsync: mutateRenameBoardAsync,
+    isLoading,
+    isError,
+    error,
+  } = api.boards.renameBoard.useMutation({
     onSettled: () => {
       void utils.boards.all.invalidate();
-    }
+    },
   });
 
   const form = useForm({
     initialValues: {
       newName: '',
     },
-    validate: zodResolver(z.object({
-      newName: configNameSchema.refine(value => !configNames.includes(value)),
-    })),
+    validate: zodResolver(
+      z.object({
+        newName: configNameSchema.refine((value) => !configNames.includes(value)),
+      })
+    ),
     validateInputOnBlur: true,
     validateInputOnChange: true,
   });
@@ -46,21 +53,17 @@ export const RenameBoardModal = ({ boardName, configNames, onClose }: RenameBoar
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       {isError && error && (
-        <Alert icon={<IconAlertCircle size={"1rem"} />} mb={"md"}>
+        <Alert icon={<IconAlertCircle size={'1rem'} />} mb={'md'}>
           {error.message}
         </Alert>
       )}
       <TextInput
         label={t('cards.menu.rename.modal.fields.name.label')}
         placeholder={t('cards.menu.rename.modal.fields.name.placeholder') as string}
         data-autofocus
-        {...form.getInputProps('newName')} />
-      <Button
-        loading={isLoading}
-        fullWidth
-        mt="md"
-        type={'submit'}
-        variant={"light"}>
+        {...form.getInputProps('newName')}
+      />
+      <Button loading={isLoading} fullWidth mt="md" type={'submit'} variant={'light'}>
         {t('common:confirm')}
       </Button>
     </form>

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -52,6 +52,6 @@ function getCurrentShapeSize(size: number) {
   return size >= GridstackBreakpoints.large
     ? 'lg'
     : size >= GridstackBreakpoints.medium
-    ? 'md'
-    : 'sm';
+      ? 'md'
+      : 'sm';
 }

src/components/Manage/Board/create-board.modal.tsx

@@ -59,7 +59,7 @@ export const CreateBoardModal = ({ id }: ContextModalProps<{}>) => {
           <Button
             type="submit"
             onClick={async () => {
-              umami.track('Create new board')
+              umami.track('Create new board');
             }}
             disabled={isLoading}
             variant="light"

src/components/Manage/User/Create/review-input-step.tsx

@@ -111,7 +111,7 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
               password: values.security.password,
               email: values.account.eMail === '' ? undefined : values.account.eMail,
             });
-            umami.track('Create user', { username: values.account.username});
+            umami.track('Create user', { username: values.account.username });
           }}
           loading={isLoading}
           rightIcon={<IconCheck size="1rem" />}

src/components/Manage/User/Edit/ManageUserRoles.tsx

@@ -1,10 +1,12 @@
-import { ActionIcon, Badge, Box, Group, Title, Text, Tooltip, Button } from '@mantine/core';
-import { openRoleChangeModal } from '~/components/Manage/User/change-user-role.modal';
+import { ActionIcon, Badge, Box, Button, Group, Text, Title, Tooltip } from '@mantine/core';
 import { IconUserDown, IconUserUp } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
 import { useSession } from 'next-auth/react';
+import { useTranslation } from 'next-i18next';
+import { openRoleChangeModal } from '~/components/Manage/User/change-user-role.modal';
 
-export const ManageUserRoles = ({ user }: {
+export const ManageUserRoles = ({
+  user,
+}: {
   user: {
     image: string | null;
     id: string;
@@ -15,25 +17,28 @@ export const ManageUserRoles = ({ user }: {
     salt: string | null;
     isAdmin: boolean;
     isOwner: boolean;
-  }
+  };
 }) => {
   const { t } = useTranslation(['manage/users/edit', 'manage/users']);
   const { data: sessionData } = useSession();
   return (
     <Box maw={500}>
-      <Title order={3}>
-        {t('sections.roles.title')}
-      </Title>
+      <Title order={3}>{t('sections.roles.title')}</Title>
 
       <Group mb={'md'}>
         <Text>{t('sections.roles.currentRole')}</Text>
-        {user.isOwner ? (<Badge>{t('sections.roles.badges.owner')}</Badge>) : user.isAdmin ? (
-          <Badge>{t('sections.roles.badges.admin')}</Badge>) : (<Badge>{t('sections.roles.badges.normal')}</Badge>)}
+        {user.isOwner ? (
+          <Badge>{t('sections.roles.badges.owner')}</Badge>
+        ) : user.isAdmin ? (
+          <Badge>{t('sections.roles.badges.admin')}</Badge>
+        ) : (
+          <Badge>{t('sections.roles.badges.normal')}</Badge>
+        )}
       </Group>
 
       {user.isAdmin ? (
         <Button
-          leftIcon={<IconUserDown size='1rem' />}
+          leftIcon={<IconUserDown size="1rem" />}
           disabled={user.id === sessionData?.user?.id || user.isOwner}
           onClick={() => {
             openRoleChangeModal({
@@ -47,7 +52,7 @@ export const ManageUserRoles = ({ user }: {
         </Button>
       ) : (
         <Button
-          leftIcon={<IconUserUp size='1rem' />}
+          leftIcon={<IconUserUp size="1rem" />}
           onClick={() => {
             openRoleChangeModal({
               name: user.name as string,
@@ -56,10 +61,9 @@ export const ManageUserRoles = ({ user }: {
             });
           }}
         >
-
           {t('manage/users:tooltips.promoteToAdmin')}
         </Button>
       )}
     </Box>
   );
-};
+};

src/components/Onboarding/onboarding-steps.tsx

@@ -1,29 +1,31 @@
 import { Stack, Stepper } from '@mantine/core';
 import { useState } from 'react';
+import { api } from '~/utils/api';
 
 import { StepCreateAccount } from './step-create-account';
 import { StepOnboardingFinished } from './step-onboarding-finished';
 import { StepUpdatePathMappings } from './step-update-path-mappings';
-import { api } from '~/utils/api';
 
 export const OnboardingSteps = ({ isUpdate }: { isUpdate: boolean }) => {
   const maximumSteps = isUpdate ? 3 : 2;
 
   const [currentStep, setCurrentStep] = useState(0);
 
-  const nextStep = () => setCurrentStep((current) => {
-    const newValue = (current < maximumSteps ? current + 1 : current);
+  const nextStep = () =>
+    setCurrentStep((current) => {
+      const newValue = current < maximumSteps ? current + 1 : current;
 
-    if (currentStep + 1 >= maximumSteps) {
-      onFinishOnboarding();
-    }
+      if (currentStep + 1 >= maximumSteps) {
+        onFinishOnboarding();
+      }
 
-    return newValue;
-  });
+      return newValue;
+    });
 
   const prevStep = () => setCurrentStep((current) => (current > 0 ? current - 1 : current));
 
-  const { mutate: mutateConfigSchemaVersion } = api.config.updateConfigurationSchemaToLatest.useMutation();
+  const { mutate: mutateConfigSchemaVersion } =
+    api.config.updateConfigurationSchemaToLatest.useMutation();
 
   const onFinishOnboarding = () => {
     mutateConfigSchemaVersion();