Merge branch 'format-account-in-login-screen'

6 files changed, 44 insertions, 10 deletions

diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryAdapter.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryAdapter.kt
index 53082c8ea2..155d1d73fc 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryAdapter.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryAdapter.kt
@@ -5,8 +5,15 @@ import android.view.LayoutInflater
 import android.view.ViewGroup
 import kotlin.properties.Delegates.observable
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.util.SegmentedTextFormatter
 
 class AccountHistoryAdapter : Adapter<AccountHistoryHolder>() {
+    private val formatter = SegmentedTextFormatter(' ').apply {
+        isValidInputCharacter = { character ->
+            '0' <= character && character <= '9'
+        }
+    }
+
     var accountHistory by observable(ArrayList<String>()) { _, _, _ ->
         notifyDataSetChanged()
     }
@@ -17,7 +24,7 @@ class AccountHistoryAdapter : Adapter<AccountHistoryHolder>() {
         val inflater = LayoutInflater.from(parentView.context)
         val view = inflater.inflate(R.layout.account_history_entry, parentView, false)
 
-        return AccountHistoryHolder(view).apply {
+        return AccountHistoryHolder(view, formatter).apply {
             onSelect = { account -> onSelectEntry?.invoke(account) }
         }
     }
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryHolder.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryHolder.kt
index 5a7a0b34da..f19da6a5be 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryHolder.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountHistoryHolder.kt
@@ -5,12 +5,16 @@ import android.view.View
 import android.widget.TextView
 import kotlin.properties.Delegates.observable
 import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.util.SegmentedTextFormatter
 
-class AccountHistoryHolder(view: View) : ViewHolder(view) {
+class AccountHistoryHolder(
+    view: View,
+    private val formatter: SegmentedTextFormatter
+) : ViewHolder(view) {
     private val label: TextView = view.findViewById(R.id.label)
 
     var accountToken by observable("") { _, _, account ->
-        label.text = account
+        label.text = formatter.format(account)
     }
 
     var onSelect: ((String) -> Unit)? = null
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountInput.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountInput.kt
index fd1c5a1e96..d5a8808b5d 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountInput.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/AccountInput.kt
@@ -3,17 +3,19 @@ package net.mullvad.mullvadvpn.ui.widget
 import android.content.Context
 import android.text.Editable
 import android.text.TextWatcher
+import android.text.method.DigitsKeyListener
 import android.text.style.MetricAffectingSpan
 import android.util.AttributeSet
 import android.view.LayoutInflater
 import android.view.View
 import android.view.View.OnFocusChangeListener
+import android.widget.EditText
 import android.widget.ImageButton
 import android.widget.LinearLayout
-import android.widget.TextView
 import kotlin.properties.Delegates.observable
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.ui.LoginState
+import net.mullvad.mullvadvpn.util.SegmentedInputFormatter
 import net.mullvad.talpid.util.EventNotifier
 
 const val MIN_ACCOUNT_TOKEN_LENGTH = 10
@@ -42,12 +44,22 @@ class AccountInput : LinearLayout {
         }
     }
 
-    private val input = container.findViewById<TextView>(R.id.login_input).apply {
+    private val input = container.findViewById<EditText>(R.id.login_input).apply {
         addTextChangedListener(inputWatcher)
 
         onFocusChangeListener = OnFocusChangeListener { view, inputHasFocus ->
             hasFocus = inputHasFocus && view.isEnabled
         }
+
+        // Manually initializing the `DigitsKeyListener` allows spaces to be used and still keeps
+        // the input type as a number so that the correct software keyboard type is shown
+        keyListener = DigitsKeyListener.getInstance("01234567890 ")
+
+        SegmentedInputFormatter(this, ' ').apply {
+            isValidInputCharacter = { character ->
+                '0' <= character && character <= '9'
+            }
+        }
     }
 
     private val button = container.findViewById<ImageButton>(R.id.login_button).apply {
@@ -94,7 +106,7 @@ class AccountInput : LinearLayout {
     }
 
     fun loginWith(accountNumber: String) {
-        input.text = accountNumber
+        input.setText(accountNumber)
         onLogin?.invoke(accountNumber)
     }
 
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedInputFormatter.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedInputFormatter.kt
index 4eda2a5d20..0f7db7f1c8 100644
--- a/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedInputFormatter.kt
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedInputFormatter.kt
@@ -127,8 +127,8 @@ class SegmentedInputFormatter(val input: EditText, var separator: Char) : TextWa
     }
 
     private fun formatSeparator(input: Editable, index: Int): Boolean {
-        if (index < input.length && input[index] != '-') {
-            input.insert(index, "-")
+        if (index < input.length && input[index] != separator) {
+            input.insert(index, "$separator")
             return true
         } else {
             return false
diff --git a/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedTextFormatter.kt b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedTextFormatter.kt
new file mode 100644
index 0000000000..8e08f3c742
--- /dev/null
+++ b/android/src/main/kotlin/net/mullvad/mullvadvpn/util/SegmentedTextFormatter.kt
@@ -0,0 +1,13 @@
+package net.mullvad.mullvadvpn.util
+
+class SegmentedTextFormatter(var separator: Char) {
+    var isValidInputCharacter: (Char) -> Boolean = { _ -> true }
+    var segmentSize = 4
+
+    fun format(string: String) = string
+        .asSequence()
+        .filter(isValidInputCharacter)
+        .chunked(segmentSize)
+        .map { segmentCharacters -> segmentCharacters.joinToString("") }
+        .joinToString("$separator")
+}
diff --git a/android/src/main/res/layout/account_input.xml b/android/src/main/res/layout/account_input.xml
index 1c23583c42..96aa3c7c46 100644
--- a/android/src/main/res/layout/account_input.xml
+++ b/android/src/main/res/layout/account_input.xml
@@ -1,12 +1,10 @@
 <merge xmlns:android="http://schemas.android.com/apk/res/android">
     <EditText android:id="@+id/login_input"
-              android:digits="0123456789"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:paddingHorizontal="12dp"
               android:background="@drawable/account_input_background"
-              android:inputType="number"
               android:singleLine="true"
               android:imeOptions="flagNoPersonalizedLearning"
               android:textCursorDrawable="@drawable/text_input_cursor"