API & Client - move user preferences + add picture edition

2021-10-17 21:01:14 +02:00 · 2021-10-17 21:01:14 +02:00 · c92446ff39
commit c92446ff39
parent b70dd3116e
25 changed files with 1291 additions and 478 deletions
--- a/fittrackee/tests/users/test_auth_api.py
+++ b/fittrackee/tests/users/test_auth_api.py
@ -529,9 +529,6 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
                    birth_date='1980-01-01',
                    password='87654321',
                    password_conf='87654321',
-                    timezone='America/New_York',
-                    weekm=True,
-                    language='fr',
                )
            ),
            headers=dict(Authorization=f'Bearer {auth_token}'),
@ -550,9 +547,9 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
        assert data['data']['birth_date']
        assert data['data']['bio'] == 'Nothing to tell'
        assert data['data']['location'] == 'Somewhere'
-        assert data['data']['timezone'] == 'America/New_York'
-        assert data['data']['weekm'] is True
-        assert data['data']['language'] == 'fr'
+        assert data['data']['timezone'] is None
+        assert data['data']['weekm'] is False
+        assert data['data']['language'] is None
        assert data['data']['nb_sports'] == 0
        assert data['data']['nb_workouts'] == 0
        assert data['data']['records'] == []
@ -575,9 +572,6 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
                    location='Somewhere',
                    bio='Nothing to tell',
                    birth_date='1980-01-01',
-                    timezone='America/New_York',
-                    weekm=True,
-                    language='fr',
                )
            ),
            headers=dict(Authorization=f'Bearer {auth_token}'),
@ -596,9 +590,9 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
        assert data['data']['birth_date']
        assert data['data']['bio'] == 'Nothing to tell'
        assert data['data']['location'] == 'Somewhere'
-        assert data['data']['timezone'] == 'America/New_York'
-        assert data['data']['weekm'] is True
-        assert data['data']['language'] == 'fr'
+        assert data['data']['timezone'] is None
+        assert data['data']['weekm'] is False
+        assert data['data']['language'] is None
        assert data['data']['nb_sports'] == 0
        assert data['data']['nb_workouts'] == 0
        assert data['data']['records'] == []
@ -657,9 +651,6 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
                    birth_date='1980-01-01',
                    password='87654321',
                    password_conf='876543210',
-                    timezone='America/New_York',
-                    weekm=True,
-                    language='en',
                )
            ),
            headers=dict(Authorization=f'Bearer {auth_token}'),
@ -689,9 +680,6 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
                    bio='just a random guy',
                    birth_date='1980-01-01',
                    password='87654321',
-                    timezone='America/New_York',
-                    weekm=True,
-                    language='en',
                )
            ),
            headers=dict(Authorization=f'Bearer {auth_token}'),
@ -706,6 +694,83 @@ class TestUserProfileUpdate(ApiTestCaseMixin):
        assert response.status_code == 400


+class TestUserPreferencesUpdate(ApiTestCaseMixin):
+    def test_it_updates_user_preferences(
+        self, app: Flask, user_1: User
+    ) -> None:
+        client, auth_token = self.get_test_client_and_auth_token(app)
+
+        response = client.post(
+            '/api/auth/profile/edit/preferences',
+            content_type='application/json',
+            data=json.dumps(
+                dict(
+                    timezone='America/New_York',
+                    weekm=True,
+                    language='fr',
+                )
+            ),
+            headers=dict(Authorization=f'Bearer {auth_token}'),
+        )
+
+        data = json.loads(response.data.decode())
+        assert data['status'] == 'success'
+        assert data['message'] == 'User preferences updated.'
+        assert response.status_code == 200
+        assert data['data']['username'] == 'test'
+        assert data['data']['email'] == 'test@test.com'
+        assert not data['data']['admin']
+        assert data['data']['created_at']
+        assert data['data']['first_name'] is None
+        assert data['data']['last_name'] is None
+        assert data['data']['birth_date'] is None
+        assert data['data']['bio'] is None
+        assert data['data']['location'] is None
+        assert data['data']['timezone'] == 'America/New_York'
+        assert data['data']['weekm'] is True
+        assert data['data']['language'] == 'fr'
+        assert data['data']['nb_sports'] == 0
+        assert data['data']['nb_workouts'] == 0
+        assert data['data']['records'] == []
+        assert data['data']['sports_list'] == []
+        assert data['data']['total_distance'] == 0
+        assert data['data']['total_duration'] == '0:00:00'
+
+    def test_it_returns_error_if_fields_are_missing(
+        self, app: Flask, user_1: User
+    ) -> None:
+        client, auth_token = self.get_test_client_and_auth_token(app)
+
+        response = client.post(
+            '/api/auth/profile/edit/preferences',
+            content_type='application/json',
+            data=json.dumps(dict(weekm=True)),
+            headers=dict(Authorization=f'Bearer {auth_token}'),
+        )
+
+        data = json.loads(response.data.decode())
+        assert data['status'] == 'error'
+        assert data['message'] == 'Invalid payload.'
+        assert response.status_code == 400
+
+    def test_it_returns_error_if_payload_is_empty(
+        self, app: Flask, user_1: User
+    ) -> None:
+        client, auth_token = self.get_test_client_and_auth_token(app)
+
+        response = client.post(
+            '/api/auth/profile/edit/preferences',
+            content_type='application/json',
+            data=json.dumps(dict()),
+            headers=dict(Authorization=f'Bearer {auth_token}'),
+        )
+
+        data = json.loads(response.data.decode())
+        assert response.status_code == 400
+        assert 'Invalid payload.' in data['message']
+        assert 'error' in data['status']
+
+
 class TestUserPicture(ApiTestCaseMixin):
    def test_it_updates_user_picture(self, app: Flask, user_1: User) -> None:
        client, auth_token = self.get_test_client_and_auth_token(app)
--- a/fittrackee/users/auth.py
+++ b/fittrackee/users/auth.py
@ -468,9 +468,6 @@ def edit_user(auth_user_id: int) -> Union[Dict, HttpResponse]:
    :<json string birth_date: user birth date (format: ``%Y-%m-%d``)
    :<json string password: user password
    :<json string password_conf: user password confirmation
-    :<json string timezone: user time zone
-    :<json string weekm: does week start on Monday?
-    :<json string language: language preferences

    :reqheader Authorization: OAuth 2.0 Bearer Token

@ -492,10 +489,7 @@ def edit_user(auth_user_id: int) -> Union[Dict, HttpResponse]:
        'last_name',
        'bio',
        'birth_date',
-        'language',
        'location',
-        'timezone',
-        'weekm',
    }
    if not post_data or not post_data.keys() >= user_mandatory_data:
        return InvalidPayloadErrorResponse()
@ -504,12 +498,9 @@ def edit_user(auth_user_id: int) -> Union[Dict, HttpResponse]:
    last_name = post_data.get('last_name')
    bio = post_data.get('bio')
    birth_date = post_data.get('birth_date')
-    language = post_data.get('language')
    location = post_data.get('location')
    password = post_data.get('password')
    password_conf = post_data.get('password_conf')
