diff --git a/src/core/client/admin/routes/Configure/OnOffField.tsx b/src/core/client/admin/routes/Configure/OnOffField.tsx index 19c278ad6..35bd7a7dd 100644 --- a/src/core/client/admin/routes/Configure/OnOffField.tsx +++ b/src/core/client/admin/routes/Configure/OnOffField.tsx @@ -15,6 +15,7 @@ interface Props { offLabel?: React.ReactNode; format?: ((value: any, name: string) => any) | null; parse?: ((value: any, name: string) => any) | null; + className?: string; } const OnOffField: FunctionComponent = ({ @@ -25,8 +26,9 @@ const OnOffField: FunctionComponent = ({ invert = false, parse = parseStringBool, format, + className, }) => ( -
+
*:not(:last-child) { + margin-right: var(--spacing-5); + } +} \ No newline at end of file diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx new file mode 100644 index 000000000..12331890d --- /dev/null +++ b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx @@ -0,0 +1,140 @@ +import { Localized } from "fluent-react/compat"; +import React, { FunctionComponent } from "react"; + +import { + FieldSet, + Flex, + FormField, + HorizontalGutter, + InputLabel, + Typography, +} from "coral-ui/components"; +import OnOffField from "../../OnOffField"; + +import Header from "../../Header"; + +import styles from "./AccountFeaturesConfig.css"; + +interface Props { + disabled?: boolean; +} + +const AccountFeaturesConfig: FunctionComponent = ({ disabled }) => ( +
+ + +
Commenter account mangement features
+ + + + You can enable and disable certain features for your commenters to use + within their Profile. These features also assist towards GDPR + compliance. + + + }> + + Allow users to: + + + + + + + Change their usernames + + + + + Usernames can be changed once every 14 days. + + + + + Yes + + } + offLabel={ + + No + + } + /> + + + + + + + + + + Download their comments + + + + + Commenters can download a csv of their comment history. + + + + + Yes + + } + offLabel={ + + No + + } + /> + + + + + + + + + Delete their account + + + + Removes all of their comment data, username, and email address + from the site and the database. + + + + + Yes + + } + offLabel={ + + No + + } + /> + + + + +
+); + +export default AccountFeaturesConfig; diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfigContainer.tsx new file mode 100644 index 000000000..3e7446ce9 --- /dev/null +++ b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfigContainer.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { graphql } from "react-relay"; + +import { AccountFeaturesConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AccountFeaturesConfigContainer_settings.graphql"; +import { DeepNullable, DeepPartial } from "coral-common/types"; +import { withFragmentContainer } from "coral-framework/lib/relay"; + +import { GQLSettings } from "coral-framework/schema"; +import AccountFeaturesConfig from "./AccountFeaturesConfig"; + +export type FormProps = DeepNullable>; +export type OnInitValuesFct = (values: DeepPartial) => void; + +interface Props { + settings: SettingsData; + onInitValues: (values: SettingsData) => void; + disabled?: boolean; +} + +class AccountFeaturesConfigContainer extends React.Component { + constructor(props: Props) { + super(props); + props.onInitValues(props.settings); + } + + public render() { + const { disabled } = this.props; + return ; + } +} + +const enhanced = withFragmentContainer({ + settings: graphql` + fragment AccountFeaturesConfigContainer_settings on Settings { + accountFeatures { + changeUsername + deleteAccount + downloadComments + } + } + `, +})(AccountFeaturesConfigContainer); + +export default enhanced; diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx index e2473d96e..2797d6ae5 100644 --- a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx +++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx @@ -5,6 +5,7 @@ import React from "react"; import { graphql } from "react-relay"; import { AuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/AuthConfigContainer_auth.graphql"; +import { AuthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AuthConfigContainer_settings.graphql"; import { DeepNullable, DeepPartial } from "coral-common/types"; import { pureMerge } from "coral-common/utils"; import { CoralContext, withContext } from "coral-framework/lib/bootstrap"; @@ -17,10 +18,14 @@ import { import { getMessage } from "coral-framework/lib/i18n"; import { withFragmentContainer } from "coral-framework/lib/relay"; import { GQLSettings } from "coral-framework/schema"; +import { HorizontalGutter } from "coral-ui/components"; +import AccountFeaturesConfigContainer from "./AccountFeaturesConfigContainer"; import AuthConfig from "./AuthConfig"; -export type FormProps = DeepNullable>; +export type FormProps = DeepNullable< + Pick +>; export type OnInitValuesFct = (values: DeepPartial) => void; interface Props { @@ -29,6 +34,7 @@ interface Props { submitting?: boolean; addSubmitHook: AddSubmitHook; auth: AuthData; + settings: SettingsData; } class AuthConfigContainer extends React.Component { @@ -96,16 +102,28 @@ class AuthConfigContainer extends React.Component { public render() { return ( - + + + + ); } } const enhanced = withFragmentContainer({ + settings: graphql` + fragment AuthConfigContainer_settings on Settings { + ...AccountFeaturesConfigContainer_settings + } + `, auth: graphql` fragment AuthConfigContainer_auth on Auth { ...FacebookConfigContainer_auth diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx index b0af6a289..abdd0eba8 100644 --- a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx +++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx @@ -25,6 +25,7 @@ class AuthConfigRoute extends React.Component { } return ( ({ query: graphql` query AuthConfigRouteContainerQuery { settings { + ...AuthConfigContainer_settings auth { ...AuthConfigContainer_auth } diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap index 5b18d726f..8b781a02c 100644 --- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap +++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap @@ -2060,147 +2060,288 @@ exports[`renders configure auth 1`] = ` >
-
-

- Authentication Integrations -

+
-
-
- - Login with Email Authentication - -
-
-
-
- - -
-
-
-
-
+

-

+
+

+ Allow users to: +

+
-
+ + Change their usernames + +

+ Usernames can be changed once every 14 days. +

+
+
+
+
+
+
- -

+ Download their comments + +

+ Commenters can download a csv of their comment history. +

+
+
- Allow users that have not signed up before with this authentication -integration to register for a new account. -

+
+ + +
+
+ + +
+
+
+ +
+
+
+
+
+ + Delete their account + +

+ Removes all of their comment data, username, and email address from the site and the database. +

+
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+

+ Authentication Integrations +

+
+
+
+ + Login with Email Authentication + +
+
@@ -2211,8 +2352,8 @@ integration to register for a new account. checked={true} className="CheckBox-input" disabled={false} - id="auth.integrations.local.allowRegistration" - name="auth.integrations.local.allowRegistration" + id="auth.integrations.local.enabled" + name="auth.integrations.local.enabled" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -2220,464 +2361,153 @@ integration to register for a new account. value={true} />
-
-
-
-
-
- - Login with OpenID Connect - -
-
-
-
- - -
-
-
-
-
-

- To learn more: - - https://openid.net/connect/ - - -

-
-
-
- -
- -
-
-
-
- -

- The provider of the OpenID Connect integration. This will be used when the name of the provider -needs to be displayed, e.g. “Log in with <Facebook>”. -

-
- -
-
-
- -
- -
-
-
- -
+
-
- + + Coral Admin + + +
+
+ + +
+
+
+
+ +

+ Allow users that have not signed up before with this authentication +integration to register for a new account. +

+
+
+ +
-
- -

- After entering your Issuer information, click the Discover button to have Coral complete -the remaining fields. You may also enter the information manually. -

-
-
- -
- -
+
+
+
+
+
+ + Login with OpenID Connect +
-
- -
- -
-
-
- -
- -
-
-
- -
- -
-
-
- -
-
- - -
-
- - -
-
-
-
- -

- Allow users that have not signed up before with this authentication -integration to register for a new account. -

+
@@ -2687,9 +2517,9 @@ integration to register for a new account.
-
-
-
-
-
- - Login with Single Sign On - -
-
-
-
- - -
-
-
-
-
- + To learn more: + + https://openid.net/connect/ + + +

+
+ +
+
+ +
+ +
+
+
+
+ +

+ The provider of the OpenID Connect integration. This will be used when the name of the provider +needs to be displayed, e.g. “Log in with <Facebook>”. +

+
+ +
+
+
+ +
+ +
+
+
+
@@ -2785,18 +2692,22 @@ integration to register for a new account. autoComplete="off" autoCorrect="off" className="PasswordField-colorRegular PasswordField-input" - name="key" + disabled={true} + name="auth.integrations.oidc.clientSecret" + onBlur={[Function]} + onChange={[Function]} + onFocus={[Function]} placeholder="" - readOnly={true} spellCheck={false} type="password" + value="" />
-
+

- KEY GENERATED AT: -Invalid Date + After entering your Issuer information, click the Discover button to have Coral complete +the remaining fields. You may also enter the information manually.

- -

- Regenerating a key will invalidate any existing user sessions, -and all signed-in users will be signed out. -

-
-
-
- -
+
+ +
+ +
+
+
+ +
-
+
+
+
-
-
-
- -

+ JWKS URI + +

+ +
+
+
- Allow users that have not signed up before with this authentication + +
+
+ + +
+
+ + +
+
+
+
+ +

+ Allow users that have not signed up before with this authentication integration to register for a new account. -

+

+
+
+ + +
+
+
+
+
+
+
+
+
+ + Login with Single Sign On + +
+
@@ -2935,614 +2991,557 @@ integration to register for a new account. className="CheckBox-root" >
-
-
-
-
-
- - Login with Google - -
-
+
-
+
+ +
+
+ + +
+
+ + +
+
+
+
+ +

+ Allow users that have not signed up before with this authentication +integration to register for a new account. +

+
+
+ + +
+
-

+ + Login with Google + +

+
+
+
+ + +
+
+
+
+
+
- To enable the integration with Google Authentication you need +

+ To enable the integration with Google Authentication you need to create and set up a web application. For more information visit: - - https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred - - - . -

-
-
- + https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred + + + . +

+
+ +
+
+ +
+ +
+
+
+
+
- -
- -
-
-
-
- -
- -
-
-
- -
-
-
- -
-
-
- -
-
- - -
-
- - -
-
-
-
- -

- Allow users that have not signed up before with this authentication -integration to register for a new account. -

-
- -
-
-
-
-
-
-
-
- - Login with Facebook - -
-
-
- +
+
+ + +
+
+ + +
+
+
+
+ +

+ Allow users that have not signed up before with this authentication +integration to register for a new account. +

+
+
+ + +
+
-

- To enable the integration with Facebook Authentication, -you need to create and set up a web application. -For more information visit: - - https://developers.facebook.com/docs/facebook-login/web - - - . -

-
-
- -
-
- -
- -
+
+ + Login with Facebook +
-
-
- -
- -
-
-
- -
-
- -
- -
-
-
-
-
- -
-
- - -
-
- - -
-
-
-
- -

- Allow users that have not signed up before with this authentication -integration to register for a new account. -

+
@@ -3550,31 +3549,293 @@ integration to register for a new account. className="CheckBox-root" >
+
+
+

+ To enable the integration with Facebook Authentication, +you need to create and set up a web application. +For more information visit: + + https://developers.facebook.com/docs/facebook-login/web + + + . +

+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+ +

+ Allow users that have not signed up before with this authentication +integration to register for a new account. +

+
+
+ + +
+
+
+
+
diff --git a/src/core/client/admin/test/fixtures.ts b/src/core/client/admin/test/fixtures.ts index 2819dc774..e34b7860b 100644 --- a/src/core/client/admin/test/fixtures.ts +++ b/src/core/client/admin/test/fixtures.ts @@ -141,6 +141,11 @@ export const settings = createFixture({ }, }, }, + accountFeatures: { + downloadComments: true, + changeUsername: true, + deleteAccount: true, + }, }); export const settingsWithEmptyAuth = createFixture( diff --git a/src/core/client/stream/tabs/Profile/ChangeUsername/ChangeUsernameContainer.tsx b/src/core/client/stream/tabs/Profile/ChangeUsername/ChangeUsernameContainer.tsx index 982d465fd..fa3a1ed0d 100644 --- a/src/core/client/stream/tabs/Profile/ChangeUsername/ChangeUsernameContainer.tsx +++ b/src/core/client/stream/tabs/Profile/ChangeUsername/ChangeUsernameContainer.tsx @@ -168,7 +168,7 @@ const ChangeUsernameContainer: FunctionComponent = ({ {!showEditForm && ( {viewer.username} - {canChangeLocalAuth && ( + {canChangeLocalAuth && settings.accountFeatures.changeUsername && (