feat: add sign in and sign up with Firebase Auth

apps/web-ui/next.config.mjs

@@ -1,13 +1,22 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    webpack: (config, { isServer }) => {
+    webpack: (config, {isServer}) => {
         if (!isServer) {
         }
         return config;
     },
     experimental: {
         instrumentationHook: true,
     },
+    images: {
+        // https://nextjs.org/docs/pages/api-reference/components/image#dangerouslyallowsvg
+        dangerouslyAllowSVG: true,
+        remotePatterns: [
+            {
+                hostname: "tailwindui.com",
+            }
+        ]
+    },
 };
 
 export default nextConfig;

apps/web-ui/package.json

@@ -23,6 +23,7 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "tailwind-merge": "^2.3.0",
     "urql": "^4.0.7"
   },
   "devDependencies": {

apps/web-ui/src/app/(public)/auth/signIn/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+import {ComponentProps, useCallback} from 'react';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import {auth} from "@/contexts/firebase";
+import AuthForm from "@/components/AuthForm";
+import {Either} from "@/types/either.ts";
+import {useRouter} from "next/navigation";
+
+type AuthFormProps = ComponentProps<typeof AuthForm>;
+
+export default function Page() {
+    const router = useRouter();
+
+    const handleSubmit = useCallback<AuthFormProps["onSubmit"]>(async (values) => {
+        try {
+            const {email, password} = values;
+            await signInWithEmailAndPassword(auth, email, password);
+            router.push("/");
+        } catch (error: unknown) {
+            if (error instanceof Error) {
+                return Either.left(error.message);
+            }
+            return Either.left("Something went wrong");
+        }
+    }, [router]);
+
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <AuthForm onSubmit={handleSubmit} type="signIn"/>
+        </div>
+    );
+}

apps/web-ui/src/app/(public)/auth/signUp/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+import {ComponentProps, useCallback} from 'react';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import {auth} from "@/contexts/firebase";
+import AuthForm from "@/components/AuthForm";
+import {Either} from "@/types/either.ts";
+import { useRouter } from 'next/navigation';
+
+type AuthFormProps = ComponentProps<typeof AuthForm>;
+
+export default function Page() {
+    const router = useRouter();
+
+    const handleSubmit = useCallback<AuthFormProps["onSubmit"]>(async (values) => {
+        try {
+            const {email, password} = values;
+            await createUserWithEmailAndPassword(auth, email, password);
+            router.push("/");
+        } catch (error: unknown) {
+            if (error instanceof Error) {
+                return Either.left(error.message);
+            }
+            return Either.left("Something went wrong");
+        }
+    }, [router]);
+
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <AuthForm onSubmit={handleSubmit} type="signUp"/>
+        </div>
+    );
+}

apps/web-ui/src/app/globals.css

@@ -8,22 +8,9 @@
   --background-end-rgb: 255, 255, 255;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+
 }
 
 @layer utilities {

apps/web-ui/src/app/layout.tsx

@@ -2,6 +2,9 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { GraphqlProvider } from "@/contexts/graphql/provider";
+import React from "react";
+import Nav from "@/components/Nav";
+import {twMerge} from "tailwind-merge";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,10 +19,21 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+    const isLoggedIn = false;
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <GraphqlProvider>{children}</GraphqlProvider>
+    <html lang="en" className="h-full bg-gray-100">
+      <body className={twMerge(
+          'h-full',
+          inter.className
+      )}>
+        <GraphqlProvider>
+            <div className="flex flex-col h-full">
+                <Nav isLoggedIn={isLoggedIn}/>
+                <main>
+                    {children}
+                </main>
+            </div>
+        </GraphqlProvider>
       </body>
     </html>
   );

apps/web-ui/src/app/page.tsx

@@ -15,14 +15,15 @@ export default function Home() {
   }
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <div className="py-8">
 
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          {result.data?.ping}
-        </p>
-        <button onClick={onButtonClick} type="button">Refresh</button>
+      <div className="w-full max-w-4xl mx-auto font-mono text-sm px-4 py-4">
+        <div className="mb-4">
+          <p>{result.data?.ping}</p>
+        </div>
+        <button onClick={onButtonClick} type="button" className="w-full border border-gray-400 rounded-md py-2 px-4">Refresh</button>
       </div>
-    </main>
+
+    </div>
   );
 }

apps/web-ui/src/components/AuthForm/index.tsx

@@ -0,0 +1,82 @@
+"use client";
+import React, {useState, type FormEvent} from 'react';
+import type {Either} from "@/types/either.ts";
+
+interface Props {
+    type: 'signIn' | 'signUp';
+    onSubmit: (values: FormValues) => Promise<Either<string, void> | void>;
+}
+
+interface FormValues {
+    email: string;
+    password: string;
+}
+
+const AuthForm: React.FC<Props> = ({type, onSubmit}) => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState<string>();
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        try {
+            const result = await onSubmit({
+                email,
+                password,
+            });
+            if (result && result.kind === 'left') {
+                setError(result.value);
+            }
+        } catch (error: unknown) {
+            setError("Something went wrong");
+        }
+    };
+
+    return (
+        <form className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit}>
+            <div className="mb-4">
+                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="email">
+                    Email
+                </label>
+                <input
+                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                    id="email"
+                    onChange={(e) => {
+                        setEmail(e.target.value);
+                    }}
+                    placeholder="Email"
+                    required
+                    type="email"
+                    value={email}
+                />
+            </div>
+            <div className="mb-6">
+                <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
+                    Password
+                </label>
+                <input
+                    className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+                    id="password"
+                    onChange={(e) => {
+                        setPassword(e.target.value);
+                    }}
+                    placeholder="******************"
+                    required
+                    type="password"
+                    value={password}
+                />
+            </div>
+            {error ? <p className="text-red-500 text-xs italic">{error}</p> : null}
+            <div className="flex items-center justify-between">
+                <button
+                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+                    type="submit"
+                >
+                    {type === 'signIn' ? 'Sign In' : 'Sign Up'}
+                </button>
+            </div>
+        </form>
+    );
+}
+
+export default AuthForm;

