admin/honeyDueKMP
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Update login and password reset UI across iOS and Android

Browse Source 
- Add email/username login support
  - Android: Update LoginScreen with email keyboard type
  - iOS: Update LoginView with email keyboard support

- Refactor iOS password reset screens to use native SwiftUI components
  - Convert ForgotPasswordView to use Form with Sections
  - Convert VerifyResetCodeView to use Form with Sections
  - Convert ResetPasswordView to use Form with Sections
  - Use Label components for error/success messages
  - Add navigation titles and improve iOS-native appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Trey t
2025-11-09 18:41:47 -06:00
parent fdcc2a2e16
commit 99228d03b5
5 changed files with 340 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
composeApp/src/commonMain/kotlin/com/example/mycrib/ui/screens/LoginScreen.kt
View File

@@ -7,10 +7,13 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.* import androidx.compose.material.icons.filled.*
import androidx.compose.material3.* import androidx.compose.material3.*
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@@ -84,13 +87,17 @@ fun LoginScreen(
OutlinedTextField( OutlinedTextField(
value = username, value = username,
onValueChange = { username = it }, onValueChange = { username = it },
label = { Text("Username") }, label = { Text("Username or Email") },
leadingIcon = { leadingIcon = {
Icon(Icons.Default.Person, contentDescription = null) Icon(Icons.Default.Person, contentDescription = null)
}, },
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
singleLine = true, singleLine = true,
shape = RoundedCornerShape(12.dp) shape = RoundedCornerShape(12.dp),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
imeAction = ImeAction.Next
)
) )
OutlinedTextField( OutlinedTextField(

3
iosApp/iosApp/Login/LoginView.swift
View File

@@ -41,9 +41,10 @@ struct LoginView: View {
.listRowBackground(Color.clear) .listRowBackground(Color.clear)
Section { Section {
TextField("Username", text: $viewModel.username) TextField("Username or Email", text: $viewModel.username)
.textInputAutocapitalization(.never) .textInputAutocapitalization(.never)
.autocorrectionDisabled() .autocorrectionDisabled()
.keyboardType(.emailAddress)
.focused($focusedField, equals: .username) .focused($focusedField, equals: .username)
.submitLabel(.next) .submitLabel(.next)
.onSubmit { .onSubmit {

120
iosApp/iosApp/PasswordReset/ForgotPasswordView.swift
View File

@@ -7,45 +7,35 @@ struct ForgotPasswordView: View {
var body: some View { var body: some View {
NavigationView { NavigationView {
ZStack { Form {
Color(.systemGroupedBackground) // Header Section
.ignoresSafeArea() Section {
ScrollView {
VStack(spacing: 24) {
Spacer().frame(height: 20)
// Header
VStack(spacing: 12) { VStack(spacing: 12) {
Image(systemName: "key.fill") Image(systemName: "key.fill")
.font(.system(size: 60)) .font(.system(size: 60))
.foregroundStyle(.blue.gradient) .foregroundStyle(.blue.gradient)
.padding(.bottom, 8) .padding(.vertical)
Text("Forgot Password?") Text("Forgot Password?")
.font(.title) .font(.title2)
.fontWeight(.bold) .fontWeight(.bold)
Text("Enter your email address and we'll send you a code to reset your password") Text("Enter your email address and we'll send you a verification code")
.font(.subheadline) .font(.subheadline)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.padding(.horizontal)
} }
.frame(maxWidth: .infinity)
.padding(.vertical)
}
.listRowBackground(Color.clear)
// Email Input // Email Input Section
VStack(alignment: .leading, spacing: 12) { Section {
Text("Email Address") TextField("Email Address", text: $viewModel.email)
.font(.headline)
.padding(.horizontal)
TextField("Enter your email", text: $viewModel.email)
.textInputAutocapitalization(.never) .textInputAutocapitalization(.never)
.autocorrectionDisabled() .autocorrectionDisabled()
.keyboardType(.emailAddress) .keyboardType(.emailAddress)
.textFieldStyle(.roundedBorder)
.frame(height: 44)
.padding(.horizontal)
.focused($isEmailFocused) .focused($isEmailFocused)
.submitLabel(.go) .submitLabel(.go)
.onSubmit { .onSubmit {
@@ -54,103 +44,69 @@ struct ForgotPasswordView: View {
.onChange(of: viewModel.email) { _, _ in .onChange(of: viewModel.email) { _, _ in
viewModel.clearError() viewModel.clearError()
} }
} header: {
Text("Email")
} footer: {
Text("We'll send a 6-digit verification code to this address") Text("We'll send a 6-digit verification code to this address")
.font(.caption)
.foregroundColor(.secondary)
.padding(.horizontal)
} }
// Error Message // Error/Success Messages
if let errorMessage = viewModel.errorMessage { if let errorMessage = viewModel.errorMessage {
HStack(spacing: 12) { Section {
Image(systemName: "exclamationmark.triangle.fill") Label {
.foregroundColor(.red)
Text(errorMessage) Text(errorMessage)
.foregroundColor(.red) .foregroundColor(.red)
.font(.subheadline) } icon: {
Image(systemName: "exclamationmark.triangle.fill")
.foregroundColor(.red)
}
} }
.padding()
.background(Color.red.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Success Message
if let successMessage = viewModel.successMessage { if let successMessage = viewModel.successMessage {
HStack(spacing: 12) { Section {
Image(systemName: "checkmark.circle.fill") Label {
.foregroundColor(.green)
Text(successMessage) Text(successMessage)
.foregroundColor(.green) .foregroundColor(.green)
.font(.subheadline) } icon: {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.green)
}
} }
.padding()
.background(Color.green.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Send Code Button // Send Code Button
Section {
Button(action: { Button(action: {
viewModel.requestPasswordReset() viewModel.requestPasswordReset()
}) { }) {
HStack { HStack {
Spacer()
if viewModel.isLoading { if viewModel.isLoading {
ProgressView() ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
} else { } else {
Image(systemName: "envelope.fill") Label("Send Reset Code", systemImage: "envelope.fill")
Text("Send Reset Code")
.fontWeight(.semibold) .fontWeight(.semibold)
} }
Spacer()
} }
.frame(maxWidth: .infinity)
.frame(height: 50)
.background(
!viewModel.email.isEmpty && !viewModel.isLoading
? Color.blue
: Color.gray.opacity(0.3)
)
.foregroundColor(.white)
.cornerRadius(12)
} }
.disabled(viewModel.email.isEmpty || viewModel.isLoading) .disabled(viewModel.email.isEmpty || viewModel.isLoading)
.padding(.horizontal)
Spacer().frame(height: 20)
// Help Text
Text("Remember your password?")
.font(.subheadline)
.foregroundColor(.secondary)
Button(action: { Button(action: {
dismiss() dismiss()
}) { }) {
HStack {
Spacer()
Text("Back to Login") Text("Back to Login")
.font(.subheadline) .foregroundColor(.secondary)
.fontWeight(.semibold) Spacer()
} }
} }
} }
} }
.navigationTitle("Reset Password")
.navigationBarTitleDisplayMode(.inline) .navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button(action: {
dismiss()
}) {
HStack(spacing: 4) {
Image(systemName: "chevron.left")
.font(.system(size: 16))
Text("Back")
.font(.subheadline)
}
}
}
}
.onAppear { .onAppear {
isEmailFocused = true isEmailFocused = true
} }

116
iosApp/iosApp/PasswordReset/ResetPasswordView.swift
View File

@@ -13,39 +13,33 @@ struct ResetPasswordView: View {
} }
var body: some View { var body: some View {
ZStack { NavigationView {
Color(.systemGroupedBackground) Form {
.ignoresSafeArea() // Header Section
Section {
ScrollView {
VStack(spacing: 24) {
Spacer().frame(height: 20)
// Header
VStack(spacing: 12) { VStack(spacing: 12) {
Image(systemName: "lock.rotation") Image(systemName: "lock.rotation")
.font(.system(size: 60)) .font(.system(size: 60))
.foregroundStyle(.blue.gradient) .foregroundStyle(.blue.gradient)
.padding(.bottom, 8) .padding(.vertical)
Text("Set New Password") Text("Set New Password")
.font(.title) .font(.title2)
.fontWeight(.bold) .fontWeight(.bold)
Text("Create a strong password to secure your account") Text("Create a strong password to secure your account")
.font(.subheadline) .font(.subheadline)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.padding(.horizontal)
} }
.frame(maxWidth: .infinity)
.padding(.vertical)
}
.listRowBackground(Color.clear)
// Password Requirements // Password Requirements
GroupBox { Section {
VStack(alignment: .leading, spacing: 8) { VStack(alignment: .leading, spacing: 8) {
Text("Password Requirements")
.font(.subheadline)
.fontWeight(.semibold)
HStack(spacing: 8) { HStack(spacing: 8) {
Image(systemName: viewModel.newPassword.count >= 8 ? "checkmark.circle.fill" : "circle") Image(systemName: viewModel.newPassword.count >= 8 ? "checkmark.circle.fill" : "circle")
.foregroundColor(viewModel.newPassword.count >= 8 ? .green : .secondary) .foregroundColor(viewModel.newPassword.count >= 8 ? .green : .secondary)
@@ -74,16 +68,12 @@ struct ResetPasswordView: View {
.font(.caption) .font(.caption)
} }
} }
.padding(.vertical, 4) } header: {
Text("Password Requirements")
} }
.padding(.horizontal)
// New Password Input // New Password Input
VStack(alignment: .leading, spacing: 12) { Section {
Text("New Password")
.font(.headline)
.padding(.horizontal)
HStack { HStack {
if isNewPasswordVisible { if isNewPasswordVisible {
TextField("Enter new password", text: $viewModel.newPassword) TextField("Enter new password", text: $viewModel.newPassword)
@@ -111,20 +101,15 @@ struct ResetPasswordView: View {
} }
.buttonStyle(.plain) .buttonStyle(.plain)
} }
.textFieldStyle(.roundedBorder)
.frame(height: 44)
.padding(.horizontal)
.onChange(of: viewModel.newPassword) { _, _ in .onChange(of: viewModel.newPassword) { _, _ in
viewModel.clearError() viewModel.clearError()
} }
} header: {
Text("New Password")
} }
// Confirm Password Input // Confirm Password Input
VStack(alignment: .leading, spacing: 12) { Section {
Text("Confirm Password")
.font(.headline)
.padding(.horizontal)
HStack { HStack {
if isConfirmPasswordVisible { if isConfirmPasswordVisible {
TextField("Re-enter new password", text: $viewModel.confirmPassword) TextField("Re-enter new password", text: $viewModel.confirmPassword)
@@ -152,71 +137,56 @@ struct ResetPasswordView: View {
} }
.buttonStyle(.plain) .buttonStyle(.plain)
} }
.textFieldStyle(.roundedBorder)
.frame(height: 44)
.padding(.horizontal)
.onChange(of: viewModel.confirmPassword) { _, _ in .onChange(of: viewModel.confirmPassword) { _, _ in
viewModel.clearError() viewModel.clearError()
} }
} header: {
Text("Confirm Password")
} }
// Error Message // Error/Success Messages
if let errorMessage = viewModel.errorMessage { if let errorMessage = viewModel.errorMessage {
HStack(spacing: 12) { Section {
Image(systemName: "exclamationmark.triangle.fill") Label {
.foregroundColor(.red)
Text(errorMessage) Text(errorMessage)
.foregroundColor(.red) .foregroundColor(.red)
.font(.subheadline) } icon: {
Image(systemName: "exclamationmark.triangle.fill")
.foregroundColor(.red)
}
} }
.padding()
.background(Color.red.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Success Message
if let successMessage = viewModel.successMessage { if let successMessage = viewModel.successMessage {
HStack(spacing: 12) { Section {
Image(systemName: "checkmark.circle.fill") Label {
.foregroundColor(.green)
Text(successMessage) Text(successMessage)
.foregroundColor(.green) .foregroundColor(.green)
.font(.subheadline)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
} icon: {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.green)
}
} }
.padding()
.background(Color.green.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Reset Password Button // Reset Password Button
Section {
Button(action: { Button(action: {
viewModel.resetPassword() viewModel.resetPassword()
}) { }) {
HStack { HStack {
Spacer()
if viewModel.isLoading { if viewModel.isLoading {
ProgressView() ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
} else { } else {
Image(systemName: "lock.shield.fill") Label("Reset Password", systemImage: "lock.shield.fill")
Text("Reset Password")
.fontWeight(.semibold) .fontWeight(.semibold)
} }
Spacer()
} }
.frame(maxWidth: .infinity)
.frame(height: 50)
.background(
isFormValid && !viewModel.isLoading
? Color.blue
: Color.gray.opacity(0.3)
)
.foregroundColor(.white)
.cornerRadius(12)
} }
.disabled(!isFormValid || viewModel.isLoading) .disabled(!isFormValid || viewModel.isLoading)
.padding(.horizontal)
// Return to Login Button (shown after success) // Return to Login Button (shown after success)
if viewModel.currentStep == .success { if viewModel.currentStep == .success {
@@ -224,17 +194,18 @@ struct ResetPasswordView: View {
viewModel.reset() viewModel.reset()
onSuccess() onSuccess()
}) { }) {
HStack {
Spacer()
Text("Return to Login") Text("Return to Login")
.font(.subheadline)
.fontWeight(.semibold) .fontWeight(.semibold)
} Spacer()
.padding(.top, 8)
}
Spacer().frame(height: 20)
} }
} }
} }
}
}
.navigationTitle("Reset Password")
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true) .navigationBarBackButtonHidden(true)
.toolbar { .toolbar {
ToolbarItem(placement: .navigationBarLeading) { ToolbarItem(placement: .navigationBarLeading) {
@@ -262,6 +233,7 @@ struct ResetPasswordView: View {
focusedField = .newPassword focusedField = .newPassword
} }
} }
}
// Computed Properties // Computed Properties
private var hasLetter: Bool { private var hasLetter: Bool {

116
iosApp/iosApp/PasswordReset/VerifyResetCodeView.swift
View File

@@ -6,23 +6,18 @@ struct VerifyResetCodeView: View {
@Environment(\.dismiss) var dismiss @Environment(\.dismiss) var dismiss
var body: some View { var body: some View {
ZStack { NavigationView {
Color(.systemGroupedBackground) Form {
.ignoresSafeArea() // Header Section
Section {
ScrollView {
VStack(spacing: 24) {
Spacer().frame(height: 20)
// Header
VStack(spacing: 12) { VStack(spacing: 12) {
Image(systemName: "envelope.badge.fill") Image(systemName: "envelope.badge.fill")
.font(.system(size: 60)) .font(.system(size: 60))
.foregroundStyle(.blue.gradient) .foregroundStyle(.blue.gradient)
.padding(.bottom, 8) .padding(.vertical)
Text("Check Your Email") Text("Check Your Email")
.font(.title) .font(.title2)
.fontWeight(.bold) .fontWeight(.bold)
Text("We sent a 6-digit code to") Text("We sent a 6-digit code to")
@@ -33,38 +28,29 @@ struct VerifyResetCodeView: View {
.font(.subheadline) .font(.subheadline)
.fontWeight(.semibold) .fontWeight(.semibold)
.foregroundColor(.primary) .foregroundColor(.primary)
.padding(.horizontal)
} }
.frame(maxWidth: .infinity)
.padding(.vertical)
}
.listRowBackground(Color.clear)
// Info Card // Info Section
GroupBox { Section {
HStack(spacing: 12) { Label {
Text("Code expires in 15 minutes")
.fontWeight(.semibold)
} icon: {
Image(systemName: "clock.fill") Image(systemName: "clock.fill")
.foregroundColor(.orange) .foregroundColor(.orange)
.font(.title2)
Text("Code expires in 15 minutes")
.font(.subheadline)
.foregroundColor(.primary)
.fontWeight(.semibold)
} }
.padding(.vertical, 4)
} }
.padding(.horizontal)
// Code Input
VStack(alignment: .leading, spacing: 12) {
Text("Verification Code")
.font(.headline)
.padding(.horizontal)
// Code Input Section
Section {
TextField("000000", text: $viewModel.code) TextField("000000", text: $viewModel.code)
.font(.system(size: 32, weight: .semibold, design: .rounded)) .font(.system(size: 32, weight: .semibold, design: .rounded))
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.keyboardType(.numberPad) .keyboardType(.numberPad)
.textFieldStyle(.roundedBorder)
.frame(height: 60)
.padding(.horizontal)
.focused($isCodeFocused) .focused($isCodeFocused)
.onChange(of: viewModel.code) { _, newValue in .onChange(of: viewModel.code) { _, newValue in
// Limit to 6 digits // Limit to 6 digits
@@ -75,73 +61,58 @@ struct VerifyResetCodeView: View {
viewModel.code = newValue.filter { $0.isNumber } viewModel.code = newValue.filter { $0.isNumber }
viewModel.clearError() viewModel.clearError()
} }
} header: {
Text("Verification Code")
} footer: {
Text("Enter the 6-digit code from your email") Text("Enter the 6-digit code from your email")
.font(.caption)
.foregroundColor(.secondary)
.padding(.horizontal)
} }
// Error Message // Error/Success Messages
if let errorMessage = viewModel.errorMessage { if let errorMessage = viewModel.errorMessage {
HStack(spacing: 12) { Section {
Image(systemName: "exclamationmark.triangle.fill") Label {
.foregroundColor(.red)
Text(errorMessage) Text(errorMessage)
.foregroundColor(.red) .foregroundColor(.red)
.font(.subheadline) } icon: {
Image(systemName: "exclamationmark.triangle.fill")
.foregroundColor(.red)
}
} }
.padding()
.background(Color.red.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Success Message
if let successMessage = viewModel.successMessage { if let successMessage = viewModel.successMessage {
HStack(spacing: 12) { Section {
Image(systemName: "checkmark.circle.fill") Label {
.foregroundColor(.green)
Text(successMessage) Text(successMessage)
.foregroundColor(.green) .foregroundColor(.green)
.font(.subheadline) } icon: {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.green)
}
} }
.padding()
.background(Color.green.opacity(0.1))
.cornerRadius(12)
.padding(.horizontal)
} }
// Verify Button // Verify Button
Section {
Button(action: { Button(action: {
viewModel.verifyResetCode() viewModel.verifyResetCode()
}) { }) {
HStack { HStack {
Spacer()
if viewModel.isLoading { if viewModel.isLoading {
ProgressView() ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
} else { } else {
Image(systemName: "checkmark.shield.fill") Label("Verify Code", systemImage: "checkmark.shield.fill")
Text("Verify Code")
.fontWeight(.semibold) .fontWeight(.semibold)
} }
Spacer()
} }
.frame(maxWidth: .infinity)
.frame(height: 50)
.background(
viewModel.code.count == 6 && !viewModel.isLoading
? Color.blue
: Color.gray.opacity(0.3)
)
.foregroundColor(.white)
.cornerRadius(12)
} }
.disabled(viewModel.code.count != 6 || viewModel.isLoading) .disabled(viewModel.code.count != 6 || viewModel.isLoading)
.padding(.horizontal) }
Spacer().frame(height: 20)
// Help Section // Help Section
Section {
VStack(spacing: 12) { VStack(spacing: 12) {
Text("Didn't receive the code?") Text("Didn't receive the code?")
.font(.subheadline) .font(.subheadline)
@@ -162,11 +133,13 @@ struct VerifyResetCodeView: View {
.font(.caption) .font(.caption)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.padding(.horizontal, 32)
}
} }
.frame(maxWidth: .infinity)
} }
.listRowBackground(Color.clear)
} }
.navigationTitle("Verify Code")
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true) .navigationBarBackButtonHidden(true)
.toolbar { .toolbar {
ToolbarItem(placement: .navigationBarLeading) { ToolbarItem(placement: .navigationBarLeading) {
@@ -186,6 +159,7 @@ struct VerifyResetCodeView: View {
isCodeFocused = true isCodeFocused = true
} }
} }
}
} }
#Preview { #Preview {