Add a TextField asking for OTP
This commit is contained in:
parent
104d0cabad
commit
e8624b5635
|
@ -0,0 +1,37 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
|
||||
<option name="composableFile" value="true" />
|
||||
<option name="previewFile" value="true" />
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
|
@ -35,12 +35,16 @@ class MainActivity : ComponentActivity() {
|
|||
}
|
||||
}
|
||||
|
||||
fun isPhoneValid(phone: String): Boolean {
|
||||
return phone.trim('+', ' ').isNotEmpty()
|
||||
enum class LoginStage {
|
||||
ASK_PHONE,
|
||||
ASK_CODE,
|
||||
}
|
||||
|
||||
fun isPhoneValid(phone: String): Boolean = phone.trim('+', ' ').isNotEmpty()
|
||||
fun isLoginCodeValid(code: String): Boolean = code.trim().count { it.isDigit() } == 5
|
||||
|
||||
@Composable
|
||||
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
|
||||
fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit, onSendCode: () -> Unit) {
|
||||
Text(stringResource(R.string.enter_phone))
|
||||
TextField(
|
||||
phone,
|
||||
|
@ -55,16 +59,46 @@ fun PhoneInput(phone: String, onPhoneChanged: (String) -> Unit) {
|
|||
onValueChange = onPhoneChanged
|
||||
)
|
||||
Spacer(Modifier.height(16.dp))
|
||||
Button(enabled = isPhoneValid(phone), modifier = Modifier.fillMaxWidth(), onClick = {
|
||||
|
||||
}) {
|
||||
Button(
|
||||
enabled = isPhoneValid(phone),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
onClick = onSendCode
|
||||
) {
|
||||
Text(stringResource(R.string.send_otp))
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun OtpInput(otp: String, onOtpChanged: (String) -> Unit, onConfirmOtp: () -> Unit) {
|
||||
Text(stringResource(R.string.enter_otp))
|
||||
TextField(
|
||||
otp,
|
||||
label = { Text(stringResource(R.string.otp)) },
|
||||
placeholder = { Text(stringResource(R.string.otp_example)) },
|
||||
singleLine = true,
|
||||
keyboardOptions = KeyboardOptions(
|
||||
keyboardType = KeyboardType.Number,
|
||||
imeAction = ImeAction.Done
|
||||
),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
onValueChange = onOtpChanged
|
||||
)
|
||||
Spacer(Modifier.height(16.dp))
|
||||
Button(
|
||||
enabled = isLoginCodeValid(otp),
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
onClick = onConfirmOtp
|
||||
) {
|
||||
Text(stringResource(R.string.do_login))
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Login() {
|
||||
var stage by remember { mutableStateOf(LoginStage.ASK_PHONE) }
|
||||
var phone by remember { mutableStateOf("") }
|
||||
var otp by remember { mutableStateOf("") }
|
||||
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
|
@ -80,7 +114,15 @@ fun Login() {
|
|||
.wrapContentWidth(Alignment.CenterHorizontally)
|
||||
.padding(16.dp)
|
||||
)
|
||||
PhoneInput(phone, onPhoneChanged = { phone = it })
|
||||
when (stage) {
|
||||
LoginStage.ASK_PHONE -> PhoneInput(
|
||||
phone,
|
||||
onPhoneChanged = { phone = it },
|
||||
onSendCode = { stage = LoginStage.ASK_CODE })
|
||||
LoginStage.ASK_CODE -> OtpInput(otp, onOtpChanged = { otp = it }, onConfirmOtp = {
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -5,5 +5,8 @@
|
|||
<string name="phone_international">Phone (international format)</string>
|
||||
<string name="phone_example">+34 600 000 000</string>
|
||||
<string name="send_otp">Send code</string>
|
||||
<string name="enter_otp">Enter the code you received:</string>
|
||||
<string name="otp">Code</string>
|
||||
<string name="otp_example">12345</string>
|
||||
<string name="do_login">Login</string>
|
||||
</resources>
|
Loading…
Reference in New Issue