fix: submit app password on enter
parent
68d4cd1046
commit
c3d3f91349
|
@ -62,7 +62,8 @@ export function Component({}: {}) {
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const {closeModal} = useModalControls()
|
const {closeModal} = useModalControls()
|
||||||
const {data: passwords} = useAppPasswordsQuery()
|
const {data: passwords} = useAppPasswordsQuery()
|
||||||
const createMutation = useAppPasswordCreateMutation()
|
const {mutateAsync: mutateAppPassword, isPending} =
|
||||||
|
useAppPasswordCreateMutation()
|
||||||
const [name, setName] = useState(
|
const [name, setName] = useState(
|
||||||
shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
|
shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
|
||||||
)
|
)
|
||||||
|
@ -107,7 +108,7 @@ export function Component({}: {}) {
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const newPassword = await createMutation.mutateAsync({name})
|
const newPassword = await mutateAppPassword({name})
|
||||||
if (newPassword) {
|
if (newPassword) {
|
||||||
setAppPassword(newPassword.password)
|
setAppPassword(newPassword.password)
|
||||||
} else {
|
} else {
|
||||||
|
@ -136,6 +137,17 @@ export function Component({}: {}) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const textInputRef = React.useCallback((node: TextInput | null) => {
|
||||||
|
if (!node) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// `selectTextOnFocus` isn't working with `autoFocus={true}` or without a timeout going.
|
||||||
|
setTimeout(() => {
|
||||||
|
node.focus()
|
||||||
|
}, 0)
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, pal.view]} testID="addAppPasswordsModal">
|
<View style={[styles.container, pal.view]} testID="addAppPasswordsModal">
|
||||||
<View>
|
<View>
|
||||||
|
@ -145,6 +157,7 @@ export function Component({}: {}) {
|
||||||
Please enter a unique name for this App Password or use our
|
Please enter a unique name for this App Password or use our
|
||||||
randomly generated one.
|
randomly generated one.
|
||||||
</Trans>
|
</Trans>
|
||||||
|
asdq42
|
||||||
</Text>
|
</Text>
|
||||||
) : (
|
) : (
|
||||||
<Text type="lg" style={[pal.text]}>
|
<Text type="lg" style={[pal.text]}>
|
||||||
|
@ -159,6 +172,7 @@ export function Component({}: {}) {
|
||||||
{!appPassword ? (
|
{!appPassword ? (
|
||||||
<View style={[pal.btn, styles.textInputWrapper]}>
|
<View style={[pal.btn, styles.textInputWrapper]}>
|
||||||
<TextInput
|
<TextInput
|
||||||
|
ref={textInputRef}
|
||||||
style={[styles.input, pal.text]}
|
style={[styles.input, pal.text]}
|
||||||
onChangeText={_onChangeText}
|
onChangeText={_onChangeText}
|
||||||
value={name}
|
value={name}
|
||||||
|
@ -167,16 +181,12 @@ export function Component({}: {}) {
|
||||||
autoCorrect={false}
|
autoCorrect={false}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
autoCapitalize="none"
|
autoCapitalize="none"
|
||||||
autoFocus={true}
|
|
||||||
maxLength={32}
|
maxLength={32}
|
||||||
selectTextOnFocus={true}
|
selectTextOnFocus={true}
|
||||||
multiline={true} // need this to be true otherwise selectTextOnFocus doesn't work
|
blurOnSubmit={true}
|
||||||
numberOfLines={1} // hack for multiline so only one line shows (android)
|
editable={!isPending}
|
||||||
scrollEnabled={false} // hack for multiline so only one line shows (ios)
|
|
||||||
blurOnSubmit={true} // hack for multiline so it submits
|
|
||||||
editable={!appPassword}
|
|
||||||
returnKeyType="done"
|
returnKeyType="done"
|
||||||
onEndEditing={createAppPassword}
|
onSubmitEditing={createAppPassword}
|
||||||
accessible={true}
|
accessible={true}
|
||||||
accessibilityLabel={_(msg`Name`)}
|
accessibilityLabel={_(msg`Name`)}
|
||||||
accessibilityHint={_(msg`Input name for app password`)}
|
accessibilityHint={_(msg`Input name for app password`)}
|
||||||
|
|
Loading…
Reference in New Issue