feat-mobile: add change password to settings

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

@@ -1,6 +1,6 @@
 import { SETTINGS_ICON_SVG } from '@lib/auxiliary/icon'
 import features from '../../../../features/features'
-import { ChangePasswordView } from '../../../../views/dashboard/drawers/profile/views/settings/security'
+import { ChangePasswordView } from '../../../../views/dashboard/drawers/profile/views/settings'
 import { SettingsRoute } from '../../../routers'
 import { SettingsCategory } from '../enums'
 

packages/mobile/lib/routers/actions/resetRouters.ts

@@ -54,4 +54,5 @@ function resetDashboardSubrouters(): void {
     get(settingsRouter).reset()
     get(tokenRouter).reset()
     get(profileRouter).reset()
+    get(settingsRouter).reset()
 }

packages/mobile/lib/routers/interfaces/index.ts

@@ -1,4 +1,5 @@
 export * from './activity-router-event.interface'
 export * from './profile-router-event.interface'
 export * from './send-router-event.interface'
+export * from './settings-router-event.interface'
 export * from './token-router-event.interface'

packages/mobile/lib/routers/interfaces/settings-router-event.interface.ts

@@ -0,0 +1,6 @@
+import { IRouterEvent } from '@core/router'
+import { SettingsRoute } from '../enums'
+
+export interface ISettingsRouterEvent extends IRouterEvent {
+    goTo?: SettingsRoute
+}

packages/mobile/lib/routers/routers/dashboard/index.ts

@@ -2,5 +2,4 @@ export * from './account-switcher-router'
 export * from './activity-router'
 export * from './profile-router'
 export * from './send-router'
-export * from './settings-router'
 export * from './token-router'

packages/mobile/lib/routers/routers/index.ts

@@ -2,6 +2,7 @@ export * from './app-router'
 export * from './dashboard-router'
 export * from './onboarding-router'
 export * from './login-router'
+export * from './settings-router'
 
 export * from './dashboard'
 export * from './onboarding'

packages/mobile/lib/routers/routers/settings-router.ts

@@ -0,0 +1,56 @@
+import { get, writable, Writable } from 'svelte/store'
+import { ISettingsRouterEvent } from '../interfaces'
+
+import { Subrouter } from '@core/router'
+
+import { profileRouter } from '.'
+import { SettingsRoute } from '../enums'
+
+export const settingsRoute = writable<SettingsRoute>(null)
+export const settingsRouter = writable<SettingsRouter>(null)
+
+const needsUnlockStore = writable<boolean>(false)
+
+export class SettingsRouter extends Subrouter<SettingsRoute> {
+    constructor() {
+        super(SettingsRoute.Init, settingsRoute, get(profileRouter))
+    }
+    next(event: ISettingsRouterEvent = {}): void {
+        const { goTo } = event
+
+        let nextRoute: SettingsRoute
+        const currentRoute = get(this.routeStore)
+
+        switch (currentRoute) {
+            case SettingsRoute.Init: {
+                if (goTo) {
+                    super.goTo(goTo)
+                }
+                break
+            }
+            default: {
+                this.previous()
+                break
+            }
+        }
+
+        this.setNext(nextRoute)
+    }
+    previous(): void {
+        if (get(needsUnlockStore)) {
+            needsUnlockStore.set(false)
+        } else {
+            super.previous()
+        }
+    }
+    getNeedsUnlockStore(): Writable<boolean> {
+        return needsUnlockStore
+    }
+    setNeedsUnlock(value: boolean): void {
+        needsUnlockStore.set(value)
+    }
+    reset(): void {
+        super.reset()
+        needsUnlockStore.set(false)
+    }
+}

packages/mobile/lib/routers/utils/getSubroutersForAppContext.ts

