some form button handling

src/App.svelte

@@ -30,7 +30,7 @@
 		{username : "Bob", status : "online"},
 		{username : "Charlie", status : "offline"},
 		{username : "Dave", status : "offline"},
-		{username : "Eve", status : "online"},
+		{username : "Eve", status : "in a game"},
 		{username : "Frank", status : "online"},
 	]
 	let isSpectateOpen = false;

src/components/Profile.svelte

@@ -1,12 +1,37 @@
 <script>
     export let username = '';
+    export let realname = '';
     export let wins = 0;
     export let losses = 0;
     export let elo = 0;
     export let rank = -1;
     export let is2faEnabled = false;
-    function toggle2fa() {
+    async function handleSubmit (event) {
-        is2faEnabled = !is2faEnabled;
+        event.preventDefault();
+        // const res = await fetch('', {
+        //     method: 'POST',
+        //     headers: {
+        //         'Content-Type': 'application/json'
+        //     },
+        //     body: JSON.stringify({
+        //         username
+        //     })
+        // });
+        // if (res.ok) {
+        //     console.log('username updated');
+        // }
+        // else {
+        //     console.log('username update failed');
+        // }
+        alert('Trying to update username to ' + username);
+    }
+    async function handleAvatarUpload (event) {
+        event.preventDefault();
+        alert('Trying to upload avatar');
+    }
+    async function handle2fa (event) {
+        event.preventDefault();
+        alert('Trying to ' + (is2faEnabled ? 'disable' : 'enable') + ' 2FA');
     }
 </script>
 
@@ -14,23 +39,33 @@
     <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
         <div class="profile-header">
             <img class="profile-img" src="img/profileicon.png" alt="Profile Icon">
-        <h3>{username}</h3>
+            <h3>{realname}</h3>
-        <button>Upload avatar</button>
+            <form on:submit={handleAvatarUpload}>
+                <button type="submit">Upload Avatar</button>
+            </form>
         </div>
         <div class="profile-body">
+            <form on:submit={handleSubmit}>
+                <div class="username">
+                    <label for="username">Username</label>
+                    <input type="text" id="username" bind:value={username} />
+                </div>
+                <button type="submit">Submit</button>
+            </form>
             <p>Wins: {wins}</p>
             <p>Losses: {losses}</p>
             <p>Winrate: {wins / (wins + losses) * 100}%</p>
             <p>Elo : {elo}</p>
             <p>Rank: {rank}</p>
-        <div class="two-factor-auth">
+            <form class="two-factor-auth" on:submit={handle2fa}>
-            <button on:click={toggle2fa}>
+                <button type="submit">
                     {#if is2faEnabled}
                         Disable 2FA
                     {:else}
                         Enable 2FA
                     {/if}
-        </div>
+                </button>
+            </form>
         </div>
     </div>
 </div>