refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file

web/components/modals/IndieAuthModal/IndieAuthModal.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import IndieAuthModal from './IndieAuthModal';
+import Mock from '../../../stories/assets/mocks/indieauth-modal.png';
+
+const Example = () => (
+  <div>
+    <IndieAuthModal authenticated displayName="fakeChatName" accessToken="fakeaccesstoken" />
+  </div>
+);
+
+export default {
+  title: 'owncast/Modals/IndieAuth',
+  component: IndieAuthModal,
+  parameters: {
+    design: {
+      type: 'image',
+      url: Mock,
+      scale: 0.5,
+    },
+  },
+} as ComponentMeta<typeof IndieAuthModal>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof IndieAuthModal> = args => <Example />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});

web/components/modals/IndieAuthModal/IndieAuthModal.tsx

@@ -0,0 +1,156 @@
+import { Alert, Button, Input, Space, Spin, Collapse, Typography } from 'antd';
+import React, { useState } from 'react';
+import isValidURL from '../../../utils/urls';
+
+const { Panel } = Collapse;
+const { Link } = Typography;
+
+interface Props {
+  authenticated: boolean;
+  displayName: string;
+  accessToken: string;
+}
+
+export default function IndieAuthModal(props: Props) {
+  const { authenticated, displayName: username, accessToken } = props;
+
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [valid, setValid] = useState(false);
+  const [host, setHost] = useState('');
+
+  const message = !authenticated ? (
+    <span>
+      Use your own domain to authenticate <span>{username}</span> or login as a previously{' '}
+      authenticated chat user using IndieAuth.
+    </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 = (url: string) => {
+    if (!isValidURL(url)) {
+      setValid(false);
+      return;
+    }
+
+    if (!url.includes('.')) {
+      setValid(false);
+      return;
+    }
+
+    setValid(true);
+  };
+
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Don't allow people to type custom ports or protocols.
+    const char = (e.nativeEvent as any).data;
+    if (char === ':') {
+      return;
+    }
+
+    setHost(e.target.value);
+    const h = `https://${e.target.value}`;
+    validate(h);
+  };
+
+  const submitButtonPressed = async () => {
+    if (!valid) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const url = `/api/auth/indieauth?accessToken=${accessToken}`;
+      const h = `https://${host}`;
+      const data = { authHost: h };
+      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);
+        return;
+      }
+      if (!content.redirect) {
+        setErrorMessage('Auth provider did not return a redirect URL.');
+        setLoading(false);
+        return;
+      }
+
+      if (content.redirect) {
+        const { redirect } = content;
+        window.location = redirect;
+      }
+    } catch (e) {
+      setErrorMessage(e.message);
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <Space direction="vertical">
+        {message}
+        {errorMessageText && (
+          <Alert message="Error" description={errorMessageText} type="error" showIcon />
+        )}
+        <div>Your domain</div>
+        <Input.Search
+          addonBefore="https://"
+          onInput={onInput}
+          type="url"
+          value={host}
+          placeholder="yoursite.com"
+          status={!valid && host.length > 0 ? 'error' : undefined}
+          onPressEnter={submitButtonPressed}
+          enterButton={
+            <Button onClick={submitButtonPressed} disabled={!valid}>
+              Authenticate with your domain
+            </Button>
+          }
+        />
+
+        <Collapse ghost>
+          <Panel key="header" header="Learn more about using IndieAuth to authenticate with chat.">
+            <p>
+              IndieAuth allows for a completely independent and decentralized way of identifying
+              yourself using your own domain.
+            </p>
+
+            <p>
+              If you run an Owncast instance, you can use that domain here. Otherwise,{' '}
+              <Link href="https://indieauth.net/#providers">
+                learn more about how you can support IndieAuth
+              </Link>
+              .
+            </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>
+  );
+}