@spacemade/ui 0.0.1

package/src/components/admin/nav/AdminLeftNav.tsx

@@ -0,0 +1,168 @@
+/* eslint-disable @next/next/no-img-element */
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Menu, MenuButton, MenuList } from '@chakra-ui/react'
+import { useAccountStore, useNavOptions } from '@hooks'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import { LoginPersonIconDark, defaultAvatar } from '@helpers/images'
+import { getUserNameFromUser } from '@helpers/string'
+import { NavOption } from '@helpers/types'
+
+export const AdminLeftNav = () => {
+	const router = useRouter()
+	const { signOut } = useUserAuthContext()
+	const { user } = useAccountStore()
+	const {
+		ADMIN_LEFT_NAV_OPTIONS,
+		NAV_OPTIONS_FOR_ADMIN_LEFT_NAV_USER_MENU,
+		isNavActive,
+	} = useNavOptions()
+
+	const onSignOut = async () => {
+		await signOut()
+		router.reload()
+	}
+
+	const renderNavItem = (item: NavOption, key: number) => {
+		if (item.children?.length) {
+			return (
+				<li key={key}>
+					<Link
+						href={item.path}
+						className={`d-block text-dark-900 fw-600 py-2 px-3 ${
+							isNavActive(item.path, false) ? 'bg-alice-blue' : ''
+						}`}
+						aria-label={`Link to ${item.label}`}
+					>
+						<span className={`${item.icon} me-1 icon-fw`}></span>{' '}
+						<span>{item.label}</span>
+					</Link>
+					<ul className='nav flex-column mb-1'>
+						{item.children.map((child, childKey) => (
+							<li key={childKey}>
+								<Link
+									href={child.path}
+									className={`d-block text-dark-900 fw-600 py-2 px-3 ${
+										isNavActive(child.path, child.hasChildrenRoutes)
+											? 'bg-alice-blue'
+											: ''
+									}`}
+									aria-label={`Link to ${child.label}`}
+								>
+									<span className='d-inline-block ms-3'>
+										<span className={`${child.icon} me-1 icon-fw`}></span>{' '}
+										<span>{child.label}</span>
+									</span>
+								</Link>
+							</li>
+						))}
+					</ul>
+				</li>
+			)
+		}
+
+		return (
+			<li key={key}>
+				<Link
+					href={item.path}
+					className={`d-block text-dark-900 fw-600 py-2 px-3 ${
+						isNavActive(item.path, item.hasChildrenRoutes)
+							? 'bg-alice-blue'
+							: ''
+					}`}
+					aria-label={`Link to ${item.label}`}
+				>
+					<span className={`${item.icon} me-1 icon-fw`}></span>{' '}
+					<span>{item.label}</span>
+				</Link>
+			</li>
+		)
+	}
+
+	return (
+		<div className='w-md-250p vh-100 position-absolute top-0 left-0 bottom-0'>
+			<div className='border-end h-100'>
+				<div className='custom-scroll-bar admin-left-nav-list-container'>
+					{Object.keys(ADMIN_LEFT_NAV_OPTIONS).map((option, key) => (
+						<ul key={key} className='nav flex-column mt-3'>
+							{option.indexOf('_hide') === -1 && (
+								<span className='fw-bold small d-block px-3 mb-2'>
+									{option}
+								</span>
+							)}
+							{ADMIN_LEFT_NAV_OPTIONS[option].map(renderNavItem)}
+						</ul>
+					))}
+				</div>
+
+				<div className='position-absolute bottom-0 left-0 right-0'>
+					<Menu>
+						<MenuButton className='btn w-100 text-dark-900 text-start no-min-size p-2 bg-white rounded-0 border-end mt-0 bg-white border-top'>
+							<div className='d-flex gap-2 align-items-center justify-content-between'>
+								{user && (
+									<>
+										<div className='d-flex gap-2 align-items-center'>
+											<OptimizedImage
+												key={user.profileMedia?.mediaId}
+												src={
+													user.profileMedia?.media.sourceUrl ||
+													LoginPersonIconDark
+												}
+												alt={
+													user.profileMedia?.media.details?.altText ||
+													'profile image'
+												}
+												width={40}
+												height={40}
+												className='object-fit-cover rounded-pill'
+											/>
+											<div>
+												<span className='d-block fw-bold'>
+													{getUserNameFromUser(user)}
+												</span>
+												<span className='d-block small'>Manage Profile</span>
+											</div>
+										</div>
+										<span className='bi bi-chevron-right'></span>
+									</>
+								)}
+							</div>
+						</MenuButton>
+						<MenuList className='bg-dark w-xs-250p overflow-hidden p-3 mb-n2 menu-list-container'>
+							<ul className='list-unstyled mb-0'>
+								{NAV_OPTIONS_FOR_ADMIN_LEFT_NAV_USER_MENU.map((item, key) => (
+									<li key={key}>
+										<Link
+											href={item.path}
+											className={`d-block text-white fw-600 py-2 mb-2`}
+											aria-label={`Link to ${item.label}`}
+											rel={item.isExternal ? 'noopener noreferrer' : undefined}
+											target={item.isExternal ? '_blank' : undefined}
+										>
+											<span className={`${item.icon} me-2 icon-fw`}></span>
+											<span>{item.label}</span>
+											{item.isExternal && (
+												<span className={`bi bi-box-arrow-up-right ms-3`}></span>
+											)}
+										</Link>
+									</li>
+								))}
+								<li>
+									<Button
+										ariaLabel='Log out'
+										className='d-block text-white fw-600 no-min-size py-2 px-0'
+										onClick={onSignOut}
+									>
+										<span className='bi bi-box-arrow-right me-1'></span> Log Out
+									</Button>
+								</li>
+							</ul>
+						</MenuList>
+					</Menu>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/auth/AuthBootstrap.tsx

@@ -0,0 +1,47 @@
+// components/auth/AuthBootstrap.tsx
+import { useEffect, useRef } from 'react'
+import { useUserAuthContext } from '@context'
+import { useLazyGetAuthUserQuery } from '@store/slice/api/accountApiSlice'
+
+export default function AuthBootstrap() {
+  const { isConnected, user, setUserLoggedIn } = useUserAuthContext()
+
+  const [triggerGetUser, { data: fetchedUser, isFetching }] =
+    useLazyGetAuthUserQuery()
+
+  const didRunRef = useRef(false)
+
+  // If they log out, allow future sessions to bootstrap again
+  useEffect(() => {
+    if (!isConnected) {
+      didRunRef.current = false
+    }
+  }, [isConnected])
+
+  useEffect(() => {
+    const needsAdminFlagRefresh =
+      !!user && typeof (user as any).isSystemAdmin === 'undefined'
+    const needsEmailRefresh =
+      !!user && (typeof (user as any).email === 'undefined' || (user as any).email === null || (user as any).email === '')
+
+    // already have user with new safe auth flags, nothing to do
+    if (user && !needsAdminFlagRefresh && !needsEmailRefresh) {
+      didRunRef.current = false
+      return
+    }
+
+    // bootstrap once per "connected" session or when user shape needs refresh
+    if (isConnected && !didRunRef.current && !isFetching) {
+      didRunRef.current = true
+      triggerGetUser()
+    }
+  }, [isConnected, user, isFetching, triggerGetUser])
+
+  useEffect(() => {
+    if (fetchedUser?.user) {
+      setUserLoggedIn(fetchedUser.user, fetchedUser.activeOrgId ?? null)
+    }
+  }, [fetchedUser, setUserLoggedIn])
+
+  return null
+}

package/src/components/auth/auth-card-shell.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+
+type Props = {
+  eyebrow?: string
+  title: string
+  description?: string
+  children: ReactNode
+  footer?: ReactNode
+}
+
+export function AuthCardShell({ eyebrow, title, description, children, footer }: Props) {
+  return (
+    <main className="container py-5" style={{ maxWidth: 560 }}>
+      <section className="border rounded p-4 bg-white shadow-sm">
+        {eyebrow ? <p className="text-uppercase small text-muted mb-2">{eyebrow}</p> : null}
+        <h1 className="h4 mb-2">{title}</h1>
+        {description ? <p className="text-muted">{description}</p> : null}
+        {children}
+        {footer ? <div className="mt-3 small text-muted">{footer}</div> : null}
+      </section>
+    </main>
+  )
+}

package/src/components/auth/forgot-password-form-template.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Button from '@/components/common/button/Button'
+import Input from '@/components/common/forms/Input'
+import { useForm } from 'react-hook-form'
+
+type FormValues = {
+  email: string
+}
+
+export function ForgotPasswordFormTemplate() {
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({ defaultValues: { email: '' } })
+
+  const onSubmit = async () => {
+    // placeholder for forgot-password integration
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column gap-3">
+      <Input
+        register={register('email', { required: 'Email is required' })}
+        label="Email"
+        type="email"
+        errors={errors}
+        getValues={getValues}
+      />
+      <Button type="submit" color="primary" className="text-white" disabled={isSubmitting}>
+        Send reset link
+      </Button>
+    </form>
+  )
+}

package/src/components/auth/form/ForgotForm.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { useForgotPasswordMutation } from '@store/slice/api/authApiSlice'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { EMAIL_REGEX } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	email: string
+}
+
+const ForgotForm = WithReCaptcha(() => {
+	const [isSent, setIsSent] = useState(false)
+	const [sendForgotEmail] = useForgotPasswordMutation()
+	const [errorMessage, setErrorMessage] = useState<string | null>(null)
+	const { executeRecaptcha } = useGoogleReCaptcha()
+
+	const {
+		register,
+		handleSubmit,
+		getValues,
+		setError,
+		clearErrors,
+		reset,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>()
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			if (!executeRecaptcha && isReCaptchaAvailable) {
+				setError('recaptcha-error', {
+					type: 'custom',
+					message: 'Execute recaptcha not yet available',
+				})
+				return
+			}
+
+			const captcha = executeRecaptcha
+				? await executeRecaptcha(ReCaptchaActions.forgot_password)
+				: null
+
+			await sendForgotEmail({
+				email: data.email,
+				captcha,
+			}).unwrap()
+			setIsSent(true)
+			setErrorMessage(null)
+		} catch (error: any) {
+			setIsSent(false)
+			setError('server-error', { type: 'custom', message: 'Server Error' })
+
+			if (
+				[
+					HTTPErrorStatus.UNPROCESSABLE_ENTITY,
+					HTTPErrorStatus.CONFLICT,
+				].includes(error.status)
+			) {
+				setErrorMessage(error.data?.message)
+			} else {
+				toast.error('An error occurred. Please try again later')
+			}
+		}
+	}
+
+	return (
+		<div className='mt-3'>
+			{isSent ? (
+				<div>
+					<p>
+						Please check your email. An email with instructions to create your
+						password has been sent to{' '}
+						<span className='fw-bold'>{getValues('email')}</span>. You may need
+						to wait a few minutes to receive the email, or check your spam or
+						junk folders.
+					</p>
+					<p>
+						{`Didn't get an email?`}{' '}
+						<Button
+							onClick={() => {
+								setIsSent(false)
+								reset()
+							}}
+							className='text-primary px-2 border-0 no-min-size'
+						>
+							Resend it.
+						</Button>
+					</p>
+				</div>
+			) : (
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<p>
+						Enter the email address associated with your Osirus AI account. You
+						will receive an email with instructions to set or reset your
+						password.
+					</p>
+					<div>
+						<Input
+							register={register('email', {
+								required: 'This field is required',
+								pattern: {
+									value: EMAIL_REGEX,
+									message: 'This value is not a valid email',
+								},
+							})}
+							placeholder='Enter Your Email'
+							label='Email'
+							getValues={getValues}
+							errors={errors}
+						/>
+					</div>
+
+					{errorMessage && (
+						<span className='text-warning small d-block mt-2'>
+							{errorMessage}
+						</span>
+					)}
+
+					<div className='text-center mt-4'>
+						<Button
+							type='submit'
+							className='w-100 rounded-xl text-white fw-bold'
+							ariaLabel='Continue to reset password'
+							color='primary'
+							isLoading={isSubmitting}
+							disabled={isSubmitting || isSubmitSuccessful}
+							onClick={() => clearErrors(['server-error', 'recaptcha-error'])}
+						>
+							Continue
+						</Button>
+					</div>
+				</form>
+			)}
+		</div>
+	)
+})
+
+export default ForgotForm

