added spinning wheel on signup and login button

client/src/api/contactsApi.tsx

@@ -13,9 +13,7 @@ type MessagesProps = {
 };
 export async function getContactsList(): Promise<ContactsProps[]> {
   try {
-    const response = await axiosClient.get(
-      `${import.meta.env.VITE_API_URL}/api/chat/contacts`,
-    );
+    const response = await axiosClient.get(`/api/chat/contacts`);
     console.log(response.data);
     return response.data;
   } catch (e) {
@@ -26,7 +24,7 @@ export async function getContactsList(): Promise<ContactsProps[]> {
 export async function setContactStatus(contact: string, read: boolean) {
   try {
     const response = await axiosClient.put(
-      `${import.meta.env.VITE_API_URL}/api/chat/contacts/${contact}`,
+      `/api/chat/contacts/${contact}`,
       { status: read },
       { withCredentials: true },
     );
@@ -40,7 +38,7 @@ export async function setContactStatus(contact: string, read: boolean) {
 
 export async function sendContact(contact: string) {
   try {
-    const response = await axiosClient.post(`${import.meta.env.VITE_API_URL}/api/chat/contact/${contact}`);
+    const response = await axiosClient.post(`/api/chat/contact/${contact}`);
     console.log(response.data);
     return response.data;
   } catch (e) {
@@ -59,7 +57,7 @@ export async function getMessages(
   }
   try {
     const response = await axiosClient.get(
-      `${import.meta.env.VITE_API_URL}/api/chat/messages/${contact}?limit=${limit}&cursor=${cursor}`,
+      `/api/chat/messages/${contact}?limit=${limit}&cursor=${cursor}`,
     );
     console.log(response.data);
     return response.data;
@@ -72,7 +70,7 @@ export async function getMessages(
 export async function deleteContact(usernamecontact: string) {
   try {
     const response = await axiosClient.delete(
-      `${import.meta.env.VITE_API_URL}/api/chat/contacts/${usernamecontact}`,
+      `/api/chat/contacts/${usernamecontact}`,
     );
     console.log(response.data);
     return response.data;

client/src/components/LoadingScreen.tsx

@@ -1,8 +1,8 @@
-function SpinningWheel() {
+function LoadingScreen() {
   return (
     <div className="flex items-center justify-center min-h-screen bg-[#121212]">
       <div className="animate-spin rounded-full h-12 w-12 border-4 border-green-500 border-t-transparent"></div>
     </div>
   );
 }
-export default SpinningWheel;
+export default LoadingScreen;

client/src/components/chat/LoadingWheel.tsx

@@ -0,0 +1,16 @@
+function LoadingWheel() {
+  return (
+    <div className="flex items-center justify-center">
+      <div
+        className="inline-block h-6 w-6 animate-spin rounded-full border-4 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-white"
+        role="status"
+      >
+        <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+          Loading...
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default LoadingWheel;

client/src/pages/Login.tsx

@@ -4,6 +4,7 @@ import icon from '../../assets/icon.png';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContext, useState } from 'react';
 import { AuthContext } from '../utils/AuthProvider.tsx';
+import LoadingWheel from '../components/chat/LoadingWheel.tsx';
 
 type Inputs = {
   username: string;
@@ -14,17 +15,20 @@ export default function Login() {
   const { setAuthorized } = useContext(AuthContext);
   const [message, setMessage] = useState('');
   const navigate = useNavigate();
+  const [IsLoading, setIsLoading] = useState<boolean>(false);
   const { register, handleSubmit } = useForm<Inputs>({
     mode: 'onChange',
   });
 
   const onSubmit: SubmitHandler<Inputs> = (data) => {
+    setIsLoading(true);
     axios
-      .post('${import.meta.env.VITE_API_URL}/api/auth/login', data, {
+      .post('/api/auth/login', data, {
         withCredentials: true,
       })
       .then(() => {
         setAuthorized(true);
+        setIsLoading(false);
         console.log('redirecting');
         navigate('/chat');
       })
@@ -96,10 +100,11 @@ export default function Login() {
 
             <div>
               <button
+                disabled={IsLoading}
                 type="submit"
                 className="text-black bg-green-500 lex w-full justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
-                Sign in
+                {IsLoading ? <LoadingWheel /> : 'Log in'}
               </button>
             </div>
             <div className="text-red-400 text-sm">{message}</div>

client/src/pages/Signup.tsx

@@ -1,9 +1,10 @@
 import icon from '../../assets/icon.png';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import { useContext, useState } from 'react';
 import { AuthContext } from '../utils/AuthProvider.tsx';
+import { axiosClient } from '../App.tsx';
+import LoadingWheel from '../components/chat/LoadingWheel.tsx';
 
 type Inputs = {
   username: string;
@@ -24,6 +25,7 @@ export default function Signup() {
 
   const [match, setMatch] = useState(true);
   const [message, setMessage] = useState('');
+  const [IsLoading, setIsLoading] = useState<boolean>(false);
 
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     if (data.password !== data.sPassword) {
@@ -31,16 +33,17 @@ export default function Signup() {
       setTimeout(() => {
         setMatch(false);
       }, 100);
-
       return;
     }
+    setIsLoading(true);
     setMatch(true);
-    axios
-      .post(`${import.meta.env.VITE_API_URL}/api/auth/signup`, data, {
+    axiosClient
+      .post(`/api/auth/signup`, data, {
         withCredentials: true,
       })
       .then(() => {
         setAuthorized(true);
+        setIsLoading(false);
         navigate('/chat');
         console.log('Signed up');
       })
@@ -167,10 +170,11 @@ export default function Signup() {
             )}
             <div>
               <button
+                disabled={IsLoading}
                 type="submit"
                 className="text-black w-full justify-center rounded-md bg-green-600 px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
               >
-                Sign up
+                {IsLoading ? <LoadingWheel /> : 'Sign up'}
               </button>
             </div>
             <div className="text-red-400 text-sm">{message}</div>

client/src/utils/ProtectedRoutes.tsx

@@ -2,7 +2,7 @@ import { Navigate, Outlet } from 'react-router-dom';
 import { useState, useEffect, useContext } from 'react';
 import Cookie from 'js-cookie';
 import { AuthContext } from './AuthProvider.tsx';
-import SpinningWheel from '../components/SpinningWheel.tsx';
+import LoadingScreen from '../components/LoadingScreen.tsx';
 import { axiosClient } from '../App.tsx';
 
 export type UsernameType = {
@@ -32,14 +32,13 @@ function ProtectedRoutes() {
           setAuthorized(false);
           console.log(err);
           console.log('Unauthorized');
-          console.log(import.meta.env.BASE_URL);
         });
     }
     validateToken();
   }, [setAuthorized]);
 
   if (authorized === null) {
-    return <SpinningWheel />;
+    return <LoadingScreen />;
   }
 
   return authorized ? (

client/src/utils/useAuth.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { useState, useEffect } from 'react';
 import Cookies from 'js-cookie';
+import { axiosClient } from '../App.tsx';
 function useAuth() {
   const [authorized, setAuthorized] = useState<boolean>(false);
 
@@ -13,12 +14,12 @@ function useAuth() {
       }
 
       try {
-        await axios.get('${import.meta.env.VITE_API_URL}/api/auth/validate', { withCredentials: true });
+        await axiosClient.get('/api/auth/validate', { withCredentials: true });
 
         setAuthorized(true);
       } catch (e) {
         setAuthorized(false);
-        console.log("Failed to validate token: ", e)
+        console.log('Failed to validate token: ', e);
       }
     }