2022-11-29 09:41:33 +03:00
|
|
|
import { Alert, Input, Space, Spin, Collapse, Typography, Button } from 'antd';
|
2023-01-16 09:31:36 +03:00
|
|
|
import dynamic from 'next/dynamic';
|
2022-09-07 10:00:28 +03:00
|
|
|
import React, { FC, useState } from 'react';
|
2023-04-17 00:17:13 +03:00
|
|
|
import { isValidUrl } from '../../../utils/validators';
|
2022-08-21 02:13:31 +03:00
|
|
|
|
|
|
|
const { Panel } = Collapse;
|
|
|
|
const { Link } = Typography;
|
|
|
|
|
2023-01-16 09:31:36 +03:00
|
|
|
// Lazy loaded components
|
|
|
|
|
|
|
|
const CheckCircleOutlined = dynamic(() => import('@ant-design/icons/CheckCircleOutlined'), {
|
|
|
|
ssr: false,
|
|
|
|
});
|
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export type IndieAuthModalProps = {
|
2022-08-21 02:13:31 +03:00
|
|
|
authenticated: boolean;
|
|
|
|
displayName: string;
|
|
|
|
accessToken: string;
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|
2022-08-21 02:13:31 +03:00
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export const IndieAuthModal: FC<IndieAuthModalProps> = ({
|
|
|
|
authenticated,
|
|
|
|
displayName: username,
|
|
|
|
accessToken,
|
|
|
|
}) => {
|
2022-08-21 02:13:31 +03:00
|
|
|
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) => {
|
2022-12-14 22:52:11 +03:00
|
|
|
if (!isValidUrl(url)) {
|
2022-08-21 02:13:31 +03:00
|
|
|
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}
|
2022-10-27 00:35:46 +03:00
|
|
|
onSearch={submitButtonPressed}
|
2022-11-29 09:41:33 +03:00
|
|
|
enterButton={
|
|
|
|
<Button type={valid ? 'primary' : 'default'} disabled={!valid || host.length === 0}>
|
|
|
|
<CheckCircleOutlined />
|
|
|
|
</Button>
|
|
|
|
}
|
2022-08-21 02:13:31 +03:00
|
|
|
/>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|