tsk-2: Blank screen bug fix (#16)

Closes #2

Reviewed-on: phoenix/textsender#16

.env.development.sample

@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:9080"
+VITE_API_URL="http://localhost:9081"

.env.production.sample

@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:9080"
+VITE_API_URL="http://localhost:9081"

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment
+.env.production
+.env.development

package-lock.json

@@ -1,13 +1,14 @@
 {
   "name": "textsender",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "textsender",
-      "version": "0.0.6",
+      "version": "0.0.9",
       "dependencies": {
+        "dotenv": "^17.4.2",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
         "react-router-dom": "^7.18.0"
@@ -1219,6 +1220,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.380",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "textsender",
   "private": true,
-  "version": "0.0.6",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
     "format:check": "npx prettier --check ."
   },
   "dependencies": {
+    "dotenv": "^17.4.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-router-dom": "^7.18.0"

src/App.jsx

@@ -8,6 +8,7 @@ import {
 import Dashboard from './components/Dashboard';
 import Login from './components/Login';
 import Register from './components/Register';
+import ProfileForm from './components/ProfileForm';
 
 import './App.css';
 
@@ -19,6 +20,7 @@ function App() {
         <Route path="/dashboard" element={<Dashboard />} />
         <Route path="/login" element={<Login />} />
         <Route path="/register" element={<Register />} />
+        <Route path="/user/profile" element={<ProfileForm />} />
       </Routes>
     </Router>
   );

src/api/contactApi.js

@@ -1,17 +1,18 @@
 import { API_BASE_URL } from '../constants/api';
 
 export class CreateContactRequest {
-  first_name = '';
+  firstname = '';
-  last_name = '';
+  lastname = '';
+  nickname = '';
   phone_number = '';
   user_id = '';
 }
 
 export class UpdateContactNamesRequest {
-  first_name = '';
+  firstname = '';
-  last_name = '';
+  lastname = '';
   nickname = '';
-  contact_id = '';
+  id = '';
   user_id = '';
 }
 

src/api/loginApi.js

@@ -20,3 +20,50 @@ export const loginApi = {
     }
   },
 };
+
+export const userApi = {
+  get_user_profile: async (userId) => {
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/profile/${userId}`,
+      {
+        method: 'GET',
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+
+  update_password: async (
+    userId,
+    currentPassword,
+    updatedPassword,
+    confirmedPassword
+  ) => {
+    const request = {
+      user_id: userId,
+      current_password: currentPassword,
+      updated_password: updatedPassword,
+      confirmed_password: confirmedPassword,
+    };
+
+    const reponse = await fetch(
+      `${AUTH_API_BASE_URL}/api/v1/user/password/update`,
+      {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(request),
+      }
+    );
+
+    if (reponse.ok) {
+      return reponse.json();
+    } else {
+      throw new Error('Error logging in');
+    }
+  },
+};

src/components/AddContact.jsx

@@ -11,6 +11,7 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
     phoneNumber: '',
     firstName: '',
     lastName: '',
+    nickName: '',
   });
   const [errors, setErrors] = useState({});
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -66,8 +67,9 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
       const userId = tokenService.getUserId();
       let contact = new CreateContactRequest();
       contact.phone_number = formData.phoneNumber;
-      contact.first_name = formData.firstName;
+      contact.firstname = formData.firstName;
-      contact.last_name = formData.lastName;
+      contact.lastname = formData.lastName;
+      contact.nickname = formData.nickName;
       contact.user_id = userId;
       const result = await contactApi.createContact(
         contact,
@@ -178,6 +180,23 @@ const AddContact = ({ isOpen, onClose, onSuccess }) => {
               <span className="form-hint">Optional field</span>
             </div>
 
+            <div className="form-group">
+              <label htmlFor="nickName" className="form-label">
+                Nick Name
+              </label>
+              <input
+                id="nickName"
+                name="nickName"
+                type="text"
+                className="form-input"
+                value={formData.nickName}
+                onChange={handleChange}
+                placeholder="Enter nick name (optional)"
+                disabled={isSubmitting}
+              />
+              <span className="form-hint">Optional field</span>
+            </div>
+
             <div className="form-actions">
               <button
                 type="button"

src/components/Dashboard.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import AddContact from './AddContact';
-// import ViewContact from './ViewContact';
 import ViewSentMessages from './ViewSentMessages';
 
 import './Dashboard.css';
@@ -9,12 +9,12 @@ import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
 import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
 
 const Dashboard = () => {
+  const navigate = useNavigate();
   const [activeView, setActiveView] = useState('dashboard');
   const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [isViewContactWizardOpen, setIsViewContactWizardOpen] = useState(false);
   const [isViewSentMessagesOpen, setViewSentMessagesOpen] = useState(false);
   const [showContactForm, setShowContactForm] = useState(false);
-  // const [isPopupOpen, setIsPopupOpen] = useState(false);
 
   const handleAddContactClick = () => {
     setShowContactForm(true);
@@ -22,15 +22,9 @@ const Dashboard = () => {
 
   const handleContactSuccess = (contactData) => {
     console.log('Contact created successfully:', contactData);
-
-    // You could:
-    // 1. Refresh the contacts list if you have one
-    // 2. Show a success notification
-    // 3. Update local state with the new contact
   };
 
   const handleWizardComplete = () => {
-    // Add your logic here for each button
     setIsWizardOpen(false);
   };
 
@@ -47,7 +41,11 @@ const Dashboard = () => {
   };
 
   const handleNavClick = (view) => {
-    setActiveView(view);
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      setActiveView(view);
+    }
   };
 
   return (

src/components/ProfileForm.css

@@ -0,0 +1,95 @@
+.profile-form {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+}
+
+.profile-form h2 {
+  color: #333;
+  font-size: 28px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.profile-form form {
+  margin-bottom: 25px;
+}
+
+.profile-form div {
+  margin-bottom: 20px;
+}
+
+.profile-form label {
+  display: block;
+  color: #555;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
+}
+
+.profile-form input[type='text'],
+.profile-form input[type='tel'],
+.profile-form input[type='password'] {
+  width: 100%;
+  padding: 12px 16px;
+  border: 2px solid #e1e5e9;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.profile-form input[type='text']:focus,
+.profile-form input[type='tel']:focus,
+.profile-form input[type='password']:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.profile-form input[readonly] {
+  background-color: #f9fafb;
+  cursor: not-allowed;
+}
+
+.profile-form button[type='submit'] {
+  width: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='submit']:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
+}
+
+.profile-form button[type='button'] {
+  width: 100%;
+  background: #f1f5f9;
+  color: #334155;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 14px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+}
+
+.profile-form button[type='button']:hover {
+  background: #e2e8f0;
+}

src/components/ProfileForm.jsx

@@ -0,0 +1,257 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { tokenService } from '../services/TokenService';
+import { userApi } from '../api/loginApi';
+
+import './ProfileForm.css';
+
+const ProfileForm = () => {
+  const navigate = useNavigate();
+  const [activeView, setActiveView] = useState('profile');
+  const [subView, setSubView] = useState('details');
+  const [formData, setFormData] = useState({
+    firstname: '',
+    lastname: '',
+    phone: '',
+    username: '',
+    createdDate: new Date().toISOString().split('T')[0],
+    lastLoginDate: new Date().toISOString().split('T')[0],
+  });
+
+  const [passwordData, setPasswordData] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmNewPassword: '',
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const userId = tokenService.getUserId();
+      const response = await userApi.get_user_profile(userId);
+
+      if (response) {
+        const userProfile = response.data[0];
+        setFormData((prev) => ({
+          ...prev,
+          firstname: userProfile.firstname,
+          lastname: userProfile.lastname,
+          phone: userProfile.phone_number,
+          username: userProfile.username,
+          createdDate: userProfile.created,
+          lastLoginDate: userProfile.last_login,
+        }));
+      } else {
+        console.error('Error getting user profile');
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handlePasswordChange = (e) => {
+    const { name, value } = e.target;
+    setPasswordData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleNavClick = (view) => {
+    if (view === 'profile') {
+      navigate('/user/profile');
+    } else {
+      navigate(`/${view}`);
+    }
+  };
+
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const userId = tokenService.getUserId();
+      const currentPassword = passwordData.currentPassword;
+      const newPassword = passwordData.newPassword;
+      const confirmNewPassword = passwordData.confirmNewPassword;
+
+      const response = await userApi.update_password(
+        userId,
+        currentPassword,
+        newPassword,
+        confirmNewPassword
+      );
+      if (response) {
+        console.log('Successfully updated password');
+      } else {
+        console.error('Error updating password');
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+    } finally {
+    }
+  };
+
+  const renderPasswordForm = () => (
+    <div className="profile-form">
+      <h2>Change Password</h2>
+      <form onSubmit={handlePasswordSubmit}>
+        <div>
+          <label htmlFor="currentPassword">Current Password</label>
+          <input
+            type="password"
+            id="currentPassword"
+            name="currentPassword"
+            value={passwordData.currentPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="newPassword">New Password</label>
+          <input
+            type="password"
+            id="newPassword"
+            name="newPassword"
+            value={passwordData.newPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="confirmNewPassword">Confirm New Password</label>
+          <input
+            type="password"
+            id="confirmNewPassword"
+            name="confirmNewPassword"
+            value={passwordData.confirmNewPassword}
+            onChange={handlePasswordChange}
+            required
+          />
+        </div>
+        <button type="submit">Update Password</button>
+        <button type="button" onClick={() => setSubView('details')}>
+          Back to Profile
+        </button>
+      </form>
+    </div>
+  );
+
+  const renderProfileForm = () => (
+    <div className="profile-form">
+      <h2>User Profile</h2>
+      <form>
+        <div>
+          <label htmlFor="firstname">First Name</label>
+          <input
+            type="text"
+            id="firstname"
+            name="firstname"
+            value={formData.firstname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastname">Last Name</label>
+          <input
+            type="text"
+            id="lastname"
+            name="lastname"
+            value={formData.lastname}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="phone">Phone</label>
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            value={formData.username}
+            onChange={handleChange}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="createdDate">Created Date</label>
+          <input
+            type="text"
+            id="createdDate"
+            name="createdDate"
+            value={formData.createdDate}
+            readOnly
+          />
+        </div>
+        <div>
+          <label htmlFor="lastLoginDate">Last Login Date</label>
+          <input
+            type="text"
+            id="lastLoginDate"
+            name="lastLoginDate"
+            value={formData.lastLoginDate}
+            readOnly
+          />
+        </div>
+      </form>
+
+      <div>
+        <button type="button" onClick={() => setSubView('password')}>
+          Change Password
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="dashboard-container">
+      {/* Navbar */}
+      <nav className="dashboard-nav">
+        <div className="nav-logo">
+          <span className="logo-text">Dashboard</span>
+        </div>
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activeView === 'dashboard' ? 'active' : ''}`}
+            onClick={() => handleNavClick('dashboard')}
+          >
+            Dashboard
+          </button>
+          <button
+            className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
+            onClick={() => handleNavClick('settings')}
+          >
+            Settings
+          </button>
+          <button
+            className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
+            onClick={() => handleNavClick('profile')}
+          >
+            Profile
+          </button>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      {subView === 'details' ? renderProfileForm() : renderPasswordForm()}
+    </div>
+  );
+};
+
+export default ProfileForm;

src/components/SendMessageWizard/useSendMessageWizard.js

@@ -28,7 +28,15 @@ const useSendMessageWizard = () => {
       case 'select':
         return state.selectedContacts.length > 0;
       case 'message':
-        return state.message.trim().length > 0;
+        if (state.message.trim().length > 0) {
+          if (state.createdMessage != null) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return false;
+        }
       case 'schedule':
         console.log('Checking to see if schedule can go to the next step');
         if (state.scheduledTime == null) {
@@ -49,6 +57,7 @@ const useSendMessageWizard = () => {
     state.step,
     state.selectedContacts.length,
     state.message,
+    state.createdMessage,
     state.scheduledTime,
   ]);
 

src/components/ViewContactWizard/ConfirmationStep.jsx

@@ -33,11 +33,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
           <span className={styles.reviewLabel}>First Name</span>
           <div className={styles.reviewComparison}>
             <span className={styles.oldValue}>
-              {selectedContact.first_name || 'Not set'}
+              {selectedContact.firstname || 'Not set'}
             </span>
             <span className={styles.arrow}>→</span>
             <span className={styles.newValue}>
-              {contactDetails.first_name || 'Not set'}
+              {contactDetails.firstname || 'Not set'}
             </span>
           </div>
         </div>
@@ -46,11 +46,11 @@ function ConfirmationStep({ selectedContact, contactDetails, isSubmitting }) {
           <span className={styles.reviewLabel}>Last Name</span>
           <div className={styles.reviewComparison}>
             <span className={styles.oldValue}>
-              {selectedContact.last_name || 'Not set'}
+              {selectedContact.lastname || 'Not set'}
             </span>
             <span className={styles.arrow}>→</span>
             <span className={styles.newValue}>
-              {contactDetails.last_name || 'Not set'}
+              {contactDetails.lastname || 'Not set'}
             </span>
           </div>
         </div>

src/components/ViewContactWizard/ModifyForm.jsx

@@ -3,8 +3,8 @@ import styles from './ModifyForm.module.css';
 
 function ModifyForm({ contactDetails, setContactDetails }) {
   const [formData, setFormData] = useState({
-    first_name: '',
+    firstname: '',
-    last_name: '',
+    lastname: '',
     nickname: '',
   });
 
@@ -12,8 +12,8 @@ function ModifyForm({ contactDetails, setContactDetails }) {
   useEffect(() => {
     if (contactDetails) {
       setFormData({
-        first_name: contactDetails.first_name || '',
+        firstname: contactDetails.firstname || '',
-        last_name: contactDetails.last_name || '',
+        lastname: contactDetails.lastname || '',
         nickname: contactDetails.nickname || '',
       });
     }
@@ -37,16 +37,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       <h3 className={styles.sectionTitle}>Edit Contact Information</h3>
 
       <div className={styles.formGroup}>
-        <label htmlFor="first_name" className={styles.formLabel}>
+        <label htmlFor="firstname" className={styles.formLabel}>
           First Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="first_name"
+            id="firstname"
-            name="first_name"
+            name="firstname"
-            value={formData.first_name}
+            value={formData.firstname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's first name"
@@ -61,16 +61,16 @@ function ModifyForm({ contactDetails, setContactDetails }) {
       </div>
 
       <div className={styles.formGroup}>
-        <label htmlFor="last_name" className={styles.formLabel}>
+        <label htmlFor="lastname" className={styles.formLabel}>
           Last Name
           <span className={styles.requiredIndicator}>*</span>
         </label>
         <div className={styles.inputContainer}>
           <input
             type="text"
-            id="last_name"
+            id="lastname"
-            name="last_name"
+            name="lastname"
-            value={formData.last_name}
+            value={formData.lastname}
             onChange={handleChange}
             className={styles.formInput}
             placeholder="Enter contact's last name"

src/components/ViewContactWizard/ViewContact.jsx

@@ -49,15 +49,15 @@ function ViewContact({ selectedContact, onSelectedContact }) {
   const filteredContacts = contacts.filter(
     (contact) =>
       contact.phone_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.first_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.firstname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      contact.last_name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      contact.lastname?.toLowerCase().includes(searchTerm.toLowerCase()) ||
       contact.nickname?.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   const formatContactDisplay = (contact) => {
     const phone = contact.phone_number || 'No phone';
     const name =
-      [contact.first_name, contact.last_name].filter(Boolean).join(' ') ||
+      [contact.firstname, contact.lastname].filter(Boolean).join(' ') ||
       'Unnamed';
     const nickname = contact.nickname ? `"${contact.nickname}"` : '';
 
@@ -117,7 +117,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
               onClick={() => onSelectedContact(contact)}
             >
               <div className={styles.contactAvatar}>
-                {contact.first_name?.[0]?.toUpperCase() || '?'}
+                {contact.firstname?.[0]?.toUpperCase() || '?'}
               </div>
               <div className={styles.contactInfo}>
                 <div className={styles.contactMainInfo}>
@@ -131,7 +131,7 @@ function ViewContact({ selectedContact, onSelectedContact }) {
                   )}
                 </div>
                 <div className={styles.contactName}>
-                  {[contact.first_name, contact.last_name]
+                  {[contact.firstname, contact.lastname]
                     .filter(Boolean)
                     .join(' ') || 'Unnamed Contact'}
                 </div>

src/components/ViewContactWizard/useViewContactWizard.js

@@ -21,13 +21,13 @@ const useViewContactWizard = () => {
       case 'modify':
         if (!state.contactDetails) return false;
         if (
-          !state.contactDetails.first_name ||
+          !state.contactDetails.firstname ||
-          state.contactDetails.first_name.trim() === ''
+          state.contactDetails.firstname.trim() === ''
         ) {
           return false;
         } else if (
-          !state.contactDetails.last_name ||
+          !state.contactDetails.lastname ||
-          state.contactDetails.last_name.trim() === ''
+          state.contactDetails.lastname.trim() === ''
         ) {
           return false;
         } else {
@@ -61,8 +61,8 @@ const useViewContactWizard = () => {
           ? null
           : {
               id: contactId,
-              first_name: contact.first_name,
+              firstname: contact.firstname,
-              last_name: contact.last_name,
+              lastname: contact.lastname,
               phone_number: contact.phone_number,
               user_id: contact.user_id,
               nickname: contact.nickname || '',
@@ -90,8 +90,8 @@ const useViewContactWizard = () => {
           step: nextStepValue,
           submissionError: null,
           contactDetails: {
-            first_name: prev.selectedContact.first_name || '',
+            firstname: prev.selectedContact.firstname || '',
-            last_name: prev.selectedContact.last_name || '',
+            lastname: prev.selectedContact.lastname || '',
             nickname: prev.selectedContact.nickname || '',
             phone_number: prev.selectedContact.phone_number || '',
             id: prev.selectedContact.id,
@@ -139,10 +139,10 @@ const useViewContactWizard = () => {
       console.log('Contact details to update: ', state.contactDetails);
 
       let reqBody = new UpdateContactNamesRequest();
-      reqBody.first_name = state.contactDetails.first_name;
+      reqBody.firstname = state.contactDetails.firstname;
-      reqBody.last_name = state.contactDetails.last_name;
+      reqBody.lastname = state.contactDetails.lastname;
       reqBody.nickname = state.contactDetails.nickname || ''; // Send empty string if no nickname
-      reqBody.contact_id = state.selectedContact.id;
+      reqBody.id = state.selectedContact.id;
       reqBody.user_id = userId;
 
       const response = await contactApi.updateContactNames(

src/constants/api.js

@@ -1,2 +1,2 @@
-export const AUTH_API_BASE_URL = 'http://localhost:9080';
+export const AUTH_API_BASE_URL = import.meta.env.VITE_AUTH_URL;
-export const API_BASE_URL = 'http://localhost:9081';
+export const API_BASE_URL = import.meta.env.VITE_API_URL;