feat: replace firebase-ui (#284)

frontend/package.json

@@ -14,17 +14,18 @@
 		"@firebase/app": "^0.9.25",
 		"@firebase/auth": "^1.5.1",
 		"@segment/analytics-next": "^1.62.0",
+		"@uidotdev/usehooks": "^2.4.1",
 		"dayjs": "^1.11.10",
 		"deepmerge-ts": "^5.1.0",
 		"fast-deep-equal": "^3.1.3",
 		"firebase": "^10.7.1",
-		"firebaseui": "^6.1.0",
 		"next": "14.0.4",
 		"next-intl": "^3.4.0",
 		"persist-and-sync": "^1.2.0",
 		"react": "18.2.0",
 		"react-bootstrap-icons": "^1.10.3",
 		"react-dom": "18.2.0",
+		"react-loading-icons": "^1.1.0",
 		"react-syntax-highlighter": "^15.5.0",
 		"react-tailwindcss-datepicker": "^1.6.6",
 		"sharp": "^0.33.1",

frontend/public/messages/en.json

@@ -225,7 +225,7 @@
 		"admin": "Admin",
 		"emailAddress": "Email Address",
 		"emailAddresses": "Email address(es)",
-		"emailPlaceholder": "you@site.com",
+		"emailPlaceholder": "moishe.zuchmir@example.com",
 		"invitationSent": "Invitation Sent",
 		"invite": "Invite",
 		"member": "Member",
@@ -366,10 +366,18 @@
 		"warning": "Warning"
 	},
 	"signin": {
-		"authHeader": "Welcome to",
-		"authSubtitle": "Integrate in minutes, scale to millions",
+		"and": "and",
 		"bannerTitle": "Sign In",
-		"basemind": "BaseMind"
+		"cancel": "Cancel",
+		"emailLabel": "What's your email?",
+		"emailPlaceholder": "[email protected]",
+		"forgotPassword": "reset password",
+		"passwordResetEmailSent": "Password reset email sent!",
+		"privacyPolicy": "Privacy Policy",
+		"resetPassword": "Reset Password",
+		"tos": "Terms of Service",
+		"unknownEmail": "User does not exist",
+		"userAgreementMessage": "By continuing you are agreeing to our"
 	},
 	"support": {
 		"api": "API",

frontend/src/app/[locale]/page.tsx

@@ -7,20 +7,20 @@ import { TrackStaticPage } from '@/components/static-site/track-static-page';
 
 export default function LandingPage() {
 	return (
-		<div
+		<main
 			className=" overflow-y-scroll bg-base-100 relative"
 			data-testid="landing-page-container"
 		>
 			<TrackStaticPage pageName="landing-page" />
 			<div className="container mx-auto">
 				<StaticPageHeader />
-				<main className="mx-auto pb-12 z-0  px-8">
+				<section className="mx-auto pb-12 z-0  px-8">
 					<IntroSection />
 					<FeaturesSection />
 					<CTASection />
-				</main>
+				</section>
 				<Footer />
 			</div>
-		</div>
+		</main>
 	);
 }

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/config-create-wizard/page.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Record } from 'react-bootstrap-icons';
+import { Oval } from 'react-loading-icons';
 import { shallow } from 'zustand/shallow';
 
 import { handleCreatePromptConfig } from '@/api';
