feat: 优化验证码输入交互 (#20)

* feat: 无输入内容时不显示错误状态 * feat: 无法提交时使用不同的按钮状态进行区分 * chore: increase build number to 38 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
fhraise · Jan 27, 2024 · fd0f868 · fd0f868
1 parent a93aa9b
commit fd0f868
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/build-number.properties b/build-number.properties
@@ -15,4 +15,4 @@
 # You should have received a copy of the GNU General Public License along
 # with Fhraise. If not, see <https://www.gnu.org/licenses/>.
 #
-buildNumber=37
+buildNumber=38
diff --git a/composeApp/src/commonMain/kotlin/data/components/root/SignInComponent.kt b/composeApp/src/commonMain/kotlin/data/components/root/SignInComponent.kt
@@ -64,6 +64,9 @@ interface SignInComponent : AppComponentContext {
             var canInputVerifyCode: Boolean
             var verifyCode: String
 
+            val textFieldError
+                get() = phoneNumber.isNotEmpty() && !phoneNumberVerified
+
             fun sendVerifyCode()
         }
 
@@ -134,18 +137,18 @@ class AppSignInComponent(
                 Regex("^1(3(([0-3]|[5-9])[0-9]{8}|4[0-8][0-9]{7})|(45|5([0-2]|[5-6]|[8-9])|6(2|[5-7])|7([0-1]|[5-8])|8[0-9]|9([0-3]|[5-9]))[0-9]{8})$")
 
             private var _phoneNumber by mutableStateOf(phoneNumber)
-            override var phoneNumber: String
+            override var phoneNumber
                 get() = _phoneNumber
                 set(value) {
                     canInputVerifyCode = false
                     _phoneNumber = value
                 }
 
-            override val phoneNumberVerified: Boolean
+            override val phoneNumberVerified
                 get() = phoneNumberRegex.matches(phoneNumber)
 
             private var _canInputVerifyCode by mutableStateOf(canInputVerifyCode)
-            override var canInputVerifyCode: Boolean
+            override var canInputVerifyCode
                 get() = _canInputVerifyCode
                 set(value) {
                     if (!phoneNumberVerified) {

diff --git a/composeApp/src/commonMain/kotlin/ui/pages/root/SignIn.kt b/composeApp/src/commonMain/kotlin/ui/pages/root/SignIn.kt
@@ -641,14 +641,14 @@ fun SignInComponent.ComponentState.PhoneNumberVerifyCodeState.PhoneNumber() {
         prefix = { Text(text = "+86") },
         supportingText = {
             AnimatedVisibility(
-                visible = !phoneNumberVerified,
+                visible = textFieldError,
                 enter = fadeIn() + expandVertically(),
                 exit = fadeOut() + shrinkVertically(),
             ) {
                 Text(text = "手机号格式不正确")
             }
         },
-        isError = !phoneNumberVerified,
+        isError = textFieldError,
         keyboardOptions = KeyboardOptions(
             keyboardType = KeyboardType.Phone, imeAction = ImeAction.Next
         ),
@@ -676,6 +676,7 @@ fun SignInComponent.ComponentState.PhoneNumberVerifyCodeState.VerifyCode() {
 fun SignInComponent.ComponentState.PhoneNumberVerifyCodeState.NextOrSubmitButton() {
     Button(
         onClick = ::nextOrSubmit,
+        enabled = phoneNumberVerified,
         shape = MaterialTheme.shapes.large,
     ) {
         AnimatedContent(