feat: start of "My Account" page, need API help

components/settings/app_settings/Appearance.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-console.log("Loading appearance.vue...")
 </script>
 
 <style scoped>

components/settings/app_settings/Keybinds.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Keybinds (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/app_settings/Language.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Language (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/app_settings/Notifications.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Notifications (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Account.vue

@@ -1,11 +1,35 @@
 <template>
   <div>
-    <h1>hi!!</h1>
+    <h1>My Account</h1>
+    
+    <div id="profile-container">
+
+    </div>
+
+    <h2>Password (and eventually authenticator)</h2>
+    <Button text="Reset Password" :callback=resetPassword></Button> 
+
+    <h2>Account Deletion</h2>
+    <ButtonScary text="Delete Account" :callback=deleteAccount></ButtonScary> 
+
   </div>
 </template>
 
 <script lang="ts" setup>
-console.log("Loading account.vue...")
+import Button from '~/components/buttons/Button.vue';
+import ButtonScary from '~/components/buttons/ButtonScary.vue';
+
+const { user } = useAuth();
+
+
+const resetPassword = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const deleteAccount = () => {
+  alert("TBD")
+}
 </script>
 
 <style scoped>

components/settings/user_settings/Connections.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Connections (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Devices.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Devices (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Privacy.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Privacy (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/buttons/Button.vue';
+</script>
+
+<style scoped>
+
+</style>