/* eslint-disable react-hooks/rules-of-hooks */
// Next
import {
AbsoluteCenter,
Box,
Button,
Flex,
FormControl,
FormLabel,
Image,
Input,
InputGroup,
InputLeftElement,
Link,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Spinner,
Text,
useColorModeValue,
useDisclosure,
useToast,
Collapse // Added Collapse
} from '@chakra-ui/react';
import NextLink from 'next/link';
// Icons
import { MdEmail } from 'react-icons/md';
import { RiLockPasswordFill } from 'react-icons/ri';
import { BsDisplayFill } from 'react-icons/bs'; // Added
import { FaUser, FaKey } from 'react-icons/fa'; // Added
// Authentication
import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth'; // Corrected import for useAuthState
import { Formik, Form, Field } from 'formik';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { usePathname } from 'next/navigation';
import { useState } from 'react'; // Added useState
// Components
import CheckActivationCodeModal from '@/components/CheckActivationCodeModal';
import Section from '@/components/section';
import Layout from '@/layouts/PublicLayout';
export default function Login() {
const router = useRouter();
const pathname = usePathname();
const [isRegisterMode, setIsRegisterMode] = useState(false); // Added state for register mode
const auth = getAuth();
const [user, loading, error] = useAuthState(auth);
const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isActivationCodeOpen, onOpen: onActivationCodeOpen, onClose: onActivationCodeClose } = useDisclosure();
const { isOpen: isResetModalOpen, onOpen: onResetModalOpen, onClose: onResetModalClose } = useDisclosure(); // New state for reset modal
const toast = useToast();
function redirectOnAuth() {
if (router.query.redirect) {
router.push(router.query.redirect as string);
} else {
router.push('/home');
}
}
if (user) {
redirectOnAuth();
}
return (
<>
Login - Restrafes XCS
Frequently Asked Questions (FAQ)
<>
What is Restrafes XCS?
Restrafes XCS is an online access point control platform developed by RESTRAFES & CO that allows
organizations to manage and control access to their facilities remotely.
<>
What is my login?
Your login for Restrafes XCS is the email address that was used to invite you to the platform. If you
are unsure of your login or did not receive an invitation, please contact your sponsor or email
xcs@restrafes.co for assistance.
{/* Reset Password Modal */}
Reset Password
{
sendPasswordResetEmail(auth, values.email)
.then(() => {
toast({
title: 'Password reset email sent.',
description: 'Please check your inbox to reset your password.',
status: 'success',
duration: 9000,
isClosable: true,
});
onResetModalClose();
})
.catch((error) => {
const errorCode = error.code;
let errorMessage = error.message;
switch (errorCode) {
case 'auth/invalid-email':
errorMessage = "The email address you've entered is invalid. Please try again.";
break;
case 'auth/user-not-found':
errorMessage = "No account found with that email address.";
break;
default:
errorMessage = 'An unknown error occurred. Please try again.';
}
toast({
title: 'Error sending reset email',
description: errorMessage,
status: 'error',
duration: 5000,
isClosable: true,
});
})
.finally(() => {
actions.setSubmitting(false);
});
}}
>
{(props) => (
)}
{/* Background Image */}
{/* Login Panel (Left Side) */}
{
loading ? (
) : !user ? (
Welcome!
Please present your credentials to continue.
{
if (isRegisterMode) {
// Registration Logic
if (values.password !== values.confirmPassword) {
toast({
title: 'Passwords do not match.',
description: 'Please ensure your password and confirmation match.',
status: 'error',
duration: 5000,
isClosable: true
});
actions.setSubmitting(false);
return;
}
if (!values.activationCode) {
toast({
title: 'Activation code required.',
description: 'Please enter your activation code.',
status: 'error',
duration: 5000,
isClosable: true
});
actions.setSubmitting(false);
return;
}
fetch(`/api/v1/activation/${values.activationCode}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
displayName: values.displayName,
email: values.email,
username: values.username,
password: values.password
})
})
.then((res) => {
if (res.status === 200) {
return res.json();
} else {
return res.json().then((json) => {
throw new Error(json.message || 'Registration failed');
});
}
})
.then(() => {
toast({
title: 'Account created.',
description: 'You can now log in.',
status: 'success',
duration: 5000,
isClosable: true
});
setIsRegisterMode(false); // Switch back to login mode
actions.resetForm();
})
.catch((error) => {
toast({
title: 'There was an error while creating your account.',
description: error.message,
status: 'error',
duration: 5000,
isClosable: true
});
})
.finally(() => {
actions.setSubmitting(false);
});
} else {
// Login Logic
signInWithEmailAndPassword(auth, values.email, values.password)
.then(() => {
redirectOnAuth();
})
.catch((error) => {
const errorCode = error.code;
let errorMessage = error.message;
switch (errorCode) {
case 'auth/invalid-email':
errorMessage = 'The email address you provided is invalid.';
break;
case 'auth/invalid-credential':
case 'auth/user-not-found':
case 'auth/wrong-password':
errorMessage = "Invalid email address or password. Please try again.";
break;
case 'auth/user-disabled':
errorMessage = 'Your account has been disabled.';
break;
case 'auth/too-many-requests':
errorMessage = 'Too many attempts. Please try again later.';
break;
default:
errorMessage = 'An unknown error occurred.';
}
toast({
title: errorMessage,
status: 'error',
duration: 5000,
isClosable: true
});
})
.finally(() => {
actions.setSubmitting(false);
});
}
}}
>
{(props) => (
)}
{isRegisterMode ? (
Already have an account?{' '}
setIsRegisterMode(false)} cursor="pointer" textDecor={'underline'} textUnderlineOffset={4}>
Login
) : (
)}
{isRegisterMode && (
By creating an account, you agree to our{' '}
Terms of Use
{' '}
and{' '}
Privacy Policy
.
)}
Forgot your password?
Need help?{' '}
View the FAQ.
) : (
// User is logged in, redirectOnAuth has been called. Show spinner during transition.
)
}
);
}
Login.getLayout = (page: any) => {page};