From 3be787de7f1417d59a49e2b1edf5744282810f12 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 16 Dec 2023 21:18:09 +0100
Subject: [PATCH] API & Client - add a user preference for dark mode

---
 ...14f48e46f320_add_dark_theme_preferences.py | 34 ++++++++++++++++++
 fittrackee/tests/users/test_auth_api.py       |  2 ++
 fittrackee/tests/users/test_users_model.py    |  9 +++++
 fittrackee/users/auth.py                      |  9 +++++
 fittrackee/users/models.py                    |  2 ++
 fittrackee_client/src/components/NavBar.vue   | 29 ++++++++-------
 .../User/ProfileDisplay/UserPreferences.vue   |  9 +++++
 .../ProfileEdition/UserPreferencesEdition.vue | 35 ++++++++++++++++++-
 fittrackee_client/src/locales/en/user.json    |  8 +++++
 fittrackee_client/src/locales/fr/user.json    |  8 +++++
 .../src/store/modules/authUser/actions.ts     |  8 +++++
 .../src/store/modules/root/enums.ts           |  2 ++
 .../src/store/modules/root/getters.ts         |  3 ++
 .../src/store/modules/root/mutations.ts       |  6 ++++
 .../src/store/modules/root/state.ts           |  1 +
 .../src/store/modules/root/types.ts           |  7 ++++
 fittrackee_client/src/types/user.ts           |  2 ++
 17 files changed, 161 insertions(+), 13 deletions(-)
 create mode 100644 fittrackee/migrations/versions/35_14f48e46f320_add_dark_theme_preferences.py

