Merge branch 'webinar/registration' of github.com:kloudlite/web into …

…webinar/registration
kloudlite · Sep 19, 2024 · 573fa51 · 573fa51
2 parents 03b213a + c75c219
commit 573fa51
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 199 deletions.
diff --git a/src/apps/devdoc/.env.development b/src/apps/devdoc/.env.development
@@ -1,3 +1,4 @@
 APP_ENV=development
 AUTH_URL=https://auth.dev.kloudlite.io
 CONSOLE_URL=https://console.dev.kloudlite.io
+CONTACT_URL=https://marketing-api.dev.kloudlite.io/website/contact-us
diff --git a/src/apps/devdoc/.env.production b/src/apps/devdoc/.env.production
@@ -1,3 +1,4 @@
 APP_ENV=production
 AUTH_URL=https://auth.kloudlite.io
 CONSOLE_URL=https://console.kloudlite.io
+CONTACT_URL=https://marketing-api.dev.kloudlite.io/website/contact-us
diff --git a/src/apps/devdoc/next.config.mjs b/src/apps/devdoc/next.config.mjs
@@ -26,6 +26,7 @@ export default withNextra({
     APP_ENV: process.env.APP_ENV,
     AUTH_URL: process.env.AUTH_URL,
     CONSOLE_URL: process.env.CONSOLE_URL,
+    CONTACT_URL: process.env.CONTACT_URL,
   },
   images: {
     unoptimized: true,

diff --git a/src/apps/devdoc/public/sitemap.xml b/src/apps/devdoc/public/sitemap.xml
diff --git a/src/apps/devdoc/web/components/join-provider-dialog.tsx b/src/apps/devdoc/web/components/join-provider-dialog.tsx
@@ -18,6 +18,7 @@ import { authUrl, consoleUrl } from '../utils/config';
 import { cn } from '../utils/commons';
 import OptionList from 'kl-design-system/atoms/option-list';
 import Profile from 'kl-design-system/molecule/profile';
+import { ArrowRight } from '../icons/icons';
 
 const ProfileMenu = ({ user }: { user: IConfig['user'] }) => {
   if (!user) {
@@ -81,20 +82,24 @@ const UserComponent = ({
       </div>
     );
   }
-  if (isInHeader && user) {
-    return (
-      <div className={cn('wb-text-text-default')}>
-        <ProfileMenu user={user} />
-      </div>
-    );
-  }
 
   if (user) {
     return (
-      <div className="wb-flex wb-items-center wb-justify-center">
+      <div
+        className={cn('wb-flex wb-items-center wb-justify-center', {
+          'wb-w-[172px]': isInHeader,
+        })}
+      >
         <ButtonDev
-          content="Go to console"
-          variant="basic"
+          content={
+            isInHeader ? (
+              <span className="wb-bodyMd-medium">Access console</span>
+            ) : (
+              'Access console'
+            )
+          }
+          variant="outline"
+          suffix={<ArrowRight />}
           block
           size={size}
           linkComponent={Link}
@@ -158,6 +163,7 @@ const JoinProvidersDialog = ({
   const { config } = useConfig();
   const { oathProviders } = config;
   const signupUrl = `${authUrl}/signup?mode=email`;
+  const signinUrl = `${authUrl}/login?mode=email`;
 
   const { setState } = useMenu();
 
@@ -202,147 +208,119 @@ const JoinProvidersDialog = ({
         <Popup.Content
           className={cn('!wb-p-0', !userApproved ? 'md:!wb-max-h-[90vh]' : '')}
         >
-          {userApproved ? (
-            <div className="wb-flex wb-flex-col wb-gap-4xl wb-px-8xl wb-py-5xl wb-text-center wb-h-full wb-items-center">
-              <Badge type="neutral">
-                🔥 Amazing curated Open-Source remote local envs
-              </Badge>
-              <span className="wb-headingXl-marketing wb-text-text-default">
-                You&apos;ve been added to our waitlist!
-              </span>
-              <span className="wb-bodyLg wb-text-text-soft">
-                Do you have an invite code?
-                <br />
-                <Link
-                  href={`${authUrl}/signup`}
-                  className="wb-text-text-default hover:wb-underline wb-underline-offset-4"
-                >
-                  Click here
-                </Link>{' '}
-                to access.
-              </span>
-            </div>
-          ) : (
-            <div className="wb-flex wb-flex-col wb-h-full">
-              <div className="wb-flex wb-flex-col wb-gap-5xl wb-p-8xl bg-surface-basic-subdued wb-items-center">
-                <div className="wb-flex wb-flex-col wb-items-center wb-gap-lg">
-                  <span className="wb-headingXl wb-text-text-default wb-text-center">
-                    {show === 'signup'
-                      ? 'Create your Kloudlite.io account'
-                      : 'Sign in to Kloudlite.io'}
-                  </span>
-                  <div className="wb-bodyLg wb-text-text-soft wb-text-center">
-                    {show === 'signup'
-                      ? 'Get started for free. No credit card required.'
-                      : 'Start integrating local coding with remote power'}
-                  </div>
+          <div className="wb-flex wb-flex-col wb-h-full">
+            <div className="wb-flex wb-flex-col wb-gap-5xl wb-p-8xl bg-surface-basic-subdued wb-items-center">
+              <div className="wb-flex wb-flex-col wb-items-center wb-gap-lg">
+                <span className="wb-headingXl wb-text-text-default wb-text-center">
+                  {show === 'signup'
+                    ? 'Create your Kloudlite.io account'
+                    : 'Sign in to Kloudlite.io'}
+                </span>
+                <div className="wb-bodyLg wb-text-text-soft wb-text-center">
+                  {show === 'signup'
+                    ? 'Get started for free. No credit card required.'
+                    : 'Start integrating local coding with remote power'}
                 </div>
               </div>
-              <div className="wb-flex wb-flex-col wb-w-full wb-p-8xl wb-gap-5xl wb-flex-1 md:wb-flex-auto">
-                {hasProvider && (
-                  <div className="wb-flex wb-flex-col wb-gap-3xl md:wb-w-[350px] md:wb-m-auto">
-                    {oathProviders?.githubLoginUrl && (
-                      <Button
-                        variant="tertiary"
-                        content={
-                          <span className="!wb-bodyLg">
-                            Continue with Github
-                          </span>
-                        }
-                        prefix={<GithubLogoFill />}
-                        linkComponent={Link}
-                        toLabel="href"
-                        to={oathProviders.githubLoginUrl}
-                        className="!wb-w-full md:wb-w-auto"
-                        size="lg"
-                      />
-                    )}
-                    {oathProviders?.gitlabLoginUrl && (
-                      <Button
-                        variant="purple"
-                        content={
-                          <span className="!wb-bodyLg">
-                            Continue with Gitlab
-                          </span>
-                        }
-                        prefix={<GitlabLogoFill />}
-                        linkComponent={Link}
-                        toLabel="href"
-                        to={oathProviders.gitlabLoginUrl}
-                        className="!wb-w-full md:wb-w-auto"
-                        size="lg"
-                      />
-                    )}
-                    {oathProviders?.googleLoginUrl && (
-                      <Button
-                        variant="primary"
-                        content={
-                          <span className="!wb-bodyLg">
-                            Continue with Google
-                          </span>
-                        }
-                        prefix={<GoogleLogoFill />}
-                        linkComponent={Link}
-                        toLabel="href"
-                        to={oathProviders.googleLoginUrl}
-                        className="!wb-w-full md:wb-w-auto"
-                        size="lg"
-                      />
-                    )}
-                  </div>
-                )}
-                <div className="wb-flex wb-flex-col wb-gap-5xl md:wb-w-[350px] md:wb-m-auto">
-                  {hasProvider ? (
-                    <span className="wb-h-xs wb-bg-border-default" />
-                  ) : null}
-                  <Button
-                    variant="basic"
-                    content={
-                      <span className="!wb-bodyLg">Continue with email</span>
-                    }
-                    prefix={<Envelope />}
-                    linkComponent={Link}
-                    toLabel="href"
-                    to={signupUrl}
-                    className="!wb-w-full md:wb-w-auto"
-                    size="lg"
-                  />
-
-                  <div className="wb-bodyLg wb-text-text-soft wb-text-center">
-                    By continuing, you agree Kloudlite's <br />
-                    <Anchor
-                      className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
-                      href="/terms-of-services"
-                    >
-                      Terms of Service
-                    </Anchor>
-                    &nbsp; and &nbsp;
-                    <Anchor
-                      className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
-                      href="/privacy-policy"
-                    >
-                      Privacy Policy.
-                    </Anchor>
-                  </div>
+            </div>
+            <div className="wb-flex wb-flex-col wb-w-full wb-p-8xl wb-gap-5xl wb-flex-1 md:wb-flex-auto">
+              {hasProvider && (
+                <div className="wb-flex wb-flex-col wb-gap-3xl md:wb-w-[350px] md:wb-m-auto">
+                  {oathProviders?.githubLoginUrl && (
+                    <Button
+                      variant="tertiary"
+                      content={
+                        <span className="!wb-bodyLg">Continue with Github</span>
+                      }
+                      prefix={<GithubLogoFill />}
+                      linkComponent={Link}
+                      toLabel="href"
+                      to={oathProviders.githubLoginUrl}
+                      className="!wb-w-full md:wb-w-auto"
+                      size="lg"
+                    />
+                  )}
+                  {oathProviders?.gitlabLoginUrl && (
+                    <Button
+                      variant="purple"
+                      content={
+                        <span className="!wb-bodyLg">Continue with Gitlab</span>
+                      }
+                      prefix={<GitlabLogoFill />}
+                      linkComponent={Link}
+                      toLabel="href"
+                      to={oathProviders.gitlabLoginUrl}
+                      className="!wb-w-full md:wb-w-auto"
+                      size="lg"
+                    />
+                  )}
+                  {oathProviders?.googleLoginUrl && (
+                    <Button
+                      variant="primary"
+                      content={
+                        <span className="!wb-bodyLg">Continue with Google</span>
+                      }
+                      prefix={<GoogleLogoFill />}
+                      linkComponent={Link}
+                      toLabel="href"
+                      to={oathProviders.googleLoginUrl}
+                      className="!wb-w-full md:wb-w-auto"
+                      size="lg"
+                    />
+                  )}
                 </div>
-              </div>
-              <div className="wb-flex wb-bg-surface-basic-subdued wb-px-5xl md:wb-px-8xl wb-py-5xl wb-bodyLg wb-text-text-soft wb-items-center wb-justify-center">
-                {show === 'signup' ? (
-                  <>Already have an account?&nbsp;</>
-                ) : (
-                  <>New to Kloudlite?&nbsp;</>
-                )}
-                <Anchor
-                  className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
-                  href={
-                    show === 'signup' ? `${authUrl}/login` : `${authUrl}/signup`
+              )}
+              <div className="wb-flex wb-flex-col wb-gap-5xl md:wb-w-[350px] md:wb-m-auto">
+                {hasProvider ? (
+                  <span className="wb-h-xs wb-bg-border-default" />
+                ) : null}
+                <Button
+                  variant="basic"
+                  content={
+                    <span className="!wb-bodyLg">Continue with email</span>
                   }
-                >
-                  {show === 'signup' ? 'Sign in' : 'Sign up'}
-                </Anchor>
+                  prefix={<Envelope />}
+                  linkComponent={Link}
+                  toLabel="href"
+                  to={show === 'signup' ? signupUrl : signinUrl}
+                  className="!wb-w-full md:wb-w-auto"
+                  size="lg"
+                />
+
+                <div className="wb-bodyLg wb-text-text-soft wb-text-center">
+                  By continuing, you agree Kloudlite's <br />
+                  <Anchor
+                    className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
+                    href="/terms-of-services"
+                  >
+                    Terms of Service
+                  </Anchor>
+                  &nbsp; and &nbsp;
+                  <Anchor
+                    className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
+                    href="/privacy-policy"
+                  >
+                    Privacy Policy.
+                  </Anchor>
+                </div>
               </div>
             </div>
-          )}
+            <div className="wb-flex wb-bg-surface-basic-subdued wb-px-5xl md:wb-px-8xl wb-py-5xl wb-bodyLg wb-text-text-soft wb-items-center wb-justify-center">
+              {show === 'signup' ? (
+                <>Already have an account?&nbsp;</>
+              ) : (
+                <>New to Kloudlite?&nbsp;</>
+              )}
+              <Anchor
+                className="wb-text-text-strong wb-underline wb-underline-offset-4 hover:wb-cursor-pointer"
+                href={
+                  show === 'signup' ? `${authUrl}/login` : `${authUrl}/signup`
+                }
+              >
+                {show === 'signup' ? 'Sign in' : 'Sign up'}
+              </Anchor>
+            </div>
+          </div>
         </Popup.Content>
       </Popup.Root>
     </div>

diff --git a/src/apps/devdoc/web/utils/config.tsx b/src/apps/devdoc/web/utils/config.tsx
@@ -17,6 +17,7 @@ export const siteDesc =
   'Kloudlite is a remote-local development environment platform designed to streamline the workflow for developers working on distributed applications. By integrating both local and remote environments through Kubernetes, Kloudlite ensures a seamless, productive, and more connected development experience.';
 export const basePath = 'https://kloudlite.io';
 export const authUrl = `${process.env.AUTH_URL}` || 'https://auth.kloudlite.io';
+export const contactUrl = `${process.env.CONTACT_URL}`;
 export const consoleUrl =
   `${process.env.CONSOLE_URL}` || 'https://console.kloudlite.io';
 export const gitUrl = 'https://github.com/kloudlite/kloudlite';

diff --git a/src/apps/devdoc/web/utils/g-recaptcha.tsx b/src/apps/devdoc/web/utils/g-recaptcha.tsx
@@ -0,0 +1,53 @@
+declare global {
+  interface Window {
+    grecaptcha: {
+      enterprise: {
+        ready: (callback: Promise<void>) => void;
+        execute: (
+          sitekey: string,
+          action: {
+            action: string;
+          },
+        ) => void;
+      };
+    };
+  }
+}
+
+export const onReady = (callback: Promise<void>) => {
+  if (
+    !window.grecaptcha ||
+    !window.grecaptcha.enterprise ||
+    !window.grecaptcha.enterprise.ready
+  ) {
+    console.warn('window.grecaptcha.enterprise.ready is not defined.');
+    return;
+  }
+  const ready = window.grecaptcha.enterprise.ready;
+  ready(callback);
+};
+
+export const execute = (
+  sitekey: string,
+  action: {
+    action: string;
+  },
+) => {
+  if (
+    !window.grecaptcha ||
+    !window.grecaptcha.enterprise ||
+    !window.grecaptcha.enterprise.ready
+  ) {
+    console.warn('window.grecaptcha.enterprises.ready is not defined.');
+    return;
+  }
+  const exec = window.grecaptcha.enterprise.execute;
+  exec(sitekey, action);
+};
+
+const grecaptcha = {
+  onReady,
+  execute,
+};
+
+export default grecaptcha;