Improve phone auth UX (#846)

Author: SUPERCILEX

auth/src/main/java/com/firebase/ui/auth/ui/phone/SubmitConfirmationCodeFragment.java

@@ -32,6 +32,7 @@
 import com.firebase.ui.auth.ui.ExtraConstants;
 import com.firebase.ui.auth.ui.FlowParameters;
 import com.firebase.ui.auth.ui.FragmentBase;
+import com.firebase.ui.auth.ui.ImeHelper;
 import com.firebase.ui.auth.ui.email.PreambleHandler;
 
 /**
@@ -165,13 +166,15 @@ private void setupSubmitConfirmationCodeButton() {
         mSubmitConfirmationButton.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
-                final String confirmationCode = mConfirmationCodeEditText.getUnspacedText()
-                        .toString();
-                mVerifier.submitConfirmationCode(confirmationCode);
+                submitConfirmationCode();
             }
         });
     }
 
+    private void submitConfirmationCode() {
+        mVerifier.submitConfirmationCode(mConfirmationCodeEditText.getUnspacedText().toString());
+    }
+
     private void setupEditPhoneNumberTextView(@Nullable String phoneNumber) {
         mEditPhoneTextView.setText(TextUtils.isEmpty(phoneNumber) ? "" : phoneNumber);
         mEditPhoneTextView.setOnClickListener(new View.OnClickListener() {
@@ -188,6 +191,15 @@ private void setupConfirmationCodeEditText() {
         mConfirmationCodeEditText.setText("------");
         BucketedTextChangeListener listener = createBucketedTextChangeListener();
         mConfirmationCodeEditText.addTextChangedListener(listener);
+        ImeHelper.setImeOnDoneListener(mConfirmationCodeEditText,
+                new ImeHelper.DonePressedListener() {
+                    @Override
+                    public void onDonePressed() {
+                        if (mSubmitConfirmationButton.isEnabled()) {
+                            submitConfirmationCode();
+                        }
+                    }
+                });
     }
 
     private BucketedTextChangeListener createBucketedTextChangeListener() {

auth/src/main/java/com/firebase/ui/auth/ui/phone/VerifyPhoneNumberFragment.java

@@ -36,6 +36,7 @@
 import com.firebase.ui.auth.ui.ExtraConstants;
 import com.firebase.ui.auth.ui.FlowParameters;
 import com.firebase.ui.auth.ui.FragmentBase;
+import com.firebase.ui.auth.ui.ImeHelper;
 import com.firebase.ui.auth.util.GoogleApiHelper;
 import com.google.android.gms.auth.api.Auth;
 import com.google.android.gms.auth.api.credentials.Credential;
@@ -56,10 +57,10 @@ public class VerifyPhoneNumberFragment extends FragmentBase implements View.OnCl
 
     private Context mAppContext;
 
-    private CountryListSpinner countryListSpinner;
+    private CountryListSpinner mCountryListSpinner;
     private EditText mPhoneEditText;
-    private TextView errorEditText;
-    private Button sendCodeButton;
+    private TextView mErrorEditText;
+    private Button mSendCodeButton;
     private PhoneVerificationActivity mVerifier;
     private TextView mSmsTermsText;
 
@@ -88,15 +89,22 @@ public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
 
         View v = inflater.inflate(R.layout.fui_phone_layout, container, false);
 
-        countryListSpinner = v.findViewById(R.id.country_list);
+        mCountryListSpinner = v.findViewById(R.id.country_list);
         mPhoneEditText = v.findViewById(R.id.phone_number);
-        errorEditText = v.findViewById(R.id.phone_number_error);
-        sendCodeButton = v.findViewById(R.id.send_code);
+        mErrorEditText = v.findViewById(R.id.phone_number_error);
+        mSendCodeButton = v.findViewById(R.id.send_code);
         mSmsTermsText = v.findViewById(R.id.send_sms_tos);
 
+        ImeHelper.setImeOnDoneListener(mPhoneEditText, new ImeHelper.DonePressedListener() {
+            @Override
+            public void onDonePressed() {
+                onNext();
+            }
+        });
+
         FragmentActivity parentActivity = getActivity();
         parentActivity.setTitle(getString(R.string.fui_verify_phone_number_title));
-        setUpCountrySpinner();
+        setupCountrySpinner();
         setupSendCodeButton();
         setupTerms();
 
@@ -159,24 +167,29 @@ public void onActivityResult(int requestCode, int resultCode, Intent data) {
                             PhoneNumberUtils.getPhoneNumber(formattedPhone);
                     setPhoneNumber(phoneNumberObj);
                     setCountryCode(phoneNumberObj);
+                    onNext();
                 }
             }
         }
     }
 
     @Override
     public void onClick(View v) {
+        onNext();
+    }
+
+    private void onNext() {
         String phoneNumber = getPseudoValidPhoneNumber();
         if (phoneNumber == null) {
-            errorEditText.setText(R.string.fui_invalid_phone_number);
+            mErrorEditText.setText(R.string.fui_invalid_phone_number);
         } else {
             mVerifier.verifyPhoneNumber(phoneNumber, false);
         }
     }
 
     @Nullable
     private String getPseudoValidPhoneNumber() {
-        final CountryInfo countryInfo = (CountryInfo) countryListSpinner.getTag();
+        final CountryInfo countryInfo = (CountryInfo) mCountryListSpinner.getTag();
         final String everythingElse = mPhoneEditText.getText().toString();
 
         if (TextUtils.isEmpty(everythingElse)) {
@@ -186,18 +199,18 @@ private String getPseudoValidPhoneNumber() {
         return PhoneNumberUtils.formatPhoneNumber(everythingElse, countryInfo);
     }
 
-    private void setUpCountrySpinner() {
+    private void setupCountrySpinner() {
         //clear error when spinner is clicked on
-        countryListSpinner.setOnClickListener(new View.OnClickListener() {
+        mCountryListSpinner.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
-                errorEditText.setText("");
+                mErrorEditText.setText("");
             }
         });
     }
 
     private void setupSendCodeButton() {
-        sendCodeButton.setOnClickListener(this);
+        mSendCodeButton.setOnClickListener(this);
     }
 
     private void showPhoneAutoCompleteHint() {
@@ -243,12 +256,12 @@ private void setPhoneNumber(PhoneNumber phoneNumber) {
 
     private void setCountryCode(PhoneNumber phoneNumber) {
         if (PhoneNumber.isCountryValid(phoneNumber)) {
-            countryListSpinner.setSelectedForCountry(new Locale("", phoneNumber.getCountryIso()),
+            mCountryListSpinner.setSelectedForCountry(new Locale("", phoneNumber.getCountryIso()),
                     phoneNumber.getCountryCode());
         }
     }
 
     void showError(String e) {
-        errorEditText.setText(e);
+        mErrorEditText.setText(e);
     }
 }

auth/src/main/res/layout/fui_confirmation_code_layout.xml

@@ -41,7 +41,7 @@
             android:ems="10"
             android:fontFamily="monospace"
             android:gravity="center"
-            android:imeOptions="actionNext"
+            android:imeOptions="actionDone"
             android:inputType="number"
             android:textSize="32sp"
             android:typeface="monospace"

auth/src/main/res/layout/fui_phone_layout.xml

@@ -19,7 +19,8 @@
             android:layout_toEndOf="@id/country_list"
             android:layout_toRightOf="@id/country_list"
             android:layout_alignBaseline="@id/country_list"
-            android:layout_gravity="end" />
+            android:layout_gravity="end"
+            android:imeOptions="actionDone" />
 
         <TextView
             android:id="@+id/phone_number_error"
@@ -50,6 +51,7 @@
             android:layout_below="@id/send_code"
             android:textColor="?android:textColorTertiary"
             android:textIsSelectable="false" />
+
     </RelativeLayout>
 
 </ScrollView>