Skip to content

Commit ff5a334

Browse files
ajnartajnart
committed
🔧 Use PasswordInput for credentials
1 parent 84fdd70 commit ff5a334

File tree

1 file changed

+138
-140
lines changed

1 file changed

+138
-140
lines changed

‎src/components/AppShelf/AddAppShelfItem.tsx‎

Lines changed: 138 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
LoadingOverlay,
99
Modal,
1010
MultiSelect,
11-
ScrollArea,
11+
PasswordInput,
1212
Select,
1313
Switch,
1414
Tabs,
@@ -194,146 +194,144 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
194194
>
195195
<Tabs grow>
196196
<Tabs.Tab label="Options">
197-
<ScrollArea style={{ height: 500 }} scrollbarSize={4}>
198-
<Group direction="column" grow>
199-
<TextInput
200-
required
201-
label="Service name"
202-
placeholder="Plex"
203-
{...form.getInputProps('name')}
204-
/>
197+
<Group direction="column" grow>
198+
<TextInput
199+
required
200+
label="Service name"
201+
placeholder="Plex"
202+
{...form.getInputProps('name')}
203+
/>
205204

206-
<TextInput
207-
required
208-
label="Icon URL"
209-
placeholder={DEFAULT_ICON}
210-
{...form.getInputProps('icon')}
211-
/>
212-
<TextInput
213-
required
214-
label="Service URL"
215-
placeholder="http://localhost:7575"
216-
{...form.getInputProps('url')}
217-
/>
218-
<TextInput
219-
label="On Click URL"
220-
placeholder="http://sonarr.example.com"
221-
{...form.getInputProps('openedUrl')}
222-
/>
223-
<Select
224-
label="Service type"
225-
defaultValue="Other"
226-
placeholder="Pick one"
227-
required
228-
searchable
229-
data={ServiceTypeList}
230-
{...form.getInputProps('type')}
231-
/>
232-
<Select
233-
label="Category"
234-
data={categoryList}
235-
placeholder="Select a category or create a new one"
236-
nothingFound="Nothing found"
237-
searchable
238-
clearable
239-
creatable
240-
onClick={(e) => {
241-
e.preventDefault();
242-
}}
243-
getCreateLabel={(query) => `+ Create "${query}"`}
244-
onCreate={(query) => {}}
245-
{...form.getInputProps('category')}
246-
/>
247-
<LoadingOverlay visible={isLoading} />
248-
{(form.values.type === 'Sonarr' ||
249-
form.values.type === 'Radarr' ||
250-
form.values.type === 'Lidarr' ||
251-
form.values.type === 'Readarr') && (
252-
<>
253-
<TextInput
254-
required
255-
label="API key"
256-
placeholder="Your API key"
257-
value={form.values.apiKey}
258-
onChange={(event) => {
259-
form.setFieldValue('apiKey', event.currentTarget.value);
260-
}}
261-
error={form.errors.apiKey && 'Invalid API key'}
262-
/>
263-
<Tip>
264-
Get your API key{' '}
265-
<Anchor
266-
target="_blank"
267-
weight="bold"
268-
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
269-
href={`${hostname}/settings/general`}
270-
>
271-
here.
272-
</Anchor>
273-
</Tip>
274-
</>
275-
)}
276-
{form.values.type === 'qBittorrent' && (
277-
<>
278-
<TextInput
279-
required
280-
label="Username"
281-
placeholder="admin"
282-
value={form.values.username}
283-
onChange={(event) => {
284-
form.setFieldValue('username', event.currentTarget.value);
285-
}}
286-
error={form.errors.username && 'Invalid username'}
287-
/>
288-
<TextInput
289-
required
290-
label="Password"
291-
placeholder="adminadmin"
292-
value={form.values.password}
293-
onChange={(event) => {
294-
form.setFieldValue('password', event.currentTarget.value);
295-
}}
296-
error={form.errors.password && 'Invalid password'}
297-
/>
298-
</>
299-
)}
300-
{form.values.type === 'Deluge' && (
301-
<>
302-
<TextInput
303-
label="Password"
304-
placeholder="password"
305-
value={form.values.password}
306-
onChange={(event) => {
307-
form.setFieldValue('password', event.currentTarget.value);
308-
}}
309-
error={form.errors.password && 'Invalid password'}
310-
/>
311-
</>
312-
)}
313-
{form.values.type === 'Transmission' && (
314-
<>
315-
<TextInput
316-
label="Username"
317-
placeholder="admin"
318-
value={form.values.username}
319-
onChange={(event) => {
320-
form.setFieldValue('username', event.currentTarget.value);
321-
}}
322-
error={form.errors.username && 'Invalid username'}
323-
/>
324-
<TextInput
325-
label="Password"
326-
placeholder="adminadmin"
327-
value={form.values.password}
328-
onChange={(event) => {
329-
form.setFieldValue('password', event.currentTarget.value);
330-
}}
331-
error={form.errors.password && 'Invalid password'}
332-
/>
333-
</>
334-
)}
335-
</Group>
336-
</ScrollArea>
205+
<TextInput
206+
required
207+
label="Icon URL"
208+
placeholder={DEFAULT_ICON}
209+
{...form.getInputProps('icon')}
210+
/>
211+
<TextInput
212+
required
213+
label="Service URL"
214+
placeholder="http://localhost:7575"
215+
{...form.getInputProps('url')}
216+
/>
217+
<TextInput
218+
label="On Click URL"
219+
placeholder="http://sonarr.example.com"
220+
{...form.getInputProps('openedUrl')}
221+
/>
222+
<Select
223+
label="Service type"
224+
defaultValue="Other"
225+
placeholder="Pick one"
226+
required
227+
searchable
228+
data={ServiceTypeList}
229+
{...form.getInputProps('type')}
230+
/>
231+
<Select
232+
label="Category"
233+
data={categoryList}
234+
placeholder="Select a category or create a new one"
235+
nothingFound="Nothing found"
236+
searchable
237+
clearable
238+
creatable
239+
onClick={(e) => {
240+
e.preventDefault();
241+
}}
242+
getCreateLabel={(query) => `+ Create "${query}"`}
243+
onCreate={(query) => {}}
244+
{...form.getInputProps('category')}
245+
/>
246+
<LoadingOverlay visible={isLoading} />
247+
{(form.values.type === 'Sonarr' ||
248+
form.values.type === 'Radarr' ||
249+
form.values.type === 'Lidarr' ||
250+
form.values.type === 'Readarr') && (
251+
<>
252+
<TextInput
253+
required
254+
label="API key"
255+
placeholder="Your API key"
256+
value={form.values.apiKey}
257+
onChange={(event) => {
258+
form.setFieldValue('apiKey', event.currentTarget.value);
259+
}}
260+
error={form.errors.apiKey && 'Invalid API key'}
261+
/>
262+
<Tip>
263+
Get your API key{' '}
264+
<Anchor
265+
target="_blank"
266+
weight="bold"
267+
style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
268+
href={`${hostname}/settings/general`}
269+
>
270+
here.
271+
</Anchor>
272+
</Tip>
273+
</>
274+
)}
275+
{form.values.type === 'qBittorrent' && (
276+
<>
277+
<TextInput
278+
required
279+
label="Username"
280+
placeholder="admin"
281+
value={form.values.username}
282+
onChange={(event) => {
283+
form.setFieldValue('username', event.currentTarget.value);
284+
}}
285+
error={form.errors.username && 'Invalid username'}
286+
/>
287+
<PasswordInput
288+
required
289+
label="Password"
290+
placeholder="adminadmin"
291+
value={form.values.password}
292+
onChange={(event) => {
293+
form.setFieldValue('password', event.currentTarget.value);
294+
}}
295+
error={form.errors.password && 'Invalid password'}
296+
/>
297+
</>
298+
)}
299+
{form.values.type === 'Deluge' && (
300+
<>
301+
<PasswordInput
302+
label="Password"
303+
placeholder="password"
304+
value={form.values.password}
305+
onChange={(event) => {
306+
form.setFieldValue('password', event.currentTarget.value);
307+
}}
308+
error={form.errors.password && 'Invalid password'}
309+
/>
310+
</>
311+
)}
312+
{form.values.type === 'Transmission' && (
313+
<>
314+
<TextInput
315+
label="Username"
316+
placeholder="admin"
317+
value={form.values.username}
318+
onChange={(event) => {
319+
form.setFieldValue('username', event.currentTarget.value);
320+
}}
321+
error={form.errors.username && 'Invalid username'}
322+
/>
323+
<PasswordInput
324+
label="Password"
325+
placeholder="adminadmin"
326+
value={form.values.password}
327+
onChange={(event) => {
328+
form.setFieldValue('password', event.currentTarget.value);
329+
}}
330+
error={form.errors.password && 'Invalid password'}
331+
/>
332+
</>
333+
)}
334+
</Group>
337335
</Tabs.Tab>
338336
<Tabs.Tab label="Advanced Options">
339337
<Group direction="column" grow>

0 commit comments

Comments
 (0)