File "authentication-settings.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/settings/pages/authentication-settings.tsx
File size: 8.45 KB
MIME-type: text/plain
Charset: utf-8
import {useFormContext} from 'react-hook-form';
import {SettingsPanel} from '@common/admin/settings/settings-panel';
import {FormSwitch} from '@common/ui/forms/toggle/switch';
import {AdminSettings} from '@common/admin/settings/admin-settings';
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
import {SettingsErrorGroup} from '@common/admin/settings/settings-error-group';
import {Trans} from '@common/i18n/trans';
import {Fragment} from 'react';
import {Link} from 'react-router-dom';
import {useSettings} from '@common/core/settings/use-settings';
import {SettingsSeparator} from '@common/admin/settings/settings-separator';
import {Button} from '@common/ui/buttons/button';
export function AuthenticationSettings() {
return (
<SettingsPanel
title={<Trans message="Authentication" />}
description={
<Trans message="Configure registration, social login and related 3rd party integrations." />
}
>
<EmailConfirmationSection />
<FormSwitch
className="mb-24"
name="client.registration.disable"
description={
<Trans message="All registration related functionality (including social login) will be disabled." />
}
>
<Trans message="Disable registration" />
</FormSwitch>
<FormSwitch
className="mb-24"
name="client.single_device_login"
description={
<Trans message="Only allow one device to be logged into user account at the same time." />
}
>
<Trans message="Single device login" />
</FormSwitch>
<FormSwitch
name="client.social.compact_buttons"
description={
<Trans message="Use compact design for social login buttons." />
}
>
<Trans message="Compact buttons" />
</FormSwitch>
<EnvatoSection />
<GoogleSection />
<FacebookSection />
<TwitterSection />
<SettingsSeparator />
<FormTextField
inputElementType="textarea"
rows={3}
className="mt-24"
name="client.auth.domain_blacklist"
label={<Trans message="Domain blacklist" />}
description={
<Trans message="Comma separated list of domains. Users will not be able to register or login using any email adress from specified domains." />
}
/>
</SettingsPanel>
);
}
export function MailNotSetupWarning() {
const {watch} = useFormContext<AdminSettings>();
const mailSetup = watch('server.mail_setup');
if (mailSetup) return null;
return (
<p className="mt-10 rounded-panel border p-10 text-sm text-danger">
<Trans
message="Outgoing mail method needs to be setup before enabling this setting. <a>Fix now</a>"
values={{
a: text => (
<Button
elementType={Link}
variant="outline"
size="xs"
display="flex"
className="mt-10 max-w-max"
to="/admin/settings/outgoing-email"
>
{text}
</Button>
),
}}
/>
</p>
);
}
function EmailConfirmationSection() {
return (
<FormSwitch
className="mb-30"
name="client.require_email_confirmation"
description={
<Fragment>
<Trans message="Require newly registered users to validate their email address before being able to login." />
<MailNotSetupWarning />
</Fragment>
}
>
<Trans message="Require email confirmation" />
</FormSwitch>
);
}
function EnvatoSection() {
const {watch} = useFormContext<AdminSettings>();
const settings = useSettings();
const envatoLoginEnabled = watch('client.social.envato.enable');
if (!(settings as any).envato?.enable) return null;
return (
<SettingsErrorGroup separatorBottom={false} name="envato_group">
{isInvalid => (
<>
<FormSwitch
invalid={isInvalid}
name="client.social.envato.enable"
description={
<Trans message="Enable logging into the site via envato." />
}
>
<Trans message="Envato login" />
</FormSwitch>
{!!envatoLoginEnabled && (
<>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.envato_id"
label={<Trans message="Envato ID" />}
required
/>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.envato_secret"
label={<Trans message="Envato secret" />}
required
/>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.envato_personal_token"
label={<Trans message="Envato personal token" />}
required
/>
</>
)}
</>
)}
</SettingsErrorGroup>
);
}
function GoogleSection() {
const {watch} = useFormContext<AdminSettings>();
const googleLoginEnabled = watch('client.social.google.enable');
return (
<SettingsErrorGroup name="google_group">
{isInvalid => (
<>
<FormSwitch
invalid={isInvalid}
name="client.social.google.enable"
description={
<Trans message="Enable logging into the site via google." />
}
>
<Trans message="Google login" />
</FormSwitch>
{!!googleLoginEnabled && (
<>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.google_id"
label={<Trans message="Google client ID" />}
required
/>
<FormTextField
className="mt-30"
name="server.google_secret"
label={<Trans message="Google client secret" />}
required
/>
</>
)}
</>
)}
</SettingsErrorGroup>
);
}
function FacebookSection() {
const {watch} = useFormContext<AdminSettings>();
const facebookLoginEnabled = watch('client.social.facebook.enable');
return (
<SettingsErrorGroup name="facebook_group" separatorTop={false}>
{isInvalid => (
<>
<FormSwitch
invalid={isInvalid}
name="client.social.facebook.enable"
description={
<Trans message="Enable logging into the site via facebook." />
}
>
<Trans message="Facebook login" />
</FormSwitch>
{!!facebookLoginEnabled && (
<>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.facebook_id"
label={<Trans message="Facebook app ID" />}
required
/>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.facebook_secret"
label={<Trans message="Facebook app secret" />}
required
/>
</>
)}
</>
)}
</SettingsErrorGroup>
);
}
function TwitterSection() {
const {watch} = useFormContext<AdminSettings>();
const twitterLoginEnabled = watch('client.social.twitter.enable');
return (
<SettingsErrorGroup
name="twitter_group"
separatorTop={false}
separatorBottom={false}
>
{isInvalid => (
<>
<FormSwitch
invalid={isInvalid}
name="client.social.twitter.enable"
description={
<Trans message="Enable logging into the site via twitter." />
}
>
<Trans message="Twitter login" />
</FormSwitch>
{!!twitterLoginEnabled && (
<>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.twitter_id"
label={<Trans message="Twitter ID" />}
required
/>
<FormTextField
invalid={isInvalid}
className="mt-30"
name="server.twitter_secret"
label={<Trans message="Twitter secret" />}
required
/>
</>
)}
</>
)}
</SettingsErrorGroup>
);
}