package/src/components/auth/form/ResetPasswordForm.tsx

@@ -0,0 +1,122 @@
+import { useRouter } from '@lib/next-router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { useResetPasswordMutation } from '@store/slice/api/authApiSlice'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { PASSWORD_REGEX } from '@helpers/constants'
+
+interface FormValues extends FieldValues {
+	password: string
+	passwordRepeat: string
+}
+
+const ResetPasswordForm = WithReCaptcha(({ token }: { token: string }) => {
+	const { push: redirect } = useRouter()
+	const [resetPassword] = useResetPasswordMutation()
+	const { executeRecaptcha } = useGoogleReCaptcha()
+
+	const {
+		register,
+		handleSubmit,
+		getValues,
+		setError,
+		clearErrors,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>()
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			if (!executeRecaptcha && isReCaptchaAvailable) {
+				setError('recaptcha-error', {
+					type: 'custom',
+					message: 'Execute recaptcha not yet available',
+				})
+				return
+			}
+
+			const captcha = executeRecaptcha
+				? await executeRecaptcha(ReCaptchaActions.reset_password)
+				: null
+
+			await resetPassword({ token, password: data.password, captcha }).unwrap()
+			toast.success('Password has been reset successfully')
+			redirect('/login')
+		} catch (error: any) {
+			toast.error(
+				error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+					? error.data.message
+					: 'An error occurred. Please try again later'
+			)
+			setError('server-error', { type: 'custom', message: 'Server Error' })
+			redirect('/forgot')
+		}
+	}
+
+	return (
+		<div className='mt-3'>
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<p>
+					Passwords must be at least 6 characters long, and must contain letters
+					(at least one uppercase), numbers and special characters.
+				</p>
+				<div className='mb-4'>
+					<Input
+						register={register('password', {
+							required: 'This field is required',
+							pattern: {
+								value: PASSWORD_REGEX,
+								message:
+									'Invalid password. Must be at least 6 characters long, and must contain letters (at least one uppercase), numbers and special characters.',
+							},
+						})}
+						getValues={getValues}
+						placeholder='Enter New Password'
+						label='New Password'
+						type='password'
+						isPassword
+						errors={errors}
+					/>
+				</div>
+				<div className='mb-4'>
+					<Input
+						register={register('passwordRepeat', {
+							required: 'This field is required',
+							validate: (value) =>
+								value === getValues('password') || 'The passwords do not match',
+						})}
+						getValues={getValues}
+						placeholder='Re-enter New Password'
+						label='Re-enter Password'
+						type='password'
+						isPassword
+						errors={errors}
+					/>
+				</div>
+
+				<div className='text-center'>
+					<Button
+						type='submit'
+						className='w-100 rounded-xl text-white fw-bold'
+						ariaLabel='Update Password'
+						color='primary'
+						onClick={() => clearErrors(['server-error', 'recaptcha-error'])}
+						isLoading={isSubmitting}
+						disabled={isSubmitting || isSubmitSuccessful}
+					>
+						Update Password
+					</Button>
+				</div>
+			</form>
+		</div>
+	)
+})
+
+export default ResetPasswordForm

