+ {
+ setTheme(v);
+ }}
+ >
+
+ );
+};
+
+export default ThemeSwitcher;
diff --git a/src/apps/auth/components/wrapper.tsx b/src/apps/auth/components/wrapper.tsx
new file mode 100644
index 000000000..ec80d7949
--- /dev/null
+++ b/src/apps/auth/components/wrapper.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { cn } from '~/components/utils';
+
+const Wrapper = ({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) => {
+ return (
+
+
+ );
};
export default _Root;
diff --git a/src/apps/auth/routes/_main+/cli-logged-in.tsx b/src/apps/auth/routes/_main+/cli-logged-in.tsx
index bb625949a..4c5e0ab37 100644
--- a/src/apps/auth/routes/_main+/cli-logged-in.tsx
+++ b/src/apps/auth/routes/_main+/cli-logged-in.tsx
@@ -1,19 +1,30 @@
+import { Link } from '@remix-run/react';
import Container from '~/auth/components/container';
-import { BrandLogo } from '~/components/branding/brand-logo';
+import { Button } from '~/components/atoms/button';
import { getCookie } from '~/root/lib/app-setup/cookies';
import withContext from '~/root/lib/app-setup/with-contxt';
import { IExtRemixCtx } from '~/root/lib/types/common';
const cliLoggedIn = () => {
return (
-
-
+
);
};
diff --git a/src/apps/auth/components/footer.tsx b/src/apps/auth/components/footer.tsx
new file mode 100644
index 000000000..acdc44701
--- /dev/null
+++ b/src/apps/auth/components/footer.tsx
@@ -0,0 +1,114 @@
+import { BrandLogo } from '~/components/branding/brand-logo';
+import {
+ GithubLogoFill,
+ LinkedinLogoFill,
+ TwitterNewLogoFill,
+} from '@jengaicons/react';
+import { Button } from '~/components/atoms/button';
+import { Link } from '@remix-run/react';
+import Wrapper from './wrapper';
+import { mainUrl } from '../consts';
+import ThemeSwitcher from './theme-switcher';
+
+const linkedinUrl = 'https://linkedin.com/company/kloudlite-io';
+const gitUrl = 'https://github.com/kloudlite/kloudlite';
+const xUrl = 'https://x.com/kloudlite';
+
+const menu = [
+ {
+ title: 'Home',
+ to: mainUrl,
+ },
+ {
+ title: 'Documents',
+ to: `${mainUrl}/docs`,
+ },
+ {
+ title: 'Help & support',
+ to: `${mainUrl}/help-and-support`,
+ },
+ {
+ title: 'Contact us',
+ to: `${mainUrl}/contact-us`,
+ },
+ {
+ title: 'Blog',
+ to: `${mainUrl}/blog`,
+ },
+ {
+ title: 'Changelog',
+ to: '/',
+ },
+ {
+ title: 'Pricing',
+ to: '/',
+ },
+ {
+ title: 'Legal',
+ to: '/',
+ },
+];
+
+const SocialMenu = () => {
+ const socialIconSize = 18;
+ return (
+
+ );
+};
+
+const Footer = () => {
+ return (
+
{children}
- {footer && (
-
-
- )}
+
{footer?.message}
-
-
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/apps/auth/components/header.tsx b/src/apps/auth/components/header.tsx
new file mode 100644
index 000000000..b5c171ff3
--- /dev/null
+++ b/src/apps/auth/components/header.tsx
@@ -0,0 +1,33 @@
+import { Button } from '~/components/atoms/button';
+import { BrandLogo } from '~/components/branding/brand-logo';
+import { Link } from '@remix-run/react';
+import { ReactNode } from 'react';
+import Wrapper from './wrapper';
+
+const Header = ({ headerExtra }: { headerExtra?: ReactNode }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {menu.map((m) => (
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default Header;
diff --git a/src/apps/auth/components/theme-switcher.tsx b/src/apps/auth/components/theme-switcher.tsx
new file mode 100644
index 000000000..9e161ea1e
--- /dev/null
+++ b/src/apps/auth/components/theme-switcher.tsx
@@ -0,0 +1,23 @@
+import { Monitor, Moon, Sun } from '@jengaicons/react';
+import ButtonGroup from '~/components/atoms/button-group';
+import { useTheme } from '~/root/lib/client/hooks/useTheme';
+
+const ThemeSwitcher = () => {
+ const { theme, setTheme } = useTheme();
+ return (
+
+
+
+
+
+
+
+ {headerExtra}
+
+
+ {children}
+
+ );
+};
+
+export default Wrapper;
diff --git a/src/apps/auth/consts.tsx b/src/apps/auth/consts.tsx
new file mode 100644
index 000000000..21fca516f
--- /dev/null
+++ b/src/apps/auth/consts.tsx
@@ -0,0 +1 @@
+export const mainUrl = 'https://kloudlite.io';
diff --git a/src/apps/auth/root.tsx b/src/apps/auth/root.tsx
index 0bfd12fd5..961134aa3 100644
--- a/src/apps/auth/root.tsx
+++ b/src/apps/auth/root.tsx
@@ -1,5 +1,6 @@
import Root, { links as baseLinks } from '~/lib/app-setup/root.jsx';
import { ChildrenProps } from '~/components/types';
+import ThemeProvider from '~/root/lib/client/hooks/useTheme';
import authStylesUrl from './styles/index.css';
export { loader } from '~/lib/app-setup/root.jsx';
@@ -22,7 +23,11 @@ const Layout = ({ children }: ChildrenProps) => {
const _Root = ({ ...props }) => {
// @ts-ignore
- return
-
-
-
- Logged in Successfully -
-Visit your terminal.
+
+
diff --git a/src/apps/auth/routes/_main+/cli-login.tsx b/src/apps/auth/routes/_main+/cli-login.tsx
index e4b5e890c..6507204aa 100644
--- a/src/apps/auth/routes/_main+/cli-login.tsx
+++ b/src/apps/auth/routes/_main+/cli-login.tsx
@@ -9,8 +9,6 @@ import {
useLocation,
useNavigate,
} from '@remix-run/react';
-import md5 from '~/root/lib/client/helpers/md5';
-import { Avatar } from '~/components/atoms/avatar';
import { cn } from '~/components/utils';
import { SignOut } from '@jengaicons/react';
import { GQLServerHandler } from '~/auth/server/gql/saved-queries';
@@ -33,64 +31,42 @@ function CliLogin() {
if (!loginId) {
return (
+
+ Logged in successfully
+
+
+ Visit your terminal.
+
-
-
+
+
);
}
- const { avatar, email, name } = user || {};
-
- const profile = () => {
- return (
-
+
Login id not provided
-
-
+
-
- You should be able to login with the url generated by
-
+ -
kl login
+
+
+ You should be able to login with the url generated by
+
+
+ kl login
+
command
-
+
+
+
Setup kloudlite-client following instructions provided
-
-
-
-
+
+ .
+
-
- );
- };
-
const logOut = async () => {
navigate(
`${
@@ -106,7 +82,7 @@ function CliLogin() {
- {/* eslint-disable-next-line no-nested-ternary */}
- {avatar ? (
- 
- ) : email ? (
- }?d=identicon`})
- ) : (
-
-
- ) : (
-
diff --git a/src/apps/auth/routes/_main+/forgot-password.tsx b/src/apps/auth/routes/_main+/forgot-password.tsx
index 955b15447..7a6b9b5f7 100644
--- a/src/apps/auth/routes/_main+/forgot-password.tsx
+++ b/src/apps/auth/routes/_main+/forgot-password.tsx
@@ -1,7 +1,5 @@
-import { BrandLogo } from '~/components/branding/brand-logo.jsx';
import { Button } from '~/components/atoms/button';
import { TextInput } from '~/components/atoms/input';
-import { GoogleReCaptcha } from 'react-google-recaptcha-v3';
import { Link } from '@remix-run/react';
import useForm from '~/root/lib/client/hooks/use-form';
import Yup from '~/root/lib/server/helpers/yup';
@@ -37,56 +35,64 @@ const ForgetPassword = () => {
});
return (