opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-29 18:35:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: CB-1236 sso authentication

Browse Source
This commit is contained in:
Wroud
2021-09-10 14:05:30 +03:00
parent 578576e98d
commit 9578811f80
12 changed files with 189 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx
+1 -4
View File
@@ -144,10 +144,7 @@ export const AuthDialog: DialogComponent<IAuthPayload, null> = observer(function
<SubmittingForm {...use({ form: !configurable })} onSubmit={controller.login}>
{controller.provider && (
configurable ? (
<ConfigurationsList
configurations={controller.provider.configurations!}
providerIcon={controller.provider.icon}
/>
<ConfigurationsList provider={controller.provider} onClose={rejectDialog} />
) : (
<AuthProviderForm
provider={controller.provider}
webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+32 -12
View File
@@ -11,18 +11,13 @@ import { observer } from 'mobx-react-lite';
import { useState, useMemo } from 'react';
import styled, { css } from 'reshadow';
import { comparePublicAuthConfigurations } from '@cloudbeaver/core-authentication';
import { Filter, IconOrImage, Link, Cell } from '@cloudbeaver/core-blocks';
import { AuthInfoService, AuthProvider, comparePublicAuthConfigurations } from '@cloudbeaver/core-authentication';
import { Filter, IconOrImage, Link, Cell, getComputed } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';
import { useTranslate } from '@cloudbeaver/core-localization';
import type { AuthProviderConfiguration } from '@cloudbeaver/core-sdk';
import { composes, useStyles } from '@cloudbeaver/core-theming';
interface Props {
configurations: AuthProviderConfiguration[];
providerIcon?: string;
className?: string;
}
const styles = composes(
css`
Cell {
@@ -51,13 +46,25 @@ const styles = composes(
}
`);
export const ConfigurationsList = observer<Props>(function ConfigurationsList({ configurations, providerIcon, className }) {
interface Props {
provider: AuthProvider;
onClose?: () => void;
className?: string;
}
export const ConfigurationsList = observer<Props>(function ConfigurationsList({ provider, onClose, className }) {
const authInfoService = useService(AuthInfoService);
const translate = useTranslate();
const [search, setSearch] = useState('');
const configurations = useMemo(() => getComputed(() =>
(provider.configurations || [])
.filter(configuration => configuration.signInLink)
), [provider.configurations]);
const filteredConfigurations = useMemo(() => computed(() => {
const sortedConfigurations = configurations.slice().sort(comparePublicAuthConfigurations);
const sortedConfigurations = configurations.slice().sort(comparePublicAuthConfigurations) || [];
if (!search) {
return sortedConfigurations;
}
@@ -68,6 +75,14 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
});
}), [search, configurations]);
async function auth(configuration: AuthProviderConfiguration) {
const user = await authInfoService.sso(provider.id, configuration);
if (user) {
onClose?.();
}
}
return styled(useStyles(styles))(
<container className={className}>
{configurations.length >= 10 && (
@@ -80,10 +95,15 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
)}
<list>
{filteredConfigurations.get().map(configuration => {
const icon = configuration.iconURL || providerIcon;
const icon = configuration.iconURL || provider.icon;
const title = `${configuration.displayName}\n${configuration.description || ''}`;
return (
<Link key={configuration.id} href={configuration.signInLink} title={title} wrapper>
<Link
key={configuration.id}
title={title}
wrapper
onClick={() => auth(configuration)}
>
<Cell
before={icon ? <IconOrImage icon={icon} /> : undefined}
description={configuration.description}