diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
deleted file mode 100644
index a7554a7c1..000000000
--- a/Client/src/Pages/Auth/Login.jsx
+++ /dev/null
@@ -1,562 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import { credentials } from "../../Validation/validation";
-import { login } from "../../Features/Auth/authSlice";
-import LoadingButton from "@mui/lab/LoadingButton";
-import { useDispatch, useSelector } from "react-redux";
-import { createToast } from "../../Utils/toastUtils";
-import { networkService } from "../../main";
-import TextInput from "../../Components/Inputs/TextInput";
-import { PasswordEndAdornment } from "../../Components/Inputs/TextInput/Adornments";
-import Background from "../../assets/Images/background-grid.svg?react";
-import Logo from "../../assets/icons/bwu-icon.svg?react";
-import Mail from "../../assets/icons/mail.svg?react";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import PropTypes from "prop-types";
-import { logger } from "../../Utils/Logger";
-import "./index.css";
-const DEMO = import.meta.env.VITE_APP_DEMO;
-
-/**
- * Displays the initial landing page.
- *
- * @param {Object} props
- * @param {Function} props.onContinue - Callback function to handle "Continue with Email" button click.
- * @returns {JSX.Element}
- */
-const LandingPage = ({ onContinue }) => {
- const theme = useTheme();
-
- return (
- <>
-
-
- Log In
- We are pleased to see you again!
-
-
-
-
-
-
- By continuing, you agree to our{" "}
- {
- window.open(
- "https://bluewavelabs.ca/terms-of-service-open-source",
- "_blank",
- "noreferrer"
- );
- }}
- sx={{
- "&:hover": {
- color: theme.palette.text.tertiary,
- },
- }}
- >
- Terms of Service
- {" "}
- and{" "}
- {
- window.open(
- "https://bluewavelabs.ca/privacy-policy-open-source",
- "_blank",
- "noreferrer"
- );
- }}
- sx={{
- "&:hover": {
- color: theme.palette.text.tertiary,
- },
- }}
- >
- Privacy Policy.
-
-
-
-
-
- );
-};
-
-LandingPage.propTypes = {
- onContinue: PropTypes.func.isRequired,
-};
-
-/**
- * Renders the first step of the login process.
- *
- * @param {Object} props
- * @param {Object} props.form - Form state object.
- * @param {Object} props.errors - Object containing form validation errors.
- * @param {Function} props.onSubmit - Callback function to handle form submission.
- * @param {Function} props.onChange - Callback function to handle form input changes.
- * @param {Function} props.onBack - Callback function to handle "Back" button click.
- * @returns {JSX.Element}
- */
-const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
- const theme = useTheme();
- const inputRef = useRef(null);
-
- useEffect(() => {
- if (inputRef.current) {
- inputRef.current.focus();
- }
- }, []);
-
- return (
- <>
-
-
- Log In
- Enter your email address
-
-
- (e.target.value = e.target.value.toLowerCase())}
- onChange={onChange}
- error={errors.email ? true : false}
- helperText={errors.email}
- ref={inputRef}
- />
-
-
-
-
-
-
-
- );
-};
-
-StepOne.propTypes = {
- form: PropTypes.object.isRequired,
- errors: PropTypes.object.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onBack: PropTypes.func.isRequired,
-};
-
-/**
- * Renders the second step of the login process, including a password input field.
- *
- * @param {Object} props
- * @param {Object} props.form - Form state object.
- * @param {Object} props.errors - Object containing form validation errors.
- * @param {Function} props.onSubmit - Callback function to handle form submission.
- * @param {Function} props.onChange - Callback function to handle form input changes.
- * @param {Function} props.onBack - Callback function to handle "Back" button click.
- * @returns {JSX.Element}
- */
-const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
- const theme = useTheme();
- const navigate = useNavigate();
- const inputRef = useRef(null);
- const authState = useSelector((state) => state.auth);
-
- useEffect(() => {
- if (inputRef.current) {
- inputRef.current.focus();
- }
- }, []);
-
- const handleNavigate = () => {
- if (form.email !== "" && !errors.email) {
- sessionStorage.setItem("email", form.email);
- }
- navigate("/forgot-password");
- };
-
- return (
- <>
-
-
- Log In
- Enter your password
-
-
- }
- />
-
-
-
- Continue
-
-
-
-
-
- Forgot password?
-
-
- Reset password
-
-
-
-
- );
-};
-
-StepTwo.propTypes = {
- form: PropTypes.object.isRequired,
- errors: PropTypes.object.isRequired,
- onSubmit: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onBack: PropTypes.func.isRequired,
-};
-
-const Login = () => {
- const dispatch = useDispatch();
- const navigate = useNavigate();
- const theme = useTheme();
-
- const authState = useSelector((state) => state.auth);
- const { authToken } = authState;
-
- const idMap = {
- "login-email-input": "email",
- "login-password-input": "password",
- };
-
- const [form, setForm] = useState({
- email: DEMO !== undefined ? "uptimedemo@demo.com" : "",
- password: DEMO !== undefined ? "Demouser1!" : "",
- });
- const [errors, setErrors] = useState({});
- const [step, setStep] = useState(0);
-
- useEffect(() => {
- if (authToken) {
- navigate("/uptime");
- return;
- }
- networkService
- .doesSuperAdminExist()
- .then((response) => {
- if (response.data.data === false) {
- navigate("/register");
- }
- })
- .catch((error) => {
- logger.error(error);
- });
- }, [authToken, navigate]);
-
- const handleChange = (event) => {
- const { value, id } = event.target;
- const name = idMap[id];
- setForm((prev) => ({
- ...prev,
- [name]: value,
- }));
-
- const { error } = credentials.validate({ [name]: value }, { abortEarly: false });
-
- setErrors((prev) => {
- const prevErrors = { ...prev };
- if (error) prevErrors[name] = error.details[0].message;
- else delete prevErrors[name];
- return prevErrors;
- });
- };
-
- const handleSubmit = async (event) => {
- event.preventDefault();
-
- if (step === 1) {
- const { error } = credentials.validate(
- { email: form.email },
- { abortEarly: false }
- );
- if (error) {
- setErrors((prev) => ({ ...prev, email: error.details[0].message }));
- createToast({ body: error.details[0].message });
- } else {
- setStep(2);
- }
- } else if (step === 2) {
- const { error } = credentials.validate(form, { abortEarly: false });
-
- if (error) {
- // validation errors
- const newErrors = {};
- error.details.forEach((err) => {
- newErrors[err.path[0]] = err.message;
- });
- setErrors(newErrors);
- createToast({
- body:
- error.details && error.details.length > 0
- ? error.details[0].message
- : "Error validating data.",
- });
- } else {
- const action = await dispatch(login(form));
- if (action.payload.success) {
- navigate("/uptime");
- createToast({
- body: "Welcome back! You're successfully logged in.",
- });
- } else {
- if (action.payload) {
- if (action.payload.msg === "Incorrect password")
- setErrors({
- password: "The password you provided does not match our records",
- });
- // dispatch errors
- createToast({
- body: action.payload.msg,
- });
- } else {
- // unknown errors
- createToast({
- body: "Unknown error.",
- });
- }
- }
- }
- }
- };
-
- return (
-
-
-
-
-
-
- BlueWave Uptime
-
- .MuiStack-root": {
- border: 1,
- borderRadius: theme.spacing(5),
- borderColor: theme.palette.border.light,
- backgroundColor: theme.palette.background.main,
- padding: {
- xs: theme.spacing(12),
- sm: theme.spacing(20),
- },
- },
- }}
- >
- {step === 0 ? (
- setStep(1)} />
- ) : step === 1 ? (
- setStep(0)}
- />
- ) : (
- step === 2 && (
- setStep(1)}
- />
- )
- )}
-
-
- );
-};
-
-export default Login;
diff --git a/Client/src/Pages/Auth/Login/Login.jsx b/Client/src/Pages/Auth/Login/Login.jsx
index 1b3a420ea..c1687a0ec 100644
--- a/Client/src/Pages/Auth/Login/Login.jsx
+++ b/Client/src/Pages/Auth/Login/Login.jsx
@@ -11,8 +11,8 @@ import Background from "../../../assets/Images/background-grid.svg?react";
import Logo from "../../../assets/icons/bwu-icon.svg?react";
import { logger } from "../../../Utils/Logger";
import "../index.css";
-import EmailStep from "./Components/EmailStep";
-import PasswordStep from "./Components/PasswordStep";
+import EmailStep from "./Components/EmailStep";
+import PasswordStep from "./Components/PasswordStep";
const DEMO = import.meta.env.VITE_APP_DEMO;
@@ -42,7 +42,7 @@ const Login = () => {
useEffect(() => {
if (authToken) {
- navigate("/monitors");
+ navigate("/uptime");
return;
}
networkService
@@ -108,7 +108,7 @@ const Login = () => {
} else {
const action = await dispatch(login(form));
if (action.payload.success) {
- navigate("/monitors");
+ navigate("/uptime");
createToast({
body: "Welcome back! You're successfully logged in.",
});