diff --git a/fittrackee/migrations/versions/35_14f48e46f320_add_dark_theme_preferences.py b/fittrackee/migrations/versions/35_14f48e46f320_add_dark_theme_preferences.py
new file mode 100644
index 00000000..b2a95b3c
--- /dev/null
+++ b/fittrackee/migrations/versions/35_14f48e46f320_add_dark_theme_preferences.py
@@ -0,0 +1,34 @@
+"""add dark theme preferences
+
+Revision ID: 14f48e46f320
+Revises: 24eb097614e4
+Create Date: 2023-12-16 18:35:31.377007
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '14f48e46f320'
+down_revision = '24eb097614e4'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('users', schema=None) as batch_op:
+        batch_op.add_column(
+            sa.Column('use_dark_mode', sa.Boolean(), nullable=True)
+        )
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('users', schema=None) as batch_op:
+        batch_op.drop_column('use_dark_mode')
+
+    # ### end Alembic commands ###
diff --git a/fittrackee/tests/users/test_auth_api.py b/fittrackee/tests/users/test_auth_api.py
index c26b1ea2..e86fd699 100644
--- a/fittrackee/tests/users/test_auth_api.py
+++ b/fittrackee/tests/users/test_auth_api.py
@@ -1459,6 +1459,7 @@ class TestUserPreferencesUpdate(ApiTestCaseMixin):
                     imperial_units=True,
                     display_ascent=False,
                     start_elevation_at_zero=False,
+                    use_dark_mode=True,
                     use_raw_gpx_speed=True,
                     date_format='yyyy-MM-dd',
                 )
@@ -1478,6 +1479,7 @@ class TestUserPreferencesUpdate(ApiTestCaseMixin):
         assert data['data']['timezone'] == 'America/New_York'
         assert data['data']['date_format'] == 'yyyy-MM-dd'
         assert data['data']['weekm'] is True
+        assert data['data']['use_dark_mode'] is True
 
     @pytest.mark.parametrize(
         'client_scope, can_access',
diff --git a/fittrackee/tests/users/test_users_model.py b/fittrackee/tests/users/test_users_model.py
index 7da4c89a..6d92a1dc 100644
--- a/fittrackee/tests/users/test_users_model.py
+++ b/fittrackee/tests/users/test_users_model.py
@@ -77,6 +77,12 @@ class TestUserSerializeAsAuthUser(UserModelAssertMixin):
         assert serialized_user['timezone'] == user_1.timezone
         assert serialized_user['weekm'] == user_1.weekm
         assert serialized_user['display_ascent'] == user_1.display_ascent
+        assert (
+            serialized_user['start_elevation_at_zero']
+            == user_1.start_elevation_at_zero
+        )
+        assert serialized_user['use_raw_gpx_speed'] == user_1.use_raw_gpx_speed
+        assert serialized_user['use_dark_mode'] == user_1.use_dark_mode
 
     def test_it_returns_workouts_infos(self, app: Flask, user_1: User) -> None:
         serialized_user = user_1.serialize(user_1)
@@ -155,6 +161,9 @@ class TestUserSerializeAsAdmin(UserModelAssertMixin):
         assert 'language' not in serialized_user
         assert 'timezone' not in serialized_user
         assert 'weekm' not in serialized_user
+        assert 'start_elevation_at_zero' not in serialized_user
+        assert 'use_raw_gpx_speed' not in serialized_user
+        assert 'use_dark_mode' not in serialized_user
 
     def test_it_returns_workouts_infos(
         self, app: Flask, user_1_admin: User, user_2: User
diff --git a/fittrackee/users/auth.py b/fittrackee/users/auth.py
index 2da61719..0d606ad2 100644
--- a/fittrackee/users/auth.py
+++ b/fittrackee/users/auth.py
@@ -361,6 +361,7 @@ def get_authenticated_user_profile(
           "total_ascent": 720.35,
           "total_distance": 67.895,
           "total_duration": "6:50:27",
+          "use_dark_mode": null,
           "use_raw_gpx_speed": false,
           "username": "sam",
           "weekm": false
@@ -478,6 +479,7 @@ def edit_user(auth_user: User) -> Union[Dict, HttpResponse]:
           "total_ascent": 720.35,
           "total_distance": 67.895,
           "total_duration": "6:50:27",
+          "use_dark_mode": null,
           "use_raw_gpx_speed": false,
           "username": "sam"
           "weekm": true,
@@ -650,6 +652,7 @@ def update_user_account(auth_user: User) -> Union[Dict, HttpResponse]:
           "total_ascent": 720.35,
           "total_distance": 67.895,
           "total_duration": "6:50:27",
+          "use_dark_mode": null,
           "use_raw_gpx_speed": false,
           "username": "sam"
           "weekm": true,
@@ -878,6 +881,7 @@ def edit_user_preferences(auth_user: User) -> Union[Dict, HttpResponse]:
           "total_ascent": 720.35,
           "total_distance": 67.895,
           "total_duration": "6:50:27",
+          "use_dark_mode": null,
           "use_raw_gpx_speed": true,
           "username": "sam"
           "weekm": true,
@@ -892,6 +896,8 @@ def edit_user_preferences(auth_user: User) -> Union[Dict, HttpResponse]:
     :<json string language: language preferences
     :<json boolean start_elevation_at_zero: do elevation plots start at zero?
     :<json string timezone: user time zone
+    :<json boolean use_dark_mode: Display interface with dark mode if true.
+                   If null, it uses browser preferences.
     :<json boolean use_raw_gpx_speed: Use unfiltered gpx to calculate speeds
     :<json boolean weekm: does week start on Monday?
 
@@ -916,6 +922,7 @@ def edit_user_preferences(auth_user: User) -> Union[Dict, HttpResponse]:
         'language',
         'start_elevation_at_zero',
         'timezone',
+        'use_dark_mode',
         'use_raw_gpx_speed',
         'weekm',
     }
@@ -928,6 +935,7 @@ def edit_user_preferences(auth_user: User) -> Union[Dict, HttpResponse]:
     language = get_language(post_data.get('language'))
     start_elevation_at_zero = post_data.get('start_elevation_at_zero')
     use_raw_gpx_speed = post_data.get('use_raw_gpx_speed')
+    use_dark_mode = post_data.get('use_dark_mode')
     timezone = post_data.get('timezone')
     weekm = post_data.get('weekm')
 
@@ -938,6 +946,7 @@ def edit_user_preferences(auth_user: User) -> Union[Dict, HttpResponse]:
         auth_user.language = language
         auth_user.start_elevation_at_zero = start_elevation_at_zero
         auth_user.timezone = timezone
+        auth_user.use_dark_mode = use_dark_mode
         auth_user.use_raw_gpx_speed = use_raw_gpx_speed
         auth_user.weekm = weekm
         db.session.commit()
diff --git a/fittrackee/users/models.py b/fittrackee/users/models.py
index 5298c496..c26d41ac 100644
--- a/fittrackee/users/models.py
+++ b/fittrackee/users/models.py
@@ -63,6 +63,7 @@ class User(BaseModel):
         db.Boolean, default=True, nullable=False
     )
     use_raw_gpx_speed = db.Column(db.Boolean, default=False, nullable=False)
+    use_dark_mode = db.Column(db.Boolean, default=False, nullable=True)
 
     def __repr__(self) -> str:
         return f'<User {self.username!r}>'
@@ -217,6 +218,7 @@ class User(BaseModel):
                     'language': self.language,
                     'start_elevation_at_zero': self.start_elevation_at_zero,
                     'timezone': self.timezone,
+                    'use_dark_mode': self.use_dark_mode,
                     'use_raw_gpx_speed': self.use_raw_gpx_speed,
                     'weekm': self.weekm,
                 },
diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue
index 4b351b74..16c0e5de 100644
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/fittrackee_client/src/components/NavBar.vue
@@ -107,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, capitalize, onBeforeMount } from 'vue'
+  import { computed, ref, capitalize, onBeforeMount, watch } from 'vue'
   import type { ComputedRef, Ref } from 'vue'
 
   import UserPicture from '@/components/User/UserPicture.vue'
@@ -133,12 +133,18 @@
   )
   const isMenuOpen: Ref<boolean> = ref(false)
   const displayModal: Ref<boolean> = ref(false)
-  const darkTheme: Ref<boolean> = ref(false)
+
+  const darkMode: ComputedRef<boolean | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
+  )
+  const darkTheme: ComputedRef<boolean> = computed(
+    () => darkMode.value !== false
+  )
   const themeIcon: ComputedRef<string> = computed(() =>
     darkTheme.value ? 'fa-moon' : 'fa-sun-o'
   )
 
-  onBeforeMount(() => initTheme())
+  onBeforeMount(() => setTheme())
 
   function openMenu() {
     isMenuOpen.value = true
@@ -163,22 +169,21 @@
   }
   function setTheme() {
     if (darkTheme.value) {
-      darkTheme.value = true
       document.body.setAttribute('data-theme', 'dark')
     } else {
       document.body.removeAttribute('data-theme')
     }
   }
-  function initTheme() {
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      darkTheme.value = true
-    }
-    setTheme()
-  }
   function toggleTheme() {
-    darkTheme.value = !darkTheme.value
-    setTheme()
+    store.commit(ROOT_STORE.MUTATIONS.UPDATE_DARK_MODE, !darkTheme.value)
   }
+
+  watch(
+    () => darkTheme.value,
+    () => {
+      setTheme()
+    }
+  )
 </script>
 
 <style scoped lang="scss">
diff --git a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue b/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
index 3adb34d2..dbf0d676 100644
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
+++ b/fittrackee_client/src/components/User/ProfileDisplay/UserPreferences.vue
@@ -4,6 +4,8 @@
     <dl>
       <dt>{{ $t('user.PROFILE.LANGUAGE') }}:</dt>
       <dd>{{ userLanguage }}</dd>
+      <dt>{{ $t('user.PROFILE.THEME_MODE.LABEL') }}:</dt>
+      <dd>{{ $t(`user.PROFILE.THEME_MODE.VALUES.${darkMode}`) }}</dd>
       <dt>{{ $t('user.PROFILE.TIMEZONE') }}:</dt>
       <dd>{{ timezone }}</dd>
       <dt>{{ $t('user.PROFILE.DATE_FORMAT') }}:</dt>
@@ -95,6 +97,13 @@
   const display_ascent = computed(() =>
     props.user.display_ascent ? 'DISPLAYED' : 'HIDDEN'
   )
+  const darkMode = computed(() =>
+    props.user.use_dark_mode === true
+      ? 'DARK'
+      : props.user.use_dark_mode === false
+        ? 'LIGHT'
+        : 'DEFAULT'
+  )
 </script>
 
 <style lang="scss" scoped>
diff --git a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
index 393f9d0f..a97bd3d2 100644
--- a/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
+++ b/fittrackee_client/src/components/User/ProfileEdition/UserPreferencesEdition.vue
@@ -18,6 +18,22 @@
             </option>
           </select>
         </label>
+        <label class="form-items">
+          {{ $t('user.PROFILE.THEME_MODE.LABEL') }}
+          <select
+            id="use_dark_mode"
+            v-model="userForm.use_dark_mode"
+            :disabled="loading"
+          >
+            <option
+              v-for="mode in useDarkMode"
+              :value="mode.value"
+              :key="mode.label"
+            >
+              {{ $t(`user.PROFILE.THEME_MODE.VALUES.${mode.label}`) }}
+            </option>
+          </select>
+        </label>
         <label class="form-items">
           {{ $t('user.PROFILE.TIMEZONE') }}
           <TimezoneDropdown
@@ -195,6 +211,7 @@
     weekm: false,
     start_elevation_at_zero: false,
     use_raw_gpx_speed: false,
+    use_dark_mode: false,
   })
   const weekStart = [
     {
@@ -246,6 +263,20 @@
       value: true,
     },
   ]
+  const useDarkMode = [
+    {
+      label: 'DARK',
+      value: true,
+    },
+    {
+      label: 'DEFAULT',
+      value: null,
+    },
+    {
+      label: 'LIGHT',
+      value: false,
+    },
+  ]
   const loading = computed(
     () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
   )
@@ -279,6 +310,7 @@
     userForm.timezone = user.timezone ? user.timezone : 'Europe/Paris'
     userForm.date_format = user.date_format ? user.date_format : 'dd/MM/yyyy'
     userForm.weekm = user.weekm ? user.weekm : false
+    userForm.use_dark_mode = user.use_dark_mode
   }
   function updateProfile() {
     store.dispatch(AUTH_USER_STORE.ACTIONS.UPDATE_USER_PREFERENCES, userForm)
@@ -339,7 +371,8 @@
     }
 
     #language,
-    #date_format {
+    #date_format,
+    #use_dark_mode {
       padding: $default-padding * 0.5;
     }
   }
diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json
index 5bae78a7..f1d700a2 100644
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@@ -115,6 +115,14 @@
       "PROFILE": "profile",
       "SPORTS": "sports"
     },
+    "THEME_MODE": {
+      "LABEL": "Theme mode",
+      "VALUES": {
+        "DARK": "Dark",
+        "DEFAULT": "Browser preference",
+        "LIGHT": "Light"
+      }
+    },
     "TIMEZONE": "Timezone",
     "UNITS": {
       "IMPERIAL": "Imperial system (ft, mi, mph, °F)",
diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json
index 6bbb91c6..00e3d080 100644
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@@ -115,6 +115,14 @@
       "PROFILE": "profil",
       "SPORTS": "sports"
     },
+    "THEME_MODE": {
+      "LABEL": "Thème",
+      "VALUES": {
+        "DARK": "Sombre",
+        "DEFAULT": "Préférence du navigateur",
+        "LIGHT": "Clair"
+      }
+    },
     "TIMEZONE": "Fuseau horaire",
     "UNITS": {
       "IMPERIAL": "Système impérial (ft, mi, mph, °F)",
diff --git a/fittrackee_client/src/store/modules/authUser/actions.ts b/fittrackee_client/src/store/modules/authUser/actions.ts
index a6d40a9b..9880d50d 100644
--- a/fittrackee_client/src/store/modules/authUser/actions.ts
+++ b/fittrackee_client/src/store/modules/authUser/actions.ts
@@ -139,6 +139,10 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
               res.data.data.language
             )
           }
+          context.commit(
+            ROOT_STORE.MUTATIONS.UPDATE_DARK_MODE,
+            res.data.data.use_dark_mode
+          )
           context.dispatch(SPORTS_STORE.ACTIONS.GET_SPORTS)
         } else {
           handleError(context, null)
@@ -270,6 +274,10 @@ export const actions: ActionTree<IAuthUserState, IRootState> &
             AUTH_USER_STORE.MUTATIONS.UPDATE_AUTH_USER_PROFILE,
             res.data.data
           )
+          context.commit(
+            ROOT_STORE.MUTATIONS.UPDATE_DARK_MODE,
+            res.data.data.use_dark_mode
+          )
           context
             .dispatch(
               ROOT_STORE.ACTIONS.UPDATE_APPLICATION_LANGUAGE,
diff --git a/fittrackee_client/src/store/modules/root/enums.ts b/fittrackee_client/src/store/modules/root/enums.ts
index bcd2399b..8140d3c6 100644
--- a/fittrackee_client/src/store/modules/root/enums.ts
+++ b/fittrackee_client/src/store/modules/root/enums.ts
@@ -10,6 +10,7 @@ export enum RootGetters {
   APP_CONFIG = 'APP_CONFIG',
   APP_LOADING = 'APP_LOADING',
   APP_STATS = 'APP_STATS',
+  DARK_MODE = 'DARK_MODE',
   ERROR_MESSAGES = 'ERROR_MESSAGES',
   LANGUAGE = 'LANGUAGE',
   LOCALE = 'LOCALE', // date-fns
@@ -22,5 +23,6 @@ export enum RootMutations {
   UPDATE_APPLICATION_LOADING = 'UPDATE_APPLICATION_LOADING',
   UPDATE_APPLICATION_PRIVACY_POLICY = 'UPDATE_APPLICATION_PRIVACY_POLICY',
   UPDATE_APPLICATION_STATS = 'UPDATE_APPLICATION_STATS',
+  UPDATE_DARK_MODE = 'UPDATE_DARK_MODE',
   UPDATE_LANG = 'UPDATE_LANG',
 }
diff --git a/fittrackee_client/src/store/modules/root/getters.ts b/fittrackee_client/src/store/modules/root/getters.ts
index f2110be3..051816ba 100644
--- a/fittrackee_client/src/store/modules/root/getters.ts
+++ b/fittrackee_client/src/store/modules/root/getters.ts
@@ -13,6 +13,9 @@ export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
   [ROOT_STORE.GETTERS.APP_STATS]: (state: IRootState) => {
     return state.application.statistics
   },
+  [ROOT_STORE.GETTERS.DARK_MODE]: (state: IRootState) => {
+    return state.darkMode
+  },
   [ROOT_STORE.GETTERS.ERROR_MESSAGES]: (state: IRootState) => {
     return state.errorMessages
   },
diff --git a/fittrackee_client/src/store/modules/root/mutations.ts b/fittrackee_client/src/store/modules/root/mutations.ts
index 0fdf7215..b468cf6f 100644
--- a/fittrackee_client/src/store/modules/root/mutations.ts
+++ b/fittrackee_client/src/store/modules/root/mutations.ts
@@ -45,4 +45,10 @@ export const mutations: MutationTree<IRootState> & TRootMutations = {
     state.language = language
     state.locale = localeFromLanguage[language]
   },
+  [ROOT_STORE.MUTATIONS.UPDATE_DARK_MODE](
+    state: IRootState,
+    darkMode: boolean | null
+  ) {
+    state.darkMode = darkMode
+  },
 }
diff --git a/fittrackee_client/src/store/modules/root/state.ts b/fittrackee_client/src/store/modules/root/state.ts
index 523b07e5..2738e023 100644
--- a/fittrackee_client/src/store/modules/root/state.ts
+++ b/fittrackee_client/src/store/modules/root/state.ts
@@ -17,4 +17,5 @@ export const state: IRootState = {
     },
   },
   appLoading: false,
+  darkMode: null,
 }
diff --git a/fittrackee_client/src/store/modules/root/types.ts b/fittrackee_client/src/store/modules/root/types.ts
index 8717d1d3..386beff0 100644
--- a/fittrackee_client/src/store/modules/root/types.ts
+++ b/fittrackee_client/src/store/modules/root/types.ts
@@ -22,6 +22,7 @@ export interface IRootState {
   errorMessages: string | string[] | null
   application: IApplication
   appLoading: boolean
+  darkMode: boolean | null
 }
 
 export interface IRootActions {
@@ -51,6 +52,8 @@ export interface IRootGetters {
 
   [ROOT_STORE.GETTERS.APP_STATS](state: IRootState): IAppStatistics
 
+  [ROOT_STORE.GETTERS.DARK_MODE](state: IRootState): boolean | null
+
   [ROOT_STORE.GETTERS.ERROR_MESSAGES](
     state: IRootState
   ): string | string[] | null
@@ -83,6 +86,10 @@ export type TRootMutations<S = IRootState> = {
     statistics: IAppStatistics
   ): void
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: TLanguage): void
+  [ROOT_STORE.MUTATIONS.UPDATE_DARK_MODE](
+    state: S,
+    darkMode: boolean | null
+  ): void
 }
 
 export type TRootStoreModule<S = IRootState> = Omit<
diff --git a/fittrackee_client/src/types/user.ts b/fittrackee_client/src/types/user.ts
index 87e9009e..74efeeaf 100644
--- a/fittrackee_client/src/types/user.ts
+++ b/fittrackee_client/src/types/user.ts
@@ -35,6 +35,7 @@ export interface IAuthUserProfile extends IUserProfile {
   timezone: string
   date_format: string
   weekm: boolean
+  use_dark_mode: boolean | null
 }
 
 export interface IUserPayload {
@@ -73,6 +74,7 @@ export interface IUserPreferencesPayload {
   timezone: string
   date_format: string
   weekm: boolean
+  use_dark_mode: boolean | null
 }
 
 export interface IUserSportPreferencesPayload {