✨(front) add sdk related routes and logic

The create room button is a dedicated route. There is also a bit of
logic implied in this commit, including the BroadcastChannel.
The router has been updated with a /sdk negation in order to avoid
including support and react query debug tool in the iframe.

src/frontend/src/App.tsx

@@ -13,24 +13,41 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
+import { SdkCreateButton } from './features/sdk/routes/CreateButton'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
   return (
     <QueryClientProvider client={queryClient}>
-      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
-          <Layout>
-            <Switch>
-              {Object.entries(routes).map(([, route], i) => (
-                <Route key={i} path={route.path} component={route.Component} />
-              ))}
-              <Route component={NotFoundScreen} />
-            </Switch>
-          </Layout>
-          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
+          <Switch>
+            <Route path="/sdk" nest>
+              <Route path="/create-button">
+                <SdkCreateButton />
+              </Route>
+            </Route>
+            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
+            <Route path="*">
+              <AppInitialization />
+              <Layout>
+                {Object.entries(routes).map(([, route], i) => (
+                  <Route
+                    key={i}
+                    path={route.path}
+                    component={route.Component}
+                  />
+                ))}
+              </Layout>
+              <ReactQueryDevtools
+                initialIsOpen={false}
+                buttonPosition="top-left"
+              />
+            </Route>
+
+            <Route component={NotFoundScreen} />
+          </Switch>
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/assets/VisioIcon.tsx

@@ -0,0 +1,24 @@
+export const VisioIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.841702 8.95427C0.75 9.42479 0.75 10.0042 0.75 10.9748V13.3096C0.75 14.5138 0.75 15.1159 0.925134 15.6549C1.08009 16.1319 1.33356 16.5709 1.6691 16.9435C2.04833 17.3647 2.56977 17.6658 3.61264 18.2679L5.6346 19.4353C6.55753 19.9681 7.07208 20.2652 7.56247 20.4081V13.2043C7.56247 12.8442 7.36578 12.5129 7.04965 12.3404L0.841702 8.95427Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.747 10.0123V13.7685C17.747 14.2878 17.9727 14.7815 18.3654 15.1214L21.0688 17.4609C21.227 17.5947 21.3912 17.7042 21.5616 17.7894C21.738 17.8685 21.9084 17.9081 22.0726 17.9081C22.4255 17.9081 22.7084 17.7925 22.9213 17.5613C23.1404 17.324 23.2499 17.0168 23.2499 16.6396V7.14866C23.2499 6.77146 23.1404 6.46726 22.9213 6.23607C22.7084 5.9988 22.4255 5.88017 22.0726 5.88017C21.9084 5.88017 21.738 5.91971 21.5616 5.9988C21.3912 6.07789 21.227 6.1874 21.0688 6.32733L18.3675 8.65759C17.9735 8.99746 17.747 9.49201 17.747 10.0123Z"
+        fill="currentColor"
+      />
+      <path
+        d="M1.74517 7.61282C1.67 7.57182 1.59117 7.54405 1.51135 7.52872C1.56171 7.46443 1.61433 7.40178 1.66914 7.34091C2.04837 6.91973 2.56981 6.61868 3.61268 6.01657L5.63464 4.84919C6.67751 4.24708 7.19894 3.94603 7.7533 3.82819C8.2438 3.72394 8.75074 3.72394 9.24124 3.82819C9.7956 3.94603 10.317 4.24708 11.3599 4.84919L13.358 6.0028C13.366 6.00738 13.374 6.01197 13.3819 6.01658C14.4248 6.61868 14.9462 6.91973 15.3255 7.34091C15.661 7.71357 15.9145 8.15259 16.0694 8.62951C16.2446 9.16852 16.2446 9.77063 16.2446 10.9748V13.3096C16.2446 14.5138 16.2446 15.1159 16.0694 15.6549C15.9145 16.1319 15.661 16.5709 15.3255 16.9435C14.9462 17.3647 14.4248 17.6657 13.382 18.2678C13.373 18.273 13.364 18.2782 13.3551 18.2833L11.3599 19.4353C10.317 20.0374 9.7956 20.3384 9.24124 20.4562C9.21846 20.4611 9.19564 20.4657 9.17279 20.4701L9.17278 13.2043C9.17278 12.255 8.65422 11.3814 7.82079 10.9268L1.74517 7.61282Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

src/frontend/src/features/home/routes/Home.tsx

@@ -13,11 +13,12 @@ import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
+import { SdkReverseClient } from '@/features/sdk/SdkReverseClient'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -156,6 +157,18 @@ export const Home = () => {
   const { mutateAsync: createRoom } = useCreateRoom()
   const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
 
+  const { user } = useUser()
+
+  /**
+   * Used for SDK popup to close automatically.
+   */
+  useEffect(() => {
+    if (!user) {
+      return
+    }
+    SdkReverseClient.broadcastAuthentication()
+  }, [user])
+
   return (
     <UserAware>
       <Screen>

src/frontend/src/features/sdk/SdkReverseClient.tsx

@@ -0,0 +1,84 @@
+import { authUrl, useUser } from '../auth'
+
+export enum ClientMessageType {
+  ROOM_CREATED = 'ROOM_CREATED',
+}
+
+export class SdkReverseClient {
+  /**
+   * IDEA: Use API Key. Must be based on some sort of credentials? No needs for now as there are no security
+   * plausible at the moment.
+   */
+  static getAllowTargetOrigin() {
+    return '*'
+  }
+
+  static post(type: ClientMessageType, data: unknown = {}) {
+    window.parent.postMessage(
+      {
+        type,
+        data,
+      },
+      SdkReverseClient.getAllowTargetOrigin()
+    )
+  }
+
+  static broadcastAuthentication() {
+    const bc = new BroadcastChannel('APP_CHANNEL')
+    bc.postMessage({ type: 'AUTHENTICATED' })
+
+    /**
+     * This means the parent window has authenticated has successfully refetched user, then we can close the popup.
+     */
+    bc.onmessage = (event) => {
+      if (event.data.type === 'AUTHENTICATED_ACK') {
+        window.close()
+      }
+    }
+  }
+
+  static waitForAuthenticationAck() {
+    return new Promise<void>((resolve) => {
+      const bc = new BroadcastChannel('APP_CHANNEL')
+      bc.onmessage = async (event) => {
+        if (event.data.type === 'AUTHENTICATED') {
+          resolve()
+          bc.postMessage({ type: 'AUTHENTICATED_ACK' })
+        }
+      }
+    })
+  }
+}
+
+/**
+ * Returns a function to be awaited in order to make sure the user is logged in.
+ * If not logged-in it opens a popup with the connection flow, the promise returned is resolved
+ * once logged-in.
+ *
+ * To be used in SDK scope.
+ */
+export function useEnsureAuth() {
+  const { isLoggedIn, ...other } = useUser({
+    fetchUserOptions: { attemptSilent: false },
+  })
+
+  const startSSO = () => {
+    return new Promise<void>((resolve) => {
+      SdkReverseClient.waitForAuthenticationAck().then(async () => {
+        await other.refetch()
+        resolve()
+      })
+      const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
+  width=400,height=900,left=100,top=100`
+      window.open(new URL('authenticate/', authUrl()).href, '', params)
+    })
+  }
+
+  const ensureAuth = async () => {
+    if (!isLoggedIn) {
+      await startSSO()
+    }
+  }
+
+  return { ensureAuth }
+}

src/frontend/src/features/sdk/routes/CreateButton.tsx

@@ -0,0 +1,103 @@
+import { Button } from '@/primitives/Button'
+import { useTranslation } from 'react-i18next'
+import { usePersistentUserChoices } from '@livekit/components-react'
+import { useState } from 'react'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { css } from '@/styled-system/css'
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
+import { VisioIcon } from '@/assets/VisioIcon'
+import { generateRoomId, useCreateRoom } from '../../rooms'
+import {
+  ClientMessageType,
+  SdkReverseClient,
+  useEnsureAuth,
+} from '../SdkReverseClient'
+
+export const SdkCreateButton = () => {
+  const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
+  const [roomUrl, setRoomUrl] = useState<string>()
+  const [isLoading, setIsLoading] = useState(false)
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
+  const { mutateAsync: createRoom } = useCreateRoom()
+  const { ensureAuth } = useEnsureAuth()
+
+  const submitCreateRoom = async () => {
+    setIsLoading(true)
+    const slug = generateRoomId()
+    const data = await createRoom({ slug, username })
+    const roomUrlTmp = getRouteUrl('room', data.slug)
+    setRoomUrl(roomUrlTmp)
+    setIsLoading(false)
+    SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
+      url: roomUrlTmp,
+    })
+  }
+
+  const submit = async () => {
+    await ensureAuth()
+    submitCreateRoom()
+  }
+
+  return (
+    <div
+      className={css({
+        paddingTop: '3px',
+        paddingLeft: '3px',
+      })}
+    >
+      {roomUrl ? (
+        <RoomUrl roomUrl={roomUrl} />
+      ) : (
+        <Button
+          variant="primaryDark"
+          aria-label={t('label')}
+          onPress={submit}
+          data-attr="sdk-create"
+          loading={isLoading}
+          icon={<VisioIcon />}
+        >
+          {t('label')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+const RoomUrl = ({ roomUrl }: { roomUrl: string }) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copy = () => {
+    navigator.clipboard.writeText(roomUrl!)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 1000)
+  }
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+      })}
+    >
+      <span
+        className={css({
+          color: 'greyscale.600',
+        })}
+      >
+        {roomUrl}
+      </span>
+      <Button
+        variant={isCopied ? 'success' : 'quaternaryText'}
+        data-attr="sdk-create-copy"
+        onPress={copy}
+        square
+      >
+        {isCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+      </Button>
+    </div>
+  )
+}

src/frontend/src/locales/de/sdk.json

@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": ""
+  }
+}

src/frontend/src/locales/en/sdk.json

@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": "Create a Visio link"
+  }
+}

src/frontend/src/locales/fr/sdk.json

@@ -0,0 +1,5 @@
+{
+  "createButton": {
+    "label": "Créer un lien Visio"
+  }
+}