更新登录页面样式

- 更新登录页面文案为字符串资源
- 新增邮箱和密码校验
- 更新按钮样式
- 调整页面布局
This commit is contained in:
2024-09-06 09:04:14 +08:00
parent 633e9a3945
commit 9cb847aa7c
4 changed files with 115 additions and 80 deletions

View File

@@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.aiosman.riderpro.ui.modifiers.noRippleClickable
@@ -41,7 +42,7 @@ fun ActionButton(
verticalAlignment = Alignment.CenterVertically
) {
leading?.invoke()
Text(text, fontSize = 16.sp, color = color, fontWeight = FontWeight.W400)
Text(text, fontSize = 14.sp, color = color, fontWeight = FontWeight.W600, fontStyle = FontStyle.Italic)
}
}

View File

@@ -16,8 +16,10 @@ import androidx.compose.foundation.layout.width
import androidx.compose.material3.Checkbox
import androidx.compose.material3.CheckboxDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
@@ -28,7 +30,9 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.credentials.CredentialManager
import com.aiosman.riderpro.AppStore
import com.aiosman.riderpro.LocalNavController
@@ -57,17 +61,12 @@ fun UserAuthScreen() {
val scope = rememberCoroutineScope()
val navController = LocalNavController.current
val context = LocalContext.current
val credentialManager = CredentialManager.create(context)
var emailError by remember { mutableStateOf<String?>(null) }
var passwordError by remember { mutableStateOf<String?>(null) }
fun validateForm(): Boolean {
if (email.isEmpty()) {
Toast.makeText(context, "Email is required", Toast.LENGTH_SHORT).show()
return false
}
if (password.isEmpty()) {
Toast.makeText(context, "Password is required", Toast.LENGTH_SHORT).show()
return false
}
return true
emailError = if (email.isEmpty()) context.getString(R.string.text_error_email_required) else null
passwordError = if (password.isEmpty()) context.getString(R.string.text_error_password_required) else null
return emailError == null && passwordError == null
}
fun onLogin() {
@@ -137,84 +136,97 @@ fun UserAuthScreen() {
.fillMaxWidth()
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
) {
NoticeScreenHeader("LOGIN", moreIcon = false)
NoticeScreenHeader(stringResource(R.string.login_upper), moreIcon = false)
}
Spacer(modifier = Modifier.padding(68.dp))
TextInputField(
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.padding(horizontal = 24.dp),
text = email,
onValueChange = {
email = it
},
label = "What's your email?",
hint = "Enter your email"
)
Spacer(modifier = Modifier.padding(16.dp))
TextInputField(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp),
text = password,
onValueChange = {
password = it
},
password = true,
label = "What's your password?",
hint = "Enter your password"
)
Spacer(modifier = Modifier.height(32.dp))
Row(
verticalAlignment = Alignment.CenterVertically
horizontalAlignment = Alignment.CenterHorizontally,
) {
Checkbox(
checked = rememberMe,
onCheckedChange = {
rememberMe = it
},
modifier = Modifier.padding(start = 24.dp),
colors = CheckboxDefaults.colors(
checkedColor = Color.Black
),
)
Text("Remember me", modifier = Modifier.padding(start = 4.dp))
Spacer(modifier = Modifier.weight(1f))
Text("Forgot password?", modifier = Modifier.padding(end = 24.dp))
}
Spacer(modifier = Modifier.height(64.dp))
ActionButton(
modifier = Modifier
.width(345.dp)
.height(48.dp),
text = "LET'S RIDE".uppercase(),
backgroundImage = R.mipmap.rider_pro_signup_red_bg
) {
onLogin()
}
Spacer(modifier = Modifier.height(121.dp))
Text("or login with", color = Color(0xFF999999))
Spacer(modifier = Modifier.height(16.dp))
Row {
Box(
Spacer(modifier = Modifier.padding(48.dp))
TextInputField(
modifier = Modifier
.size(96.dp)
.padding(16.dp)
.border(2.dp, Color(0xFFEBEBEB))
.noRippleClickable {
// login with facebook
googleLogin()
}
.fillMaxWidth(),
text = email,
onValueChange = {
email = it
},
label = stringResource(R.string.login_email_label),
hint = stringResource(R.string.text_hint_email),
error = emailError
)
Spacer(modifier = Modifier.padding(16.dp))
TextInputField(
modifier = Modifier
.fillMaxWidth(),
text = password,
onValueChange = {
password = it
},
password = true,
label = stringResource(R.string.login_password_label),
hint = stringResource(R.string.text_hint_password),
error = passwordError
)
Spacer(modifier = Modifier.height(32.dp))
Row(
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.rider_pro_google),
contentDescription = "Google",
modifier = Modifier.fillMaxSize()
)
CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
Checkbox(
checked = rememberMe,
onCheckedChange = {
rememberMe = it
},
colors = CheckboxDefaults.colors(
checkedColor = Color.Black
),
)
Text(
stringResource(R.string.remember_me),
modifier = Modifier.padding(start = 8.dp),
fontSize = 12.sp
)
Spacer(modifier = Modifier.weight(1f))
Text(stringResource(R.string.forgot_password), fontSize = 12.sp)
}
}
Spacer(modifier = Modifier.height(64.dp))
ActionButton(
modifier = Modifier
.width(345.dp)
.height(48.dp),
text = stringResource(R.string.lets_ride_upper),
backgroundImage = R.mipmap.rider_pro_signup_red_bg
) {
onLogin()
}
Spacer(modifier = Modifier.height(48.dp))
Text(stringResource(R.string.or_login_with), color = Color(0xFF999999))
Spacer(modifier = Modifier.height(16.dp))
Row {
Box(
modifier = Modifier
.size(96.dp)
.padding(16.dp)
.border(2.dp, Color(0xFFEBEBEB))
.noRippleClickable {
// login with facebook
googleLogin()
}
) {
Image(
painter = painterResource(id = R.drawable.rider_pro_google),
contentDescription = "Google",
modifier = Modifier.fillMaxSize()
)
}
}
}
}
}

View File

@@ -18,4 +18,15 @@
<string name="comment_count">%d条评论</string>
<string name="post_comment_hint">说点什么</string>
<string name="follow_upper">关注</string>
<string name="login_upper">登录</string>
<string name="lets_ride_upper">确认</string>
<string name="or_login_with">其他账号登录</string>
<string name="remember_me">记住我</string>
<string name="forgot_password">忘记密码</string>
<string name="login_password_label">密码</string>
<string name="login_email_label">邮箱</string>
<string name="text_error_email_required">邮箱是必填项</string>
<string name="text_error_password_required">密码是必填项</string>
<string name="text_hint_email">输入邮箱</string>
<string name="text_hint_password">输入密码</string>
</resources>

View File

@@ -17,4 +17,15 @@
<string name="comment_count">%d Comments</string>
<string name="post_comment_hint">Say something...</string>
<string name="follow_upper">FOLLOW</string>
<string name="login_upper">LOGIN</string>
<string name="lets_ride_upper">LET\'S RIDE</string>
<string name="or_login_with">or login with</string>
<string name="remember_me">Remember me</string>
<string name="forgot_password">Forgot password?</string>
<string name="login_password_label">What\'s your password</string>
<string name="login_email_label">What\'s your email</string>
<string name="text_error_email_required">Email is required</string>
<string name="text_error_password_required">Password is required</string>
<string name="text_hint_email">Enter your email</string>
<string name="text_hint_password">Enter your password</string>
</resources>