standardnotes-app-web/app/assets/javascripts/Components/Preferences/Panes/Security/Privacy.tsx

import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
import { Switch } from '@/Components/Switch'
import {
  PreferencesGroup,
  PreferencesSegment,
  Subtitle,
  Text,
  Title,
} from '@/Components/Preferences/PreferencesComponents'
import { WebApplication } from '@/UIModels/Application'
import { MuteSignInEmailsOption, LogSessionUserAgentOption, SettingName } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionalComponent } from 'preact'
import { useCallback, useEffect, useState } from 'preact/hooks'
import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'

type Props = {
  application: WebApplication
}

export const Privacy: FunctionalComponent<Props> = observer(({ application }: Props) => {
  const [signInEmailsMutedValue, setSignInEmailsMutedValue] = useState<MuteSignInEmailsOption>(
    MuteSignInEmailsOption.NotMuted,
  )
  const [sessionUaLoggingValue, setSessionUaLoggingValue] = useState<LogSessionUserAgentOption>(
    LogSessionUserAgentOption.Enabled,
  )
  const [isLoading, setIsLoading] = useState(false)

  const updateSetting = async (settingName: SettingName, payload: string): Promise<boolean> => {
    try {
      await application.settings.updateSetting(settingName, payload, false)
      return true
    } catch (e) {
      application.alertService.alert(STRING_FAILED_TO_UPDATE_USER_SETTING).catch(console.error)
      return false
    }
  }

  const loadSettings = useCallback(async () => {
    if (!application.getUser()) {
      return
    }
    setIsLoading(true)

    try {
      const userSettings = await application.settings.listSettings()
      setSignInEmailsMutedValue(
        userSettings.getSettingValue<MuteSignInEmailsOption>(
          SettingName.MuteSignInEmails,
          MuteSignInEmailsOption.NotMuted,
        ),
      )
      setSessionUaLoggingValue(
        userSettings.getSettingValue<LogSessionUserAgentOption>(
          SettingName.LogSessionUserAgent,
          LogSessionUserAgentOption.Enabled,
        ),
      )
    } catch (error) {
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }, [application])

  useEffect(() => {
    loadSettings().catch(console.error)
  }, [loadSettings])

  const toggleMuteSignInEmails = async () => {
    const previousValue = signInEmailsMutedValue
    const newValue =
      previousValue === MuteSignInEmailsOption.Muted ? MuteSignInEmailsOption.NotMuted : MuteSignInEmailsOption.Muted
    setSignInEmailsMutedValue(newValue)

    const updateResult = await updateSetting(SettingName.MuteSignInEmails, newValue)

    if (!updateResult) {
      setSignInEmailsMutedValue(previousValue)
    }
  }

  const toggleSessionLogging = async () => {
    const previousValue = sessionUaLoggingValue
    const newValue =
      previousValue === LogSessionUserAgentOption.Enabled
        ? LogSessionUserAgentOption.Disabled
        : LogSessionUserAgentOption.Enabled
    setSessionUaLoggingValue(newValue)

    const updateResult = await updateSetting(SettingName.LogSessionUserAgent, newValue)

    if (!updateResult) {
      setSessionUaLoggingValue(previousValue)
    }
  }

  return (
    <PreferencesGroup>
      <PreferencesSegment>
        <Title>Privacy</Title>
        <div>
          <div className="flex items-center justify-between">
            <div className="flex flex-col">
              <Subtitle>Disable sign-in notification emails</Subtitle>
              <Text>
                Disables email notifications when a new sign-in occurs on your account. (Email notifications are
                available to paid subscribers).
              </Text>
            </div>
            {isLoading ? (
              <div className={'sk-spinner info small'} />
            ) : (
              <Switch
                onChange={toggleMuteSignInEmails}
                checked={signInEmailsMutedValue === MuteSignInEmailsOption.Muted}
              />
            )}
          </div>
          <HorizontalSeparator classes="mt-5 mb-3" />
          <div className="flex items-center justify-between">
            <div className="flex flex-col">
              <Subtitle>Session user agent logging</Subtitle>
              <Text>
                User agent logging allows you to identify the devices or browsers signed into your account. For
                increased privacy, you can disable this feature, which will remove all saved user agent values from our
                server, and disable future logging of this value.
              </Text>
            </div>
            {isLoading ? (
              <div className={'sk-spinner info small'} />
            ) : (
              <Switch
                onChange={toggleSessionLogging}
                checked={sessionUaLoggingValue === LogSessionUserAgentOption.Enabled}
              />
            )}
          </div>
        </div>
      </PreferencesSegment>
    </PreferencesGroup>
  )
})