in theory everything still works but could use some testing, adding profile settings fetch

srcs/requirements/svelte/api_front/src/ProfilePage.svelte

@@ -11,6 +11,9 @@
   // let dispatch = createEventDispatcher();
 
 
+  // what if i did the fetch in ProfilePage rather than in each ProfileDisplay and ProfileSettings
+  // i mean it would update each time no matter what right? cuz onMount? and then i keep the results in
+  // a Store and it's all good right?
 
 </script>
 

srcs/requirements/svelte/api_front/src/ProfileSettings.svelte

@@ -1,14 +1,123 @@
 <script lang="ts">
 
+  import Card from './shared/Card.svelte';
+  import {onMount} from 'svelte';
+  import { push } from 'svelte-spa-router';
 
+  let user;
+
+  // tbh i might not need this...
+  let set = {
+    username: '',
+    isChecked: false,
+  }
+  const errors = { username: '', checkbox: ''};
+  // let isChecked;
+  let testChecked = true;
+
+  onMount( async() => {
+    user = await fetch('http://transcendance:8080/api/v2/user')
+      .then( (x) => x.json() );
+
+    set.isChecked = user.isEnabledTwoFactorAuth;
+  })
+
+  const settingsHandler = async() => {
+
+    let valid = false;
+
+    if (set.username === user.username) {
+      errors.username = "You picked the same username, you're supposesd to change it";
+      valid = false;
+    } else {
+      errors.username = '';
+      valid = true;
+    }
+
+    if (valid) {
+      fetch('http://transcendance:8080/api/v2/user',{
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            username: set.username,
+            isEnabledTwoFactorAuth:  set.isChecked,
+          })
+        })
+        .then(response => response.json())
+        .then(result => console.log(result));
+
+      push('/profile');
+    }
+
+  };
 
 </script>
 
-<h1>this is settings</h1>
+
+<main>
+  <div class="outter">
+  <h2>Look, you can change stuff</h2>
+  <!-- maybe ues a card? -->
+  <!-- a form? -->
+
+  <Card>
+    <form on:submit|preventDefault={settingsHandler}>
+      <div class="form-field">
+        <div class="label">New Username</div>
+        <!-- <input type="text" placeholder={user.username} bind:value={set.username}> -->
+        <input type="text" placeholder="new username" bind:value={set.username}>
+        <div class="error">{errors.username}</div>
+      </div>
+      <div class="form-field">
+        <div class="label">Set Two Factor Authentication</div>
+        <input type="checkbox" bind:checked={set.isChecked}>
+        <div class="error">{errors.checkbox}</div>
+      </div>
+      <div class="form-field">
+        <div class="label">Test</div>
+        <input type="checkbox" bind:checked={testChecked}>
+      </div>
+      <button>Update Settings</button>
+    </form>
+
+  </Card>
+  </div>
+
+</main>
+
 
 
 <style>
 
+  main {
+    text-align: center;
+  }
+
+  div.outter{
+    max-width: 500px;
+  }
+
+  form {
+    /* max-width: 500px; */
+    text-align: center;
+  }
+
+  .form-field {
+    padding: 10px;
+  }
+
+  .label {
+    font-weight: bold;
+  }
+
+
+  .error{
+    font-size: 0.8em;
+    font-weight: bold;
+    color: red;
+  }
 
 
 </style>