Add remote fediverse follow modal. Closes #1862

web/components/modals/Follow/FollowModal.module.scss

@@ -0,0 +1,44 @@
+.header {
+  font-family: var(--theme-text-display-font-family);
+  font-size: 0.8rem;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.instructions {
+  font-family: var(--theme-text-display-font-family);
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.footer {
+  font-size: 0.5rem;
+}
+
+.account {
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  font-size: 0.8rem;
+
+  .logo {
+    border-radius: 50%;
+    width: 4em;
+    height: 4em;
+  }
+
+  .username {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-top: 5px;
+    .name {
+      font-weight: 600;
+    }
+  }
+}

web/components/modals/Follow/FollowModal.tsx

@@ -1,10 +1,13 @@
-import { Input, Button, Alert, Spin } from 'antd';
+import { Input, Button, Alert, Spin, Space } from 'antd';
 import { useState } from 'react';
+import s from './FollowModal.module.scss';
 
 const ENDPOINT = '/api/remotefollow';
 
 interface Props {
   handleClose: () => void;
+  account: string;
+  name: string;
 }
 
 function validateAccount(a) {
@@ -15,14 +18,14 @@ function validateAccount(a) {
 }
 
 export default function FollowModal(props: Props) {
-  const { handleClose } = props;
-  const [account, setAccount] = useState(null);
+  const { handleClose, account, name } = props;
+  const [remoteAccount, setRemoteAccount] = useState(null);
   const [valid, setValid] = useState(false);
   const [loading, setLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
 
   const handleAccountChange = a => {
-    setAccount(a);
+    setRemoteAccount(a);
     if (validateAccount(a)) {
       setValid(true);
     } else {
@@ -30,6 +33,10 @@ export default function FollowModal(props: Props) {
     }
   };
 
+  const joinButtonPressed = () => {
+    window.open('https://owncast.online/join-fediverse', '_blank');
+  };
+
   const remoteFollowButtonPressed = async () => {
     if (!valid) {
       return;
@@ -38,7 +45,7 @@ export default function FollowModal(props: Props) {
     setLoading(true);
 
     try {
-      const sanitizedAccount = account.replace(/^@+/, '');
+      const sanitizedAccount = remoteAccount.replace(/^@+/, '');
       const request = { account: sanitizedAccount };
       const rawResponse = await fetch(ENDPOINT, {
         method: 'POST',
@@ -67,24 +74,48 @@ export default function FollowModal(props: Props) {
   };
 
   return (
-    <Spin spinning={loading}>
-      {errorMessage && (
-        <Alert message="Follow Error" description={errorMessage} type="error" showIcon />
-      )}
-      <Input
-        value={account}
-        size="large"
-        onChange={e => handleAccountChange(e.target.value)}
-        placeholder="Your fediverse account @account@server"
-        defaultValue={account}
-      />
-      <Button disabled={!valid} onClick={remoteFollowButtonPressed}>
-        Follow
-      </Button>
-      <div>
-        Information about following a Fediverse account and next steps how to create a Fediverse
-        account goes here.
+    <Space direction="vertical">
+      <div className={s.header}>
+        By following this stream you'll get notified on the Fediverse when it goes live. Now is a
+        great time to{' '}
+        <a href="https://owncast.online/join-fediverse" target="_blank" rel="noreferrer">
+          learn about the Fediverse
+        </a>{' '}
+        if it's new to you.
       </div>
-    </Spin>
+
+      <Spin spinning={loading}>
+        {errorMessage && (
+          <Alert message="Follow Error" description={errorMessage} type="error" showIcon />
+        )}
+        <div className={s.account}>
+          <img src="/logo" alt="logo" className={s.logo} />
+          <div className={s.username}>
+            <div className={s.name}>{name}</div>
+            <div>{account}</div>
+          </div>
+        </div>
+
+        <div>
+          <div className={s.instructions}>Enter your username @server to follow</div>
+          <Input
+            value={account}
+            size="large"
+            onChange={e => handleAccountChange(e.target.value)}
+            placeholder="Your fediverse account @account@server"
+            defaultValue={account}
+          />
+          <div className={s.footer}>
+            You'll be redirected to your Fediverse server and asked to confirm the action.
+          </div>
+        </div>
+        <Space className={s.buttons}>
+          <Button disabled={!valid} onClick={remoteFollowButtonPressed}>
+            Follow
+          </Button>
+          <Button onClick={joinButtonPressed}>Join the Fediverse</Button>
+        </Space>
+      </Spin>
+    </Space>
   );
 }