apps/web-ui/src/components/Link/index.tsx

@@ -0,0 +1,33 @@
+import React, {ComponentProps} from "react";
+import {default as NextLink} from "next/link";
+import {twMerge} from "tailwind-merge";
+
+type Props = ComponentProps<typeof NextLink> & {
+    selected?: boolean;
+    disabled?: boolean;
+}
+
+const Link: React.FC<Props> = ({children, selected, disabled, ...props}) => {
+    return (
+        <NextLink
+            {...props}
+            target={disabled ? "_blank" : undefined}
+            style={{
+                ...props.style,
+                pointerEvents: (disabled) ? "none" : "auto",
+            }}
+            className={twMerge(
+                "rounded-md px-3 py-2 text-sm font-medium",
+                !!selected
+                    ? "bg-gray-900 text-white"
+                    : "text-gray-300 hover:bg-gray-700 hover:text-white"
+            )
+            }
+            aria-current={!!selected ? "page" : undefined}
+        >
+            {children}
+        </NextLink>
+    )
+}
+
+export default Link;

apps/web-ui/src/components/Nav/index.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import Link from "@/components/Link"
+import Image from "next/image";
+
+// TODO: add sign in, signup, and signout links
+
+interface Props {
+    isLoggedIn?: boolean;
+}
+
+const Nav: React.FC<Props> = ({isLoggedIn}) => {
+    return (
+        <nav className="bg-gray-800">
+            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div className="flex h-16 items-center justify-between">
+                    {/* Logo and Links Section */}
+                    <div className="flex items-center">
+                        <div className="flex-shrink-0">
+                            <Image
+                                className="h-8 w-8"
+                                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                                width={32}
+                                height={32}
+                                alt="Domain Fusion"/>
+                        </div>
+                        {!!isLoggedIn && (
+                            <div className="hidden md:block">
+                                <div className="ml-10 flex items-baseline space-x-4">
+                                    <Link
+                                        href="#"
+                                        selected={true}
+                                    >
+                                        Inbox
+                                    </Link>
+                                    <Link
+                                        href="#"
+                                        selected={false}
+                                        disabled={true}
+                                    >
+                                        Calendar
+                                    </Link>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {/*<div className="hidden md:block">*/}
+                    {/*    <div className="ml-4 flex items-center md:ml-6">*/}
+                    {/*        <button type="button"*/}
+                    {/*                className="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">*/}
+                    {/*            <span className="absolute -inset-1.5"></span>*/}
+                    {/*            <span className="sr-only">View notifications</span>*/}
+                    {/*            <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"*/}
+                    {/*                 stroke="currentColor" aria-hidden="true">*/}
+                    {/*                <path stroke-linecap="round" stroke-linejoin="round"*/}
+                    {/*                      d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>*/}
+                    {/*            </svg>*/}
+                    {/*        </button>*/}
+
+                    {/*        <div className="relative ml-3">*/}
+                    {/*            <div>*/}
+                    {/*                <button type="button"*/}
+                    {/*                        className="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"*/}
+                    {/*                        id="user-menu-button" aria-expanded="false" aria-haspopup="true">*/}
+                    {/*                    <span className="absolute -inset-1.5"></span>*/}
+                    {/*                    <span className="sr-only">Open user menu</span>*/}
+                    {/*                    <img className="h-8 w-8 rounded-full"*/}
+                    {/*                         src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"*/}
+                    {/*                         alt=""/>*/}
+                    {/*                </button>*/}
+                    {/*            </div>*/}
+
+                    {/*            /!* Drop down menu *!/*/}
+                    {/*            <div*/}
+                    {/*                className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"*/}
+                    {/*                role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button"*/}
+                    {/*                tabIndex={-1}>*/}
+                    {/*                <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
+                    {/*                   tabIndex={-1} id="user-menu-item-0">Your Profile</a>*/}
+                    {/*                <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
+                    {/*                   tabIndex={-1} id="user-menu-item-1">Settings</a>*/}
+                    {/*                <a href="#" className="block px-4 py-2 text-sm text-gray-700" role="menuitem"*/}
+                    {/*                   tabIndex={-1} id="user-menu-item-2">Sign out</a>*/}
+                    {/*            </div>*/}
+                    {/*        </div>*/}
+                    {/*    </div>*/}
+                    {/*</div>*/}
+
+                </div>
+            </div>
+        </nav>
+    )
+}
+
+export default Nav;