@@ -193,14 +194,12 @@ export default function PromptConfigCreateWizard({
 	};
 
 	return (
-		<div
+		<main
 			data-testid="config-create-wizard-page"
 			className="flex flex-col min-h-screen w-full bg-base-100"
 		>
 			{isLoading ? (
-				<div className="flex flex-col justify-center items-center h-full right-0 left-0 top-0 bottom-0 absolute m-auto">
-					<div className="loading loading-spinner loading-lg align-middle text-primary" />
-				</div>
+				<Oval height="50vh" width="50vw" className="m-auto" />
 			) : (
 				<>
 					<div className="page-content-container">
@@ -233,6 +232,7 @@ export default function PromptConfigCreateWizard({
 										<button
 											data-testid="config-create-wizard-cancel-button"
 											onClick={() => {
+												setIsLoading(true);
 												store.resetState();
 												router.push(
 													setRouteParams(
@@ -293,6 +293,6 @@ export default function PromptConfigCreateWizard({
 					</div>
 				</>
 			)}
-		</div>
+		</main>
 	);
 }

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/configs/[promptConfigId]/page.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { memo, useEffect, useState } from 'react';
 import { Gear, RocketTakeoff, Speedometer2 } from 'react-bootstrap-icons';
+import { Oval } from 'react-loading-icons';
 import useSWR from 'swr';
 
 import { handleRetrievePromptConfigs } from '@/api';
@@ -66,12 +67,12 @@ export default function PromptConfiguration({
 
 	if (isLoading) {
 		return (
-			<div
+			<main
 				data-testid="prompt-config-page-loading"
 				className="h-full w-full flex items-center justify-center"
 			>
-				<span className="loading loading-spinner loading-md text-base-content" />
-			</div>
+				<Oval height="50vh" width="50vw" className="m-auto" />
+			</main>
 		);
 	}
 

frontend/src/app/[locale]/projects/[projectId]/applications/[applicationId]/page.tsx

@@ -95,7 +95,7 @@ export default function Application({
 	const TabComponent = tabComponents[selectedTab];
 
 	return (
-		<div
+		<main
 			data-testid="application-page"
 			className="flex flex-col min-h-screen w-full bg-base-100"
 		>
@@ -114,6 +114,6 @@ export default function Application({
 				<div className="card-divider" />
 				<TabComponent />
 			</div>
-		</div>
+		</main>
 	);
 }

frontend/src/app/[locale]/projects/[projectId]/page.tsx

@@ -114,7 +114,7 @@ export default function ProjectOverview({
 	const TabComponent = tabComponents[selectedTab];
 
 	return (
-		<div
+		<main
 			className="flex flex-col min-h-screen w-full bg-base-100"
 			data-testid="project-page"
 		>
@@ -129,6 +129,6 @@ export default function ProjectOverview({
 				<div className="card-divider" />
 				<TabComponent />
 			</div>
-		</div>
+		</main>
 	);
 }

frontend/src/app/[locale]/projects/create/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Oval } from 'react-loading-icons';
 
 import { Logo } from '@/components/logo';
 import { CreateProjectForm } from '@/components/projects/create/create-project-form';
@@ -15,12 +16,14 @@ export default function CreateProjectPage() {
 
 	const t = useTranslations('createProject');
 
+	const projects = useProjects();
 	const router = useRouter();
 	const { initialized, page } = useAnalytics();
 
-	const projects = useProjects();
+	const [isLoading, setIsLoading] = useState(false);
 
 	const handleCancel = useCallback(() => {
+		setIsLoading(true);
 		router.replace(`${Navigation.Projects}/${projects[0].id}`);
 	}, [projects]);
 
@@ -33,46 +36,54 @@ export default function CreateProjectPage() {
 	const isInitialRef = useRef(projects.length > 0);
 
 	return (
-		<div
+		<main
 			className="flex flex-col min-h-screen w-full bg-base-100"
 			data-testid="create-projects-container"
 		>
-			<div className="page-content-container">
-				<div
-					data-testid="navbar-header"
-					className="navbar flex-grow gap-4 content-baseline"
-				>
-					<Logo />
-				</div>
-				<div
-					className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 12/12  md:w-6/12 lg:w-5/12 2xl:w-4/12 bg-base-300 flex-col rounded"
-					data-testid="create-project-view-flex-container"
-				>
+			{isLoading ? (
+				<Oval height="50vh" width="50vw" className="m-auto" />
+			) : (
+				<div className="page-content-container">
 					<div
-						className="pt-10 pb-6"
-						data-testid="create-project-view-header"
+						data-testid="navbar-header"
+						className="navbar flex-grow gap-4 content-baseline"
 					>
-						<h1
-							className="text-base-content text-center font-bold text-xl mb-2"
-							data-testid="create-project-view-title"
-						>
-							{t('title')}
-						</h1>
-						<span
-							className="text-center block text-sm text-neutral-content px-10"
-							data-testid="create-project-view-sub-title"
+						<Logo />
+					</div>
+					<div
+						className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 12/12  md:w-6/12 lg:w-5/12 2xl:w-4/12 bg-base-300 flex-col rounded"
+						data-testid="create-project-view-flex-container"
+					>
+						<div
+							className="pt-10 pb-6"
+							data-testid="create-project-view-header"
 						>
-							{t('subTitle')}
-						</span>
+							<h1
+								className="text-base-content text-center font-bold text-xl mb-2"
+								data-testid="create-project-view-title"
+							>
+								{t('title')}
+							</h1>
+							<span
+								className="text-center block text-sm text-neutral-content px-10"
+								data-testid="create-project-view-sub-title"
+							>
+								{t('subTitle')}
+							</span>
+						</div>
+						<CreateProjectForm
+							allowCancel={!isInitialRef}
+							handleCancel={handleCancel}
+							validateApplicationName={(value) => !!value}
+							validateProjectName={(value) => !!value}
+							isLoading={isLoading}
+							setLoading={(loadingValue) => {
+								setIsLoading(loadingValue);
+							}}
+						/>
 					</div>
-					<CreateProjectForm
-						allowCancel={!isInitialRef}
-						handleCancel={handleCancel}
-						validateApplicationName={(value) => !!value}
-						validateProjectName={(value) => !!value}
-					/>
 				</div>
-			</div>
-		</div>
+			)}
+		</main>
 	);
 }