@elyx-code/editor-ui 0.0.2

package/src/pages/Auth.tsx

@@ -0,0 +1,848 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import './auth.css';
+import {
+	confirmSignUp,
+	// createGoogleSocialSignInButtons,
+	forgotPassword,
+	forgotPasswordSubmit,
+	getCurrentSession,
+	// initGoogleSocialSignIn,
+	resendConfirmationCode,
+	signIn,
+	signUp,
+} from '../auth';
+import AnimatedEmailSending from '../components/animated-svg/AnimatedEmailSending';
+import AnimatedLoading from '../components/animated-svg/AnimatedLoading';
+import AnimatedCheckmark from '../components/animated-svg/AnimatedCheckmark';
+import AnimatedCrossmark from '../components/animated-svg/AnimatedCrossmark';
+import Logo from '../assets/logo-full-word.png';
+
+// MUI Imports for the password toggle
+import IconButton from '@mui/material/IconButton';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+
+enum CONTENT_TYPE {
+	SIGN_IN = 'sign-in',
+	SIGN_UP = 'sign-up',
+	CONFIRMATION_EMAIL_SENT = 'confirmation-email-sent',
+	FORGOT_PASSWORD = 'forgot-password',
+	EMAIL_CONFIRMATION = 'email-confirmation',
+	PASSWORD_RESET = 'password-reset',
+	PASSWORD_RESET_EMAIL_SENT = 'password-reset-email-sent',
+}
+
+// Since the initial value is true, it means that the first content is on the left
+let nextContentIsLeft = true;
+let nextContentToRender: CONTENT_TYPE;
+
+const sanitizeErrorMessage = (error: { message: string }): string => {
+	let resolvedErrorMessage = error.message;
+	resolvedErrorMessage = resolvedErrorMessage.replace(
+		'Password did not conform with policy: ',
+		'',
+	);
+	resolvedErrorMessage = resolvedErrorMessage.replace(
+		'Username',
+		'Email address',
+	);
+	resolvedErrorMessage = resolvedErrorMessage.replace(
+		'username',
+		'email address',
+	);
+	return resolvedErrorMessage;
+};
+
+const Auth: React.FC = () => {
+	const [emailConfirmationSuccess, setEmailConfirmationSuccess] = useState<
+		null | object
+	>(null);
+	const [emailConfirmationError, setEmailConfirmationError] = useState<
+		null | object
+	>(null);
+	const [activeContent, setActiveContent] = useState<CONTENT_TYPE>(
+		CONTENT_TYPE.SIGN_UP,
+	);
+
+	// New state for toggling password visibility
+	const [showPassword, setShowPassword] = useState(false);
+
+	const rootElementRef = useRef<HTMLDivElement>(null);
+	const navigate = useNavigate();
+	const { action } = useParams<{ action: string }>();
+	const location = useLocation();
+
+	// Extract the target redirect URL, defaulting to '/gallery'
+	const redirectTo =
+		new URLSearchParams(location.search).get('redirectTo') || '/gallery';
+
+	// While we're verifying whether the user already has a session, we keep
+	// the form unmounted to avoid a flash of the sign-in UI before the
+	// redirect kicks in. Set to `true` once we've confirmed the user is NOT
+	// signed in (or once we've decided we shouldn't redirect anyway).
+	const [sessionCheckComplete, setSessionCheckComplete] = useState(false);
+
+	// Email-confirmation and password-reset are the two flows a signed-in
+	// user might legitimately need to complete (the link comes from email,
+	// they may already have an active session on this device, etc.). For
+	// everything else — sign-in, sign-up, forgot-password, the "email sent"
+	// confirmation screens — being on /auth/* while authenticated is
+	// pointless, so we bounce to `redirectTo` (or /gallery by default).
+	const SHOULD_NEVER_AUTO_REDIRECT_ACTIONS: string[] = [
+		CONTENT_TYPE.EMAIL_CONFIRMATION,
+		CONTENT_TYPE.PASSWORD_RESET,
+	];
+
+	useEffect(() => {
+		let cancelled = false;
+
+		const checkExistingSession = async () => {
+			// Don't bounce flows that legitimately need to run while signed in
+			// (clicking an email-confirmation or password-reset link from a
+			// device that already has an active session).
+			if (action && SHOULD_NEVER_AUTO_REDIRECT_ACTIONS.includes(action)) {
+				if (!cancelled) setSessionCheckComplete(true);
+				return;
+			}
+
+			const currentUser = await getCurrentSession();
+
+			if (cancelled) return;
+
+			if (currentUser) {
+				// `replace: true` so the back button doesn't drop the user
+				// back onto /auth/* — they didn't mean to be there.
+				navigate(redirectTo, { replace: true });
+				return;
+			}
+
+			setSessionCheckComplete(true);
+		};
+
+		checkExistingSession();
+
+		return () => {
+			cancelled = true;
+		};
+		// `redirectTo` is derived from `location.search`, so depending on it
+		// also covers the case where the user arrives with a different
+		// `?redirectTo=...` while the component is still mounted.
+	}, [action, redirectTo, navigate]);
+
+	const handleURLParams = useCallback(async () => {
+		const searchParams = new URLSearchParams(location.search);
+		const code = searchParams.get('code');
+		const email = searchParams.get('email');
+
+		if (!code || !email) {
+			const currentUser = await getCurrentSession();
+			if (currentUser) {
+				navigate('/');
+			} else {
+				navigate(`/auth/${CONTENT_TYPE.SIGN_UP}`);
+			}
+			return { code: '', email: '' };
+		}
+
+		return { code, email };
+	}, [location.search, navigate]);
+
+	const submitSignIn = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const errorMessageElement = document.getElementById(
+			`${CONTENT_TYPE.SIGN_IN}-error`,
+		);
+		try {
+			errorMessageElement!.textContent = ' ';
+
+			const formData = new FormData(event.currentTarget);
+			const email = formData.get('email') as string;
+			const password = formData.get('password') as string;
+
+			await signIn(email, password);
+			// Navigate to the requested page or fallback to gallery
+			navigate(redirectTo);
+		} catch (error) {
+			errorMessageElement!.textContent = sanitizeErrorMessage(error as any);
+		}
+	};
+
+	const submitForgotPassword = async (
+		event: React.FormEvent<HTMLFormElement>,
+	) => {
+		event.preventDefault();
+		const errorMessageElement = document.getElementById(
+			`${CONTENT_TYPE.FORGOT_PASSWORD}-error`,
+		);
+		try {
+			errorMessageElement!.textContent = ' ';
+
+			const formData = new FormData(event.currentTarget);
+			const email = formData.get('email') as string;
+
+			await forgotPassword(email);
+			transition(CONTENT_TYPE.PASSWORD_RESET_EMAIL_SENT);
+		} catch (error) {
+			errorMessageElement!.textContent = sanitizeErrorMessage(error as any);
+		}
+	};
+
+	const submitSignUp = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const errorMessageElement = document.getElementById(
+			`${CONTENT_TYPE.SIGN_UP}-error`,
+		);
+		try {
+			errorMessageElement!.textContent = ' ';
+
+			const formData = new FormData(event.currentTarget);
+			const email = formData.get('email') as string;
+			const password = formData.get('password') as string;
+
+			await signUp(email, password);
+
+			const emailElement = document.getElementById('current-email');
+			emailElement!.textContent = email;
+
+			transition(CONTENT_TYPE.CONFIRMATION_EMAIL_SENT);
+		} catch (error) {
+			errorMessageElement!.textContent = sanitizeErrorMessage(error as any);
+		}
+	};
+
+	const submitConfirmationCode = async (email: string, code: string) => {
+		try {
+			await confirmSignUp(email, code);
+			setEmailConfirmationSuccess({ message: 'Email confirmed' });
+		} catch (error: any) {
+			setEmailConfirmationError(error);
+		}
+	};
+
+	const submitNewPassword = async (event: React.FormEvent<HTMLFormElement>) => {
+		event.preventDefault();
+		const errorMessageElement = document.getElementById(
+			`${CONTENT_TYPE.PASSWORD_RESET}-error`,
+		);
+		try {
+			errorMessageElement!.textContent = ' ';
+
+			const formData = new FormData(event.currentTarget);
+			const password = formData.get('password') as string;
+
+			const { code, email } = await handleURLParams();
+			await forgotPasswordSubmit(email, code, password);
+
+			await signIn(email, password);
+			// Navigate to the requested page or fallback to gallery
+			navigate(redirectTo);
+		} catch (error) {
+			errorMessageElement!.textContent = sanitizeErrorMessage(error as any);
+
+			if ((error as any).__type === 'ExpiredCodeException') {
+				document.getElementById('save-new-password')!.style.display = 'none';
+				document
+					.getElementById('resend-password-recovery')!
+					.classList.add('active');
+			}
+		}
+	};
+
+	const handleResendConfirmationCode = async () => {
+		try {
+			const { email } = await handleURLParams();
+			await resendConfirmationCode(email);
+			transition(CONTENT_TYPE.CONFIRMATION_EMAIL_SENT);
+		} catch (error) {
+			// Handle error
+		}
+	};
+
+	const transition = (nextContent: CONTENT_TYPE) => {
+		nextContentToRender = nextContent;
+		const container = document.getElementById('container');
+
+		const previousActiveContent = rootElementRef.current.querySelector(
+			`.content-container.active-content`,
+		);
+		const previousActiveOverlay = rootElementRef.current.querySelector(
+			`.overlay .overlay-panel.active-content`,
+		);
+
+		// Remove the active-content class from all elements that have it
+		if (previousActiveOverlay) {
+			previousActiveOverlay.classList.remove(
+				'active-content',
+				'overlay-right',
+				'overlay-left',
+			);
+		}
+		if (previousActiveContent) {
+			previousActiveContent.classList.remove(
+				'active-content',
+				'left-content-container',
+				'right-content-container',
+			);
+		}
+
+		const nextActiveContent = rootElementRef.current.querySelector(
+			`.content-container.${nextContentToRender}`,
+		);
+		const nextActiveOverlay = rootElementRef.current.querySelector(
+			`.overlay .${nextContentToRender}`,
+		);
+
+		const nextContentActiveClass = nextContentIsLeft
+			? 'left-content-container'
+			: 'right-content-container';
+		const nextOverlayActiveClass = nextContentIsLeft
+			? 'overlay-right'
+			: 'overlay-left';
+
+		if (nextContentIsLeft) {
+			container.classList.remove('right-panel-active');
+			nextContentIsLeft = false;
+		} else {
+			container.classList.add('right-panel-active');
+			nextContentIsLeft = true;
+		}
+
+		if (nextActiveOverlay) {
+			nextActiveOverlay.classList.add('active-content', nextOverlayActiveClass);
+		}
+		if (nextActiveContent) {
+			nextActiveContent.classList.add('active-content', nextContentActiveClass);
+		}
+
+		const manuallyAnimatedElements = rootElementRef.current.querySelectorAll(
+			'.animated-svg-container-manual-trigger',
+		);
+
+		manuallyAnimatedElements.forEach((element) => {
+			element?.classList.remove('transitioned');
+		});
+
+		setTimeout(() => {
+			manuallyAnimatedElements.forEach((element) => {
+				element?.classList.add('transitioned');
+			});
+		}, 600);
+
+		// Reset password visibility when transitioning screens
+		setShowPassword(false);
+	};
+
+	useEffect(() => {
+		// Wait for the session check to finish before running any of the
+		// per-action initialization — otherwise `handleURLParams` would
+		// independently navigate based on its own session check (the
+		// `getCurrentSession()` it already does inside) and could race with
+		// the redirect we're about to issue above.
+		if (!sessionCheckComplete) {
+			return;
+		}
+
+		const initialize = async () => {
+			// initGoogleSocialSignIn();
+
+			if (action) {
+				if (
+					action === CONTENT_TYPE.EMAIL_CONFIRMATION ||
+					action === CONTENT_TYPE.PASSWORD_RESET
+				) {
+					const { code, email } = await handleURLParams();
+
+					if (action === CONTENT_TYPE.EMAIL_CONFIRMATION) {
+						await submitConfirmationCode(email, code);
+						transition(action as CONTENT_TYPE);
+					} else if (action === CONTENT_TYPE.PASSWORD_RESET) {
+						transition(action as CONTENT_TYPE);
+					}
+				} else {
+					transition(action as CONTENT_TYPE);
+				}
+			} else {
+				transition(CONTENT_TYPE.SIGN_UP);
+			}
+		};
+
+		initialize();
+	}, [action, handleURLParams, sessionCheckComplete]);
+
+	// Suppress the auth UI until the session check finishes. If the user IS
+	// signed in we've already kicked off a `navigate(redirectTo)` above and
+	// rendering the sign-in form in the meantime would flicker the page.
+	if (!sessionCheckComplete) {
+		return null;
+	}
+
+	return (
+		<div className='auth-page' ref={rootElementRef}>
+			<div className='container' id='container'>
+				{/* Sign Up */}
+				<div
+					className={`content-container ${CONTENT_TYPE.SIGN_UP} ${
+						activeContent === CONTENT_TYPE.SIGN_UP ? 'active-content' : ''
+					}`}
+				>
+					<form
+						className='auth-centered-card-content'
+						action='#'
+						onSubmit={submitSignUp}
+					>
+						<h1>Create Account</h1>
+						<div className='social-container'>
+							{/* <div
+                className='google-social-sign-in-button'
+                id='google-sign-up-button'
+              /> */}
+						</div>
+						<input
+							type='email'
+							placeholder='Email'
+							name='email'
+							autoComplete='current-email'
+						/>
+						<div style={{ position: 'relative', width: '100%' }}>
+							<input
+								type={showPassword ? 'text' : 'password'}
+								placeholder='Password'
+								name='password'
+								autoComplete='new-password'
+								style={{
+									width: '100%',
+									paddingRight: '45px',
+									boxSizing: 'border-box',
+								}}
+							/>
+							<IconButton
+								onClick={() => setShowPassword(!showPassword)}
+								style={{
+									position: 'absolute',
+									right: '5px',
+									top: '50%',
+									transform: 'translateY(-50%)',
+								}}
+								size='small'
+								className='input-button'
+							>
+								{showPassword ? (
+									<VisibilityOff fontSize='small' />
+								) : (
+									<Visibility fontSize='small' />
+								)}
+							</IconButton>
+						</div>
+						<p
+							className='auth-form-error-messages'
+							id={`${CONTENT_TYPE.SIGN_UP}-error`}
+						>
+							{' '}
+						</p>
+						<br />
+						<button>Sign Up</button>
+					</form>
+				</div>
+
+				{/* Email Confirmation */}
+				<div
+					className={`content-container ${CONTENT_TYPE.EMAIL_CONFIRMATION} ${
+						activeContent === CONTENT_TYPE.EMAIL_CONFIRMATION
+							? 'active-content'
+							: ''
+					}`}
+				>
+					{/* ... keeping the rest exactly the same ... */}
+					<div className='auth-centered-card-content'>
+						<h1>Email confirmation</h1>
+						<br />
+						<div>
+							Email:{' '}
+							{location.search.includes('email=')
+								? new URLSearchParams(location.search).get('email')
+								: ''}
+						</div>
+						{!emailConfirmationError && !emailConfirmationSuccess && (
+							<div>
+								<AnimatedLoading />
+								<br />
+								<span>Confirming your email...</span>
+								<br />
+								<br />
+								<br />
+								<div style={{ height: '40px' }} />
+							</div>
+						)}
+						{!!emailConfirmationSuccess && (
+							<div>
+								<AnimatedCheckmark />
+								<br />
+								<span>Your email has been confirmed!</span>
+								<br />
+								<br />
+								<br />
+								<button onClick={() => transition(CONTENT_TYPE.SIGN_IN)}>
+									Sign in
+								</button>
+							</div>
+						)}
+						{!!emailConfirmationError && (
+							<div>
+								<AnimatedCrossmark />
+								<br />
+								<span>Email confirmation failed!</span>
+								<br />
+								<br />
+								<br />
+								<button onClick={handleResendConfirmationCode}>
+									Resend code
+								</button>
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Sign In */}
+				<div
+					className={`content-container ${CONTENT_TYPE.SIGN_IN} ${
+						activeContent === CONTENT_TYPE.SIGN_IN ? 'active-content' : ''
+					}`}
+				>
+					<form
+						className='auth-centered-card-content'
+						action='#'
+						onSubmit={submitSignIn}
+					>
+						<h1>Sign in</h1>
+						<div className='social-container'></div>
+						<input
+							type='email'
+							name='email'
+							placeholder='Email'
+							autoComplete='current-email'
+						/>
+						<div style={{ position: 'relative', width: '100%' }}>
+							<input
+								type={showPassword ? 'text' : 'password'}
+								name='password'
+								placeholder='Password'
+								autoComplete='current-password'
+								style={{
+									width: '100%',
+									paddingRight: '45px',
+									boxSizing: 'border-box',
+								}}
+							/>
+							<IconButton
+								onClick={() => setShowPassword(!showPassword)}
+								style={{
+									position: 'absolute',
+									right: '5px',
+									top: '50%',
+									transform: 'translateY(-50%)',
+								}}
+								size='small'
+								className='input-button'
+							>
+								{showPassword ? (
+									<VisibilityOff fontSize='small' />
+								) : (
+									<Visibility fontSize='small' />
+								)}
+							</IconButton>
+						</div>
+						<p
+							className='auth-form-error-messages'
+							id={`${CONTENT_TYPE.SIGN_IN}-error`}
+						>
+							{' '}
+						</p>
+						<a
+							href='#'
+							onClick={(e) => {
+								e.preventDefault();
+								transition(CONTENT_TYPE.FORGOT_PASSWORD);
+							}}
+						>
+							Forgot your password?
+						</a>
+						<button>Sign In</button>
+					</form>
+				</div>
+
+				{/* Confirmation Email Sent */}
+				<div
+					className={`content-container ${
+						CONTENT_TYPE.CONFIRMATION_EMAIL_SENT
+					} ${
+						activeContent === CONTENT_TYPE.CONFIRMATION_EMAIL_SENT
+							? 'active-content'
+							: ''
+					}`}
+				>
+					<div className='auth-centered-card-content'>
+						<h1>Email sent</h1>
+						<br />
+						<div id='current-email'>Email: </div>
+						<div>
+							<AnimatedEmailSending />
+							<br />
+							<span>You can close this page now.</span>
+							<br />
+							<br />
+							<br />
+							<div style={{ height: '40px' }} />
+						</div>
+					</div>
+				</div>
+
+				{/* Password Reset Email Sent */}
+				<div
+					className={`content-container ${
+						CONTENT_TYPE.PASSWORD_RESET_EMAIL_SENT
+					} ${
+						activeContent === CONTENT_TYPE.PASSWORD_RESET_EMAIL_SENT
+							? 'active-content'
+							: ''
+					}`}
+				>
+					<div className='auth-centered-card-content'>
+						<h1>Email sent</h1>
+						<br />
+						<div id='current-email'>Email: </div>
+						<div>
+							<AnimatedEmailSending />
+							<br />
+							<span>You can close this page now.</span>
+							<br />
+							<br />
+							<br />
+							<div style={{ height: '40px' }} />
+						</div>
+					</div>
+				</div>
+
+				{/* Forgot Password */}
+				<div
+					className={`content-container ${CONTENT_TYPE.FORGOT_PASSWORD} ${
+						activeContent === CONTENT_TYPE.FORGOT_PASSWORD
+							? 'active-content'
+							: ''
+					}`}
+				>
+					<form
+						className='auth-centered-card-content'
+						action='#'
+						onSubmit={submitForgotPassword}
+					>
+						<h1>Reset password</h1>
+						<br />
+						<span>Get a password recovery email</span>
+						<input
+							type='email'
+							placeholder='Email'
+							name='email'
+							autoComplete='current-email'
+						/>
+						<p
+							className='auth-form-error-messages'
+							id={`${CONTENT_TYPE.FORGOT_PASSWORD}-error`}
+						>
+							{' '}
+						</p>
+						<br />
+						<button>Send recovery email</button>
+					</form>
+				</div>
+
+				{/* Password Reset */}
+				<div
+					className={`content-container ${CONTENT_TYPE.PASSWORD_RESET} ${
+						activeContent === CONTENT_TYPE.PASSWORD_RESET
+							? 'active-content'
+							: ''
+					}`}
+				>
+					<form
+						className='auth-centered-card-content'
+						action='#'
+						onSubmit={submitNewPassword}
+					>
+						<h1>Reset password</h1>
+						<br />
+						<div id='current-email'>
+							Email:{' '}
+							{location.search.includes('email=')
+								? new URLSearchParams(location.search).get('email')
+								: ''}
+						</div>
+						<br />
+						<div style={{ position: 'relative', width: '100%' }}>
+							<input
+								type={showPassword ? 'text' : 'password'}
+								placeholder='New password'
+								name='password'
+								autoComplete='new-password'
+								style={{
+									width: '100%',
+									paddingRight: '45px',
+									boxSizing: 'border-box',
+								}}
+							/>
+							<IconButton
+								onClick={() => setShowPassword(!showPassword)}
+								style={{
+									position: 'absolute',
+									right: '5px',
+									top: '50%',
+									transform: 'translateY(-50%)',
+								}}
+								size='small'
+								className='input-button'
+							>
+								{showPassword ? (
+									<VisibilityOff fontSize='small' />
+								) : (
+									<Visibility fontSize='small' />
+								)}
+							</IconButton>
+						</div>
+						<p
+							className='auth-form-error-messages'
+							id={`${CONTENT_TYPE.PASSWORD_RESET}-error`}
+						>
+							{' '}
+						</p>
+						<br />
+						<button id='save-new-password'>Save password</button>
+						<button
+							id='resend-password-recovery'
+							// @ts-ignore
+							onClick={submitForgotPassword}
+						>
+							Resend code
+						</button>
+					</form>
+				</div>
+
+				{/* Overlay */}
+				<div className='overlay-container'>
+					<div className='overlay'>
+						<div
+							className={`overlay-panel ${CONTENT_TYPE.SIGN_UP} ${
+								activeContent === CONTENT_TYPE.SIGN_UP ? 'active-content' : ''
+							}`}
+						>
+							<h1>Welcome Back!</h1>
+							<p>
+								To keep connected with us please login with your personal info
+							</p>
+							<button
+								className='ghost'
+								id='to-sign-in'
+								onClick={() => transition(CONTENT_TYPE.SIGN_IN)}
+							>
+								Sign In
+							</button>
+						</div>
+						<div
+							className={`overlay-panel ${CONTENT_TYPE.SIGN_IN} ${
+								activeContent === CONTENT_TYPE.SIGN_IN ? 'active-content' : ''
+							}`}
+						>
+							<h1>Hello, Friend!</h1>
+							<p>Enter your personal details and start journey with us</p>
+							<button
+								className='ghost'
+								id='to-sign-up'
+								onClick={() => transition(CONTENT_TYPE.SIGN_UP)}
+							>
+								Sign Up
+							</button>
+						</div>
+						<div
+							className={`overlay-panel ${
+								CONTENT_TYPE.CONFIRMATION_EMAIL_SENT
+							} ${
+								activeContent === CONTENT_TYPE.CONFIRMATION_EMAIL_SENT
+									? 'active-content'
+									: ''
+							}`}
+						>
+							<h1>Check your email!</h1>
+							<p>You will receive an email with a confirmation link</p>
+						</div>
+						<div
+							className={`overlay-panel ${
+								CONTENT_TYPE.PASSWORD_RESET_EMAIL_SENT
+							} ${
+								activeContent === CONTENT_TYPE.PASSWORD_RESET_EMAIL_SENT
+									? 'active-content'
+									: ''
+							}`}
+						>
+							<h1>Check your email!</h1>
+							<p>You will receive an email with a password recovery link</p>
+						</div>
+						<div
+							className={`overlay-panel ${CONTENT_TYPE.FORGOT_PASSWORD} ${
+								activeContent === CONTENT_TYPE.FORGOT_PASSWORD
+									? 'active-content'
+									: ''
+							}`}
+						>
+							<h1>Hello, Friend!</h1>
+							<p>Enter your personal details and start journey with us</p>
+							<button
+								className='ghost'
+								id='to-sign-up'
+								onClick={() => transition(CONTENT_TYPE.SIGN_UP)}
+							>
+								Sign Up
+							</button>
+						</div>
+						<div
+							className={`overlay-panel ${CONTENT_TYPE.PASSWORD_RESET} ${
+								activeContent === CONTENT_TYPE.PASSWORD_RESET
+									? 'active-content'
+									: ''
+							}`}
+						>
+							<h1>Hello, Friend!</h1>
+							<p>Enter your personal details and start journey with us</p>
+							<button
+								className='ghost'
+								id='to-sign-up'
+								onClick={() => transition(CONTENT_TYPE.SIGN_UP)}
+							>
+								Sign Up
+							</button>
+						</div>
+						<div
+							className={`overlay-panel ${CONTENT_TYPE.EMAIL_CONFIRMATION} ${
+								activeContent === CONTENT_TYPE.EMAIL_CONFIRMATION
+									? 'active-content'
+									: ''
+							}`}
+						>
+							<h1>Hello, Friend!</h1>
+							<p>Confirm your email to continue using our services</p>
+						</div>
+					</div>
+				</div>
+			</div>
+			<a
+				href='/'
+				onClick={(e) => {
+					e.preventDefault();
+					navigate('/');
+				}}
+			>
+				<img className='auth-page-logo' src={Logo} alt='Logo' />
+			</a>
+		</div>
+	);
+};
+
+export default Auth;