yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Authentication provider display (#4332)

Browse Source 
* layout

* Refactor

* wip

* Quick changes to make this deployable without full management

* test
This commit is contained in:
Tom Moor
2022-10-24 17:01:40 -04:00
committed by GitHub
parent 434bb989cc
commit df46d3754a
13 changed files with 438 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/components/AuthLogo/index.tsx
View File

@@ -7,28 +7,29 @@ import SlackLogo from "./SlackLogo";
type Props = {
providerName: string;
size?: number;
color?: string;
};
function AuthLogo({ providerName, size = 16 }: Props) {
function AuthLogo({ providerName, color, size = 16 }: Props) {
switch (providerName) {
case "slack":
return (
<Logo>
<SlackLogo size={size} />
<SlackLogo size={size} fill={color} />
</Logo>
);
case "google":
return (
<Logo>
<GoogleLogo size={size} />
<GoogleLogo size={size} fill={color} />
</Logo>
);
case "azure":
return (
<Logo>
<MicrosoftLogo size={size} />
<MicrosoftLogo size={size} fill={color} />
</Logo>
);

19
app/models/AuthenticationProvider.ts Normal file
View File

@@ -0,0 +1,19 @@
import { observable } from "mobx";
import BaseModel from "./BaseModel";
import Field from "./decorators/Field";
class AuthenticationProvider extends BaseModel {
id: string;
displayName: string;
name: string;
isConnected: boolean;
@Field
@observable
isEnabled: boolean;
}
export default AuthenticationProvider;

277
app/scenes/Settings/Security.tsx
View File

@@ -1,34 +1,33 @@
import { debounce } from "lodash";
import { observer } from "mobx-react";
import { CloseIcon, PadlockIcon } from "outline-icons";
import { CheckboxIcon, EmailIcon, PadlockIcon } from "outline-icons";
import { useState } from "react";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import styled from "styled-components";
import Button from "~/components/Button";
import { useTheme } from "styled-components";
import AuthLogo from "~/components/AuthLogo";
import ConfirmationDialog from "~/components/ConfirmationDialog";
import Fade from "~/components/Fade";
import Flex from "~/components/Flex";
import Heading from "~/components/Heading";
import Input from "~/components/Input";
import InputSelect from "~/components/InputSelect";
import NudeButton from "~/components/NudeButton";
import Scene from "~/components/Scene";
import Switch from "~/components/Switch";
import Text from "~/components/Text";
import Tooltip from "~/components/Tooltip";
import env from "~/env";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useRequest from "~/hooks/useRequest";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import isCloudHosted from "~/utils/isCloudHosted";
import DomainManagement from "./components/DomainManagement";
import SettingRow from "./components/SettingRow";
function Security() {
const { auth, dialogs } = useStores();
const { auth, authenticationProviders, dialogs } = useStores();
const team = useCurrentTeam();
const { t } = useTranslation();
const { showToast } = useToasts();
const theme = useTheme();
const [data, setData] = useState({
sharing: team.sharing,
documentEmbeds: team.documentEmbeds,
@@ -38,16 +37,15 @@ function Security() {
inviteRequired: team.inviteRequired,
});
const [allowedDomains, setAllowedDomains] = useState([
...(team.allowedDomains ?? []),
]);
const [lastKnownDomainCount, updateLastKnownDomainCount] = useState(
allowedDomains.length
const { data: providers, loading, request } = useRequest(() =>
authenticationProviders.fetchPage({})
);
const [existingDomainsTouched, setExistingDomainsTouched] = useState(false);
const authenticationMethods = team.signinMethods;
React.useEffect(() => {
if (!providers && !loading) {
request();
}
}, [loading, providers, request]);
const showSuccessMessage = React.useMemo(
() =>
@@ -81,21 +79,6 @@ function Security() {
[data, saveData]
);
const handleSaveDomains = React.useCallback(async () => {
try {
await auth.updateTeam({
allowedDomains,
});
showSuccessMessage();
setExistingDomainsTouched(false);
updateLastKnownDomainCount(allowedDomains.length);
} catch (err) {
showToast(err.message, {
type: "error",
});
}
}, [auth, allowedDomains, showSuccessMessage, showToast]);
const handleDefaultRoleChange = React.useCallback(
async (newDefaultRole: string) => {
await saveData({ ...data, defaultUserRole: newDefaultRole });
@@ -124,7 +107,7 @@ function Security() {
<Trans
defaults="New users will first need to be invited to create an account. <em>Default role</em> and <em>Allowed domains</em> will no longer apply."
values={{
authenticationMethods,
authenticationMethods: team.signinMethods,
}}
components={{
em: <strong />,
@@ -138,45 +121,9 @@ function Security() {
await saveData(newData);
},
[data, saveData, t, dialogs, authenticationMethods]
[data, saveData, t, dialogs, team.signinMethods]
);
const handleRemoveDomain = async (index: number) => {
const newDomains = allowedDomains.filter((_, i) => index !== i);
setAllowedDomains(newDomains);
const touchedExistingDomain = index < lastKnownDomainCount;
if (touchedExistingDomain) {
setExistingDomainsTouched(true);
}
};
const handleAddDomain = () => {
const newDomains = [...allowedDomains, ""];
setAllowedDomains(newDomains);
};
const createOnDomainChangedHandler = (index: number) => (
ev: React.ChangeEvent<HTMLInputElement>
) => {
const newDomains = allowedDomains.slice();
newDomains[index] = ev.currentTarget.value;
setAllowedDomains(newDomains);
const touchedExistingDomain = index < lastKnownDomainCount;
if (touchedExistingDomain) {
setExistingDomainsTouched(true);
}
};
const showSaveChanges =
existingDomainsTouched ||
allowedDomains.filter((value: string) => value !== "").length > // New domains were added
lastKnownDomainCount;
return (
<Scene title={t("Security")} icon={<PadlockIcon color="currentColor" />}>
<Heading>{t("Security")}</Heading>
@@ -187,14 +134,43 @@ function Security() {
</Trans>
</Text>
<h2>{t("Sign In")}</h2>
{authenticationProviders.orderedData
// filtering unconnected, until we have ability to connect from this screen
.filter((provider) => provider.isConnected)
.map((provider) => (
<SettingRow
key={provider.name}
label={
<Flex gap={8} align="center">
<AuthLogo providerName={provider.name} color="currentColor" />{" "}
{provider.displayName}
</Flex>
}
name={provider.name}
description={t("Allow members to sign-in with {{ authProvider }}", {
authProvider: provider.displayName,
})}
>
<Flex align="center">
<CheckboxIcon color={theme.primary} checked />{" "}
<Text type="secondary">{t("Connected")}</Text>
</Flex>
</SettingRow>
))}
<SettingRow
label={t("Allow email authentication")}
label={
<Flex gap={8} align="center">
<EmailIcon color="currentColor" /> {t("Email")}
</Flex>
}
name="guestSignin"
description={
env.EMAIL_ENABLED
? t("When enabled, users can sign-in using their email address")
? t("Allow members to sign-in using their email address")
: t("The server must have SMTP configured to enable this setting")
}
border={false}
>
<Switch
id="guestSignin"
@@ -203,6 +179,57 @@ function Security() {
disabled={!env.EMAIL_ENABLED}
/>
</SettingRow>
<h2>{t("Access")}</h2>
{isCloudHosted && (
<SettingRow
label={t("Require invites")}
name="inviteRequired"
description={t(
"Require members to be invited to the workspace before they can create an account using SSO."
)}
>
<Switch
id="inviteRequired"
checked={data.inviteRequired}
onChange={handleInviteRequiredChange}
/>
</SettingRow>
)}
{!data.inviteRequired && (
<DomainManagement onSuccess={showSuccessMessage} />
)}
{!data.inviteRequired && (
<SettingRow
label={t("Default role")}
name="defaultUserRole"
description={t(
"The default user role for new accounts. Changing this setting does not affect existing user accounts."
)}
border={false}
>
<InputSelect
id="defaultUserRole"
value={data.defaultUserRole}
options={[
{
label: t("Member"),
value: "member",
},
{
label: t("Viewer"),
value: "viewer",
},
]}
onChange={handleDefaultRoleChange}
ariaLabel={t("Default role")}
short
/>
</SettingRow>
)}
<h2>{t("Behavior")}</h2>
<SettingRow
label={t("Public document sharing")}
name="sharing"
@@ -238,116 +265,8 @@ function Security() {
onChange={handleChange}
/>
</SettingRow>
{isCloudHosted && (
<SettingRow
label={t("Require invites")}
name="inviteRequired"
description={t(
"Require members to be invited to the team before they can create an account using SSO."
)}
>
<Switch
id="inviteRequired"
checked={data.inviteRequired}
onChange={handleInviteRequiredChange}
/>
</SettingRow>
)}
{!data.inviteRequired && (
<SettingRow
label={t("Default role")}
name="defaultUserRole"
description={t(
"The default user role for new accounts. Changing this setting does not affect existing user accounts."
)}
>
<InputSelect
id="defaultUserRole"
value={data.defaultUserRole}
options={[
{
label: t("Member"),
value: "member",
},
{
label: t("Viewer"),
value: "viewer",
},
]}
onChange={handleDefaultRoleChange}
ariaLabel={t("Default role")}
short
/>
</SettingRow>
)}
{!data.inviteRequired && (
<SettingRow
label={t("Allowed domains")}
name="allowedDomains"
description={t(
"The domains which should be allowed to create new accounts using SSO. Changing this setting does not affect existing user accounts."
)}
>
{allowedDomains.map((domain, index) => (
<Flex key={index} gap={4}>
<Input
key={index}
id={`allowedDomains${index}`}
value={domain}
autoFocus={!domain}
placeholder="example.com"
required
flex
onChange={createOnDomainChangedHandler(index)}
/>
<Remove>
<Tooltip tooltip={t("Remove domain")} placement="top">
<NudeButton onClick={() => handleRemoveDomain(index)}>
<CloseIcon />
</NudeButton>
</Tooltip>
</Remove>
</Flex>
))}
<Flex justify="space-between" gap={4} style={{ flexWrap: "wrap" }}>
{!allowedDomains.length ||
allowedDomains[allowedDomains.length - 1] !== "" ? (
<Fade>
<Button type="button" onClick={handleAddDomain} neutral>
{allowedDomains.length ? (
<Trans>Add another</Trans>
) : (
<Trans>Add a domain</Trans>
)}
</Button>
</Fade>
) : (
<span />
)}
{showSaveChanges && (
<Fade>
<Button
type="button"
onClick={handleSaveDomains}
disabled={auth.isSaving}
>
<Trans>Save changes</Trans>
</Button>
</Fade>
)}
</Flex>
</SettingRow>
)}
</Scene>
);
}
const Remove = styled("div")`
margin-top: 6px;
`;
export default observer(Security);

155
app/scenes/Settings/components/DomainManagement.tsx Normal file
View File

@@ -0,0 +1,155 @@
import { observer } from "mobx-react";
import { CloseIcon } from "outline-icons";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import styled from "styled-components";
import Button from "~/components/Button";
import Fade from "~/components/Fade";
import Flex from "~/components/Flex";
import Input from "~/components/Input";
import NudeButton from "~/components/NudeButton";
import Tooltip from "~/components/Tooltip";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import SettingRow from "./SettingRow";
type Props = {
onSuccess: () => void;
};
function DomainManagement({ onSuccess }: Props) {
const { auth } = useStores();
const team = useCurrentTeam();
const { t } = useTranslation();
const { showToast } = useToasts();
const [allowedDomains, setAllowedDomains] = React.useState([
...(team.allowedDomains ?? []),
]);
const [lastKnownDomainCount, updateLastKnownDomainCount] = React.useState(
allowedDomains.length
);
const [existingDomainsTouched, setExistingDomainsTouched] = React.useState(
false
);
const handleSaveDomains = React.useCallback(async () => {
try {
await auth.updateTeam({
allowedDomains,
});
onSuccess();
setExistingDomainsTouched(false);
updateLastKnownDomainCount(allowedDomains.length);
} catch (err) {
showToast(err.message, {
type: "error",
});
}
}, [auth, allowedDomains, onSuccess, showToast]);
const handleRemoveDomain = async (index: number) => {
const newDomains = allowedDomains.filter((_, i) => index !== i);
setAllowedDomains(newDomains);
const touchedExistingDomain = index < lastKnownDomainCount;
if (touchedExistingDomain) {
setExistingDomainsTouched(true);
}
};
const handleAddDomain = () => {
const newDomains = [...allowedDomains, ""];
setAllowedDomains(newDomains);
};
const createOnDomainChangedHandler = (index: number) => (
ev: React.ChangeEvent<HTMLInputElement>
) => {
const newDomains = allowedDomains.slice();
newDomains[index] = ev.currentTarget.value;
setAllowedDomains(newDomains);
const touchedExistingDomain = index < lastKnownDomainCount;
if (touchedExistingDomain) {
setExistingDomainsTouched(true);
}
};
const showSaveChanges =
existingDomainsTouched ||
allowedDomains.filter((value: string) => value !== "").length > // New domains were added
lastKnownDomainCount;
return (
<SettingRow
label={t("Allowed domains")}
name="allowedDomains"
description={t(
"The domains which should be allowed to create new accounts using SSO. Changing this setting does not affect existing user accounts."
)}
>
{allowedDomains.map((domain, index) => (
<Flex key={index} gap={4}>
<Input
key={index}
id={`allowedDomains${index}`}
value={domain}
autoFocus={!domain}
placeholder="example.com"
required
flex
onChange={createOnDomainChangedHandler(index)}
/>
<Remove>
<Tooltip tooltip={t("Remove domain")} placement="top">
<NudeButton onClick={() => handleRemoveDomain(index)}>
<CloseIcon />
</NudeButton>
</Tooltip>
</Remove>
</Flex>
))}
<Flex justify="space-between" gap={4} style={{ flexWrap: "wrap" }}>
{!allowedDomains.length ||
allowedDomains[allowedDomains.length - 1] !== "" ? (
<Fade>
<Button type="button" onClick={handleAddDomain} neutral>
{allowedDomains.length ? (
<Trans>Add another</Trans>
) : (
<Trans>Add a domain</Trans>
)}
</Button>
</Fade>
) : (
<span />
)}
{showSaveChanges && (
<Fade>
<Button
type="button"
onClick={handleSaveDomains}
disabled={auth.isSaving}
>
<Trans>Save changes</Trans>
</Button>
</Fade>
)}
</Flex>
</SettingRow>
);
}
const Remove = styled("div")`
margin-top: 6px;
`;
export default observer(DomainManagement);

8
app/scenes/Settings/components/SettingRow.tsx
View File

@@ -7,7 +7,7 @@ import Text from "~/components/Text";
type Props = {
label: React.ReactNode;
description: React.ReactNode;
description?: React.ReactNode;
name: string;
visible?: boolean;
border?: boolean;
@@ -15,7 +15,7 @@ type Props = {
const Row = styled(Flex)<{ $border?: boolean }>`
display: block;
padding: 24px 0;
padding: 22px 0;
border-bottom: 1px solid
${(props) =>
props.$border === false
@@ -38,7 +38,7 @@ const Column = styled.div`
flex: 1;
&:first-child {
min-width: 60%;
min-width: 70%;
}
&:last-child {
@@ -73,7 +73,7 @@ const SettingRow: React.FC<Props> = ({
<Label as="h3">
<label htmlFor={name}>{label}</label>
</Label>
<Text type="secondary">{description}</Text>
{description && <Text type="secondary">{description}</Text>}
</Column>
<Column>{children}</Column>
</Row>

13
app/stores/AuthenticationProvidersStore.ts Normal file
View File

@@ -0,0 +1,13 @@
import AuthenticationProvider from "~/models/AuthenticationProvider";
import BaseStore, { RPCAction } from "./BaseStore";
import RootStore from "./RootStore";
export default class AuthenticationProvidersStore extends BaseStore<
AuthenticationProvider
> {
actions = [RPCAction.List, RPCAction.Update];
constructor(rootStore: RootStore) {
super(rootStore, AuthenticationProvider);
}
}

4
app/stores/RootStore.ts
View File

@@ -1,5 +1,6 @@
import ApiKeysStore from "./ApiKeysStore";
import AuthStore from "./AuthStore";
import AuthenticationProvidersStore from "./AuthenticationProvidersStore";
import CollectionGroupMembershipsStore from "./CollectionGroupMembershipsStore";
import CollectionsStore from "./CollectionsStore";
import DialogsStore from "./DialogsStore";
@@ -28,6 +29,7 @@ import WebhookSubscriptionsStore from "./WebhookSubscriptionStore";
export default class RootStore {
apiKeys: ApiKeysStore;
auth: AuthStore;
authenticationProviders: AuthenticationProvidersStore;
collections: CollectionsStore;
collectionGroupMemberships: CollectionGroupMembershipsStore;
dialogs: DialogsStore;
@@ -57,6 +59,7 @@ export default class RootStore {
// PoliciesStore must be initialized before AuthStore
this.policies = new PoliciesStore(this);
this.apiKeys = new ApiKeysStore(this);
this.authenticationProviders = new AuthenticationProvidersStore(this);
this.auth = new AuthStore(this);
this.collections = new CollectionsStore(this);
this.collectionGroupMemberships = new CollectionGroupMembershipsStore(this);
@@ -85,6 +88,7 @@ export default class RootStore {
logout() {
this.apiKeys.clear();
this.authenticationProviders.clear();
// this.auth omitted for reasons...
this.collections.clear();
this.collectionGroupMemberships.clear();