feat: login with wargaming to generate url

packages/website/src/pages/tools/embed/[embed]/_index.tsx

@@ -25,6 +25,7 @@ import { SizeWithout0 } from '../../../../components/Embeds/SizeWithout0';
 import { Slider } from '../../../../components/Embeds/Slider';
 import { TextController } from '../../../../components/Embeds/TextController';
 import { PageWrapper } from '../../../../components/PageWrapper';
+import { WargamingLoginButton } from '../../../../components/WargamingLoginButton';
 import {
   configurations,
   extractEmbedConfigDefaults,
@@ -59,6 +60,10 @@ export function Page({ embed }: PageProps) {
 }
 
 function Content({ embed }: PageProps) {
+  const wargaming = App.useDeferred(
+    (state) => state.logins.wargaming,
+    undefined,
+  );
   const embedStateStore = EmbedState.useStore();
   const appStore = App.useStore();
   const config = configurations[embed] as EmbedConfig;
@@ -96,6 +101,7 @@ function Content({ embed }: PageProps) {
 
             <Flex mb="6" gap="2" wrap="wrap">
               <CopyButton
+                disabled={!wargaming}
                 copy={() => {
                   const { wargaming } = appStore.getState().logins;
 
@@ -120,8 +126,13 @@ function Content({ embed }: PageProps) {
                 }}
               >
                 <Link2Icon />
-                Copy URL
+                {wargaming ? 'Copy URL' : 'Log in to general URL'}
               </CopyButton>
+              {!wargaming && (
+                <WargamingLoginButton>
+                  Log in with Wargaming
+                </WargamingLoginButton>
+              )}
               <CopyButton
                 variant="outline"
                 copy={() =>

packages/website/src/pages/tools/embed/_index.tsx

@@ -0,0 +1,51 @@
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Callout, Flex, Link } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { WargamingLoginButton } from '../../../components/WargamingLoginButton';
+import { configurations } from '../../../constants/embeds';
+import { App, type WargamingLogin } from '../../../stores/app';
+
+export function Page() {
+  return (
+    <App.Provider>
+      <Content />
+    </App.Provider>
+  );
+}
+
+function Content() {
+  const wargaming = App.useDeferred((state) => state.logins.wargaming, {
+    expires: 0,
+    id: 0,
+    token: '',
+  } satisfies WargamingLogin);
+
+  return (
+    <PageWrapper color="red">
+      {!wargaming && (
+        <>
+          <Flex justify="center">
+            <Callout.Root size="1">
+              <Callout.Icon>
+                <ExclamationTriangleIcon />
+              </Callout.Icon>
+
+              <Callout.Text>
+                You must be logged in with your Wargaming account to export
+                embeds.
+              </Callout.Text>
+            </Callout.Root>
+          </Flex>
+
+          <Flex justify="center">
+            <WargamingLoginButton>Log in with Wargaming</WargamingLoginButton>
+          </Flex>
+        </>
+      )}
+
+      {Object.entries(configurations).map(([embed, config]) => (
+        <Link href={`/tools/embed/${embed}`}>{embed}</Link>
+      ))}
+    </PageWrapper>
+  );
+}

packages/website/src/pages/tools/embed/index.astro

@@ -1,16 +1,9 @@
 ---
-import { PageWrapper } from '../../../components/PageWrapper';
-import { configurations } from '../../../constants/embeds';
 import { embedTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
 ---
 
 <ToolLayout tool={embedTool}>
-  <PageWrapper>
-    {
-      Object.entries(configurations).map(([embed, config]) => (
-        <a href={`/tools/embed/${embed}`}>{embed}</a>
-      ))
-    }
-  </PageWrapper>
+  <Page client:load />
 </ToolLayout>

packages/website/src/stores/app/index.ts

@@ -3,11 +3,17 @@ import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { createContextualStore } from '../../core/zustand/createContextualStore';
 
+export interface WargamingLogin {
+  token: string;
+  id: number;
+  expires: number;
+}
+
 interface AppStore {
   developerMode: boolean;
   policiesAgreementIndex: number;
   logins: {
-    wargaming?: { token: string; id: number; expires: number };
+    wargaming?: WargamingLogin;
   };
 }