shared/settings/logout.tsx - master - githubmirror/client

shared/settings/logout.tsx
187 строк6 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as React from 'react'
import {useSafeSubmit} from '@/util/safe-submit'
import * as C from '@/constants'
import * as T from '@/constants/types'
import * as Kb from '@/common-adapters'
import {UpdatePassword, useSubmitNewPassword} from './password'
import {useRequestLogout} from './use-request-logout'
import {usePasswordCheck} from './use-password-check'
import {useRandomPWState} from './use-random-pw'

const LogoutContainer = () => {
  const styles = useStyles()
  const {checkPassword, checkPasswordIsCorrect, reset} = usePasswordCheck()
  const {randomPW: hasRandomPW} = useRandomPWState()
  const {error, onSave, waitingForResponse} = useSubmitNewPassword(true)
  const [hasPGPKeyOnServer, setHasPGPKeyOnServer] = React.useState<boolean | undefined>(undefined)
  const loadPgpSettings = C.useRPC(T.RPCGen.accountHasServerKeysRpcPromise)
  const requestLogout = useRequestLogout()
  const onCheckPassword = checkPassword

  const _onLogout = () => {
    requestLogout()
    reset()
  }

  const onLogout = useSafeSubmit(_onLogout, false)

  const [loggingOut, setLoggingOut] = React.useState(false)
  const [password, setPassword] = React.useState('')
  const [showTyping, setShowTyping] = React.useState(false)

  React.useEffect(
    () => () => {
      reset()
    },
    [reset]
  )

  React.useEffect(() => {
    if (!hasRandomPW) {
      return
    }
    loadPgpSettings(
      [undefined],
      ({hasServerKeys}) => {
        setHasPGPKeyOnServer(hasServerKeys)
      },
      () => {}
    )
  }, [hasRandomPW, loadPgpSettings])

  const logOut = () => {
    if (loggingOut) return
    onLogout()
    setLoggingOut(true)
  }

  const keyboardType = showTyping && isAndroid ? 'visible-password' : 'default'

  return hasRandomPW === undefined ? (
    <Kb.ProgressIndicator style={styles.progress} type="Huge" />
  ) : hasRandomPW ? (
    <UpdatePassword
      error={error}
      hasPGPKeyOnServer={hasPGPKeyOnServer}
      onSave={onSave}
      saveLabel="Sign out"
      waitingForResponse={waitingForResponse}
    />
  ) : (
    <>
      {checkPasswordIsCorrect === false ? (
        <Kb.Banner color="red">Wrong password. Please try again.</Kb.Banner>
      ) : null}
      {checkPasswordIsCorrect === true ? (
        <Kb.Banner color="green">Your password is correct.</Kb.Banner>
      ) : null}
      <Kb.ScrollView alwaysBounceVertical={false} style={Kb.Styles.globalStyles.flexOne}>
        <Kb.Box2 direction="vertical" fullHeight={true} flex={1} style={styles.container}>
          {isMobile && (
            <Kb.Text style={styles.headerText} type="Header">
              Do you know your password?
            </Kb.Text>
          )}
          <Kb.Text style={styles.bodyText} type="Body">
            You will need it to sign back in.
          </Kb.Text>
          <Kb.RoundedBox>
            <Kb.Input3
              keyboardType={keyboardType}
              onEnterKeyDown={() => {
                if (checkPasswordIsCorrect) {
                  logOut()
                } else {
                  onCheckPassword(password)
                }
              }}
              onChangeText={setPassword}
              placeholder="Your password"
              secureTextEntry={!showTyping}
              value={password}
              hideBorder={true}
            />
          </Kb.RoundedBox>
          <Kb.Checkbox
            checked={showTyping}
            label="Show typing"
            onCheck={() => setShowTyping(!showTyping)}
            style={styles.checkbox}
          />
        </Kb.Box2>
      </Kb.ScrollView>
      <Kb.ModalFooter>
        {!checkPasswordIsCorrect ? (
          <Kb.ButtonBar align="center" direction="column" fullWidth={true} style={styles.buttonBar}>
            <Kb.WaitingButton
              fullWidth={true}
              waitingKey={C.waitingKeySettingsCheckPassword}
              disabled={!password || loggingOut}
              label="Test password"
              onClick={() => onCheckPassword(password)}
            />
            <Kb.Box2 direction="horizontal">
              {loggingOut ? (
                <Kb.ProgressIndicator style={styles.smallProgress} type="Small" />
              ) : (
                <Kb.ClickableBox
                  onClick={logOut}
                  direction="horizontal"
                  justifyContent="center"
                  style={styles.logoutContainer}
                  className="hover-underline-container"
                >
                  <Kb.Icon type="iconfont-leave" />
                  <Kb.Text className="underline" style={styles.logout} type="BodySmallSecondaryLink">
                    Just sign out
                  </Kb.Text>
                </Kb.ClickableBox>
              )}
            </Kb.Box2>
          </Kb.ButtonBar>
        ) : (
          <Kb.ButtonBar align="center" direction="row" fullWidth={true} style={styles.buttonBar}>
            {loggingOut ? (
              <Kb.ProgressIndicator style={styles.smallProgress} type="Small" />
            ) : (
              <Kb.Button label="Safely sign out" fullWidth={true} onClick={logOut} type="Success" />
            )}
          </Kb.ButtonBar>
        )}
      </Kb.ModalFooter>
    </>
  )
}

const useStyles = Kb.Styles.createStyleHook(
  theme =>
    ({
      bodyText: {
        paddingBottom: Kb.Styles.globalMargins.tiny,
        textAlign: 'center',
      },
      buttonBar: {minHeight: undefined},
      checkbox: {paddingTop: Kb.Styles.globalMargins.tiny},
      container: {
        ...Kb.Styles.padding(Kb.Styles.globalMargins.medium, Kb.Styles.globalMargins.small),
        backgroundColor: theme.blueGrey,
      },
      headerText: {
        marginBottom: Kb.Styles.globalMargins.small,
        textAlign: 'center',
      },
      logout: {paddingLeft: Kb.Styles.globalMargins.xtiny},
      logoutContainer: Kb.Styles.platformStyles({
        common: {
          paddingTop: Kb.Styles.globalMargins.tiny,
        },
      }),
      progress: {
        alignSelf: 'center',
        ...Kb.Styles.marginV(Kb.Styles.globalMargins.xlarge),
      },
      smallProgress: {alignSelf: 'center'},
    }) as const
)

export default LogoutContainer