> For the complete documentation index, see [llms.txt](https://intercode.gitbook.io/intercode-saas-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://intercode.gitbook.io/intercode-saas-kit/pages/user-settings.md).

# User Settings

## Settings link

* [Two-step Authentication ](/intercode-saas-kit/pages/auth/two-factor-auth.md)
* [Impersonation](/intercode-saas-kit/features/impersonation.md)
* [App Tour](/intercode-saas-kit/pages/user-settings/app-tour.md)

## Page

User settings have their own page. You can access it from this menu.

<figure><img src="/files/I93g0q2cGQoHDETLSitI" alt=""><figcaption></figcaption></figure>

or by typing

<http://your\\_website/user-settings>

Go there and look at what setting do you have. Simple settings with switchers but all the mechanics you can learn from separate blocks.

## Switcher handler

What can be mentioned is the function that handles the request based on what switcher we switch.

```javascript
    const handleSwitchChange = async (value, type) => {
        setLoading(prev => ({ ...prev, [type]: true }));

        try {
            switch (type) {
                case 'impersonationAllowed':
                    await updateProfile({ impersonationAllowed: value });
                    break;
                case 'tourCompleted':
                    await updateUserTourStatus();
                    fetchUser();
                    break;
                default:
                    break;
            }

            setOptions(prevState => ({
                ...prevState,
                [type]: value,
            }));

            globalNotification.open({
                type: notificationType.SUCCESS,
                message: t('notification.save-success.message'),
                description: t('notification.save-success.description'),
                placement: 'top',
            });
        } catch (err) {
            const errorCode = err.response.data?.code;

            globalNotification.open({
                type: notificationType.ERROR,
                message: t(`apiResponses:${errorCode}.message`),
                description: t(`apiResponses:${errorCode}.description`),
                placement: 'top',
            });
        } finally {
            setLoading(prev => ({ ...prev, [type]: false }));
        }
    };
```

The **`handleSwitchChange`**&#x69;s universal function that manages the behavior when a switch toggle is changed, updating settings and notifying the user accordingly. You can apply it every new switcher but edit the switch logic inside.

Here’s a breakdown of how it works:

1. **Set Loading State**: It first sets a loading state specific to the **type** (e.g., '**impersonationAllowed**' or '**tourCompleted**'), so the UI can show loading feedback for the action in progress.
2. **Process Switch Type**: The function checks the **type** to determine which action to perform:
   * If the **type** is **impersonationAllowed**, it calls **updateProfile** to update the user's profile with the new value.
   * If the **type** is **tourCompleted**, it calls **updateUserTourStatus** to update the tour status and then fetches the updated user data by calling **fetchUser()**.
3. **Update Options**: After successfully executing the action, it updates the **options** state by setting the value of the corresponding **type** in the **options** object.
4. **Show Success Notification**: Upon successful completion, it displays a global success notification, retrieving translated message and description strings via **t**.
5. **Handle Errors**: If an error occurs:
   * It captures the error code from the response (**err.response.data?.code**).
   * It displays a global error notification with a message and description based on the error code.
6. **Unset Loading State**: Finally, it resets the loading state for the **type** to **false** in the **finally** block, ensuring that loading stops regardless of success or error.