Using environment variables

.env.template

@@ -0,0 +1 @@
+VITE_API_BASE=http://localhost:5140/

src/components/AuthenticationTitle/AuthenticationTitle.tsx

@@ -1,19 +1,19 @@
 import {
-    Anchor,
-    Button,
-    Checkbox,
-    Container,
-    Group,
-    Paper,
-    PasswordInput,
-    Text,
-    TextInput,
-    Title,
-  } from '@mantine/core';
-import { Link, useNavigate } from 'react-router-dom';
-import { useState } from 'react';
-import classes from './AuthenticationTitle.module.css';
-import { useAuth } from '../../AuthContext.tsx';
+  Anchor,
+  Button,
+  Checkbox,
+  Container,
+  Group,
+  Paper,
+  PasswordInput,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { Link, useNavigate } from "react-router-dom";
+import { useState } from "react";
+import classes from "./AuthenticationTitle.module.css";
+import { useAuth } from "../../AuthContext.tsx";
 
 interface LoginRequest {
   email: string;
@@ -22,32 +22,38 @@ interface LoginRequest {
 
 export function AuthenticationTitle() {
   const { login } = useAuth(); // Assuming `useAuth` provides a `login` function
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    setError('');
+    setError("");
 
     const loginRequest: LoginRequest = { email, password };
 
-    const response = await fetch('https://cvx.jordonbyers.com/login?useCookies=true', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      credentials: 'include',
-      body: JSON.stringify(loginRequest),
-    });
+    const response = await fetch(
+      new URL("login?useCookies=true", import.meta.env.VITE_API_BASE),
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify(loginRequest),
+      }
+    );
 
     if (response.ok) {
       // Fetch user profile after login
-      const profileResponse = await fetch('https://cvx.jordonbyers.com/profile', {
-        credentials: 'include',
-      });
-
+      const profileResponse = await fetch(
+        new URL("profile", import.meta.env.VITE_API_BASE),
+        {
+          credentials: "include",
+        }
+      );
+
       if (profileResponse.ok) {
         const userProfile = await profileResponse.json();
         const user = {
@@ -56,35 +62,31 @@ export function AuthenticationTitle() {
           lastName: userProfile.lastName,
           avatarUrl: userProfile.avatarUrl,
         };
-  
+
         login(user); // Store user in AuthContext
-        navigate('/');
+        navigate("/");
       } else {
-        setError('Failed to fetch user profile');
+        setError("Failed to fetch user profile");
       }
     } else {
-      setError('Invalid email or password');
+      setError("Invalid email or password");
     }
   };
 
-
   return (
     <Container size={420} my={40}>
       <Title ta="center" className={classes.title}>
         Welcome back!
       </Title>
       <Text c="dimmed" size="sm" ta="center" mt={5}>
-        Do not have an account yet?{' '}
-        <Link to="/register">
-          Create account
-        </Link>
+        Do not have an account yet? <Link to="/register">Create account</Link>
       </Text>
 
       <Paper withBorder shadow="md" p={30} mt={30} radius="md">
         <form onSubmit={handleSubmit}>
           <TextInput
             label="Email"
-            placeholder="you@mantine.dev" 
+            placeholder="you@mantine.dev"
             required
             value={email}
             onChange={(event) => setEmail(event.currentTarget.value)}
@@ -117,4 +119,4 @@ export function AuthenticationTitle() {
       </Paper>
     </Container>
   );
-}
+}