Add FediAuth modal

web/components/modals/FediAuthModal/FediAuthModal.tsx

@@ -1,3 +1,175 @@
-import { FC } from 'react';
+import { Alert, Button, Input, Space, Spin, Collapse } from 'antd';
+import React, { FC, useState } from 'react';
+import styles from './FediAuthModal.module.scss';
+import { validateAccount } from '../../../utils/validators';
 
-export const FediAuthModal: FC = () => <div>Component goes here</div>;
+const { Panel } = Collapse;
+
+export type FediAuthModalProps = {
+  authenticated: boolean;
+  displayName: string;
+  accessToken: string;
+};
+
+export const FediAuthModal: FC<FediAuthModalProps> = ({
+  authenticated,
+  displayName,
+  accessToken,
+}) => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [valid, setValid] = useState(false);
+  const [account, setAccount] = useState('');
+  const [code, setCode] = useState('');
+  const [verifyingCode, setVerifyingCode] = useState(true);
+
+  const message = !authenticated ? (
+    <span>
+      Receive a direct message on the Fediverse to link your account to{' '}
+      <strong>{displayName}</strong>, or login as a previously linked chat user.
+    </span>
+  ) : (
+    <span>
+      <b>You are already authenticated</b>. However, you can add other domains or log in as a
+      different user.
+    </span>
+  );
+
+  let errorMessageText = errorMessage;
+  if (errorMessageText) {
+    if (errorMessageText.includes('url does not support indieauth')) {
+      errorMessageText = 'The provided URL is either invalid or does not support IndieAuth.';
+    }
+  }
+
+  const validate = (acct: string) => {
+    setValid(validateAccount(acct));
+  };
+
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setAccount(e.target.value);
+    validate(e.target.value);
+  };
+
+  const makeRequest = async (url, data) => {
+    const rawResponse = await fetch(url, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    const content = await rawResponse.json();
+    if (content.message) {
+      setErrorMessage(content.message);
+      setLoading(false);
+    }
+  };
+
+  const submitCodePressed = async () => {
+    setLoading(true);
+    const url = `/api/auth/fediverse/verify?accessToken=${accessToken}`;
+    const data = { code };
+
+    try {
+      await makeRequest(url, data);
+
+      // Success. Reload the page.
+      window.location.href = '/';
+    } catch (e) {
+      console.error(e);
+      setErrorMessage(e);
+    }
+    setLoading(false);
+  };
+
+  const submitAccountPressed = async () => {
+    if (!valid) {
+      return;
+    }
+
+    setLoading(true);
+    setErrorMessage(null);
+    const url = `/api/auth/fediverse?accessToken=${accessToken}`;
+    const normalizedAccount = account.replace(/^@+/, '');
+    const data = { account: normalizedAccount };
+
+    try {
+      await makeRequest(url, data);
+      setVerifyingCode(true);
+    } catch (e) {
+      console.error(e);
+      setErrorMessage(e);
+    }
+    setLoading(false);
+  };
+
+  const inputCodeStep = (
+    <div>
+      Paste in the code that was sent to your Fediverse account. If you did not receive a code, make
+      sure you can accept direct messages.
+      <div className={styles.codeInputContainer}>
+        <Input
+          value={code}
+          onChange={e => setCode(e.target.value)}
+          className={styles.codeInput}
+          placeholder="123456"
+          maxLength={6}
+        />
+        <Button
+          type="primary"
+          onClick={submitCodePressed}
+          disabled={code.length < 6}
+          className={styles.submitButton}
+        >
+          Verify Code
+        </Button>
+      </div>
+    </div>
+  );
+
+  const inputAccountStep = (
+    <>
+      <div>Your Fediverse Account</div>
+      <Input.Search
+        addonBefore="@"
+        onInput={onInput}
+        value={account}
+        placeholder="youraccount@yourserver.com"
+        status={!valid && account.length > 0 ? 'error' : undefined}
+        onPressEnter={submitAccountPressed}
+        enterButton={
+          <Button onClick={submitAccountPressed} disabled={!valid}>
+            Authenticate with Fediverse
+          </Button>
+        }
+      />
+    </>
+  );
+
+  return (
+    <Spin spinning={loading}>
+      <Space direction="vertical">
+        {message}
+        {errorMessageText && (
+          <Alert message="Error" description={errorMessageText} type="error" showIcon />
+        )}
+        {verifyingCode ? inputCodeStep : inputAccountStep}
+        <Collapse ghost>
+          <Panel
+            key="header"
+            header="Learn more about using the Fediverse to authenticate with chat."
+          >
+            <p>xxxxxx</p>
+          </Panel>
+        </Collapse>
+        <div>
+          <strong>Note</strong>: This is for authentication purposes only, and no personal
+          information will be accessed or stored.
+        </div>
+      </Space>
+    </Spin>
+  );
+};