@@ -13,6 +13,7 @@ import {
     profileRouter,
     profileSetupRouter,
     sendRouter,
+    settingsRouter,
     storageProtectionSetupRouter,
     strongholdSetupRouter,
     tokenRouter,
@@ -27,6 +28,7 @@ export function getSubroutersForAppContext(context: AppContext): IRouter[] {
                 get(activityRouter),
                 get(tokenRouter),
                 get(profileRouter),
+                get(settingsRouter),
             ]
         case AppContext.Login:
             return []

packages/mobile/views/dashboard/drawers/profile/ProfileDrawer.svelte

@@ -1,11 +1,14 @@
 <script lang="typescript">
     import { localize } from '@core/i18n'
     import { Drawer } from '../../../../components'
+    import { SETTINGS_ROUTE_META } from '../../../../lib/contexts/dashboard'
     import {
         ProfileRoute,
         profileRoute,
         ProfileRouter,
         profileRouter,
+        SettingsRoute,
+        settingsRoute,
         SettingsRouter,
         settingsRouter,
     } from '../../../../lib/routers'
@@ -17,11 +20,7 @@
     let allowBack: boolean
     let activeRouter: ProfileRouter | SettingsRouter = $profileRouter
 
-    $: $profileRoute, (setTitle(), setAllowBack(), setActiveRouter())
-
-    function changeTitle(newTitle: string) {
-        title = newTitle
-    }
+    $: $profileRoute, $settingsRoute, (setTitle(), setAllowBack(), setActiveRouter())
 
     function setActiveRouter(): void {
         if ($profileRoute === ProfileRoute.Settings) {
@@ -30,12 +29,15 @@
             activeRouter = $profileRouter
         }
     }
-
     function setTitle(): void {
-        switch ($profileRoute) {
-            default:
-                title = localize('views.settings.profile.title')
-                break
+        if ($profileRoute === ProfileRoute.Settings) {
+            if ($settingsRoute === SettingsRoute.Init) {
+                title = localize('views.settings.settings')
+            } else {
+                title = localize(SETTINGS_ROUTE_META[$settingsRoute].name)
+            }
+        } else {
+            title = localize('views.settings.profile.title')
         }
     }
     function setAllowBack(): void {
@@ -48,5 +50,5 @@
 </script>
 
 <Drawer {onClose} {title} fullScreen enterFromSide {allowBack} onBackClick={() => activeRouter.previous()}>
-    <ProfileRouterComponent {changeTitle} />
+    <ProfileRouterComponent />
 </Drawer>

packages/mobile/views/dashboard/drawers/profile/ProfileRouter.svelte

@@ -1,12 +1,10 @@
 <script lang="typescript">
     import { ProfileRoute, profileRoute } from '../../../../lib/routers'
     import { ActionsView, SettingsView } from './views'
-
-    export let changeTitle: (title: string) => void
 </script>
 
 {#if $profileRoute === ProfileRoute.Actions}
     <ActionsView />
 {:else if $profileRoute === ProfileRoute.Settings}
-    <SettingsView {changeTitle} />
+    <SettingsView />
 {/if}

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

@@ -1,2 +1,3 @@
 export { default as ActionsView } from './ActionsView.svelte'
-export { default as SettingsView } from './SettingsView.svelte'
+
+export * from './settings'

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

@@ -1,66 +1,24 @@
 <script lang="typescript">
-    import { localize } from '@core/i18n'
-    import features from '@features/features'
-    import { Icon, Text, TextType } from '@ui'
-    import { SETTINGS_ROUTE_META, SettingsCategory } from '../../../../../../lib/contexts/dashboard'
+    import { Drawer, StrongholdUnlock } from '../../../../../../components'
+    import { SETTINGS_ROUTE_META } from '../../../../../../lib/contexts/dashboard'
     import { settingsRoute, SettingsRoute, settingsRouter } from '../../../../../../lib/routers'
+    import { SettingsIndexView } from './views'
 
-    const categories = {
-        [SettingsCategory.General]: {
-            name: localize('views.settings.general.title'),
-            enabled: features.settings.general.enabled,
-            settings: [],
-        },
-        [SettingsCategory.Security]: {
-            name: localize('views.settings.security.title'),
-            enabled: features.settings.security.enabled,
-            settings: [],
-        },
-        [SettingsCategory.Advanced]: {
-            name: localize('views.settings.advanced.title'),
-            enabled: features.settings.advanced.enabled,
-            settings: [],
-        },
-        [SettingsCategory.HelpAndInfo]: {
-            name: localize('views.settings.helpAndInfo.title'),
-            enabled: features.settings.helpAndInfo.enabled,
-            settings: [],
-        },
-    }
-
-    function handleSettingClick(route): void {
-        $settingsRouter.goTo(route)
-    }
+    $: needsUnlockStore = $settingsRouter?.getNeedsUnlockStore()
 
-    for (const [route, setting] of Object.entries(SETTINGS_ROUTE_META)) {
-        if (categories[setting.category].enabled) {
-            const listItem = { ...setting, route }
-            categories[setting.category].settings.push(listItem)
-        }
+    function onUnlockSuccess(): void {
+        $settingsRouter.setNeedsUnlock(false)
     }
 </script>
 
 {#if $settingsRoute === SettingsRoute.Init}
-    <div class="flex flex-col h-full justify-start items-start">
-        {#each Object.values(categories) as category}
-            {#if category.enabled}
-                <Text type={TextType.h4} classes="mb-4">{category.name}</Text>
-                <div class="flex flex-col space-y-1 w-full">
-                    {#each category.settings as setting}
-                        {#if setting.enabled}
-                            <button
-                                class="p-2 w-full flex flex-row items-center space-x-4"
-                                on:click={() => handleSettingClick(setting.route)}
-                            >
-                                <Icon width="18" height="18" icon={setting.icon} classes="text-blue-500" />
-                                <Text type={TextType.p} secondary>{localize(setting.name)}</Text>
-                            </button>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-        {/each}
-    </div>
+    <SettingsIndexView />
 {:else}
     <svelte:component this={SETTINGS_ROUTE_META[$settingsRoute].view} />
 {/if}
+
+{#if $needsUnlockStore}
+    <Drawer onClose={() => $settingsRouter.setNeedsUnlock(false)}>
+        <StrongholdUnlock onSuccess={onUnlockSuccess} onCancel={() => $settingsRouter.setNeedsUnlock(false)} />
+    </Drawer>
+{/if}

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

@@ -0,0 +1,5 @@
+<script lang="typescript">
+    import SettingsRouter from './SettingsRouter.svelte'
+</script>
+
+<SettingsRouter />

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

@@ -1,3 +1,3 @@
-export { default as SettingsRouter } from './SettingsRouter.svelte'
+export { default as SettingsView } from './SettingsView.svelte'
 
-export * from './security'
+export * from './views'