package/src/components/auth/form/SignInForm.tsx

@@ -0,0 +1,139 @@
+import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { useGA4DataLayer } from '@hooks'
+import { useUserAuthContext } from '@context'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import {
+	ReCaptchaActions,
+	WithReCaptcha,
+	isReCaptchaAvailable,
+} from '@components/hoc/WithReCaptcha'
+import { DataLayerEvents } from '@helpers/types/data-layer'
+
+import { useDispatch } from 'react-redux'
+import { productsApiSlice } from '@store/slice/api/productsApiSlice';
+
+interface FormValues extends FieldValues {
+	email: string
+	password: string
+}
+
+interface SignInFormProps {
+	redirect?: string
+}
+
+const SignInForm = WithReCaptcha(({ redirect }: SignInFormProps) => {
+	const { push: routerPush } = useRouter()
+	const { connect } = useUserAuthContext()
+	const { trackGA4PlatformEvent } = useGA4DataLayer()
+	const { executeRecaptcha } = useGoogleReCaptcha()
+	const dispatch = useDispatch()
+
+	const {
+		register,
+		handleSubmit,
+		getValues,
+		setError,
+		clearErrors,
+		formState: { errors, isSubmitting, isSubmitSuccessful },
+	} = useForm<FormValues>()
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		if (!executeRecaptcha && isReCaptchaAvailable) {
+			setError('recaptcha-error', {
+				type: 'custom',
+				message: 'Execute recaptcha not yet available',
+			})
+			return
+		}
+
+		const captcha = executeRecaptcha
+			? await executeRecaptcha(ReCaptchaActions.sign_in)
+			: null
+
+		const success = await connect(data.email, data.password, captcha)
+
+		if (!success) {
+			setError('invalid-credentials', {
+				type: 'custom',
+				message: 'invalid-credentials',
+			})
+			return
+		}
+
+		dispatch(productsApiSlice.util.resetApiState())
+
+		toast.success('You have logged in successfully')
+		trackGA4PlatformEvent(DataLayerEvents.login)
+
+		if (redirect) {
+			return routerPush(redirect)
+		} else {
+			routerPush('/')
+		}
+	}
+
+	return (
+		<div>
+			<form className='mt-3' onSubmit={handleSubmit(onSubmit)}>
+				<div className='mb-4'>
+					<Input
+						register={register('email', {
+							required: 'This field is required',
+						})}
+						placeholder='Enter Your Email'
+						label='Email'
+						getValues={getValues}
+						errors={errors}
+					/>
+				</div>
+				<div className='mb-3'>
+					<Input
+						register={register('password', {
+							required: 'This field is required',
+						})}
+						placeholder='Enter Your Password'
+						getValues={getValues}
+						label='Password'
+						type='password'
+						isPassword
+						errors={errors}
+					/>
+					<Link
+						href='/forgot'
+						className='text-medium-gray mt-2 d-block small-md'
+					>
+						Forgot Password?
+					</Link>
+				</div>
+				<div className='text-center'>
+					<Button
+						type='submit'
+						className='w-100 rounded-md text-white fw-bold'
+						ariaLabel='Login'
+						color='primary'
+						isLoading={isSubmitting}
+						disabled={isSubmitting || isSubmitSuccessful}
+						onClick={() =>
+							clearErrors(['invalid-credentials', 'recaptcha-error'])
+						}
+					>
+						Login
+					</Button>
+				</div>
+				<div className='d-flex justify-content-center gap-1 mt-5'>
+					<span>{`Don't have an account?`}</span>
+					<Link href='/signup' className='text-decoration-underline text-dark fw-bold'>
+						Sign Up
+					</Link>
+				</div>
+			</form>
+		</div>
+	)
+})
+
+export default SignInForm