UserEditView

frontend/src/components/UserEditView/UserEditView.css

+.my-account-container {
+    padding: 20px;
+    color: white;
+    border-radius: 8px;
+    max-width: 800px;
+    margin: auto;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  }
+  
+  h1 {
+    text-align: center;
+  }
+  
+  .account-form {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  input, textarea {
+    margin: 10px 0;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+  }
+  
+  input:focus, textarea:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+  }
+  
+  button {
+    padding: 10px;
+    background-color: #ff6347;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+  }
+  
+  button:hover {
+    background-color: #ff4500;
+  }
+  
+  /* New styles for the degrees, addresses, and contacts sections */
+  h2 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+  
+  /* Updated sections to include proper spacing and new line for each field */
+  .degree-section, .address-section, .contact-section {
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 20px;
+    background-color: rgba(255, 255, 255, 0.1); /* Slightly visible background */
+    display: flex;
+    flex-direction: column; /* Ensure fields stack vertically */
+  }
+  
+  .degree-section label,
+  .address-section label,
+  .contact-section label {
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+  
+  /* Updated input and select styles for better spacing */
+  .degree-section input,
+  .address-section input,
+  .contact-section input,
+  .degree-section select,
+  .address-section select,
+  .contact-section select {
+    margin-bottom: 15px; /* Increased space between fields */
+    width: 100%; /* Ensure fields take full width */
+  }
+  
+  .degree-section button,
+  .address-section button,
+  .contact-section button {
+    align-self: flex-start; /* Align buttons to the left */
+    margin-top: 10px; /* Space above buttons */
+  }
+  
\ No newline at end of file

frontend/src/components/UserEditView/UserEditView.js

+import React, { useState, useEffect } from 'react';
+import './UserEditView.css';
+
+const MyAccountAdminView = () => {
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    middleName: '',
+    suffix: '',
+    maidenName: '',
+    nickname: '',
+    gender: '',
+    techAlumChapter: '',
+    classYear: '',
+    gradYear: '',
+    gradSemester: '',
+    degrees: [{ subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }],
+    addresses: [{ address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }],
+    contacts: [{ contactNumber: '', contactType: '', preferredContact: false }],
+    involvements: ['', ''],
+  });
+
+  const techAlumChapters = ['Chapter A', 'Chapter B', 'Chapter C'];
+  const degreeTypes = ['AS', 'BS', 'MS', 'PhD'];
+  const genders = ['male', 'female', 'other'];
+  const contactTypes = ['phone', 'email'];
+
+  useEffect(() => {
+    const savedData = JSON.parse(localStorage.getItem('myAccountData'));
+    if (savedData) {
+      setFormData({
+        ...formData,
+        ...savedData,
+        degrees: savedData.degrees || formData.degrees,
+        addresses: savedData.addresses || formData.addresses,
+        contacts: savedData.contacts || formData.contacts,
+        involvements: savedData.involvements || formData.involvements,
+      });
+    }
+  }, []);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleDegreeChange = (index, e) => {
+    const updatedDegrees = [...formData.degrees];
+    updatedDegrees[index][e.target.name] = e.target.value;
+    setFormData({ ...formData, degrees: updatedDegrees });
+  };
+
+  const handleAddDegree = () => {
+    setFormData({
+      ...formData,
+      degrees: [...formData.degrees, { subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }]
+    });
+  };
+
+  const handleDeleteDegree = (index) => {
+    const updatedDegrees = formData.degrees.filter((_, i) => i !== index);
+    setFormData({ ...formData, degrees: updatedDegrees });
+  };
+
+  const handleAddressChange = (index, e) => {
+    const updatedAddresses = [...formData.addresses];
+    updatedAddresses[index][e.target.name] = e.target.value;
+    setFormData({ ...formData, addresses: updatedAddresses });
+  };
+
+  const handleAddAddress = () => {
+    setFormData({
+      ...formData,
+      addresses: [...formData.addresses, { address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }]
+    });
+  };
+
+  const handleDeleteAddress = (index) => {
+    const updatedAddresses = formData.addresses.filter((_, i) => i !== index);
+    setFormData({ ...formData, addresses: updatedAddresses });
+  };
+
+  const handleContactChange = (index, e) => {
+    const updatedContacts = [...formData.contacts];
+    updatedContacts[index][e.target.name] = e.target.value;
+    setFormData({ ...formData, contacts: updatedContacts });
+  };
+
+  const handleAddContact = () => {
+    setFormData({
+      ...formData,
+      contacts: [...formData.contacts, { contactNumber: '', contactType: '', preferredContact: false }]
+    });
+  };
+
+  const handleDeleteContact = (index) => {
+    const updatedContacts = formData.contacts.filter((_, i) => i !== index);
+    setFormData({ ...formData, contacts: updatedContacts });
+  };
+
+  const handleSave = () => {
+    localStorage.setItem('myAccountData', JSON.stringify(formData));
+    alert('Your information has been saved!');
+  };
+
+  const handleClear = () => {
+    setFormData({
+      firstName: '',
+      lastName: '',
+      middleName: '',
+      suffix: '',
+      maidenName: '',
+      nickname: '',
+      gender: '',
+      techAlumChapter: '',
+      classYear: '',
+      gradYear: '',
+      gradSemester: '',
+      degrees: [{ subject: '', degreeType: '', degreeYear: '', degreeDescription: '', degreeDepartment: '', degreeCollege: '' }],
+      addresses: [{ address1: '', address2: '', city: '', state: '', country: '', zipCode: '', preferredAddress: false }],
+      contacts: [{ contactNumber: '', contactType: '', preferredContact: false }],
+      involvements: ['', ''],
+    });
+  };
+
+  return (
+    <div className="my-account-container">
+      <h1>My Account Information</h1>
+      <form className="account-form">
+        <h2>Personal Information</h2>
+        <label>First Name</label>
+        <input name="firstName" placeholder="First Name" value={formData.firstName} onChange={handleChange} required />
+        
+        <label>Last Name</label>
+        <input name="lastName" placeholder="Last Name" value={formData.lastName} onChange={handleChange} required />
+        
+        <label>Middle Name</label>
+        <input name="middleName" placeholder="Middle Name" value={formData.middleName} onChange={handleChange} />
+        
+        <label>Maiden Name</label>
+        <input name="maidenName" placeholder="Maiden Name" value={formData.maidenName} onChange={handleChange} />
+
+        <label>Suffix</label>
+        <input name="suffix" placeholder="Suffix" value={formData.suffix} onChange={handleChange} />
+        
+        <label>Nickname</label>
+        <input name="nickname" placeholder="Nickname" value={formData.nickname} onChange={handleChange} />
+        
+        <label>Gender</label>
+        <select name="gender" value={formData.gender} onChange={handleChange} required>
+          <option value="">Select Gender</option>
+          {genders.map(gender => <option key={gender} value={gender}>{gender}</option>)}
+        </select>
+  
+        <label>Tech Alumni Chapter</label>
+        <select name="techAlumChapter" value={formData.techAlumChapter} onChange={handleChange}>
+          <option value="">Select Chapter</option>
+          {techAlumChapters.map(chapter => <option key={chapter} value={chapter}>{chapter}</option>)}
+        </select>
+  
+        <label>Class Year</label>
+        <input 
+          name="classYear" 
+          placeholder="Class Year" 
+          value={formData.classYear} 
+          onChange={handleChange} 
+          required 
+          type="number" 
+        />
+        
+        <label>Grad Year</label>
+        <input 
+          name="gradYear" 
+          placeholder="Grad Year" 
+          value={formData.gradYear} 
+          onChange={handleChange} 
+          required 
+          type="number" 
+        />
+        
+        <label>Grad Semester</label>
+        <input 
+          name="gradSemester" 
+          placeholder="Grad Semester" 
+          value={formData.gradSemester} 
+          onChange={handleChange} 
+          maxLength="6" 
+        />
+
+      <h2>Degrees</h2>
+      {formData.degrees.map((degree, index) => (
+        <div key={index} className="form-section">
+          <label>Subject</label>
+          <input 
+            name="subject" 
+            placeholder="Subject" 
+            value={degree.subject} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+            required 
+          />
+          
+          <label>Degree Type</label>
+          <select 
+            name="degreeType" 
+            value={degree.degreeType} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+            required
+          >
+            <option value="">Select Degree Type</option>
+            {degreeTypes.map(type => (
+              <option key={type} value={type}>{type}</option>
+            ))}
+          </select>
+          
+          <label>Degree Year</label>
+          <input 
+            name="degreeYear" 
+            type="number"
+            min="1900"
+            max={new Date().getFullYear()} 
+            placeholder="Degree Year/Expected Graduation" 
+            value={degree.degreeYear} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+            required 
+          />
+          
+          <label>Degree Description</label>
+          <input 
+            name="degreeDescription" 
+            placeholder="Degree Description" 
+            value={degree.degreeDescription} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+            maxLength="255" 
+          />
+
+          <label>Degree Department</label>
+          <input 
+            name="degreeDepartment" 
+            placeholder="Degree Department" 
+            value={degree.degreeDepartment} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+          />
+          
+          <label>Degree College</label>
+          <input 
+            name="degreeCollege" 
+            placeholder="Degree College" 
+            value={degree.degreeCollege} 
+            onChange={(e) => handleDegreeChange(index, e)} 
+          />
+
+          <button type="button" onClick={() => handleDeleteDegree(index)}>Delete Degree</button>
+        </div>
+      ))}
+
+      <button type="button" onClick={handleAddDegree}>Add Degree</button>
+
+      {/* Add similar sections for addresses and contacts */}
+      {/* Example of addresses: */}
+      <h2>Addresses</h2>
+      {formData.addresses.map((address, index) => (
+        <div key={index} className="form-section">
+          <label>Address Line 1</label>
+          <input 
+            name="address1" 
+            placeholder="Address Line 1" 
+            value={address.address1} 
+            onChange={(e) => handleAddressChange(index, e)} 
+            required 
+          />
+          {/* More address fields here */}
+          <button type="button" onClick={() => handleDeleteAddress(index)}>Delete Address</button>
+        </div>
+      ))}
+
+      <button type="button" onClick={handleAddAddress}>Add Address</button>
+
+      {/* Contacts and Involvements sections here, with similar structures */}
+
+      <button type="button" onClick={handleSave}>Save User Information</button>
+      <button type="button" onClick={handleClear}>Clear</button>
+      </form>
+    </div>
+  );
+};
+
+export default MyAccountAdminView;