feat: bluesky

apps/backend/src/api/routes/integrations.controller.ts

@@ -288,15 +288,19 @@ export class IntegrationsController {
       throw new Error('Integration not allowed');
     }
 
-    const getCodeVerifier = await ioRedis.get(`login:${body.state}`);
+    const integrationProvider =
+      this._integrationManager.getSocialIntegration(integration);
+
+    const getCodeVerifier = integrationProvider.customFields
+      ? 'none'
+      : await ioRedis.get(`login:${body.state}`);
     if (!getCodeVerifier) {
       throw new Error('Invalid state');
     }
 
-    await ioRedis.del(`login:${body.state}`);
-
-    const integrationProvider =
-      this._integrationManager.getSocialIntegration(integration);
+    if (!integrationProvider.customFields) {
+      await ioRedis.del(`login:${body.state}`);
+    }
 
     const details = integrationProvider.externalUrl
       ? await ioRedis.get(`external:${body.state}`)
@@ -341,7 +345,13 @@ export class IntegrationsController {
       integrationProvider.isBetweenSteps,
       body.refresh,
       +body.timezone,
-      details ? AuthService.fixedEncryption(details) : undefined
+      details
+        ? AuthService.fixedEncryption(details)
+        : integrationProvider.customFields
+        ? AuthService.fixedEncryption(
+            Buffer.from(body.code, 'base64').toString()
+          )
+        : undefined
     );
   }
 

apps/frontend/src/app/(site)/integrations/social/[provider]/continue/page.tsx

@@ -4,6 +4,7 @@ export const dynamic = 'force-dynamic';
 
 import { internalFetch } from '@gitroom/helpers/utils/internal.fetch';
 import { redirect } from 'next/navigation';
