API & Client - move user preferences + add picture edition

fittrackee_client/src/views/ProfileView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="profile" class="container" v-if="authUser.username">
-    <ProfileEdition :user="authUser" v-if="edition" />
-    <Profile :user="authUser" v-else />
+    <ProfileEdition :user="authUser" :tab="tab" v-if="edition" />
+    <Profile :user="authUser" :tab="tab" v-else />
   </div>
 </template>
 
@@ -9,7 +9,7 @@
   import { computed, ComputedRef, defineComponent } from 'vue'
 
   import Profile from '@/components/User/ProfileDisplay/index.vue'
-  import ProfileEdition from '@/components/User/ProfileEdition.vue'
+  import ProfileEdition from '@/components/User/ProfileEdition/index.vue'
   import { USER_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
@@ -25,6 +25,10 @@
         type: Boolean,
         required: true,
       },
+      tab: {
+        type: String,
+        required: true,
+      },
     },
     setup() {
       const store = useStore()
@@ -43,5 +47,50 @@
   #profile {
     display: flex;
     flex-direction: column;
+
+    ::v-deep(.profile-form) {
+      display: flex;
+      flex-direction: column;
+
+      hr {
+        border-color: var(--card-border-color);
+        border-width: 1px 0 0 0;
+      }
+
+      .form-items {
+        display: flex;
+        flex-direction: column;
+
+        input {
+          margin: $default-padding * 0.5 0;
+        }
+
+        select {
+          height: 35px;
+          padding: $default-padding * 0.5 0;
+        }
+        ::v-deep(.custom-textarea) {
+          textarea {
+            padding: $default-padding * 0.5;
+          }
+        }
+
+        .form-item {
+          display: flex;
+          flex-direction: column;
+          padding: $default-padding;
+        }
+        .birth-date {
+          height: 20px;
+        }
+      }
+
+      .form-buttons {
+        display: flex;
+        margin-top: $default-margin;
+        padding: $default-padding 0;
+        gap: $default-padding;
+      }
+    }
   }
 </style>