added walltaker credential input

Author: clragon

README.md

@@ -43,7 +43,9 @@ yarn
 yarn build
 yarn preview
 ```
+
 4. open one of the URLs listed in your browser
+
 ### Social
 
 - We have an [e6 forum thread](https://e621.net/forum_topics/23796). We'd love to hear your feedback.

src/e621/E621Credentials.tsx

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { E621Service } from './E621Service';
 import { useCallback, useMemo, useState } from 'react';
 import {
+  Button,
   SettingsInfo,
   SettingsLabel,
   Space,
@@ -30,21 +31,6 @@ const StyledE621SaveCredentials = styled.div`
   align-items: center;
 `;
 
-const StyledE621SaveCredentialsButton = styled.button`
-  background: var(--button-background);
-  color: var(--button-color);
-  border-radius: var(--border-radius);
-  padding: 4px 8px;
-  transition:
-    background 0.2s,
-    opacity 0.2s;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  &:hover {
-    background: var(--primary);
-  }
-  opacity: ${props => (props.disabled ? 0.5 : 1)};
-`;
-
 export const E621CredentialsInput = ({
   service,
   initialValue,
@@ -85,6 +71,7 @@ export const E621CredentialsInput = ({
       <Space size='small' />
       <SettingsLabel>Username</SettingsLabel>
       <TextInput
+        name='e621-username'
         style={{ gridColumn: '2 / -1' }}
         value={input?.username}
         onChange={username =>
@@ -100,6 +87,7 @@ export const E621CredentialsInput = ({
       <Space size='small' />
       <SettingsLabel>API Key</SettingsLabel>
       <TextInput
+        name='e621-api-key'
         style={{ gridColumn: '2 / -1' }}
         value={input?.apiKey}
         onChange={apiKey =>
@@ -117,12 +105,12 @@ export const E621CredentialsInput = ({
       <StyledE621SaveCredentials>
         {loading && <Spinner />}
         <Space size='small' />
-        <StyledE621SaveCredentialsButton
+        <Button
           onClick={!loading ? onSave : undefined}
           disabled={!hasData || locked}
         >
           Save
-        </StyledE621SaveCredentialsButton>
+        </Button>
       </StyledE621SaveCredentials>
     </StyledE621CredentialsInput>
   );

src/e621/E621Search.tsx

@@ -94,7 +94,7 @@ export const E621Search = () => {
 
   return (
     <StyledE621Search>
-      <SettingsDescription>Add images from e621</SettingsDescription>
+      <SettingsDescription>Add images from e621's search</SettingsDescription>
       <SettingsLabel htmlFor='tags'>Tags</SettingsLabel>
       <TextInput
         id='tags'

src/local/LocalImport.tsx

@@ -86,7 +86,9 @@ export const LocalImport = () => {
 
   return (
     <StyledLocalImport>
-      <SettingsDescription>Add images from your device</SettingsDescription>
+      <SettingsDescription>
+        Add images from your device storage
+      </SettingsDescription>
       <Space size='medium' />
       <input
         type='file'

src/walltaker/WalltakerCredentials.tsx

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import { useCallback, useMemo, useState } from 'react';
+import { Button, SettingsLabel, Space, Spinner, TextInput } from '../common';
+import { WalltakerService } from './WalltakerService';
+import { WalltakerCredentials } from './WalltakerProvider';
+
+export interface WalltakerCredentialsInputProps {
+  service: WalltakerService;
+  initialValue?: Partial<WalltakerCredentials>;
+  onSaved?: (credentials: WalltakerCredentials) => void;
+  disabled?: boolean;
+}
+
+const StyledE621CredentialsInput = styled.div`
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+`;
+
+const StyledE621SaveCredentials = styled.div`
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`;
+
+export const WalltakerCredentialsInput = ({
+  service,
+  initialValue,
+  onSaved,
+  disabled,
+}: WalltakerCredentialsInputProps) => {
+  const [input, setInput] = useState<Partial<WalltakerCredentials>>({
+    ...initialValue,
+    username: '',
+    apiKey: '',
+  });
+  const [loading, setLoading] = useState(false);
+
+  const onSave = useCallback(async () => {
+    const credentials = input as WalltakerCredentials;
+    setLoading(true);
+    const valid = await service.testCredentials(credentials);
+    if (valid) {
+      onSaved?.(credentials);
+    }
+  }, [input, onSaved, service]);
+
+  const hasData = useMemo(
+    () => input?.username && input?.apiKey,
+    [input?.username, input?.apiKey]
+  );
+
+  const locked = useMemo(() => loading || disabled, [loading, disabled]);
+
+  return (
+    <StyledE621CredentialsInput>
+      <Space size='small' />
+      <SettingsLabel>Username</SettingsLabel>
+      <TextInput
+        name='walltaker-username'
+        style={{ gridColumn: '2 / -1' }}
+        value={input?.username}
+        onChange={username =>
+          setInput({
+            ...input,
+            username,
+          })
+        }
+        placeholder='Username'
+        autoComplete='username'
+        disabled={locked}
+      />
+      <Space size='small' />
+      <SettingsLabel>API Key</SettingsLabel>
+      <TextInput
+        name='walltaker-api-key'
+        style={{ gridColumn: '2 / -1' }}
+        value={input?.apiKey}
+        onChange={apiKey =>
+          setInput({
+            ...input,
+            apiKey,
+          })
+        }
+        placeholder='API Key'
+        type='password'
+        autoComplete='current-password'
+        disabled={locked}
+      />
+      <Space size='small' />
+      <StyledE621SaveCredentials>
+        {loading && <Spinner />}
+        <Space size='small' />
+        <Button
+          onClick={!loading ? onSave : undefined}
+          disabled={!hasData || locked}
+        >
+          Save
+        </Button>
+      </StyledE621SaveCredentials>
+    </StyledE621CredentialsInput>
+  );
+};

src/walltaker/WalltakerProvider.tsx

@@ -14,9 +14,14 @@ import { uniqBy } from 'lodash';
 import { useImages } from '../settings';
 import { ImageServiceType, ImageType } from '../types';
 
+export interface WalltakerCredentials {
+  username: string;
+  apiKey?: string;
+}
+
 export interface WalltakerSettings {
   enabled?: boolean;
-  username?: string;
+  credentials?: WalltakerCredentials;
   ids?: number[];
 }