Add FediAuth modal

web/components/modals/AuthModal/AuthModal.tsx

@@ -20,7 +20,7 @@ export const AuthModal: FC = () => {
   const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
   const authenticated = useRecoilValue<boolean>(chatAuthenticatedAtom);
   const accessToken = useRecoilValue<string>(accessTokenAtom);
-  const federationEnabled = false;
+  const federationEnabled = true;
 
   return (
     <div>
@@ -54,7 +54,11 @@ export const AuthModal: FC = () => {
           }
           key="2"
         >
-          <FediAuthModal />
+          <FediAuthModal
+            authenticated={authenticated}
+            displayName={chatDisplayName}
+            accessToken={accessToken}
+          />
         </TabPane>
       </Tabs>
     </div>

web/components/modals/FediAuthModal/FediAuthModal.module.scss

@@ -0,0 +1,22 @@
+.codeInputContainer {
+  .codeInput {
+    font-size: 1.6rem;
+    font-family: monospace;
+    max-width: 220px;
+    margin: auto;
+    text-align: center;
+    letter-spacing: 6px;
+    border-color: var(--theme-color-palette-9);
+    color: var(--theme-color-palette-9);
+  }
+
+  .submitButton {
+    max-width: 150px;
+    margin: auto;
+    margin-top: 10px;
+  }
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}

web/components/modals/FediAuthModal/FediAuthModal.stories.tsx

@@ -3,12 +3,6 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { FediAuthModal } from './FediAuthModal';
 import FediAuthModalMock from '../../../stories/assets/mocks/fediauth-modal.png';
 
-const Example = () => (
-  <div>
-    <FediAuthModal />
-  </div>
-);
-
 export default {
   title: 'owncast/Modals/FediAuth',
   component: FediAuthModal,
@@ -21,8 +15,18 @@ export default {
   },
 } as ComponentMeta<typeof FediAuthModal>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof FediAuthModal> = args => <Example />;
+const Template: ComponentStory<typeof FediAuthModal> = args => <FediAuthModal {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const NotYetAuthenticated = Template.bind({});
+NotYetAuthenticated.args = {
+  displayName: 'fake-user',
+  authenticated: false,
+  accessToken: '',
+};
+
+export const Authenticated = Template.bind({});
+Authenticated.args = {
+  displayName: 'fake-user',
+  authenticated: true,
+  accessToken: '',
+};

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>
+  );
+};

web/components/ui/Modal/Modal.module.scss

@@ -9,4 +9,5 @@
   height: 100%;
   padding: 2vw;
   background-color: var(--theme-color-components-modal-content-background);
+  color: var(--theme-color-components-modal-content-text);
 }

web/utils/validators.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/prefer-default-export
+export function validateAccount(account) {
+  const a = account.replace(/^@+/, '');
+  const regex =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return regex.test(String(a).toLowerCase());
+}