+
@@ -24,6 +28,14 @@ export default function Layout() {
+
+ );
+}
+
+export default function Layout() {
+ return (
+
+
);
diff --git a/src/app/NotFoundLayout.tsx b/src/app/NotFoundLayout.tsx
index d20ec21..788c44c 100644
--- a/src/app/NotFoundLayout.tsx
+++ b/src/app/NotFoundLayout.tsx
@@ -7,7 +7,6 @@ import {
} from '@heroicons/react/24/outline';
import { Link } from 'react-router-dom';
import logoFlag from '~/assets/logo-flag.png';
-import Footer from '~/components/Footer';
const links = [
{
@@ -125,7 +124,6 @@ export default function NotFoundLayout() {
-
);
}
diff --git a/src/app/auth/Login.tsx b/src/app/auth/Login.tsx
new file mode 100644
index 0000000..5a73539
--- /dev/null
+++ b/src/app/auth/Login.tsx
@@ -0,0 +1,155 @@
+import {
+ faGitlab,
+ faGoogle,
+ faOpenid
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { toLower, upperFirst } from 'lodash';
+import { useEffect, useState } from 'react';
+import { Navigate } from 'react-router-dom';
+import logoFlag from '~/assets/logo-flag.png';
+import { listAuthMethods } from '~/data/api';
+import { useError } from '~/data/hooks/error';
+import { useSession } from '~/data/hooks/session';
+import { AuthMethod, AuthMethodOIDC } from '~/types/Auth';
+
+interface ILoginProvider {
+ displayName: string;
+ icon?: any;
+}
+
+const knownProviders: Record
+
+
+
+
+ );
+}
diff --git a/src/app/console/Console.tsx b/src/app/console/Console.tsx
index 4bf88aa..d9243e3 100644
--- a/src/app/console/Console.tsx
+++ b/src/app/console/Console.tsx
@@ -33,27 +33,22 @@ export default function Console() {
const navigate = useNavigate();
const loadData = useCallback(async () => {
- try {
- const initialFlagList = (await listFlags()) as IFlagList;
- const { flags } = initialFlagList;
+ const initialFlagList = (await listFlags()) as IFlagList;
+ const { flags } = initialFlagList;
- setFlags(
- flags.map((flag) => {
- const status = flag.enabled ? 'active' : 'inactive';
+ setFlags(
+ flags.map((flag) => {
+ const status = flag.enabled ? 'active' : 'inactive';
- return {
- ...flag,
- status,
- filterValue: flag.key,
- displayValue: flag.name
- };
- })
- );
- clearError();
- } catch (err) {
- setError(err instanceof Error ? err : Error(String(err)));
- }
- }, [clearError, setError]);
+ return {
+ ...flag,
+ status,
+ filterValue: flag.key,
+ displayValue: flag.name
+ };
+ })
+ );
+ }, []);
const handleSubmit = (values: IConsole) => {
const { flagKey, entityId, context } = values;
@@ -79,8 +74,12 @@ export default function Console() {
}, [response]);
useEffect(() => {
- loadData();
- }, [loadData]);
+ loadData()
+ .then(() => clearError())
+ .catch((err) => {
+ setError(err);
+ });
+ }, [clearError, loadData, setError]);
const initialvalues: IConsole = {
flagKey: selectedFlag?.key || '',
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 14526b2..f959819 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,17 +1,15 @@
-import { Menu, Transition } from '@headlessui/react';
import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
-import { Fragment } from 'react';
-import { classNames } from '../utils/helpers';
+import { useSession } from '~/data/hooks/session';
+import UserProfile from './UserProfile';
type HeaderProps = {
setSidebarOpen: (sidebarOpen: boolean) => void;
};
-const userNavigation = [{ name: 'Sign Out', href: '#' }];
-
export default function Header(props: HeaderProps) {
const { setSidebarOpen } = props;
// const [notifications, setNotifications] = useState(false);
+ const { session } = useSession();
return (
+
+
+ 
+
+
+ + Login to Flipt +
+
+
+
+
+
+ {providers.map((provider) => (
+
+ ))}
+
+
@@ -45,47 +43,13 @@ export default function Header(props: HeaderProps) {
/> */}
{/* */}
-
+ {/* Profile dropdown */}
+ {session && session.self && (
+
diff --git a/src/components/SessionProvider.tsx b/src/components/SessionProvider.tsx
new file mode 100644
index 0000000..7b0b372
--- /dev/null
+++ b/src/components/SessionProvider.tsx
@@ -0,0 +1,72 @@
+import { createContext, useEffect, useMemo } from 'react';
+import { getAuthSelf, getInfo } from '~/data/api';
+import { useStorage } from '~/data/hooks/storage';
+import { AuthMethodOIDCSelf } from '~/types/Auth';
+import { Info } from '~/types/Meta';
+
+type Session = {
+ info: Info;
+ self: AuthMethodOIDCSelf;
+};
+
+interface SessionContextType {
+ session?: Session;
+ setSession: (data: any) => void;
+}
+
+export const SessionContext = createContext({} as SessionContextType);
+
+export default function SessionProvider({
+ children
+}: {
+ children: React.ReactNode;
+}) {
+ const [session, setSession] = useStorage('flipt', null);
+
+ useEffect(() => {
+ const loadSession = async () => {
+ let data = null;
+
+ try {
+ const info = await getInfo();
+ data = {
+ info: info
+ };
+ } catch (err) {
+ // if we can't get the info, we're not logged in
+ // or there was an error, either way, clear the session so we redirect
+ // to the login page
+ setSession(null);
+ return;
+ }
+
+ try {
+ const self = await getAuthSelf();
+ data = {
+ ...data,
+ self: self
+ };
+ } catch (err) {
+ // if we can't get the self info and we got here then auth is likely not enabled
+ // so we can just return
+ return;
+ } finally {
+ setSession(data);
+ }
+ };
+ if (!session) loadSession();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const value = useMemo(
+ () => ({
+ session,
+ setSession
+ }),
+ [session, setSession]
+ );
+
+ return (
+