From bf36101bf2c295333deb4c736defea619b8bc67a Mon Sep 17 00:00:00 2001
From: Ansh <anshnanda10@gmail.com>
Date: Tue, 6 Jun 2023 07:31:50 -0700
Subject: [PATCH] [APP-655] Password autocomplete when logging in (#838)

* remove unused styles

* refine login form to autofill password from password manager
---
 src/view/com/auth/create/CreateAccount.tsx | 116 +--------------------
 src/view/com/auth/login/Login.tsx          |  24 +++--
 2 files changed, 18 insertions(+), 122 deletions(-)

diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx
index 26bf0338..ed2c379b 100644
--- a/src/view/com/auth/create/CreateAccount.tsx
+++ b/src/view/com/auth/create/CreateAccount.tsx
@@ -10,7 +10,7 @@ import {
 import {observer} from 'mobx-react-lite'
 import {useAnalytics} from 'lib/analytics'
 import {Text} from '../../util/text/Text'
-import {s, colors} from 'lib/styles'
+import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {CreateAccountModel} from 'state/models/ui/create-account'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -127,118 +127,4 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 20,
   },
-
-  noTopBorder: {
-    borderTopWidth: 0,
-  },
-  logoHero: {
-    paddingTop: 30,
-    paddingBottom: 40,
-  },
-  group: {
-    borderWidth: 1,
-    borderRadius: 10,
-    marginBottom: 20,
-    marginHorizontal: 20,
-  },
-  groupLabel: {
-    paddingHorizontal: 20,
-    paddingBottom: 5,
-  },
-  groupContent: {
-    borderTopWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  groupContentIcon: {
-    marginLeft: 10,
-  },
-  textInput: {
-    flex: 1,
-    width: '100%',
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    fontSize: 17,
-    letterSpacing: 0.25,
-    fontWeight: '400',
-    borderRadius: 10,
-  },
-  textBtn: {
-    flexDirection: 'row',
-    flex: 1,
-    alignItems: 'center',
-  },
-  textBtnLabel: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  textBtnFakeInnerBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: 6,
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    marginHorizontal: 6,
-  },
-  textBtnFakeInnerBtnIcon: {
-    marginRight: 4,
-  },
-  picker: {
-    flex: 1,
-    width: '100%',
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    fontSize: 17,
-    borderRadius: 10,
-  },
-  pickerLabel: {
-    fontSize: 17,
-  },
-  checkbox: {
-    borderWidth: 1,
-    borderRadius: 2,
-    width: 16,
-    height: 16,
-    marginLeft: 16,
-  },
-  checkboxFilled: {
-    borderWidth: 1,
-    borderRadius: 2,
-    width: 16,
-    height: 16,
-    marginLeft: 16,
-  },
-  policies: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-  },
-  error: {
-    backgroundColor: colors.red4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: -5,
-    marginHorizontal: 20,
-    marginBottom: 15,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-  },
-  errorFloating: {
-    marginBottom: 20,
-    marginHorizontal: 20,
-    borderRadius: 8,
-  },
-  errorIcon: {
-    borderWidth: 1,
-    borderColor: colors.white,
-    borderRadius: 30,
-    width: 16,
-    height: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 5,
-  },
 })
diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx
index 9f5d581b..c5ccd7c1 100644
--- a/src/view/com/auth/login/Login.tsx
+++ b/src/view/com/auth/login/Login.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import {
   ActivityIndicator,
   Keyboard,
@@ -282,6 +282,7 @@ const LoginForm = ({
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [identifier, setIdentifier] = useState<string>(initialHandle)
   const [password, setPassword] = useState<string>('')
+  const passwordInputRef = useRef<TextInput>(null)
 
   const onPressSelectService = () => {
     store.shell.openModal({
@@ -294,6 +295,7 @@ const LoginForm = ({
   }
 
   const onPressNext = async () => {
+    Keyboard.dismiss()
     setError('')
     setIsProcessing(true)
 
@@ -391,6 +393,12 @@ const LoginForm = ({
             autoCapitalize="none"
             autoFocus
             autoCorrect={false}
+            autoComplete="username"
+            returnKeyType="next"
+            onSubmitEditing={() => {
+              passwordInputRef.current?.focus()
+            }}
+            blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
             keyboardAppearance={theme.colorScheme}
             value={identifier}
             onChangeText={str => setIdentifier((str || '').toLowerCase())}
@@ -406,21 +414,23 @@ const LoginForm = ({
           />
           <TextInput
             testID="loginPasswordInput"
+            ref={passwordInputRef}
             style={[pal.text, styles.textInput]}
             placeholder="Password"
             placeholderTextColor={pal.colors.textLight}
             autoCapitalize="none"
             autoCorrect={false}
+            autoComplete="password"
+            returnKeyType="done"
+            enablesReturnKeyAutomatically={true}
             keyboardAppearance={theme.colorScheme}
-            secureTextEntry
-            // HACK
-            // mitigates a known issue where the secure password prompt interferes
-            // https://github.com/facebook/react-native/issues/21911
-            // prf
-            textContentType="oneTimeCode"
+            secureTextEntry={true}
+            textContentType="password"
+            clearButtonMode="while-editing"
             value={password}
             onChangeText={setPassword}
             onSubmitEditing={onPressNext}
+            blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
             editable={!isProcessing}
             accessibilityLabel="Password"
             accessibilityHint={