-    timezone = post_data.get('timezone')
-    weekm = post_data.get('weekm')

    if password is not None and password != '':
        message = check_passwords(password, password_conf)
@ -524,7 +515,6 @@ def edit_user(auth_user_id: int) -> Union[Dict, HttpResponse]:
        user.first_name = first_name
        user.last_name = last_name
        user.bio = bio
-        user.language = language
        user.location = location
        user.birth_date = (
            datetime.datetime.strptime(birth_date, '%Y-%m-%d')
@ -533,13 +523,147 @@ def edit_user(auth_user_id: int) -> Union[Dict, HttpResponse]:
        )
        if password is not None and password != '':
            user.password = password
+        db.session.commit()
+
+        return {
+            'status': 'success',
+            'message': 'User profile updated.',
+            'data': user.serialize(),
+        }
+
+    # handler errors
+    except (exc.IntegrityError, exc.OperationalError, ValueError) as e:
+        return handle_error_and_return_response(e, db=db)
+
+
+@auth_blueprint.route('/auth/profile/edit/preferences', methods=['POST'])
+@authenticate
+def edit_user_preferences(auth_user_id: int) -> Union[Dict, HttpResponse]:
+    """
+    edit authenticated user preferences
+
+    **Example request**:
+
+    .. sourcecode:: http
+
+      POST /api/auth/profile/edit/preferences HTTP/1.1
+      Content-Type: application/json
+
+    **Example response**:
+
+    .. sourcecode:: http
+
+      HTTP/1.1 200 OK
+      Content-Type: application/json
+
+      {
+        "data": {
+          "admin": false,
+          "bio": null,
+          "birth_date": null,
+          "created_at": "Sun, 14 Jul 2019 14:09:58 GMT",
+          "email": "sam@example.com",
+          "first_name": null,
+          "language": "en",
+          "last_name": null,
+          "location": null,
+          "nb_sports": 3,
+          "nb_workouts": 6,
+          "picture": false,
+          "records": [
+            {
+              "id": 9,
+              "record_type": "AS",
+              "sport_id": 1,
+              "user": "sam",
+              "value": 18,
+              "workout_date": "Sun, 07 Jul 2019 08:00:00 GMT",
+              "workout_id": "hvYBqYBRa7wwXpaStWR4V2"
+            },
+            {
+              "id": 10,
+              "record_type": "FD",
+              "sport_id": 1,
+              "user": "sam",
+              "value": 18,
+              "workout_date": "Sun, 07 Jul 2019 08:00:00 GMT",
+              "workout_id": "hvYBqYBRa7wwXpaStWR4V2"
+            },
+            {
+              "id": 11,
+              "record_type": "LD",
+              "sport_id": 1,
+              "user": "sam",
+              "value": "1:01:00",
+              "workout_date": "Sun, 07 Jul 2019 08:00:00 GMT",
+              "workout_id": "hvYBqYBRa7wwXpaStWR4V2"
+            },
+            {
+              "id": 12,
+              "record_type": "MS",
+              "sport_id": 1,
+              "user": "sam",
+              "value": 18,
+              "workout_date": "Sun, 07 Jul 2019 08:00:00 GMT",
+              "workout_id": "hvYBqYBRa7wwXpaStWR4V2"
+            }
+          ],
+          "sports_list": [
+              1,
+              4,
+              6
+          ],
+          "timezone": "Europe/Paris",
+          "total_distance": 67.895,
+          "total_duration": "6:50:27",
+          "username": "sam"
+          "weekm": true,
+        },
+        "message": "User preferences updated.",
+        "status": "success"
+      }
+
+    :<json string timezone: user time zone
+    :<json string weekm: does week start on Monday?
+    :<json string language: language preferences
+
+    :reqheader Authorization: OAuth 2.0 Bearer Token
+
+    :statuscode 200: User profile updated.
+    :statuscode 400:
+        - Invalid payload.
+        - Password and password confirmation don't match.
+    :statuscode 401:
+        - Provide a valid auth token.
+        - Signature expired. Please log in again.
+        - Invalid token. Please log in again.
+    :statuscode 500: Error. Please try again or contact the administrator.
+
+    """
+    # get post data
+    post_data = request.get_json()
+    user_mandatory_data = {
+        'language',
+        'timezone',
+        'weekm',
+    }
+    if not post_data or not post_data.keys() >= user_mandatory_data:
+        return InvalidPayloadErrorResponse()
+
+    language = post_data.get('language')
+    timezone = post_data.get('timezone')
+    weekm = post_data.get('weekm')
+
+    try:
+        user = User.query.filter_by(id=auth_user_id).first()
+        user.language = language
        user.timezone = timezone
        user.weekm = weekm
        db.session.commit()

        return {
            'status': 'success',
-            'message': 'User profile updated.',
+            'message': 'User preferences updated.',
            'data': user.serialize(),
        }

--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@ -41,15 +41,7 @@
        <div class="nav-items-user-menu">
          <div class="nav-items-group" v-if="isAuthenticated">
            <div class="nav-item nav-profile-img">
-              <img
-                v-if="authUserPictureUrl !== ''"
-                class="nav-profile-user-img"
-                :alt="t('user.USER_PICTURE')"
-                :src="authUserPictureUrl"
-              />
-              <div v-else class="no-picture">
-                <i class="fa fa-user-circle-o" aria-hidden="true" />
-              </div>
+              <UserPicture :user="authUser" />
            </div>
            <router-link class="nav-item" to="/profile" @click="closeMenu">
              {{ authUser.username }}
@ -86,6 +78,7 @@
  import { useI18n } from 'vue-i18n'

  import Dropdown from '@/components/Common/Dropdown.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
  import { ROOT_STORE, USER_STORE } from '@/store/constants'
  import { IDropdownOption } from '@/types/forms'
  import { IAuthUserProfile } from '@/types/user'
