mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 13:35:57 +03:00
Add FediAuth modal
This commit is contained in:
parent
b966babf64
commit
2774f4260a
6 changed files with 224 additions and 14 deletions
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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: '',
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
7
web/utils/validators.ts
Normal file
7
web/utils/validators.ts
Normal file
|
@ -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());
|
||||
}
|
Loading…
Reference in a new issue