Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-12 08:25:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

🔧 Use PasswordInput for credentials

Browse Source
This commit is contained in:
ajnart
2022-08-01 14:13:35 +02:00
parent 84fdd705b6
commit ff5a334f79
1 changed files with 138 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/components/AppShelf/AddAppShelfItem.tsx
View File

@@ -8,7 +8,7 @@ import {
LoadingOverlay, LoadingOverlay,
Modal, Modal,
MultiSelect, MultiSelect,
ScrollArea, PasswordInput,
Select, Select,
Switch, Switch,
Tabs, Tabs,
@@ -194,146 +194,144 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
> >
<Tabs grow> <Tabs grow>
<Tabs.Tab label="Options"> <Tabs.Tab label="Options">
<ScrollArea style={{ height: 500 }} scrollbarSize={4}> <Group direction="column" grow>
<Group direction="column" grow> <TextInput
<TextInput required
required label="Service name"
label="Service name" placeholder="Plex"
placeholder="Plex" {...form.getInputProps('name')}
{...form.getInputProps('name')} />
/>
<TextInput <TextInput
required required
label="Icon URL" label="Icon URL"
placeholder={DEFAULT_ICON} placeholder={DEFAULT_ICON}
{...form.getInputProps('icon')} {...form.getInputProps('icon')}
/> />
<TextInput <TextInput
required required
label="Service URL" label="Service URL"
placeholder="http://localhost:7575" placeholder="http://localhost:7575"
{...form.getInputProps('url')} {...form.getInputProps('url')}
/> />
<TextInput <TextInput
label="On Click URL" label="On Click URL"
placeholder="http://sonarr.example.com" placeholder="http://sonarr.example.com"
{...form.getInputProps('openedUrl')} {...form.getInputProps('openedUrl')}
/> />
<Select <Select
label="Service type" label="Service type"
defaultValue="Other" defaultValue="Other"
placeholder="Pick one" placeholder="Pick one"
required required
searchable searchable
data={ServiceTypeList} data={ServiceTypeList}
{...form.getInputProps('type')} {...form.getInputProps('type')}
/> />
<Select <Select
label="Category" label="Category"
data={categoryList} data={categoryList}
placeholder="Select a category or create a new one" placeholder="Select a category or create a new one"
nothingFound="Nothing found" nothingFound="Nothing found"
searchable searchable
clearable clearable
creatable creatable
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
getCreateLabel={(query) => `+ Create "${query}"`} getCreateLabel={(query) => `+ Create "${query}"`}
onCreate={(query) => {}} onCreate={(query) => {}}
{...form.getInputProps('category')} {...form.getInputProps('category')}
/> />
<LoadingOverlay visible={isLoading} /> <LoadingOverlay visible={isLoading} />
{(form.values.type === 'Sonarr' || {(form.values.type === 'Sonarr' ||
form.values.type === 'Radarr' || form.values.type === 'Radarr' ||
form.values.type === 'Lidarr' || form.values.type === 'Lidarr' ||
form.values.type === 'Readarr') && ( form.values.type === 'Readarr') && (
<> <>
<TextInput <TextInput
required required
label="API key" label="API key"
placeholder="Your API key" placeholder="Your API key"
value={form.values.apiKey} value={form.values.apiKey}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('apiKey', event.currentTarget.value); form.setFieldValue('apiKey', event.currentTarget.value);
}} }}
error={form.errors.apiKey && 'Invalid API key'} error={form.errors.apiKey && 'Invalid API key'}
/> />
<Tip> <Tip>
Get your API key{' '} Get your API key{' '}
<Anchor <Anchor
target="_blank" target="_blank"
weight="bold" weight="bold"
style={{ fontStyle: 'inherit', fontSize: 'inherit' }} style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
href={`${hostname}/settings/general`} href={`${hostname}/settings/general`}
> >
here. here.
</Anchor> </Anchor>
</Tip> </Tip>
</> </>
)} )}
{form.values.type === 'qBittorrent' && ( {form.values.type === 'qBittorrent' && (
<> <>
<TextInput <TextInput
required required
label="Username" label="Username"
placeholder="admin" placeholder="admin"
value={form.values.username} value={form.values.username}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('username', event.currentTarget.value); form.setFieldValue('username', event.currentTarget.value);
}} }}
error={form.errors.username && 'Invalid username'} error={form.errors.username && 'Invalid username'}
/> />
<TextInput <PasswordInput
required required
label="Password" label="Password"
placeholder="adminadmin" placeholder="adminadmin"
value={form.values.password} value={form.values.password}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value); form.setFieldValue('password', event.currentTarget.value);
}} }}
error={form.errors.password && 'Invalid password'} error={form.errors.password && 'Invalid password'}
/> />
</> </>
)} )}
{form.values.type === 'Deluge' && ( {form.values.type === 'Deluge' && (
<> <>
<TextInput <PasswordInput
label="Password" label="Password"
placeholder="password" placeholder="password"
value={form.values.password} value={form.values.password}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value); form.setFieldValue('password', event.currentTarget.value);
}} }}
error={form.errors.password && 'Invalid password'} error={form.errors.password && 'Invalid password'}
/> />
</> </>
)} )}
{form.values.type === 'Transmission' && ( {form.values.type === 'Transmission' && (
<> <>
<TextInput <TextInput
label="Username" label="Username"
placeholder="admin" placeholder="admin"
value={form.values.username} value={form.values.username}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('username', event.currentTarget.value); form.setFieldValue('username', event.currentTarget.value);
}} }}
error={form.errors.username && 'Invalid username'} error={form.errors.username && 'Invalid username'}
/> />
<TextInput <PasswordInput
label="Password" label="Password"
placeholder="adminadmin" placeholder="adminadmin"
value={form.values.password} value={form.values.password}
onChange={(event) => { onChange={(event) => {
form.setFieldValue('password', event.currentTarget.value); form.setFieldValue('password', event.currentTarget.value);
}} }}
error={form.errors.password && 'Invalid password'} error={form.errors.password && 'Invalid password'}
/> />
</> </>
)} )}
</Group> </Group>
</ScrollArea>
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab label="Advanced Options"> <Tabs.Tab label="Advanced Options">
<Group direction="column" grow> <Group direction="column" grow>