Add first pass at IndieAuth modal. For #1863

web/components/common/UserDropdown/UserDropdown.tsx

@@ -18,6 +18,7 @@ import {
 import s from './UserDropdown.module.scss';
 import NameChangeModal from '../../modals/NameChangeModal';
 import { AppStateOptions } from '../../stores/application-state';
+import AuthModal from '../../modals/AuthModal/AuthModal';
 
 interface Props {
   username?: string;
@@ -26,6 +27,7 @@ interface Props {
 export default function UserDropdown({ username: defaultUsername }: Props) {
   const username = defaultUsername || useRecoilValue(chatDisplayNameAtom);
   const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
+  const [showAuthModal, setShowAuthModal] = useState<boolean>(false);
   const [chatToggleVisible, setChatToggleVisible] = useRecoilState(chatVisibleToggleAtom);
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
@@ -52,7 +54,7 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
       <Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
         Change name
       </Menu.Item>
-      <Menu.Item key="1" icon={<LockOutlined />}>
+      <Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
         Authenticate
       </Menu.Item>
       {appState.chatAvailable && (
@@ -80,6 +82,13 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
       >
         <NameChangeModal />
       </Modal>
+      <Modal
+        title="Authenticate"
+        visible={showAuthModal}
+        handleCancel={() => setShowAuthModal(false)}
+      >
+        <AuthModal />
+      </Modal>
     </div>
   );
 }

web/components/modals/AuthModal.tsx

@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
-
-export default function AuthModal(props: Props) {
-  return <div>Component goes here</div>;
-}

web/components/modals/AuthModal/AuthModal.module.scss

@@ -0,0 +1,11 @@
+.tabContent {
+  flex-direction: row;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    height: 15px;
+    padding-right: 5px;
+  }
+}

web/components/modals/AuthModal/AuthModal.tsx

@@ -0,0 +1,64 @@
+import { Tabs } from 'antd';
+import { useRecoilValue } from 'recoil';
+import IndieAuthModal from '../IndieAuthModal';
+import FediAuthModal from '../FediAuthModal';
+
+import FediverseIcon from '../../../assets/images/fediverse-black.png';
+import IndieAuthIcon from '../../../assets/images/indieauth.png';
+
+import s from './AuthModal.module.scss';
+import {
+  chatDisplayNameAtom,
+  chatAuthenticatedAtom,
+  accessTokenAtom,
+} from '../../stores/ClientConfigStore';
+
+const { TabPane } = Tabs;
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {}
+
+export default function AuthModal(props: Props) {
+  const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
+  const authenticated = useRecoilValue<boolean>(chatAuthenticatedAtom);
+  const accessToken = useRecoilValue<string>(accessTokenAtom);
+  const federationEnabled = false;
+
+  return (
+    <div>
+      <Tabs
+        defaultActiveKey="1"
+        type="card"
+        size="small"
+        renderTabBar={federationEnabled ? null : () => null}
+      >
+        <TabPane
+          tab={
+            <span className={s.tabContent}>
+              <img className={s.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
+              IndieAuth
+            </span>
+          }
+          key="1"
+        >
+          <IndieAuthModal
+            authenticated={authenticated}
+            displayName={chatDisplayName}
+            accessToken={accessToken}
+          />
+        </TabPane>
+        <TabPane
+          tab={
+            <span className={s.tabContent}>
+              <img className={s.icon} src={FediverseIcon.src} alt="Fediverse auth" />
+              FediAuth
+            </span>
+          }
+          key="2"
+        >
+          <FediAuthModal />
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+}

web/components/modals/IndieAuthModal.tsx

@@ -1,6 +1,156 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
+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) {
-  return <div>Component goes here</div>;
+  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>
+  );
 }

web/components/stores/ClientConfigStore.tsx

@@ -71,6 +71,11 @@ export const chatMessagesAtom = atom<ChatMessage[]>({
   default: [] as ChatMessage[],
 });
 
+export const chatAuthenticatedAtom = atom<boolean>({
+  key: 'chatAuthenticatedAtom',
+  default: false,
+});
+
 export const websocketServiceAtom = atom<WebsocketService>({
   key: 'websocketServiceAtom',
   default: null,
@@ -156,6 +161,7 @@ export function ClientConfigStore() {
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
   const setChatDisplayColor = useSetRecoilState<Number>(chatDisplayColorAtom);
   const setChatUserId = useSetRecoilState<string>(chatUserIdAtom);
+  const setChatAuthenticated = useSetRecoilState<boolean>(chatAuthenticatedAtom);
   const setIsChatModerator = useSetRecoilState<boolean>(isChatModeratorAtom);
   const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
   const setServerStatus = useSetRecoilState<ServerStatus>(serverStatusState);
@@ -265,6 +271,7 @@ export function ClientConfigStore() {
           setChatDisplayColor,
           setChatUserId,
           setIsChatModerator,
+          setChatAuthenticated,
         );
         setChatMessages(currentState => [...currentState, message as ChatEvent]);
         break;

web/components/stores/eventhandlers/connected-client-info-handler.ts

@@ -6,11 +6,13 @@ export default function handleConnectedClientInfoMessage(
   setChatDisplayColor: (number) => void,
   setChatUserId: (number) => void,
   setIsChatModerator: (boolean) => void,
+  setChatAuthenticated: (boolean) => void,
 ) {
   const { user } = message;
-  const { id, displayName, displayColor, scopes } = user;
+  const { id, displayName, displayColor, scopes, authenticated } = user;
   setChatDisplayName(displayName);
   setChatDisplayColor(displayColor);
   setChatUserId(id);
   setIsChatModerator(scopes?.includes('moderator'));
+  setChatAuthenticated(authenticated);
 }

web/components/ui/Modal/Modal.tsx

@@ -19,7 +19,7 @@ export default function Modal(props: Props) {
 
   const modalStyle = {
     padding: '0px',
-    height: height || '40vh',
+    minHeight: height || '40vh',
   };
 
   const iframe = url && (

web/interfaces/user.model.ts

@@ -6,4 +6,5 @@ export interface User {
   previousNames: string[];
   nameChangedAt: Date;
   scopes: string[];
+  authenticated: boolean;
 }

web/stories/AuthModal.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import AuthModal from '../components/modals/AuthModal';
+import { RecoilRoot } from 'recoil';
+import AuthModal from '../components/modals/AuthModal/AuthModal';
 
 const Example = () => (
   <div>
@@ -15,7 +16,11 @@ export default {
 } as ComponentMeta<typeof AuthModal>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof AuthModal> = args => <Example />;
+const Template: ComponentStory<typeof AuthModal> = args => (
+  <RecoilRoot>
+    <Example />
+  </RecoilRoot>
+);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});

web/stories/IndieAuthModal.stories.tsx

@@ -5,7 +5,7 @@ import Mock from './assets/mocks/indieauth-modal.png';
 
 const Example = () => (
   <div>
-    <IndieAuthModal />
+    <IndieAuthModal authenticated displayName="fakeChatName" accessToken="fakeaccesstoken" />
   </div>
 );