owncast/webroot/js/components/chat-settings-modal.js
Gabe Kangas a082cf3a77
Fediverse-based authentication (#1846)
* Able to authenticate user against IndieAuth. For #1273

* WIP server indieauth endpoint. For https://github.com/owncast/owncast/issues/1272

* Add migration to remove access tokens from user

* Add authenticated bool to user for display purposes

* Add indieauth modal and auth flair to display names. For #1273

* Validate URLs and display errors

* Renames, cleanups

* Handle relative auth endpoint paths. Add error handling for missing redirects.

* Disallow using display names in use by registered users. Closes #1810

* Verify code verifier via code challenge on callback

* Use relative path to authorization_endpoint

* Post-rebase fixes

* Use a timestamp instead of a bool for authenticated

* Propertly handle and display error in modal

* Use auth'ed timestamp to derive authenticated flag to display in chat

* Fediverse chat auth via OTP

* Increase validity time just in case

* Add fediverse auth into auth modal

* Text, validation, cleanup updates for fedi auth

* Fix typo

* Remove unused images

* Remove unused file

* Add chat display name to auth modal text
2022-04-22 17:23:14 -07:00

73 lines
1.9 KiB
JavaScript

import { h, Component } from '/js/web_modules/preact.js';
import htm from '/js/web_modules/htm.js';
import TabBar from './tab-bar.js';
import IndieAuthForm from './auth-indieauth.js';
import FediverseAuth from './auth-fediverse.js';
const html = htm.bind(h);
export default class ChatSettingsModal extends Component {
render() {
const {
accessToken,
authenticated,
federationEnabled,
username,
indieAuthEnabled,
} = this.props;
const TAB_CONTENT = [];
if (indieAuthEnabled) {
TAB_CONTENT.push({
label: html`<span style=${{ display: 'flex', alignItems: 'center' }}
><img
style=${{
display: 'inline',
height: '0.8em',
marginRight: '5px',
}}
src="/img/indieauth.png"
/>
IndieAuth</span
>`,
content: html`<${IndieAuthForm}}
accessToken=${accessToken}
authenticated=${authenticated}
username=${username}
/>`,
});
}
if (federationEnabled) {
TAB_CONTENT.push({
label: html`<span style=${{ display: 'flex', alignItems: 'center' }}
><img
style=${{
display: 'inline',
height: '0.8em',
marginRight: '5px',
}}
src="/img/fediverse-black.png"
/>
FediAuth</span
>`,
content: html`<${FediverseAuth}}
authenticated=${authenticated}
accessToken=${accessToken}
authenticated=${authenticated}
username=${username}
/>`,
});
}
return html`
<div class="bg-gray-100 bg-center bg-no-repeat p-5">
<${TabBar} tabs=${TAB_CONTENT} ariaLabel="Chat settings" />
<p class="mt-4">
<b>Note:</b> This is for authentication purposes only, and no personal
information will be accessed or stored.
</p>
</div>
`;
}
}