+import { Redirect } from '@gitroom/frontend/components/layout/redirect';
 
 export default async function Page({
   params: { provider },
@@ -30,6 +31,22 @@ export default async function Page({
     return redirect(`/launches?scope=missing`);
   }
 
+  if (
+    data.status !== HttpStatusCode.Ok &&
+    data.status !== HttpStatusCode.Created
+  ) {
+    return (
+      <>
+        <div className="mt-[50px] text-[50px]">
+          Could not add provider.
+          <br />
+          You are being redirected back
+        </div>
+        <Redirect url="/launches" delay={3000} />
+      </>
+    );
+  }
+
   const { inBetweenSteps, id } = await data.json();
 
   if (inBetweenSteps && !searchParams.refresh) {

apps/frontend/src/components/launches/add.provider.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useModals } from '@mantine/modals';
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
 import { Input } from '@gitroom/react/form/input';
 import { FieldValues, FormProvider, useForm } from 'react-hook-form';
@@ -12,6 +12,8 @@ import { useRouter } from 'next/navigation';
 import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
 import { useVariables } from '@gitroom/react/helpers/variable.context';
 import { useToaster } from '@gitroom/react/toaster/toaster';
+import { object, string } from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 const resolver = classValidatorResolver(ApiKeyDto);
 
@@ -181,55 +183,193 @@ export const UrlModal: FC<{
   );
 };
 
+export const CustomVariables: FC<{
+  variables: Array<{
+    key: string;
+    label: string;
+    defaultValue?: string;
+    validation: string;
+    type: 'text' | 'password';
+  }>;
+  identifier: string;
+  gotoUrl(url: string): void;
+}> = (props) => {
+  const { gotoUrl, identifier, variables } = props;
+  const modals = useModals();
+  const schema = useMemo(() => {
+    return object({
+      ...variables.reduce((aIcc, item) => {
+        const splitter = item.validation.split('/');
+        const regex = new RegExp(
+          splitter.slice(1, -1).join('/'),
+          splitter.pop()
+        );
+        return {
+          ...aIcc,
+          [item.key]: string()
+            .matches(regex, `${item.label} is invalid`)
+            .required(),
+        };
+      }, {}),
+    });
+  }, [variables]);
+
+  const methods = useForm({
+    mode: 'onChange',
+    resolver: yupResolver(schema),
+    values: variables.reduce(
+      (acc, item) => ({
+        ...acc,
+        ...(item.defaultValue ? { [item.key]: item.defaultValue } : {}),
+      }),
+      {}
+    ),
+  });
+
+  const submit = useCallback(
+    async (data: FieldValues) => {
+      gotoUrl(
+        `/integrations/social/${identifier}?state=nostate&code=${Buffer.from(
+          JSON.stringify(data)
+        ).toString('base64')}`
+      );
+    },
+    [variables]
+  );
+
+  return (
+    <div className="rounded-[4px] border border-customColor6 bg-sixth px-[16px] pb-[16px] relative">
+      <TopTitle title={`Custom URL`} />
+      <button
+        onClick={modals.closeAll}
+        className="outline-none absolute right-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
+        type="button"
+      >
+        <svg
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+        >
+          <path
+            d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <FormProvider {...methods}>
+        <form
+          className="gap-[8px] flex flex-col pt-[10px]"
+          onSubmit={methods.handleSubmit(submit)}
+        >
+          {variables.map((variable) => (
+            <div key={variable.key}>
+              <Input
+                label={variable.label}
+                name={variable.key}
+                type={variable.type == 'text' ? 'text' : 'password'}
+              />
+            </div>
+          ))}
+          <div>
+            <Button type="submit">Connect</Button>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};
+
 export const AddProviderComponent: FC<{
-  social: Array<{ identifier: string; name: string; isExternal: boolean }>;
+  social: Array<{
+    identifier: string;
+    name: string;
+    isExternal: boolean;
+    customFields?: Array<{
+      key: string;
+      label: string;
+      validation: string;
+      type: 'text' | 'password';
+    }>;
+  }>;
   article: Array<{ identifier: string; name: string }>;
   update?: () => void;
 }> = (props) => {
-  const { update } = props;
+  const { update, social, article } = props;
   const { isGeneral } = useVariables();
   const toaster = useToaster();
-
+  const router = useRouter();
   const fetch = useFetch();
   const modal = useModals();
-  const { social, article } = props;
   const getSocialLink = useCallback(
-    (identifier: string, isExternal: boolean) => async () => {
-      const gotoIntegration = async (externalUrl?: string) => {
-        const { url, err } = await (
-          await fetch(
-            `/integrations/social/${identifier}${
-              externalUrl ? `?externalUrl=${externalUrl}` : ``
-            }`
-          )
-        ).json();
+    (
+        identifier: string,
+        isExternal: boolean,
+        customFields?: Array<{
+          key: string;
+          label: string;
+          validation: string;
+          defaultValue?: string;
+          type: 'text' | 'password';
+        }>
+      ) =>
+      async () => {
+        const gotoIntegration = async (externalUrl?: string) => {
+          const { url, err } = await (
+            await fetch(
+              `/integrations/social/${identifier}${
+                externalUrl ? `?externalUrl=${externalUrl}` : ``
+              }`
+            )
+          ).json();
 
-        if (err) {
-          toaster.show('Could not connect to the platform', 'warning');
-          return ;
-        }
-        window.location.href = url;
-      };
+          if (err) {
+            toaster.show('Could not connect to the platform', 'warning');
+            return;
+          }
+          window.location.href = url;
+        };
 
-      if (isExternal) {
-        modal.closeAll();
+        if (isExternal) {
+          modal.closeAll();
 
-        modal.openModal({
-          title: '',
-          withCloseButton: false,
-          classNames: {
-            modal: 'bg-transparent text-textColor',
-          },
-          children: (
-            <UrlModal gotoUrl={gotoIntegration} />
-          ),
-        });
+          modal.openModal({
+            title: '',
+            withCloseButton: false,
+            classNames: {
+              modal: 'bg-transparent text-textColor',
+            },
+            children: <UrlModal gotoUrl={gotoIntegration} />,
+          });
 
-        return;
-      }
+          return;
+        }
 
-      await gotoIntegration();
-    },
+        if (customFields) {
+          modal.closeAll();
+
+          modal.openModal({
+            title: '',
+            withCloseButton: false,
+            classNames: {
+              modal: 'bg-transparent text-textColor',
+            },
+            children: (
+              <CustomVariables
+                identifier={identifier}
+                gotoUrl={(url: string) => router.push(url)}
+                variables={customFields}
+              />
+            ),
+          });
+          return;
+        }
+
+        await gotoIntegration();
+      },
     []
   );
 
@@ -281,7 +421,11 @@ export const AddProviderComponent: FC<{
           {social.map((item) => (
             <div
               key={item.identifier}
-              onClick={getSocialLink(item.identifier, item.isExternal)}
+              onClick={getSocialLink(
+                item.identifier,
+                item.isExternal,
+                item.customFields
+              )}
               className={
                 'w-[120px] h-[100px] bg-input text-textColor justify-center items-center flex flex-col gap-[10px] cursor-pointer'
               }

apps/frontend/src/components/launches/providers/bluesky/bluesky.provider.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
+
+const Empty: FC = (props) => {
+  return null;
+};
+
+export default withProvider(null, Empty, undefined, async (posts) => {
+  if (posts.some((p) => p.length > 4)) {
+    return 'There can be maximum 4 pictures in a post.';
+  }
+
+  return true;
+});

apps/frontend/src/components/launches/providers/show.all.providers.tsx

@@ -16,6 +16,7 @@ import ThreadsProvider from '@gitroom/frontend/components/launches/providers/thr
 import DiscordProvider from '@gitroom/frontend/components/launches/providers/discord/discord.provider';
 import SlackProvider from '@gitroom/frontend/components/launches/providers/slack/slack.provider';
 import MastodonProvider from '@gitroom/frontend/components/launches/providers/mastodon/mastodon.provider';
+import BlueskyProvider from '@gitroom/frontend/components/launches/providers/bluesky/bluesky.provider';
 
 export const Providers = [
     {identifier: 'devto', component: DevtoProvider},
@@ -35,6 +36,7 @@ export const Providers = [
     {identifier: 'discord', component: DiscordProvider},
     {identifier: 'slack', component: SlackProvider},
     {identifier: 'mastodon', component: MastodonProvider},
+    {identifier: 'bluesky', component: BlueskyProvider},
 ];
 
 

apps/frontend/src/components/layout/redirect.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { FC, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export const Redirect: FC<{url: string, delay: number}> = (props) => {
+  const { url, delay } = props;
+  const router = useRouter();
+  useEffect(() => {
+    setTimeout(() => {
+      router.push(url);
+    }, delay);
+  }, []);
+  return null;
+}