@ -96,6 +89,7 @@
    name: 'NavBar',
    components: {
      Dropdown,
+      UserPicture,
    },
    emits: ['menuInteraction'],
    setup(props, { emit }) {
@ -249,15 +243,15 @@

      .nav-profile-img {
        margin-bottom: -$default-padding;
-        .nav-profile-user-img {
-          border-radius: 50%;
-          height: 32px;
-          width: 32px;
-          object-fit: cover;
-        }
-        .no-picture {
-          color: var(--app-a-color);
-          font-size: 1.7em;
+        ::v-deep(.user-picture) {
+          img {
+            height: 32px;
+            width: 32px;
+            object-fit: cover;
+          }
+          .no-picture {
+            font-size: 1.7em;
+          }
        }
      }

--- a/fittrackee_client/src/components/Statistics/StatsMenu.vue
+++ b/fittrackee_client/src/components/Statistics/StatsMenu.vue
@ -7,9 +7,13 @@
        @click="emit('arrowClick', true)"
      />
    </div>
-    <div class="time-frames">
-      <div class="time-frames-checkboxes">
-        <div v-for="frame in timeFrames" class="time-frame" :key="frame">
+    <div class="time-frames custom-checkboxes-group">
+      <div class="time-frames-checkboxes custom-checkboxes">
+        <div
+          v-for="frame in timeFrames"
+          class="time-frame custom-checkbox"
+          :key="frame"
+        >
          <label>
            <input
              type="radio"
@ -76,41 +80,5 @@
    .chart-arrow {
      cursor: pointer;
    }
-
-    .time-frames {
-      display: flex;
-      justify-content: space-around;
-
-      .time-frames-checkboxes {
-        display: inline-flex;
-
-        .time-frame {
-          label {
-            font-weight: normal;
-            float: left;
-            padding: 0 5px;
-            cursor: pointer;
-          }
-
-          label input {
-            display: none;
-          }
-
-          label span {
-            border: solid 1px var(--time-frame-border-color);
-            border-radius: 9%;
-            display: block;
-            font-size: 0.9em;
-            padding: 2px 6px;
-            text-align: center;
-          }
-
-          input:checked + span {
-            background-color: var(--time-frame-checked-bg-color);
-            color: var(--time-frame-checked-color);
-          }
-        }
-      }
-    }
  }
 </style>
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
@ -1,5 +1,5 @@
 <template>
-  <div id="user-infos">
+  <div id="user-infos" class="description-list">
    <dl>
      <dt>{{ t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
      <dd>{{ registrationDate }}</dd>
@ -43,8 +43,7 @@
  import { IAuthUserProfile } from '@/types/user'

  export default defineComponent({
-    name: 'Profile',
-    components: {},
+    name: 'UserInfos',
    props: {
      user: {
        type: Object as PropType<IAuthUserProfile>,
@ -71,33 +70,6 @@
 <style lang="scss" scoped>
  @import '~@/scss/base.scss';
  #user-infos {
-    dl {
-      overflow: hidden;
-      width: 100%;
-      padding: 0 $default-padding;
-      dt {
-        font-weight: bold;
-        float: left;
-        width: 25%;
-      }
-      dd {
-        float: left;
-      }
-    }
-    @media screen and (max-width: $x-small-limit) {
-      dl {
-        overflow: auto;
-        width: initial;
-        dt {
-          font-weight: bold;
-          float: none;
-          width: initial;
-        }
-        dd {
-          float: none;
-        }
-      }
-    }
    .user-bio {
      white-space: pre-wrap;
    }
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
@ -0,0 +1,62 @@
+<template>
+  <div id="user-preferences" class="description-list">
+    <dl>
+      <dt>{{ t('user.PROFILE.LANGUAGE') }}:</dt>
+      <dd>{{ language }}</dd>
+    </dl>
+    <dl>
+      <dt>{{ t('user.PROFILE.TIMEZONE') }}:</dt>
+      <dd>{{ timezone }}</dd>
+    </dl>
+    <dl>
+      <dt>{{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}:</dt>
+      <dd>{{ t(`user.PROFILE.${fistDayOfWeek}`) }}</dd>
+    </dl>
+    <div class="profile-buttons">
+      <button @click="$router.push('/profile/edit/preferences')">
+        {{ t('user.PROFILE.EDIT_PREFERENCES') }}
+      </button>
+      <button @click="$router.push('/')">{{ t('common.HOME') }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, computed, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IAuthUserProfile } from '@/types/user'
+
+  export default defineComponent({
+    name: 'UserPreferences',
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const language = computed(() =>
+        props.user.language ? props.user.language.toUpperCase() : 'EN'
+      )
+      const fistDayOfWeek = computed(() =>
+        props.user.weekm ? 'MONDAY' : 'SUNDAY'
+      )
+      const timezone = computed(() =>
+        props.user.timezone ? props.user.timezone : 'Europe/Paris'
+      )
+      return { fistDayOfWeek, language, t, timezone }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  #user-preferences {
+    .profile-buttons {
+      display: flex;
+      gap: $default-padding;
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/ProfileDisplay/index.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/index.vue
@ -1,17 +1,7 @@
 <template>
  <div id="user-profile">
    <div class="box user-header">
-      <div class="user-picture">
-        <img
-          v-if="authUserPictureUrl !== ''"
-          class="nav-profile-user-img"
-          :alt="t('user.USER_PICTURE')"
-          :src="authUserPictureUrl"
-        />
-        <div v-else class="no-picture">
-          <i class="fa fa-user-circle-o" aria-hidden="true" />
-        </div>
-      </div>
+      <UserPicture :user="user" />
      <div class="user-details">
        <div class="user-name">{{ user.username }}</div>
        <div class="user-stats">
@ -37,7 +27,9 @@
      </div>
    </div>
    <div class="box">
-      <UserInfos :user="user" />
+      <UserProfileTabs :tabs="tabs" :selectedTab="tab" :edition="false" />
+      <UserInfos :user="user" v-if="tab === 'PROFILE'" />
+      <UserPreferences :user="user" v-if="tab === 'PREFERENCES'" />
    </div>
  </div>
 </template>
@ -47,28 +39,39 @@
  import { useI18n } from 'vue-i18n'

  import UserInfos from '@/components/User/ProfileDisplay/UserInfos.vue'
+  import UserPreferences from '@/components/User/ProfileDisplay/UserPreferences.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
+  import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
  import { IAuthUserProfile } from '@/types/user'
  import { getApiUrl } from '@/utils'

  export default defineComponent({
-    name: 'Profile',
+    name: 'ProfileDisplay',
    components: {
      UserInfos,
+      UserPicture,
+      UserPreferences,
+      UserProfileTabs,
    },
    props: {
      user: {
        type: Object as PropType<IAuthUserProfile>,
        required: true,
      },
+      tab: {
+        type: String,
+        required: true,
+      },
    },
    setup(props) {
      const { t } = useI18n()
+      const tabs = ['PROFILE', 'PREFERENCES']
      const authUserPictureUrl: ComputedRef<string> = computed(() =>
        props.user.picture
          ? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
          : ''
      )
-      return { authUserPictureUrl, t }
+      return { authUserPictureUrl, t, tabs }
    },
  })
 </script>
@ -88,22 +91,6 @@
      display: flex;
      align-items: stretch;

-      .user-picture {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 30%;
-        img {
-          border-radius: 50%;
-          height: 90px;
-          width: 90px;
-        }
-        .no-picture {
-          color: var(--app-a-color);
-          font-size: 5.5em;
-        }
-      }
-
      .user-details {
        flex-grow: 1;
        padding: $default-padding;
--- a/fittrackee_client/src/components/User/ProfileEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition.vue
@ -1,318 +0,0 @@
-<template>
-  <div id="user-profile-edition">
-    <Modal
-      v-if="displayModal"
-      :title="t('common.CONFIRMATION')"
-      :message="t('user.CONFIRM_ACCOUNT_DELETION')"
-      @confirmAction="deleteAccount(user.username)"
-      @cancelAction="updateDisplayModal(false)"
-    />
-    <Card>
-      <template #title>{{ t('user.PROFILE.EDITION') }}</template>
-      <template #content>
-        <div class="profile-form form-box">
-          <ErrorMessage :message="errorMessages" v-if="errorMessages" />
-          <form @submit.prevent="updateProfile">
-            <label class="form-items" for="email">
-              {{ t('user.EMAIL') }}
-              <input id="email" :value="user.email" disabled />
-            </label>
-            <label class="form-items" for="registrationDate">
-              {{ t('user.PROFILE.REGISTRATION_DATE') }}
-              <input id="registrationDate" :value="registrationDate" disabled />
-            </label>
-            <label class="form-items" for="password">
-              {{ t('user.PASSWORD') }}
-              <input
-                id="password"
-                type="password"
-                v-model="userForm.password"
-                :disabled="loading"
-              />
-            </label>
-            <label class="form-items" for="passwordConfirmation">
-              {{ t('user.PASSWORD_CONFIRMATION') }}
-              <input
-                id="passwordConfirmation"
-                type="password"
-                v-model="userForm.password_conf"
-                :disabled="loading"
-              />
-            </label>
-            <hr />
-            <label class="form-items" for="first_name">
-              {{ t('user.PROFILE.FIRST_NAME') }}
-              <input
-                id="first_name"
-                v-model="userForm.first_name"
-                :disabled="loading"
-              />
-            </label>
-            <label class="form-items" for="last_name">
-              {{ t('user.PROFILE.LAST_NAME') }}
-              <input id="last_name" v-model="userForm.last_name" />
-            </label>
-            <label class="form-items" for="birth_date">
-              {{ t('user.PROFILE.BIRTH_DATE') }}
-              <input
-                id="birth_date"
-                type="date"
-                class="birth-date"
-                v-model="userForm.birth_date"
-                :disabled="loading"
-              />
-            </label>
-            <label class="form-items" for="location">
-              {{ t('user.PROFILE.LOCATION') }}
-              <input
-                id="location"
-                v-model="userForm.location"
-                :disabled="loading"
-              />
-            </label>
-            <label class="form-items">
-              {{ t('user.PROFILE.BIO') }}
-              <CustomTextArea
-                name="bio"
-                :charLimit="200"
-                :input="userForm.bio"
-                :disabled="loading"
-                @updateValue="updateBio"
-              />
-            </label>
-            <label class="form-items">
-              {{ t('user.PROFILE.LANGUAGE') }}
-              <select
-                id="language"
-                v-model="userForm.language"
-                :disabled="loading"
-              >
-                <option
-                  v-for="lang in availableLanguages"
-                  :value="lang.value"
-                  :key="lang.value"
-                >
-                  {{ lang.label }}
-                </option>
-              </select>
-            </label>
-            <label class="form-items" for="timezone">
-              {{ t('user.PROFILE.TIMEZONE') }}
-              <input
-                id="timezone"
-                v-model="userForm.timezone"
-                :disabled="loading"
-              />
-            </label>
-            <label class="form-items">
-              {{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
-              <select id="weekm" v-model="userForm.weekm" :disabled="loading">
-                <option
-                  v-for="start in weekStart"
-                  :value="start.value"
-                  :key="start.value"
-                >
-                  {{ t(`user.PROFILE.${start.label}`) }}
-                </option>
-              </select>
-            </label>
-            <div class="form-buttons">
-              <button class="confirm" type="submit">
-                {{ t('buttons.SUBMIT') }}
-              </button>
-              <button class="danger" @click.prevent="updateDisplayModal(true)">
-                {{ t('buttons.DELETE_MY_ACCOUNT') }}
-              </button>
-              <button class="cancel" @click.prevent="$router.go(-1)">
-                {{ t('buttons.CANCEL') }}
-              </button>
-            </div>
-          </form>
-        </div>
-      </template>
-    </Card>
-  </div>
-</template>
-
-<script lang="ts">
-  import { format } from 'date-fns'
-  import {
-    ComputedRef,
-    PropType,
-    Ref,
-    computed,
-    defineComponent,
-    reactive,
-    ref,
-    onMounted,
-  } from 'vue'
-  import { useI18n } from 'vue-i18n'
-
-  import Card from '@/components/Common/Card.vue'
-  import CustomTextArea from '@/components/Common/CustomTextArea.vue'
-  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
-  import Modal from '@/components/Common/Modal.vue'
-  import { ROOT_STORE, USER_STORE } from '@/store/constants'
-  import { IAuthUserProfile, IUserPayload } from '@/types/user'
-  import { useStore } from '@/use/useStore'
-
-  export default defineComponent({
-    name: 'ProfileEdition',
-    components: {
-      Card,
-      CustomTextArea,
-      ErrorMessage,
-      Modal,
-    },
-    props: {
-      user: {
-        type: Object as PropType<IAuthUserProfile>,
-        required: true,
-      },
-    },
-    setup(props) {
-      const { t, availableLocales } = useI18n()
-      const store = useStore()
-      const userForm: IUserPayload = reactive({
-        password: '',
-        password_conf: '',
-        first_name: '',
-        last_name: '',
-        birth_date: '',
-        location: '',
-        bio: '',
-        language: '',
-        timezone: 'Europe/Paris',
-        weekm: false,
-      })
-      const availableLanguages = availableLocales.map((l) => {
-        return { label: l.toUpperCase(), value: l }
-      })
-      const weekStart = [
-        {
-          label: 'MONDAY',
-          value: true,
-        },
-        {
-          label: 'SUNDAY',
-          value: false,
-        },
-      ]
-      const registrationDate = computed(() =>
-        props.user.created_at
-          ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
-          : ''
-      )
-      const loading = computed(
-        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
-      )
-      const errorMessages: ComputedRef<string | string[] | null> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
-      )
-      let displayModal: Ref<boolean> = ref(false)
-
-      onMounted(() => {
-        if (props.user) {
-          updateUserForm(props.user)
-        }
-      })
-
-      function updateUserForm(user: IAuthUserProfile) {
-        userForm.first_name = user.first_name ? user.first_name : ''
-        userForm.last_name = user.last_name ? user.last_name : ''
-        userForm.birth_date = user.birth_date
-          ? format(new Date(user.birth_date), 'yyyy-MM-dd')
-          : ''
-        userForm.location = user.location ? user.location : ''
-        userForm.bio = user.bio ? user.bio : ''
-        userForm.language = user.language ? user.language : 'en'
-        userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
-        userForm.weekm = user.weekm ? user.weekm : false
-      }
-      function updateBio(value: string) {
-        userForm.bio = value
-      }
-      function updateProfile() {
-        store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
-      }
-      function updateDisplayModal(value: boolean) {
-        displayModal.value = value
-      }
-      function deleteAccount(username: string) {
-        store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
-      }
-
-      return {
-        availableLanguages,
-        displayModal,
-        errorMessages,
-        loading,
-        registrationDate,
-        t,
-        userForm,
-        weekStart,
-        deleteAccount,
-        updateBio,
-        updateDisplayModal,
-        updateProfile,
-      }
-    },
-  })
-</script>
-
-<style lang="scss" scoped>
-  @import '~@/scss/base.scss';
-
-  #user-profile-edition {
-    margin: auto;
-    width: 700px;
-    @media screen and (max-width: $medium-limit) {
-      width: 100%;
-      margin: 0 auto 50px auto;
-    }
-
-    .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;
-        padding: $default-padding 0;
-        gap: $default-padding;
-      }
-    }
-  }
-</style>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserInfosEdition.vue
@ -0,0 +1,208 @@
+<template>
+  <div id="user-infos-edition">
+    <Modal
+      v-if="displayModal"
+      :title="t('common.CONFIRMATION')"
+      :message="t('user.CONFIRM_ACCOUNT_DELETION')"
+      @confirmAction="deleteAccount(user.username)"
+      @cancelAction="updateDisplayModal(false)"
+    />
+    <div class="profile-form form-box">
+      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+      <form @submit.prevent="updateProfile">
+        <label class="form-items" for="email">
+          {{ t('user.EMAIL') }}
+          <input id="email" :value="user.email" disabled />
+        </label>
+        <label class="form-items" for="registrationDate">
+          {{ t('user.PROFILE.REGISTRATION_DATE') }}
+          <input id="registrationDate" :value="registrationDate" disabled />
+        </label>
+        <label class="form-items" for="password">
+          {{ t('user.PASSWORD') }}
+          <input
+            id="password"
+            type="password"
+            v-model="userForm.password"
+            :disabled="loading"
+          />
+        </label>
+        <label class="form-items" for="passwordConfirmation">
+          {{ t('user.PASSWORD_CONFIRMATION') }}
+          <input
+            id="passwordConfirmation"
+            type="password"
+            v-model="userForm.password_conf"
+            :disabled="loading"
+          />
+        </label>
+        <hr />
+        <label class="form-items" for="first_name">
+          {{ t('user.PROFILE.FIRST_NAME') }}
+          <input
+            id="first_name"
+            v-model="userForm.first_name"
+            :disabled="loading"
+          />
+        </label>
+        <label class="form-items" for="last_name">
+          {{ t('user.PROFILE.LAST_NAME') }}
+          <input id="last_name" v-model="userForm.last_name" />
+        </label>
+        <label class="form-items" for="birth_date">
+          {{ t('user.PROFILE.BIRTH_DATE') }}
+          <input
+            id="birth_date"
+            type="date"
+            class="birth-date"
+            v-model="userForm.birth_date"
+            :disabled="loading"
+          />
+        </label>
+        <label class="form-items" for="location">
+          {{ t('user.PROFILE.LOCATION') }}
+          <input
+            id="location"
+            v-model="userForm.location"
+            :disabled="loading"
+          />
+        </label>
+        <label class="form-items">
+          {{ t('user.PROFILE.BIO') }}
+          <CustomTextArea
+            name="bio"
+            :charLimit="200"
+            :input="userForm.bio"
+            :disabled="loading"
+            @updateValue="updateBio"
+          />
+        </label>
+        <div class="form-buttons">
+          <button class="confirm" type="submit">
+            {{ t('buttons.SUBMIT') }}
+          </button>
+          <button class="cancel" @click.prevent="$router.go(-1)">
+            {{ t('buttons.CANCEL') }}
+          </button>
+          <button class="danger" @click.prevent="updateDisplayModal(true)">
+            {{ t('buttons.DELETE_MY_ACCOUNT') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { format } from 'date-fns'
+  import {
+    ComputedRef,
+    PropType,
+    Ref,
+    computed,
+    defineComponent,
+    reactive,
+    ref,
+    onMounted,
+  } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import CustomTextArea from '@/components/Common/CustomTextArea.vue'
+  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import Modal from '@/components/Common/Modal.vue'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAuthUserProfile, IUserPayload } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserInfosEdition',
+    components: {
+      CustomTextArea,
+      ErrorMessage,
+      Modal,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const store = useStore()
+      const userForm: IUserPayload = reactive({
+        password: '',
+        password_conf: '',
+        first_name: '',
+        last_name: '',
+        birth_date: '',
+        location: '',
+        bio: '',
+      })
+      const registrationDate = computed(() =>
+        props.user.created_at
+          ? format(new Date(props.user.created_at), 'dd/MM/yyyy HH:mm')
+          : ''
+      )
+      const loading = computed(
+        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
+      )
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+      let displayModal: Ref<boolean> = ref(false)
+
+      onMounted(() => {
+        if (props.user) {
+          updateUserForm(props.user)
+        }
+      })
+
+      function updateUserForm(user: IAuthUserProfile) {
+        userForm.first_name = user.first_name ? user.first_name : ''
+        userForm.last_name = user.last_name ? user.last_name : ''
+        userForm.birth_date = user.birth_date
+          ? format(new Date(user.birth_date), 'yyyy-MM-dd')
+          : ''
+        userForm.location = user.location ? user.location : ''
+        userForm.bio = user.bio ? user.bio : ''
+      }
+      function updateBio(value: string) {
+        userForm.bio = value
+      }
+      function updateProfile() {
+        store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PROFILE, userForm)
+      }
+      function updateDisplayModal(value: boolean) {
+        displayModal.value = value
+      }
+      function deleteAccount(username: string) {
+        store.dispatch(USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
+      }
+
+      return {
+        displayModal,
+        errorMessages,
+        loading,
+        registrationDate,
+        t,
+        userForm,
+        deleteAccount,
+        updateBio,
+        updateDisplayModal,
+        updateProfile,
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base.scss';
+
+  .form-buttons {
+    flex-direction: row;
+    @media screen and (max-width: $x-small-limit) {
+      flex-direction: column;
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPictureEdition.vue
@ -0,0 +1,141 @@
+<template>
+  <div id="user-picture-edition">
+    <div class="user-picture-form">
+      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+      <UserPicture :user="user" />
+      <form @submit.prevent="updateUserPicture">
+        <input
+          type="file"
+          name="picture"
+          accept=".png,.jpg,.gif"
+          @input="updatePictureFile"
+        />
+        <div class="picture-buttons">
+          <button type="submit" :disabled="!pictureFile">
+            {{ t('user.PROFILE.PICTURE_UPDATE') }}
+          </button>
+          <button class="danger" v-if="user.picture" @click="deleteUserPicture">
+            {{ t('user.PROFILE.PICTURE_REMOVE') }}
+          </button>
+          <button class="cancel" @click="$router.push('/profile')">
+            {{ t('user.PROFILE.BACK_TO_PROFILE') }}
+          </button>
+        </div>
+        <span>{{ t('workouts.MAX_SIZE') }}: {{ fileSizeLimit }}</span>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    PropType,
+    Ref,
+    defineComponent,
+    computed,
+    ref,
+  } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import UserPicture from '@/components/User/UserPicture.vue'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAppConfig } from '@/types/application'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { getReadableFileSize } from '@/utils/files'
+
+  export default defineComponent({
+    name: 'UserPictureEdition',
+    components: {
+      ErrorMessage,
+      UserPicture,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      const store = useStore()
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+      const appConfig: ComputedRef<IAppConfig> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
+      )
+      const fileSizeLimit = appConfig.value.max_single_file_size
+        ? getReadableFileSize(appConfig.value.max_single_file_size)
+        : ''
+      let pictureFile: Ref<File | null> = ref(null)
+
+      function deleteUserPicture() {
+        store.dispatch(USER_STORE.ACTIONS.DELETE_PICTURE)
+      }
+      function updatePictureFile(event: Event & { target: HTMLInputElement }) {
+        if (event.target.files) {
+          pictureFile.value = event.target.files[0]
+        }
+      }
+      function updateUserPicture() {
+        if (pictureFile.value) {
+          store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PICTURE, {
+            picture: pictureFile.value,
+          })
+        }
+      }
+
+      return {
+        errorMessages,
+        fileSizeLimit,
+        pictureFile,
+        t,
+        deleteUserPicture,
+        updateUserPicture,
+        updatePictureFile,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user-picture-edition {
+    .user-picture-form {
+      display: flex;
+      flex-direction: column;
+
+      form {
+        display: flex;
+        flex-direction: column;
+        gap: $default-padding;
+        justify-content: flex-start;
+
+        input {
+          margin-top: $default-margin;
+          padding: $default-padding * 0.5;
+        }
+
+        span {
+          font-style: italic;
+          font-size: 0.9em;
+          padding-left: $default-padding * 0.5;
+        }
+      }
+      .picture-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $default-padding;
+        @media screen and (max-width: $x-small-limit) {
+          flex-direction: column;
+          align-items: stretch;
+        }
+      }
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
@ -0,0 +1,132 @@
+<template>
+  <div id="user-preferences-edition">
+    <div class="profile-form form-box">
+      <ErrorMessage :message="errorMessages" v-if="errorMessages" />
+      <form @submit.prevent="updateProfile">
+        <label class="form-items">
+          {{ t('user.PROFILE.LANGUAGE') }}
+          <select id="language" v-model="userForm.language" :disabled="loading">
+            <option
+              v-for="lang in availableLanguages"
+              :value="lang.value"
+              :key="lang.value"
+            >
+              {{ lang.label }}
+            </option>
+          </select>
+        </label>
+        <label class="form-items" for="timezone">
+          {{ t('user.PROFILE.TIMEZONE') }}
+          <input
+            id="timezone"
+            v-model="userForm.timezone"
+            :disabled="loading"
+          />
+        </label>
+        <label class="form-items">
+          {{ t('user.PROFILE.FIRST_DAY_OF_WEEK') }}
+          <select id="weekm" v-model="userForm.weekm" :disabled="loading">
+            <option
+              v-for="start in weekStart"
+              :value="start.value"
+              :key="start.value"
+            >
+              {{ t(`user.PROFILE.${start.label}`) }}
+            </option>
+          </select>
+        </label>
+        <div class="form-buttons">
+          <button class="confirm" type="submit">
+            {{ t('buttons.SUBMIT') }}
+          </button>
+          <button class="cancel" @click.prevent="$router.go(-1)">
+            {{ t('buttons.CANCEL') }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    ComputedRef,
+    PropType,
+    computed,
+    defineComponent,
+    reactive,
+    onMounted,
+  } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import ErrorMessage from '@/components/Common/ErrorMessage.vue'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { IAuthUserProfile, IUserPreferencesPayload } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'UserPreferencesEdition',
+    components: {
+      ErrorMessage,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t, availableLocales } = useI18n()
+      const store = useStore()
+      const userForm: IUserPreferencesPayload = reactive({
+        language: '',
+        timezone: 'Europe/Paris',
+        weekm: false,
+      })
+      const availableLanguages = availableLocales.map((l) => {
+        return { label: l.toUpperCase(), value: l }
+      })
+      const weekStart = [
+        {
+          label: 'MONDAY',
+          value: true,
+        },
+        {
+          label: 'SUNDAY',
+          value: false,
+        },
+      ]
+      const loading = computed(
+        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
+      )
+      const errorMessages: ComputedRef<string | string[] | null> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+      )
+
+      onMounted(() => {
+        if (props.user) {
+          updateUserForm(props.user)
+        }
+      })
+
+      function updateUserForm(user: IAuthUserProfile) {
+        userForm.language = user.language ? user.language : 'en'
+        userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
+        userForm.weekm = user.weekm ? user.weekm : false
+      }
+      function updateProfile() {
+        store.dispatch(USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
+      }
+
+      return {
+        availableLanguages,
+        errorMessages,
+        loading,
+        t,
+        userForm,
+        weekStart,
+        updateProfile,
+      }
+    },
+  })
+</script>
--- a/fittrackee_client/src/components/User/ProfileEdition/index.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/index.vue
@ -0,0 +1,76 @@
+<template>
+  <div id="user-profile-edition">
+    <Card>
+      <template #title>{{ t('user.PROFILE.EDITION') }}</template>
+      <template #content>
+        <UserProfileTabs
+          :tabs="tabs"
+          :selectedTab="tab"
+          :edition="true"
+          :disabled="loading"
+        />
+        <UserInfosEdition v-if="tab === 'PROFILE'" :user="user" />
+        <UserPreferencesEdition v-if="tab === 'PREFERENCES'" :user="user" />
+        <UserPictureEdition v-if="tab === 'PICTURE'" :user="user" />
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent, ref, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import UserInfosEdition from '@/components/User/ProfileEdition/UserInfosEdition.vue'
+  import UserPictureEdition from '@/components/User/ProfileEdition/UserPictureEdition.vue'
+  import UserPreferencesEdition from '@/components/User/ProfileEdition/UserPreferencesEdition.vue'
+  import UserProfileTabs from '@/components/User/UserProfileTabs.vue'
+  import { USER_STORE } from '@/store/constants'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'ProfileEdition',
+    components: {
+      Card,
+      UserInfosEdition,
+      UserPictureEdition,
+      UserPreferencesEdition,
+      UserProfileTabs,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+      tab: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const store = useStore()
+      const tabs = ['PROFILE', 'PICTURE', 'PREFERENCES']
+      const selectedTab = ref(props.tab)
+      const loading = computed(
+        () => store.getters[USER_STORE.GETTERS.USER_LOADING]
+      )
+      return { loading, selectedTab, t, tabs }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+
+  #user-profile-edition {
+    margin: auto;
+    width: 700px;
+    @media screen and (max-width: $medium-limit) {
+      width: 100%;
+      margin: 0 auto 50px auto;
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/UserPicture.vue
+++ b/fittrackee_client/src/components/User/UserPicture.vue
@ -0,0 +1,61 @@
+<template>
+  <div class="user-picture">
+    <img
+      v-if="authUserPictureUrl !== ''"
+      class="nav-profile-user-img"
+      :alt="t('user.USER_PICTURE')"
+      :src="authUserPictureUrl"
+    />
+    <div v-else class="no-picture">
+      <i class="fa fa-user-circle-o" aria-hidden="true" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, computed, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IAuthUserProfile } from '@/types/user'
+  import { getApiUrl } from '@/utils'
+  export default defineComponent({
+    name: 'UserPicture',
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      return {
+        authUserPictureUrl: computed(() =>
+          props.user.picture
+            ? `${getApiUrl()}users/${props.user.username}/picture?${Date.now()}`
+            : ''
+        ),
+        t,
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base.scss';
+
+  .user-picture {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 30%;
+    img {
+      border-radius: 50%;
+      height: 90px;
+      width: 90px;
+    }
+    .no-picture {
+      color: var(--app-a-color);
+      font-size: 5.5em;
+    }
+  }
+</style>
--- a/fittrackee_client/src/components/User/UserProfileTabs.vue
+++ b/fittrackee_client/src/components/User/UserProfileTabs.vue
@ -0,0 +1,69 @@
+<template>
+  <div class="profile-tabs custom-checkboxes-group">
+    <div class="profile-tabs-checkboxes custom-checkboxes">
+      <div v-for="tab in tabs" class="profile-tab custom-checkbox" :key="tab">
+        <label>
+          <input
+            type="radio"
+            :id="tab"
+            :name="tab"
+            :checked="selectedTab === tab"
+            :disabled="disabled"
+            @input="$router.push(getPath(tab))"
+          />
+          <span>{{ t(`user.PROFILE.TABS.${tab}`) }}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  export default defineComponent({
+    name: 'UserProfileTabs',
+    props: {
+      tabs: {
+        type: Object as PropType<string[]>,
+        required: true,
+      },
+      selectedTab: {
+        type: String,
+        required: true,
+      },
+      edition: {
+        type: Boolean,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      function getPath(tab: string) {
+        switch (tab) {
+          case 'PICTURE':
+            return '/profile/edit/picture'
+          case 'PREFERENCES':
+            return `/profile${props.edition ? '/edit' : ''}/preferences`
+          default:
+          case 'PROFILE':
+            return `/profile${props.edition ? '/edit' : ''}`
+        }
+      }
+      return { t, getPath }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base.scss';
+
+  .profile-tabs {
+    margin: $default-margin 0 $default-margin;
+  }
+</style>
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@ -1,6 +1,6 @@
 {
-  "EMAIL": "Email",
  "CONFIRM_ACCOUNT_DELETION": "Are you sure you want to delete your account? All data will be deleted, this cannot be undone",
+  "EMAIL": "Email",
  "LANGUAGE": "Language",
  "LOGIN": "Login",
  "LOGOUT": "Logout",
@ -8,9 +8,11 @@
  "PASSWORD_CONFIRM": "Confirm Password",
  "PASSWORD_CONFIRMATION": "Password confirmation",
  "PROFILE": {
+    "BACK_TO_PROFILE": "Back to profile",
    "BIO": "Bio",
    "BIRTH_DATE": "Birth date",
    "EDIT": "Edit profile",
+    "EDIT_PREFERENCES": "Edit preferences",
    "EDITION": "Profile edition",
    "FIRST_NAME": "First name",
    "FIRST_DAY_OF_WEEK": "First day of week",
@ -19,8 +21,15 @@
    "LOCATION": "Location",
    "MONDAY": "Monday",
    "PICTURE": "Picture",
+    "PICTURE_UPDATE": "Update picture",
+    "PICTURE_REMOVE": "Remove picture",
    "REGISTRATION_DATE": "Registration date",
    "SUNDAY": "Sunday",
+    "TABS": {
+      "PICTURE": "picture",
+      "PREFERENCES": "preferences",
+      "PROFILE": "profile"
+    },
    "TIMEZONE": "Timezone"
  },
  "REGISTER": "Register",
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@ -1,5 +1,4 @@
 {
-  "CONFIRM-PASSWORD": "Confirmation du mot de passe",
  "CONFIRM_ACCOUNT_DELETION": "Etes-vous sûr de vouloir supprimer votre compte ? Toutes les données seront définitivement effacés.",
  "EMAIL": "Email",
  "LANGUAGE": "Langue",
@ -9,9 +8,11 @@
  "PASSWORD_CONFIRM": "Confirmation du mot de passe",
  "PASSWORD_CONFIRMATION": "Confirmation du mot de passe",
  "PROFILE": {
+    "BACK_TO_PROFILE": "Revenir au profil",
    "BIO": "Bio",
    "BIRTH_DATE": "Date de naissance",
    "EDIT": "Modifier le profil",
+    "EDIT_PREFERENCES": "Modifier les préférences",
    "EDITION": "Mise à jour du profil",
    "FIRST_DAY_OF_WEEK": "Premier jour de la semaine",
    "FIRST_NAME": "Prénom",
@ -19,9 +20,16 @@
    "LAST_NAME": "Nom",
    "LOCATION": "Lieu",
    "MONDAY": "Lundi",
-    "PICTURE": "Avatar",
+    "PICTURE": "Image de profil",
+    "PICTURE_UPDATE": "Mettre à jour l'image",
+    "PICTURE_REMOVE": "Supprimer",
    "REGISTRATION_DATE": "Date d'inscription",
    "SUNDAY": "Dimanche",
+    "TABS": {
+      "PICTURE": "image",
+      "PREFERENCES": "préférences",
+      "PROFILE": "profil"
+    },
    "TIMEZONE": "Fuseau horaire"
  },
  "REGISTER": "S'inscrire",
--- a/fittrackee_client/src/router/index.ts
+++ b/fittrackee_client/src/router/index.ts
@ -34,13 +34,31 @@ const routes: Array<RouteRecordRaw> = [
    path: '/profile',
    name: 'Profile',
    component: ProfileView,
-    props: { edition: false },
+    props: { edition: false, tab: 'PROFILE' },
+  },
+  {
+    path: '/profile/edit/picture',
+    name: 'UserPictureEdition',
+    component: ProfileView,
+    props: { edition: true, tab: 'PICTURE' },
+  },
+  {
+    path: '/profile/preferences',
+    name: 'UserPreferences',
+    component: ProfileView,
+    props: { edition: false, tab: 'PREFERENCES' },
+  },
+  {
+    path: '/profile/edit/preferences',
+    name: 'UserPreferencesEdition',
+    component: ProfileView,
+    props: { edition: true, tab: 'PREFERENCES' },
  },
  {
    path: '/profile/edit',
    name: 'ProfileEdition',
    component: ProfileView,
-    props: { edition: true },
+    props: { edition: true, tab: 'PROFILE' },
  },
  {
    path: '/statistics',
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@ -149,3 +149,76 @@ button {
  text-align: center;
  vertical-align: center;
 }
+
+.custom-checkboxes-group {
+  display: flex;
+  justify-content: space-around;
+
+  .custom-checkboxes {
+    display: inline-flex;
+
+    @media screen and (max-width: $xx-small-limit) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: $default-padding * .5;
+    }
+
+    .custom-checkbox {
+      label {
+        font-weight: normal;
+        float: left;
+        padding: 0 5px;
+        cursor: pointer;
+      }
+
+      label input {
+        display: none;
+      }
+
+      label span {
+        border: solid 1px var(--custom-checkbox-border-color);
+        border-radius: 5px;
+        display: block;
+        font-size: 0.9em;
+        padding: 2px 6px;
+        text-align: center;
+      }
+
+      input:checked + span {
+        background-color: var(--custom-checkbox-checked-bg-color);
+        color: var(--custom-checkbox-checked-color);
+      }
+    }
+  }
+}
+
+.description-list {
+  dl {
+    overflow: hidden;
+    width: 100%;
+    padding: 0 $default-padding;
+    dt {
+      font-weight: bold;
+      float: left;
+      width: 25%;
+    }
+    dd {
+      float: left;
+    }
+  }
+  @media screen and (max-width: $x-small-limit) {
+    dl {
+      overflow: auto;
+      width: initial;
+      dt {
+        font-weight: bold;
+        float: none;
+        width: initial;
+      }
+      dd {
+        float: none;
+      }
+    }
+  }
+}
--- a/fittrackee_client/src/scss/colors.scss
+++ b/fittrackee_client/src/scss/colors.scss
@ -20,9 +20,9 @@
  --card-border-color: #c4c7cf;
  --input-border-color: #9da3af;

-  --time-frame-border-color: #9da3af;
-  --time-frame-checked-bg-color: #9da3af;
-  --time-frame-checked-color: #FFFFFF;
+  --custom-checkbox-border-color: #9da3af;
+  --custom-checkbox-checked-bg-color: #9da3af;
+  --custom-checkbox-checked-color: #FFFFFF;

  --calendar-border-color: #c4c7cf;
  --calendar-week-end-color: #f5f5f5;
--- a/fittrackee_client/src/scss/vars.scss
+++ b/fittrackee_client/src/scss/vars.scss
@ -5,6 +5,7 @@ $container-width: 1140px;
 $medium-limit: 1000px;
 $small-limit: 700px;
 $x-small-limit: 500px;
+$xx-small-limit: 300px;

 /*
 * === HEIGHT ===
--- a/fittrackee_client/src/store/modules/user/actions.ts
+++ b/fittrackee_client/src/store/modules/user/actions.ts
@ -2,6 +2,7 @@ import { ActionContext, ActionTree } from 'vuex'

 import authApi from '@/api/authApi'
 import api from '@/api/defaultApi'
+import createI18n from '@/i18n'
 import router from '@/router'
 import {
  ROOT_STORE,
@ -16,9 +17,13 @@ import {
  ILoginOrRegisterData,
  IUserDeletionPayload,
  IUserPayload,
+  IUserPicturePayload,
+  IUserPreferencesPayload,
 } from '@/types/user'
 import { handleError } from '@/utils'

+const { locale } = createI18n.global
+
 export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
  [USER_STORE.ACTIONS.CHECK_AUTH_USER](
    context: ActionContext<IUserState, IRootState>
@ -46,6 +51,13 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
            USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE,
            res.data.data
          )
+          if (res.data.data.language) {
+            context.commit(
+              ROOT_STORE.MUTATIONS.UPDATE_LANG,
+              res.data.data.language
+            )
+            locale.value = res.data.data.language
+          }
          context.dispatch(SPORTS_STORE.ACTIONS.GET_SPORTS)
        } else {
          handleError(context, null)
@ -108,6 +120,61 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
        context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, false)
      )
  },
+  [USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserPreferencesPayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, true)
+    authApi
+      .post('auth/profile/edit/preferences', payload)
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(
+            USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE,
+            res.data.data
+          )
+          router.push('/profile/preferences')
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, false)
+      )
+  },
+  [USER_STORE.ACTIONS.UPDATE_USER_PICTURE](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserPicturePayload
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, true)
+    if (!payload.picture) {
+      throw new Error('No file part')
+    }
+    const form = new FormData()
+    form.append('file', payload.picture)
+    authApi
+      .post('auth/picture', form, {
+        headers: {
+          'content-type': 'multipart/form-data',
+        },
+      })
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context
+            .dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
+            .then(() => router.push('/profile'))
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, false)
+      )
+  },
  [USER_STORE.ACTIONS.DELETE_ACCOUNT](
    context: ActionContext<IUserState, IRootState>,
    payload: IUserDeletionPayload
@ -126,4 +193,25 @@ export const actions: ActionTree<IUserState, IRootState> & IUserActions = {
      })
      .catch((error) => handleError(context, error))
  },
+  [USER_STORE.ACTIONS.DELETE_PICTURE](
+    context: ActionContext<IUserState, IRootState>
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, true)
+    authApi
+      .delete(`auth/picture`)
+      .then((res) => {
+        if (res.status === 204) {
+          context
+            .dispatch(USER_STORE.ACTIONS.GET_USER_PROFILE)
+            .then(() => router.push('/profile'))
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(USER_STORE.MUTATIONS.UPDATE_USER_LOADING, false)
+      )
+  },
 }
--- a/fittrackee_client/src/store/modules/user/enums.ts
+++ b/fittrackee_client/src/store/modules/user/enums.ts
@ -1,10 +1,13 @@
 export enum UserActions {
  CHECK_AUTH_USER = 'CHECK_AUTH_USER',
  DELETE_ACCOUNT = 'DELETE_ACCOUNT',
+  DELETE_PICTURE = 'DELETE_PICTURE',
  GET_USER_PROFILE = 'GET_USER_PROFILE',
  LOGIN_OR_REGISTER = 'LOGIN_OR_REGISTER',
  LOGOUT = 'LOGOUT',
+  UPDATE_USER_PICTURE = 'UPDATE_USER_PICTURE',
  UPDATE_USER_PROFILE = 'UPDATE_USER_PROFILE',
+  UPDATE_USER_PREFERENCES = 'UPDATE_USER_PREFERENCES',
 }

 export enum UserGetters {
--- a/fittrackee_client/src/store/modules/user/types.ts
+++ b/fittrackee_client/src/store/modules/user/types.ts
@ -12,6 +12,8 @@ import {
  ILoginOrRegisterData,
  IUserDeletionPayload,
  IUserPayload,
+  IUserPicturePayload,
+  IUserPreferencesPayload,
 } from '@/types/user'

 export interface IUserState {
@ -43,10 +45,24 @@ export interface IUserActions {
    payload: IUserPayload
  ): void

+  [USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserPreferencesPayload
+  ): void
+
+  [USER_STORE.ACTIONS.UPDATE_USER_PICTURE](
+    context: ActionContext<IUserState, IRootState>,
+    payload: IUserPicturePayload
+  ): void
+
  [USER_STORE.ACTIONS.DELETE_ACCOUNT](
    context: ActionContext<IUserState, IRootState>,
    payload: IUserDeletionPayload
  ): void
+
+  [USER_STORE.ACTIONS.DELETE_PICTURE](
+    context: ActionContext<IUserState, IRootState>
+  ): void
 }

 export interface IUserGetters {
--- a/fittrackee_client/src/types/user.ts
+++ b/fittrackee_client/src/types/user.ts
@ -26,15 +26,22 @@ export interface IUserPayload {
  bio: string
  birth_date: string
  first_name: string
-  language: string
  last_name: string
  location: string
-  timezone: string
-  weekm: boolean
  password: string
  password_conf: string
 }

+export interface IUserPreferencesPayload {
+  language: string
+  timezone: string
+  weekm: boolean
+}
+
+export interface IUserPicturePayload {
+  picture: File
+}
+
 export interface IUserDeletionPayload {
  username: string
 }
--- a/fittrackee_client/src/views/ProfileView.vue
+++ b/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>