feat-mobile: add change profile setting

packages/mobile/features/features.ts

@@ -76,7 +76,7 @@ const features = {
                 enabled: false,
             },
             changeProfileName: {
-                enabled: false,
+                enabled: true,
             },
         },
         security: {

packages/mobile/lib/contexts/dashboard/constants/settings-route-meta.constant.ts

@@ -2,6 +2,7 @@ import { SETTINGS_ICON_SVG } from '@lib/auxiliary/icon'
 import features from '../../../../features/features'
 import {
     ChangePasswordView,
+    ChangeProfileNameView,
     ErrorLogView,
     LanguageView,
     DiagnosticsView,
@@ -29,6 +30,13 @@ export const SETTINGS_ROUTE_META = {
         icon: SETTINGS_ICON_SVG[SettingsRoute.Language],
         view: LanguageView,
     },
+    [SettingsRoute.ChangeProfileName]: {
+        name: `views.settings.${SettingsRoute.ChangeProfileName}.title`,
+        category: SettingsCategory.General,
+        enabled: general?.[SettingsRoute.ChangeProfileName]?.enabled,
+        icon: SETTINGS_ICON_SVG[SettingsRoute.ChangeProfileName],
+        view: ChangeProfileNameView,
+    },
     // Security
     [SettingsRoute.ChangePassword]: {
         name: `views.settings.${SettingsRoute.ChangePassword}.title`,
@@ -37,14 +45,14 @@ export const SETTINGS_ROUTE_META = {
         icon: SETTINGS_ICON_SVG[SettingsRoute.ChangePassword],
         view: ChangePasswordView,
     },
+    // Advanced
     [SettingsRoute.ErrorLog]: {
         name: `views.settings.${SettingsRoute.ErrorLog}.title`,
         category: SettingsCategory.Advanced,
         enabled: advanced?.[SettingsRoute.ErrorLog]?.enabled,
         icon: SETTINGS_ICON_SVG[SettingsRoute.ErrorLog],
         view: ErrorLogView,
     },
-    // Advanced
     [SettingsRoute.Diagnostics]: {
         name: `views.settings.${SettingsRoute.Diagnostics}.title`,
         category: SettingsCategory.Advanced,

packages/mobile/views/dashboard/drawers/profile/views/settings/views/ChangeProfileNameView.svelte

@@ -0,0 +1,48 @@
+<script lang="typescript">
+    import { showAppNotification } from '@auxiliary/notification'
+    import { localize } from '@core/i18n'
+    import { activeProfile, updateActiveProfile, validateProfileName } from '@core/profile'
+    import { Button, ButtonSize, HTMLButtonType, Input, Text, TextType } from 'shared/components'
+
+    let newName = $activeProfile?.name
+    let error = ''
+
+    $: trimmedProfileName = newName.trim()
+    $: newName, (error = '')
+    $: disabled = invalidName(trimmedProfileName)
+
+    function onSubmitClick(): void {
+        try {
+            validateProfileName(trimmedProfileName)
+            updateActiveProfile({ name: trimmedProfileName })
+            showAppNotification({
+                type: 'info',
+                message: localize('views.settings.changeProfileName.success'),
+            })
+        } catch (err) {
+            return (error = err.message)
+        }
+    }
+
+    function invalidName(name: string): boolean {
+        const isSameName = name === $activeProfile?.name
+        const isTooShort = name?.length < 1
+        return isSameName || isTooShort
+    }
+</script>
+
+<form
+    class="h-full flex flex-col justify-between space-y-4"
+    id="form-change-profile-name"
+    on:submit|preventDefault={onSubmitClick}
+>
+    <div class="flex flex-col space-y-4">
+        <Text type={TextType.p} secondary>
+            {localize('views.settings.changeProfileName.description')}
+        </Text>
+        <Input {error} placeholder={$activeProfile?.name} bind:value={newName} />
+    </div>
+    <Button size={ButtonSize.Medium} type={HTMLButtonType.Submit} {disabled}>
+        {localize('views.settings.changeProfileName.title')}
+    </Button>
+</form>

packages/mobile/views/dashboard/drawers/profile/views/settings/views/index.js

@@ -1,4 +1,5 @@
 export { default as ChangePasswordView } from './ChangePasswordView.svelte'
+export { default as ChangeProfileNameView } from './ChangeProfileNameView.svelte'
 export { default as ErrorLogView } from './ErrorLogView.svelte'
 export { default as DiagnosticsView } from './DiagnosticsView.svelte'
 export { default as LanguageView } from './LanguageView.svelte'