feat: 更新EMailLoginView和IDLoginView以增强用户体验和界面一致性
- 将LocalizedString替换为硬编码字符串，提升代码可读性。 - 重构输入框组件，使用CustomInputField以统一输入框样式和逻辑。 - 更新按钮文本和样式，确保一致性和视觉效果。 - 调整布局和间距，优化用户界面体验。 - 增加验证码输入框的获取按钮功能，提升交互性。
This commit is contained in:
edwinQQQ
@@ -25,7 +25,7 @@ struct EMailLoginView: View {
|
||||
if codeCountdown > 0 {
|
||||
return "\(codeCountdown)s"
|
||||
} else {
|
||||
return LocalizedString("email_login.get_code", comment: "")
|
||||
return "Get"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,117 +151,125 @@ private struct LoginContentView: View {
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.top, 8)
|
||||
Spacer().frame(height: 60)
|
||||
Text(LocalizedString("email_login.title", comment: ""))
|
||||
.font(.system(size: 28, weight: .medium))
|
||||
Text("Email Login")
|
||||
.font(.system(size: 28, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
.padding(.bottom, 80)
|
||||
.padding(.bottom, 60)
|
||||
|
||||
VStack(spacing: 20) {
|
||||
VStack(spacing: 24) {
|
||||
// 邮箱输入框
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Image("email icon")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 20, height: 20)
|
||||
Text(LocalizedString("email_login.email", comment: ""))
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
TextField("", text: $email)
|
||||
.textFieldStyle(PlainTextFieldStyle())
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.white.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
.focused($focusedField, equals: .email)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocapitalization(.none)
|
||||
}
|
||||
emailInputField
|
||||
|
||||
// 验证码输入框
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Image("id icon")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 20, height: 20)
|
||||
Text(LocalizedString("email_login.verification_code", comment: ""))
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
HStack {
|
||||
TextField("", text: $verificationCode)
|
||||
.textFieldStyle(PlainTextFieldStyle())
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.white.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
.focused($focusedField, equals: .verificationCode)
|
||||
.keyboardType(.numberPad)
|
||||
|
||||
Button(action: {
|
||||
store.send(.getVerificationCodeTapped)
|
||||
}) {
|
||||
Text(getCodeButtonText)
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(isCodeButtonEnabled ? Color.blue : Color.gray)
|
||||
.cornerRadius(8)
|
||||
}
|
||||
.disabled(!isCodeButtonEnabled)
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
Button(action: {
|
||||
store.send(.loginButtonTapped(email: email, verificationCode: verificationCode))
|
||||
}) {
|
||||
if store.isLoading {
|
||||
ProgressView()
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
.scaleEffect(1.2)
|
||||
} else {
|
||||
Text(LocalizedString("email_login.login", comment: ""))
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 16)
|
||||
.background(isLoginButtonEnabled ? Color.blue : Color.gray)
|
||||
.cornerRadius(8)
|
||||
.disabled(!isLoginButtonEnabled)
|
||||
.padding(.top, 20)
|
||||
|
||||
// 错误信息显示
|
||||
if let errorMessage = store.errorMessage {
|
||||
Text(errorMessage)
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.red)
|
||||
.padding(.top, 16)
|
||||
.padding(.horizontal, 32)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
// 验证码输入框（带获取按钮）
|
||||
verificationCodeInputField
|
||||
}
|
||||
.padding(.horizontal, 32)
|
||||
|
||||
// 添加API Loading和错误处理视图
|
||||
APILoadingEffectView()
|
||||
Spacer()
|
||||
.frame(height: 80)
|
||||
|
||||
// 登录按钮
|
||||
Button(action: {
|
||||
store.send(.loginButtonTapped(email: email, verificationCode: verificationCode))
|
||||
}) {
|
||||
if store.isLoading {
|
||||
ProgressView()
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
.scaleEffect(1.2)
|
||||
} else {
|
||||
Text("Login")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 16)
|
||||
.background(isLoginButtonEnabled ? Color(red: 0.5, green: 0.3, blue: 0.8) : Color.gray)
|
||||
.cornerRadius(8)
|
||||
.disabled(!isLoginButtonEnabled)
|
||||
.padding(.horizontal, 32)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigationBarHidden(true)
|
||||
}
|
||||
|
||||
// MARK: - UI Components
|
||||
|
||||
private var emailInputField: some View {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.fill(Color.white.opacity(0.1))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.stroke(Color.white.opacity(0.3), lineWidth: 1)
|
||||
)
|
||||
.frame(height: 56)
|
||||
|
||||
TextField("", text: $email)
|
||||
.placeholder(when: email.isEmpty) {
|
||||
Text("Please enter email")
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
.foregroundColor(.white)
|
||||
.font(.system(size: 16))
|
||||
.padding(.horizontal, 24)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocapitalization(.none)
|
||||
.focused($focusedField, equals: .email)
|
||||
}
|
||||
}
|
||||
|
||||
private var verificationCodeInputField: some View {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.fill(Color.white.opacity(0.1))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.stroke(Color.white.opacity(0.3), lineWidth: 1)
|
||||
)
|
||||
.frame(height: 56)
|
||||
|
||||
HStack {
|
||||
TextField("", text: $verificationCode)
|
||||
.placeholder(when: verificationCode.isEmpty) {
|
||||
Text("Please enter verification code")
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
.foregroundColor(.white)
|
||||
.font(.system(size: 16))
|
||||
.keyboardType(.numberPad)
|
||||
.focused($focusedField, equals: .verificationCode)
|
||||
|
||||
// 获取验证码按钮
|
||||
Button(action: {
|
||||
store.send(.getVerificationCodeTapped)
|
||||
}) {
|
||||
ZStack {
|
||||
if store.isCodeLoading {
|
||||
ProgressView()
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
.scaleEffect(0.7)
|
||||
} else {
|
||||
Text(getCodeButtonText)
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
}
|
||||
.frame(width: 60, height: 36)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 15)
|
||||
.fill(Color.white.opacity(isCodeButtonEnabled ? 0.2 : 0.1))
|
||||
)
|
||||
}
|
||||
.disabled(!isCodeButtonEnabled || store.isCodeLoading)
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//#Preview {
|
||||
|
||||
@@ -31,85 +31,125 @@ struct IDLoginHeaderView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 输入框组件
|
||||
struct IDLoginInputFieldView: View {
|
||||
let iconName: String
|
||||
let title: String
|
||||
let text: Binding<String>
|
||||
let onChange: (String) -> Void
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Image(iconName)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 20, height: 20)
|
||||
Text(title)
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
|
||||
TextField("", text: text)
|
||||
.textFieldStyle(PlainTextFieldStyle())
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.white.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
.onChange(of: text.wrappedValue) { newValue in
|
||||
onChange(newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
// MARK: - 通用输入框组件
|
||||
enum InputFieldType {
|
||||
case text
|
||||
case number
|
||||
case password
|
||||
case verificationCode
|
||||
}
|
||||
|
||||
// MARK: - 密码输入框组件
|
||||
struct IDLoginPasswordFieldView: View {
|
||||
let password: Binding<String>
|
||||
let isPasswordVisible: Binding<Bool>
|
||||
let onChange: (String) -> Void
|
||||
struct CustomInputField: View {
|
||||
let type: InputFieldType
|
||||
let placeholder: String
|
||||
let text: Binding<String>
|
||||
let isPasswordVisible: Binding<Bool>?
|
||||
let onGetCode: (() -> Void)?
|
||||
let isCodeButtonEnabled: Bool
|
||||
let isCodeLoading: Bool
|
||||
let getCodeButtonText: String
|
||||
|
||||
init(
|
||||
type: InputFieldType,
|
||||
placeholder: String,
|
||||
text: Binding<String>,
|
||||
isPasswordVisible: Binding<Bool>? = nil,
|
||||
onGetCode: (() -> Void)? = nil,
|
||||
isCodeButtonEnabled: Bool = false,
|
||||
isCodeLoading: Bool = false,
|
||||
getCodeButtonText: String = ""
|
||||
) {
|
||||
self.type = type
|
||||
self.placeholder = placeholder
|
||||
self.text = text
|
||||
self.isPasswordVisible = isPasswordVisible
|
||||
self.onGetCode = onGetCode
|
||||
self.isCodeButtonEnabled = isCodeButtonEnabled
|
||||
self.isCodeLoading = isCodeLoading
|
||||
self.getCodeButtonText = getCodeButtonText
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Image("email icon")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 20, height: 20)
|
||||
Text(LocalizedString("id_login.password", comment: ""))
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.fill(Color.white.opacity(0.1))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 25)
|
||||
.stroke(Color.white.opacity(0.3), lineWidth: 1)
|
||||
)
|
||||
.frame(height: 56)
|
||||
|
||||
HStack {
|
||||
// 输入框
|
||||
Group {
|
||||
if isPasswordVisible.wrappedValue {
|
||||
TextField("", text: password)
|
||||
.textFieldStyle(PlainTextFieldStyle())
|
||||
} else {
|
||||
SecureField("", text: password)
|
||||
.textFieldStyle(PlainTextFieldStyle())
|
||||
switch type {
|
||||
case .text, .number:
|
||||
TextField("", text: text)
|
||||
.placeholder(when: text.wrappedValue.isEmpty) {
|
||||
Text(placeholder)
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
.keyboardType(type == .number ? .numberPad : .default)
|
||||
case .password:
|
||||
if let isPasswordVisible = isPasswordVisible {
|
||||
if isPasswordVisible.wrappedValue {
|
||||
TextField("", text: text)
|
||||
.placeholder(when: text.wrappedValue.isEmpty) {
|
||||
Text(placeholder)
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
} else {
|
||||
SecureField("", text: text)
|
||||
.placeholder(when: text.wrappedValue.isEmpty) {
|
||||
Text(placeholder)
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
}
|
||||
}
|
||||
case .verificationCode:
|
||||
TextField("", text: text)
|
||||
.placeholder(when: text.wrappedValue.isEmpty) {
|
||||
Text(placeholder)
|
||||
.foregroundColor(.white.opacity(0.6))
|
||||
}
|
||||
.keyboardType(.numberPad)
|
||||
}
|
||||
}
|
||||
.foregroundColor(.white)
|
||||
.font(.system(size: 16))
|
||||
|
||||
Button(action: {
|
||||
isPasswordVisible.wrappedValue.toggle()
|
||||
}) {
|
||||
Image(systemName: isPasswordVisible.wrappedValue ? "eye.slash" : "eye")
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
// 右侧按钮
|
||||
if type == .password, let isPasswordVisible = isPasswordVisible {
|
||||
Button(action: {
|
||||
isPasswordVisible.wrappedValue.toggle()
|
||||
}) {
|
||||
Image(systemName: isPasswordVisible.wrappedValue ? "eye.slash" : "eye")
|
||||
.foregroundColor(.white.opacity(0.7))
|
||||
.font(.system(size: 18))
|
||||
}
|
||||
} else if type == .verificationCode, let onGetCode = onGetCode {
|
||||
Button(action: onGetCode) {
|
||||
ZStack {
|
||||
if isCodeLoading {
|
||||
ProgressView()
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
.scaleEffect(0.7)
|
||||
} else {
|
||||
Text(getCodeButtonText)
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
}
|
||||
.frame(width: 60, height: 36)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 15)
|
||||
.fill(Color.white.opacity(isCodeButtonEnabled ? 0.2 : 0.1))
|
||||
)
|
||||
}
|
||||
.disabled(!isCodeButtonEnabled || isCodeLoading)
|
||||
}
|
||||
}
|
||||
.font(.system(size: 16))
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.white.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
.onChange(of: password.wrappedValue) { newValue in
|
||||
onChange(newValue)
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -128,7 +168,7 @@ struct IDLoginButtonView: View {
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
.scaleEffect(1.2)
|
||||
} else {
|
||||
Text(LocalizedString("id_login.login", comment: ""))
|
||||
Text("Login")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
@@ -136,25 +176,9 @@ struct IDLoginButtonView: View {
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 16)
|
||||
.background(isEnabled ? Color.blue : Color.gray)
|
||||
.background(isEnabled ? Color(red: 0.5, green: 0.3, blue: 0.8) : Color.gray)
|
||||
.cornerRadius(8)
|
||||
.disabled(!isEnabled)
|
||||
.padding(.top, 20)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 错误信息组件
|
||||
struct IDLoginErrorView: View {
|
||||
let errorMessage: String?
|
||||
|
||||
var body: some View {
|
||||
if let errorMessage = errorMessage {
|
||||
Text(errorMessage)
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.red)
|
||||
.padding(.top, 16)
|
||||
.padding(.horizontal, 32)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,61 +216,58 @@ struct IDLoginView: View {
|
||||
.frame(height: 60)
|
||||
|
||||
// 标题
|
||||
Text(LocalizedString("id_login.title", comment: ""))
|
||||
.font(.system(size: 28, weight: .medium))
|
||||
Text("ID Login")
|
||||
.font(.system(size: 28, weight: .bold))
|
||||
.foregroundColor(.white)
|
||||
.padding(.bottom, 80)
|
||||
.padding(.bottom, 60)
|
||||
|
||||
// 输入框区域
|
||||
VStack(spacing: 20) {
|
||||
// 用户ID输入框
|
||||
IDLoginInputFieldView(
|
||||
iconName: "id icon",
|
||||
title: LocalizedString("id_login.user_id", comment: ""),
|
||||
text: $userID,
|
||||
onChange: { newValue in
|
||||
store.send(.userIDChanged(newValue))
|
||||
}
|
||||
VStack(spacing: 24) {
|
||||
// 用户ID输入框（只允许数字）
|
||||
CustomInputField(
|
||||
type: .number,
|
||||
placeholder: "Please enter ID",
|
||||
text: $userID
|
||||
)
|
||||
|
||||
// 密码输入框
|
||||
IDLoginPasswordFieldView(
|
||||
password: $password,
|
||||
isPasswordVisible: $isPasswordVisible,
|
||||
onChange: { newValue in
|
||||
store.send(.passwordChanged(newValue))
|
||||
}
|
||||
// 密码输入框（带眼睛按钮）
|
||||
CustomInputField(
|
||||
type: .password,
|
||||
placeholder: "Please enter password",
|
||||
text: $password,
|
||||
isPasswordVisible: $isPasswordVisible
|
||||
)
|
||||
|
||||
// 忘记密码按钮
|
||||
HStack {
|
||||
Spacer()
|
||||
Button(action: {
|
||||
showRecoverPassword = true
|
||||
}) {
|
||||
Text(LocalizedString("id_login.forgot_password", comment: ""))
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.white.opacity(0.8))
|
||||
}
|
||||
}
|
||||
|
||||
// 登录按钮
|
||||
IDLoginButtonView(
|
||||
isLoading: store.isLoading,
|
||||
isEnabled: isLoginButtonEnabled,
|
||||
onTap: {
|
||||
store.send(.loginButtonTapped(userID: userID, password: password))
|
||||
}
|
||||
)
|
||||
|
||||
// 错误信息显示
|
||||
IDLoginErrorView(errorMessage: store.errorMessage)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.horizontal, 32)
|
||||
|
||||
// API Loading视图
|
||||
APILoadingEffectView()
|
||||
Spacer()
|
||||
.frame(height: 80)
|
||||
|
||||
// 忘记密码按钮
|
||||
HStack {
|
||||
Spacer()
|
||||
Button(action: {
|
||||
showRecoverPassword = true
|
||||
}) {
|
||||
Text("Forgot Password?")
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.white.opacity(0.8))
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 32)
|
||||
.padding(.bottom, 20)
|
||||
|
||||
// 登录按钮
|
||||
IDLoginButtonView(
|
||||
isLoading: store.isLoading,
|
||||
isEnabled: isLoginButtonEnabled,
|
||||
onTap: {
|
||||
store.send(.loginButtonTapped(userID: userID, password: password))
|
||||
}
|
||||
)
|
||||
.padding(.horizontal, 32)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user