38 profile page editing (#147)

* Set container width to 100% in mobile

* Create preliminary profile edit page

* Remove unused styling

* Remove unused styling

* Set up view method and API call

* Fix bug not displaying group specific cards in edit profile page

* Add comments for what to do next

* created backend route to update user info

* added "other degree" and fixed preferred_name bug

* Added default display for "Other" major and degree in Edit Profile Page

* uncommented forms.py major and degree

* fixed edit profile page

* Add title

* Remove unneeded import

* Added cancel edit profile button

* Fixed minor bugs in edit profile

* Updated edit profile cancellation to include any action leaving page (ie reload, closing, etc)

* Fixed save and cancel buttons

---------

Co-authored-by: ryanyychen <ryan_yychen@hotmail.com>
Co-authored-by: Ryan Chen <103216376+ryanyychen@users.noreply.github.com>

frontend/src/App.svelte

@@ -5,7 +5,7 @@
     import EventCreate from "./Pages/Events/EventCreate.svelte";
     import EventRides from "./Pages/Events/EventRides.svelte"
     import Profile from "./Pages/Profile.svelte";
-    //import ProfileEdit from "./Pages/ProfileEdit.svelte";
+    import ProfileEdit from "./Pages/ProfileEdit.svelte";
     import Inductees from "./Pages/Inductees.svelte";
     import Outreach from "./Pages/Outreach.svelte";
     
@@ -36,7 +36,7 @@
                 <Profile id={null}/>
             </Route>
             <Route path="/profile/edit">
-                <!--ProfileEdit /-->
+                <ProfileEdit />
             </Route>
 
         {#if adminStatus}

frontend/src/Pages/Profile.svelte

@@ -108,16 +108,16 @@
 
 <svelte:head>
     <title> HKN Portal | Profile </title>
-    <meta name="viewport" content="width=device-width, initial-sclae=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </svelte:head>
 
 <Layout>
 <main>
    <div style="width: 95%; display: flex; align-items: center; justify-content: space-between;">
       <h1 style="margin-left: 15px">Profile Page</h1>
-      <!-- {#if self}
+      {#if self}
          <a id="editProfile" href="/profile/edit/"> Edit </a>
-      {/if} -->
+      {/if}
    </div>
       {#if userData}
          <!-- Display basic information -->
@@ -304,16 +304,8 @@
       width: 95%;
    }
 
-   .multi-column {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin: 10px 0px 10px 0px;
-   }
-
    h2 {
       margin: 0px 10px 0px 0px;
-      
    }
 
    h3 {
@@ -349,5 +341,8 @@
          width: 40%;
          display: inline-block
       }
+      .container {
+         width: 100%;
+      }
    }
 </style>