crosspost/frontend/src/pages/Login.tsx

import { useEffect, useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import StatsStyling from "../styles/stats_styling";

const API_BASE_URL = import.meta.env.VITE_BACKEND_URL

const styles = StatsStyling;

const LoginPage = () => {
  const navigate = useNavigate();

  const [isRegisterMode, setIsRegisterMode] = useState(false);
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [info, setInfo] = useState("");

  useEffect(() => {
    const token = localStorage.getItem("access_token");
    if (!token) {
      return;
    }

    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
    axios
      .get(`${API_BASE_URL}/profile`)
      .then(() => {
        navigate("/upload", { replace: true });
      })
      .catch(() => {
        localStorage.removeItem("access_token");
        delete axios.defaults.headers.common.Authorization;
      });
  }, [navigate]);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError("");
    setInfo("");
    setLoading(true);

    try {
      if (isRegisterMode) {
        await axios.post(`${API_BASE_URL}/register`, { username, email, password });
        setInfo("Account created. You can now sign in.");
        setIsRegisterMode(false);
      } else {
        const response = await axios.post<{ access_token: string }>(
          `${API_BASE_URL}/login`,
          { username, password }
        );

        const token = response.data.access_token;
        localStorage.setItem("access_token", token);
        axios.defaults.headers.common.Authorization = `Bearer ${token}`;
        navigate("/upload");
      }
    } catch (requestError: unknown) {
      if (axios.isAxiosError(requestError)) {
        setError(
          String(requestError.response?.data?.error || requestError.message || "Request failed")
        );
      } else {
        setError("Unexpected error occurred.");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={styles.containerAuth}>
        <div style={{ ...styles.card, ...styles.authCard }}>
          <div style={styles.headingBlock}>
            <h1 style={styles.headingXl}>
              {isRegisterMode ? "Create your account" : "Welcome back"}
            </h1>
            <p style={styles.mutedText}>
              {isRegisterMode
                ? "Register to start uploading and exploring your dataset insights."
                : "Sign in to continue to your analytics workspace."}
            </p>
          </div>

          <form onSubmit={handleSubmit} style={styles.authForm}>
            <input
              type="text"
              placeholder="Username"
              style={{ ...styles.input, ...styles.authControl }}
              value={username}
              onChange={(event) => setUsername(event.target.value)}
              required
            />

            {isRegisterMode && (
                <input
                  type="email"
                  placeholder="Email"
                  style={{ ...styles.input, ...styles.authControl }}
                  value={email}
                  onChange={(event) => setEmail(event.target.value)}
                  required
              />
            )}

            <input
              type="password"
              placeholder="Password"
              style={{ ...styles.input, ...styles.authControl }}
              value={password}
              onChange={(event) => setPassword(event.target.value)}
              required
            />

            <button
              type="submit"
              style={{ ...styles.buttonPrimary, ...styles.authControl, marginTop: 2 }}
              disabled={loading}
            >
              {loading
                ? "Please wait..."
                : isRegisterMode
                  ? "Create account"
                  : "Sign in"}
            </button>
          </form>

          {error && (
            <p style={styles.authErrorText}>
              {error}
            </p>
          )}

          {info && (
            <p style={styles.authInfoText}>
              {info}
            </p>
          )}

          <div style={styles.authSwitchRow}>
            <span style={styles.authSwitchLabel}>
              {isRegisterMode ? "Already have an account?" : "New here?"}
            </span>
            <button
              type="button"
                style={styles.authSwitchButton}
              onClick={() => {
                setError("");
                setInfo("");
                setIsRegisterMode((value) => !value);
              }}
            >
              {isRegisterMode ? "Switch to sign in" : "Create account"}
            </button>
          </div>
        </div>
    </div>
  );
};

export default LoginPage;