2022-08-21 02:13:31 +03:00
|
|
|
import { Tabs } from 'antd';
|
|
|
|
import { useRecoilValue } from 'recoil';
|
2022-09-07 10:00:28 +03:00
|
|
|
import { FC } from 'react';
|
|
|
|
import { IndieAuthModal } from '../IndieAuthModal/IndieAuthModal';
|
|
|
|
import { FediAuthModal } from '../FediAuthModal/FediAuthModal';
|
2022-08-21 02:13:31 +03:00
|
|
|
|
|
|
|
import FediverseIcon from '../../../assets/images/fediverse-black.png';
|
|
|
|
import IndieAuthIcon from '../../../assets/images/indieauth.png';
|
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
import styles from './AuthModal.module.scss';
|
2022-08-21 02:13:31 +03:00
|
|
|
import {
|
2022-10-11 02:26:09 +03:00
|
|
|
currentUserAtom,
|
2022-08-21 02:13:31 +03:00
|
|
|
chatAuthenticatedAtom,
|
|
|
|
accessTokenAtom,
|
|
|
|
} from '../../stores/ClientConfigStore';
|
|
|
|
|
|
|
|
const { TabPane } = Tabs;
|
|
|
|
|
2022-09-07 10:00:28 +03:00
|
|
|
export const AuthModal: FC = () => {
|
2022-10-11 02:26:09 +03:00
|
|
|
const currentUser = useRecoilValue(currentUserAtom);
|
|
|
|
if (!currentUser) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2022-08-21 02:13:31 +03:00
|
|
|
const authenticated = useRecoilValue<boolean>(chatAuthenticatedAtom);
|
|
|
|
const accessToken = useRecoilValue<string>(accessTokenAtom);
|
2022-09-09 07:44:52 +03:00
|
|
|
const federationEnabled = true;
|
2022-10-11 02:26:09 +03:00
|
|
|
const { displayName } = currentUser;
|
2022-08-21 02:13:31 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Tabs
|
|
|
|
defaultActiveKey="1"
|
|
|
|
type="card"
|
|
|
|
size="small"
|
|
|
|
renderTabBar={federationEnabled ? null : () => null}
|
|
|
|
>
|
|
|
|
<TabPane
|
|
|
|
tab={
|
2022-09-07 10:00:28 +03:00
|
|
|
<span className={styles.tabContent}>
|
|
|
|
<img className={styles.icon} src={IndieAuthIcon.src} alt="IndieAuth" />
|
2022-08-21 02:13:31 +03:00
|
|
|
IndieAuth
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
key="1"
|
|
|
|
>
|
|
|
|
<IndieAuthModal
|
|
|
|
authenticated={authenticated}
|
2022-10-11 02:26:09 +03:00
|
|
|
displayName={displayName}
|
2022-08-21 02:13:31 +03:00
|
|
|
accessToken={accessToken}
|
|
|
|
/>
|
|
|
|
</TabPane>
|
|
|
|
<TabPane
|
|
|
|
tab={
|
2022-09-07 10:00:28 +03:00
|
|
|
<span className={styles.tabContent}>
|
|
|
|
<img className={styles.icon} src={FediverseIcon.src} alt="Fediverse auth" />
|
2022-08-21 02:13:31 +03:00
|
|
|
FediAuth
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
key="2"
|
|
|
|
>
|
2022-09-09 07:44:52 +03:00
|
|
|
<FediAuthModal
|
|
|
|
authenticated={authenticated}
|
2022-10-11 02:26:09 +03:00
|
|
|
displayName={displayName}
|
2022-09-09 07:44:52 +03:00
|
|
|
accessToken={accessToken}
|
|
|
|
/>
|
2022-08-21 02:13:31 +03:00
|
|
|
</TabPane>
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
|
|
|
);
|
2022-09-07 10:00:28 +03:00
|
|
|
};
|