Add password reset feature for iOS and Android with deep link support
Implemented complete password reset flow with email verification and deep linking: iOS (SwiftUI): - PasswordResetViewModel: Manages 3-step flow (request, verify, reset) with deep link support - ForgotPasswordView: Email entry screen with success/error states - VerifyResetCodeView: 6-digit code verification with resend option - ResetPasswordView: Password reset with live validation and strength indicators - PasswordResetFlow: Container managing navigation between screens - Deep link handling in iOSApp.swift for mycrib://reset-password?token=xxx - Info.plist: Added CFBundleURLTypes for deep link scheme Android (Compose): - PasswordResetViewModel: StateFlow-based state management with coroutines - ForgotPasswordScreen: Material3 email entry with auto-navigation - VerifyResetCodeScreen: Code verification with Material3 design - ResetPasswordScreen: Password reset with live validation checklist - Deep link handling in MainActivity.kt and AndroidManifest.xml - Token cleanup callback to prevent reusing expired deep link tokens - Shared ViewModel scoping across all password reset screens - Improved error handling for Django validation errors Shared: - Routes: Added ForgotPasswordRoute, VerifyResetCodeRoute, ResetPasswordRoute - AuthApi: Enhanced resetPassword with Django validation error parsing - User models: Added password reset request/response models Security features: - Deep link tokens expire after use - Proper token validation on backend - Session invalidation after password change - Password strength requirements enforced 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Trey t
294
iosApp/iosApp/PasswordReset/ResetPasswordView.swift
Normal file
294
iosApp/iosApp/PasswordReset/ResetPasswordView.swift
Normal file
@@ -0,0 +1,294 @@
|
||||
import SwiftUI
|
||||
|
||||
struct ResetPasswordView: View {
|
||||
@ObservedObject var viewModel: PasswordResetViewModel
|
||||
@FocusState private var focusedField: Field?
|
||||
@State private var isNewPasswordVisible = false
|
||||
@State private var isConfirmPasswordVisible = false
|
||||
@Environment(\.dismiss) var dismiss
|
||||
var onSuccess: () -> Void
|
||||
|
||||
enum Field {
|
||||
case newPassword, confirmPassword
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color(.systemGroupedBackground)
|
||||
.ignoresSafeArea()
|
||||
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
Spacer().frame(height: 20)
|
||||
|
||||
// Header
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: "lock.rotation")
|
||||
.font(.system(size: 60))
|
||||
.foregroundStyle(.blue.gradient)
|
||||
.padding(.bottom, 8)
|
||||
|
||||
Text("Set New Password")
|
||||
.font(.title)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text("Create a strong password to secure your account")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
// Password Requirements
|
||||
GroupBox {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("Password Requirements")
|
||||
.font(.subheadline)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: viewModel.newPassword.count >= 8 ? "checkmark.circle.fill" : "circle")
|
||||
.foregroundColor(viewModel.newPassword.count >= 8 ? .green : .secondary)
|
||||
Text("At least 8 characters")
|
||||
.font(.caption)
|
||||
}
|
||||
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: hasLetter ? "checkmark.circle.fill" : "circle")
|
||||
.foregroundColor(hasLetter ? .green : .secondary)
|
||||
Text("Contains letters")
|
||||
.font(.caption)
|
||||
}
|
||||
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: hasNumber ? "checkmark.circle.fill" : "circle")
|
||||
.foregroundColor(hasNumber ? .green : .secondary)
|
||||
Text("Contains numbers")
|
||||
.font(.caption)
|
||||
}
|
||||
|
||||
HStack(spacing: 8) {
|
||||
Image(systemName: passwordsMatch ? "checkmark.circle.fill" : "circle")
|
||||
.foregroundColor(passwordsMatch ? .green : .secondary)
|
||||
Text("Passwords match")
|
||||
.font(.caption)
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 4)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
|
||||
// New Password Input
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
Text("New Password")
|
||||
.font(.headline)
|
||||
.padding(.horizontal)
|
||||
|
||||
HStack {
|
||||
if isNewPasswordVisible {
|
||||
TextField("Enter new password", text: $viewModel.newPassword)
|
||||
.textInputAutocapitalization(.never)
|
||||
.autocorrectionDisabled()
|
||||
.focused($focusedField, equals: .newPassword)
|
||||
.submitLabel(.next)
|
||||
.onSubmit {
|
||||
focusedField = .confirmPassword
|
||||
}
|
||||
} else {
|
||||
SecureField("Enter new password", text: $viewModel.newPassword)
|
||||
.focused($focusedField, equals: .newPassword)
|
||||
.submitLabel(.next)
|
||||
.onSubmit {
|
||||
focusedField = .confirmPassword
|
||||
}
|
||||
}
|
||||
|
||||
Button(action: {
|
||||
isNewPasswordVisible.toggle()
|
||||
}) {
|
||||
Image(systemName: isNewPasswordVisible ? "eye.slash.fill" : "eye.fill")
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.frame(height: 44)
|
||||
.padding(.horizontal)
|
||||
.onChange(of: viewModel.newPassword) { _, _ in
|
||||
viewModel.clearError()
|
||||
}
|
||||
}
|
||||
|
||||
// Confirm Password Input
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
Text("Confirm Password")
|
||||
.font(.headline)
|
||||
.padding(.horizontal)
|
||||
|
||||
HStack {
|
||||
if isConfirmPasswordVisible {
|
||||
TextField("Re-enter new password", text: $viewModel.confirmPassword)
|
||||
.textInputAutocapitalization(.never)
|
||||
.autocorrectionDisabled()
|
||||
.focused($focusedField, equals: .confirmPassword)
|
||||
.submitLabel(.go)
|
||||
.onSubmit {
|
||||
viewModel.resetPassword()
|
||||
}
|
||||
} else {
|
||||
SecureField("Re-enter new password", text: $viewModel.confirmPassword)
|
||||
.focused($focusedField, equals: .confirmPassword)
|
||||
.submitLabel(.go)
|
||||
.onSubmit {
|
||||
viewModel.resetPassword()
|
||||
}
|
||||
}
|
||||
|
||||
Button(action: {
|
||||
isConfirmPasswordVisible.toggle()
|
||||
}) {
|
||||
Image(systemName: isConfirmPasswordVisible ? "eye.slash.fill" : "eye.fill")
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.frame(height: 44)
|
||||
.padding(.horizontal)
|
||||
.onChange(of: viewModel.confirmPassword) { _, _ in
|
||||
viewModel.clearError()
|
||||
}
|
||||
}
|
||||
|
||||
// Error Message
|
||||
if let errorMessage = viewModel.errorMessage {
|
||||
HStack(spacing: 12) {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.foregroundColor(.red)
|
||||
Text(errorMessage)
|
||||
.foregroundColor(.red)
|
||||
.font(.subheadline)
|
||||
}
|
||||
.padding()
|
||||
.background(Color.red.opacity(0.1))
|
||||
.cornerRadius(12)
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
// Success Message
|
||||
if let successMessage = viewModel.successMessage {
|
||||
HStack(spacing: 12) {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.foregroundColor(.green)
|
||||
Text(successMessage)
|
||||
.foregroundColor(.green)
|
||||
.font(.subheadline)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.padding()
|
||||
.background(Color.green.opacity(0.1))
|
||||
.cornerRadius(12)
|
||||
.padding(.horizontal)
|
||||
}
|
||||
|
||||
// Reset Password Button
|
||||
Button(action: {
|
||||
viewModel.resetPassword()
|
||||
}) {
|
||||
HStack {
|
||||
if viewModel.isLoading {
|
||||
ProgressView()
|
||||
.progressViewStyle(CircularProgressViewStyle(tint: .white))
|
||||
} else {
|
||||
Image(systemName: "lock.shield.fill")
|
||||
Text("Reset Password")
|
||||
.fontWeight(.semibold)
|
||||
}
|
||||
}
|
||||
.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)
|
||||
.padding(.horizontal)
|
||||
|
||||
// Return to Login Button (shown after success)
|
||||
if viewModel.currentStep == .success {
|
||||
Button(action: {
|
||||
viewModel.reset()
|
||||
onSuccess()
|
||||
}) {
|
||||
Text("Return to Login")
|
||||
.font(.subheadline)
|
||||
.fontWeight(.semibold)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
}
|
||||
|
||||
Spacer().frame(height: 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigationBarBackButtonHidden(true)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .navigationBarLeading) {
|
||||
// Only show back button if not from deep link
|
||||
if viewModel.resetToken == nil || viewModel.currentStep != .resetPassword {
|
||||
Button(action: {
|
||||
if viewModel.currentStep == .success {
|
||||
viewModel.reset()
|
||||
onSuccess()
|
||||
} else {
|
||||
viewModel.moveToPreviousStep()
|
||||
}
|
||||
}) {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: viewModel.currentStep == .success ? "xmark" : "chevron.left")
|
||||
.font(.system(size: 16))
|
||||
Text(viewModel.currentStep == .success ? "Close" : "Back")
|
||||
.font(.subheadline)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
focusedField = .newPassword
|
||||
}
|
||||
}
|
||||
|
||||
// Computed Properties
|
||||
private var hasLetter: Bool {
|
||||
viewModel.newPassword.range(of: "[A-Za-z]", options: .regularExpression) != nil
|
||||
}
|
||||
|
||||
private var hasNumber: Bool {
|
||||
viewModel.newPassword.range(of: "[0-9]", options: .regularExpression) != nil
|
||||
}
|
||||
|
||||
private var passwordsMatch: Bool {
|
||||
!viewModel.newPassword.isEmpty &&
|
||||
!viewModel.confirmPassword.isEmpty &&
|
||||
viewModel.newPassword == viewModel.confirmPassword
|
||||
}
|
||||
|
||||
private var isFormValid: Bool {
|
||||
viewModel.newPassword.count >= 8 &&
|
||||
hasLetter &&
|
||||
hasNumber &&
|
||||
passwordsMatch
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
let vm = PasswordResetViewModel()
|
||||
vm.currentStep = .resetPassword
|
||||
vm.resetToken = "sample-token"
|
||||
return ResetPasswordView(viewModel: vm, onSuccess: {})
|
||||
}
|
||||
Reference in New Issue
Block a user