first commit

common/resources/client/auth/ui/account-settings/social-login-panel.tsx

@@ -0,0 +1,142 @@
+import clsx from 'clsx';
+import {cloneElement, ReactElement} from 'react';
+import {SocialService, useSocialLogin} from '../../requests/use-social-login';
+import {toast} from '@common/ui/toast/toast';
+import {Button} from '@common/ui/buttons/button';
+import {EnvatoIcon} from '@common/icons/social/envato';
+import {GoogleIcon} from '@common/icons/social/google';
+import {FacebookIcon} from '@common/icons/social/facebook';
+import {TwitterIcon} from '@common/icons/social/twitter';
+import {User} from '../../user';
+import {AccountSettingsPanel} from './account-settings-panel';
+import {Trans} from '@common/i18n/trans';
+import {message} from '@common/i18n/message';
+import {useSettings} from '@common/core/settings/use-settings';
+import {queryClient} from '@common/http/query-client';
+import {AccountSettingsId} from '@common/auth/ui/account-settings/account-settings-sidenav';
+
+interface Props {
+  user: User;
+}
+export function SocialLoginPanel({user}: Props) {
+  const {social} = useSettings();
+
+  if (
+    !social.envato?.enable &&
+    !social.google?.enable &&
+    !social.facebook?.enable &&
+    !social.twitter?.enable
+  ) {
+    return null;
+  }
+
+  return (
+    <AccountSettingsPanel
+      id={AccountSettingsId.SocialLogin}
+      title={<Trans message="Manage social login" />}
+    >
+      <SocialLoginPanelRow
+        icon={
+          <EnvatoIcon
+            viewBox="0 0 50 50"
+            className="border-envato bg-envato text-white"
+          />
+        }
+        service="envato"
+        user={user}
+      />
+      <SocialLoginPanelRow
+        icon={<GoogleIcon viewBox="0 0 48 48" />}
+        service="google"
+        user={user}
+      />
+      <SocialLoginPanelRow
+        icon={<FacebookIcon className="text-facebook" />}
+        service="facebook"
+        user={user}
+      />
+      <SocialLoginPanelRow
+        icon={<TwitterIcon className="text-twitter" />}
+        service="twitter"
+        user={user}
+      />
+      <div className="pb-6 pt-16 text-sm text-muted">
+        <Trans message="If you disable social logins, you'll still be able to log in using your email and password." />
+      </div>
+    </AccountSettingsPanel>
+  );
+}
+
+interface SocialLoginPanelRowProps {
+  service: SocialService;
+  user: User;
+  className?: string;
+  icon: ReactElement;
+}
+
+function SocialLoginPanelRow({
+  service,
+  user,
+  className,
+  icon,
+}: SocialLoginPanelRowProps) {
+  const {social} = useSettings();
+  const {connectSocial, disconnectSocial} = useSocialLogin();
+  const username = user?.social_profiles?.find(s => s.service_name === service)
+    ?.username;
+
+  if (!social?.[service]?.enable) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        'flex items-center gap-14 border-b px-10 py-20',
+        className,
+      )}
+    >
+      {cloneElement(icon, {
+        size: 'xl',
+        className: clsx(icon.props.className, 'border p-8 rounded'),
+      })}
+      <div className="mr-auto overflow-hidden text-ellipsis whitespace-nowrap">
+        <div className="overflow-hidden text-ellipsis text-sm font-bold first-letter:capitalize">
+          <Trans message=":service account" values={{service}} />
+        </div>
+        <div className="mt-2 text-xs">
+          {username || <Trans message="Disabled" />}
+        </div>
+      </div>
+      <Button
+        disabled={disconnectSocial.isPending}
+        size="xs"
+        variant="outline"
+        color={username ? 'danger' : 'primary'}
+        onClick={async () => {
+          if (username) {
+            disconnectSocial.mutate(
+              {service},
+              {
+                onSuccess: () => {
+                  queryClient.invalidateQueries({queryKey: ['users']});
+                  toast(
+                    message('Disabled :service account', {values: {service}}),
+                  );
+                },
+              },
+            );
+          } else {
+            const e = await connectSocial(service);
+            if (e?.status === 'SUCCESS') {
+              queryClient.invalidateQueries({queryKey: ['users']});
+              toast(message('Enabled :service account', {values: {service}}));
+            }
+          }
+        }}
+      >
+        {username ? <Trans message="Disable" /> : <Trans message="Enable" />}
+      </Button>
+    </div>
+  );
+}