forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix password autofill on iOS (#9397)
* fix password autofill on iOS
* update autocomplete props, rm textContentType
authored by
Samuel Newman
and committed by
GitHub
ef97a20c
f53d5b6f
+20
-6
+17
-4
src/screens/Login/LoginForm.tsx
+17
-4
src/screens/Login/LoginForm.tsx
···
18
18
import {cleanError} from '#/lib/strings/errors'
19
19
import {createFullHandle} from '#/lib/strings/handles'
20
20
import {logger} from '#/logger'
21
+
import {isIOS} from '#/platform/detection'
21
22
import {useSetHasCheckedForStarterPack} from '#/state/preferences/used-starter-packs'
22
23
import {useSessionApi} from '#/state/session'
23
24
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
24
-
import {atoms as a, useTheme} from '#/alf'
25
+
import {atoms as a, ios, useTheme} from '#/alf'
25
26
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
26
27
import {FormError} from '#/components/forms/FormError'
27
28
import {HostingProvider} from '#/components/forms/HostingProvider'
···
69
70
const identifierValueRef = useRef<string>(initialHandle || '')
70
71
const passwordValueRef = useRef<string>('')
71
72
const authFactorTokenValueRef = useRef<string>('')
73
+
const identifierRef = useRef<TextInput>(null)
72
74
const passwordRef = useRef<TextInput>(null)
75
+
const hasFocusedOnce = useRef<boolean>(false)
73
76
const {_} = useLingui()
74
77
const {login} = useSessionApi()
75
78
const requestNotificationsPermission = useRequestNotificationsPermission()
···
198
201
<TextField.Icon icon={At} />
199
202
<TextField.Input
200
203
testID="loginUsernameInput"
204
+
inputRef={identifierRef}
201
205
label={_(msg`Username or email address`)}
202
206
autoCapitalize="none"
203
-
autoFocus
207
+
autoFocus={!isIOS}
204
208
autoCorrect={false}
205
209
autoComplete="username"
206
210
returnKeyType="next"
···
228
232
label={_(msg`Password`)}
229
233
autoCapitalize="none"
230
234
autoCorrect={false}
231
-
autoComplete="password"
235
+
autoComplete="current-password"
232
236
returnKeyType="done"
233
237
enablesReturnKeyAutomatically={true}
234
238
secureTextEntry={true}
235
-
textContentType="password"
236
239
clearButtonMode="while-editing"
237
240
onChangeText={v => {
238
241
passwordValueRef.current = v
···
241
244
blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
242
245
editable={!isProcessing}
243
246
accessibilityHint={_(msg`Enter your password`)}
247
+
onLayout={ios(() => {
248
+
if (hasFocusedOnce.current) return
249
+
hasFocusedOnce.current = true
250
+
// kinda dumb, but if we use `autoFocus` to focus
251
+
// the username input, it happens before the password
252
+
// input gets rendered. this breaks the password autofill
253
+
// on iOS (it only does the username part). delaying
254
+
// it until both inputs are rendered fixes the autofill -sfn
255
+
identifierRef.current?.focus()
256
+
})}
244
257
/>
245
258
<Button
246
259
testID="forgotPasswordButton"
+2
-2
src/screens/Login/SetNewPasswordForm.tsx
+2
-2
src/screens/Login/SetNewPasswordForm.tsx
···
147
147
label={_(msg`Enter a password`)}
148
148
autoCapitalize="none"
149
149
autoCorrect={false}
150
-
autoComplete="password"
151
150
returnKeyType="done"
152
151
secureTextEntry={true}
153
-
textContentType="password"
152
+
autoComplete="new-password"
153
+
passwordRules="minlength: 8;"
154
154
clearButtonMode="while-editing"
155
155
value={password}
156
156
onChangeText={setPassword}