refactor: notifications and settings view models; enhance login and registration UI
This commit is contained in:
@@ -6,74 +6,101 @@ struct LoginView: View {
|
||||
@State private var password = ""
|
||||
@State private var showRegister = false
|
||||
|
||||
private var isFormInvalid: Bool {
|
||||
email.isEmpty || password.isEmpty || authViewModel.isLoading
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
VStack(spacing: 24) {
|
||||
Spacer()
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: "bell.badge.fill")
|
||||
.font(.system(size: 60))
|
||||
.foregroundStyle(.red)
|
||||
Text("Mayday")
|
||||
.font(.largeTitle.bold())
|
||||
Text("login_subtitle")
|
||||
.font(.subheadline)
|
||||
ZStack {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
Spacer(minLength: 24)
|
||||
|
||||
VStack(spacing: 10) {
|
||||
Image("Logo")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 84, height: 84)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
|
||||
.shadow(color: .red.opacity(0.25), radius: 12, y: 6)
|
||||
|
||||
Text("Mayday")
|
||||
.font(.largeTitle.bold())
|
||||
|
||||
Text("login_subtitle")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
|
||||
VStack(spacing: 14) {
|
||||
AppTextField(
|
||||
title: "Email",
|
||||
icon: "envelope.fill",
|
||||
text: $email
|
||||
)
|
||||
.textContentType(.emailAddress)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocorrectionDisabled()
|
||||
.textInputAutocapitalization(.never)
|
||||
|
||||
AppSecureField(
|
||||
title: "password",
|
||||
icon: "lock.fill",
|
||||
text: $password
|
||||
)
|
||||
.textContentType(.password)
|
||||
}
|
||||
|
||||
if let error = authViewModel.error {
|
||||
Text(error)
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.multilineTextAlignment(.center)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task { await authViewModel.login(email: email, password: password) }
|
||||
} label: {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 14, style: .continuous)
|
||||
.fill(
|
||||
LinearGradient(
|
||||
colors: [Color.red, Color.red.opacity(0.82)],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.frame(height: 52)
|
||||
|
||||
if authViewModel.isLoading {
|
||||
ProgressView()
|
||||
.tint(.white)
|
||||
} else {
|
||||
Text("login_button")
|
||||
.font(.headline)
|
||||
.foregroundStyle(.white)
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled(isFormInvalid)
|
||||
.opacity(isFormInvalid ? 0.6 : 1)
|
||||
|
||||
Button("login_no_account") {
|
||||
showRegister = true
|
||||
}
|
||||
.font(.footnote.weight(.semibold))
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
|
||||
VStack(spacing: 16) {
|
||||
TextField("Email", text: $email)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.textContentType(.emailAddress)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocorrectionDisabled()
|
||||
.textInputAutocapitalization(.never)
|
||||
|
||||
SecureField("password", text: $password)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.textContentType(.password)
|
||||
}
|
||||
|
||||
if let error = authViewModel.error {
|
||||
Text(error)
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task { await authViewModel.login(email: email, password: password) }
|
||||
} label: {
|
||||
if authViewModel.isLoading {
|
||||
ProgressView()
|
||||
.frame(maxWidth: .infinity)
|
||||
} else {
|
||||
Text("login_button")
|
||||
.frame(maxWidth: .infinity)
|
||||
Spacer(minLength: 8)
|
||||
}
|
||||
.cardContainer()
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.disabled(email.isEmpty || password.isEmpty || authViewModel.isLoading)
|
||||
|
||||
Button("login_no_account") {
|
||||
showRegister = true
|
||||
}
|
||||
.font(.footnote)
|
||||
|
||||
#if DEBUG
|
||||
Button {
|
||||
Task { await authViewModel.enterPreviewMode() }
|
||||
} label: {
|
||||
Label("demo_mode", systemImage: "play.circle.fill")
|
||||
.font(.footnote)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
#endif
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding()
|
||||
.appBackground()
|
||||
.navigationDestination(isPresented: $showRegister) {
|
||||
RegisterView()
|
||||
}
|
||||
|
||||
@@ -10,76 +10,110 @@ struct RegisterView: View {
|
||||
@State private var showVerify = false
|
||||
@State private var registeredEmail = ""
|
||||
|
||||
private var isFormInvalid: Bool {
|
||||
!isFormValid || authViewModel.isLoading
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 24) {
|
||||
Spacer()
|
||||
ZStack {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
Spacer(minLength: 24)
|
||||
|
||||
Text("register_title")
|
||||
.font(.largeTitle.bold())
|
||||
VStack(spacing: 10) {
|
||||
Image("Logo")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 76, height: 76)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 18, style: .continuous))
|
||||
.shadow(color: .red.opacity(0.22), radius: 12, y: 6)
|
||||
|
||||
VStack(spacing: 16) {
|
||||
TextField("Email", text: $email)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.textContentType(.emailAddress)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocorrectionDisabled()
|
||||
.textInputAutocapitalization(.never)
|
||||
|
||||
SecureField("password", text: $password)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.textContentType(.newPassword)
|
||||
|
||||
SecureField("confirm_password", text: $confirmPassword)
|
||||
.textFieldStyle(.roundedBorder)
|
||||
.textContentType(.newPassword)
|
||||
}
|
||||
|
||||
if password.count > 0 && password.count < 8 {
|
||||
Text("password_min_length")
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
}
|
||||
|
||||
if confirmPassword.count > 0 && password != confirmPassword {
|
||||
Text("passwords_mismatch")
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
}
|
||||
|
||||
if let error = authViewModel.error {
|
||||
Text(error)
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task {
|
||||
let success = await authViewModel.register(email: email, password: password)
|
||||
if success {
|
||||
registeredEmail = email
|
||||
showVerify = true
|
||||
Text("register_title")
|
||||
.font(.largeTitle.bold())
|
||||
}
|
||||
|
||||
VStack(spacing: 14) {
|
||||
AppTextField(title: "Email", icon: "envelope.fill", text: $email)
|
||||
.textContentType(.emailAddress)
|
||||
.keyboardType(.emailAddress)
|
||||
.autocorrectionDisabled()
|
||||
.textInputAutocapitalization(.never)
|
||||
|
||||
AppSecureField(title: "password", icon: "lock.fill", text: $password)
|
||||
.textContentType(.newPassword)
|
||||
|
||||
AppSecureField(title: "confirm_password", icon: "lock.rotation", text: $confirmPassword)
|
||||
.textContentType(.newPassword)
|
||||
}
|
||||
|
||||
if password.count > 0 && password.count < 8 {
|
||||
Text("password_min_length")
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
if confirmPassword.count > 0 && password != confirmPassword {
|
||||
Text("passwords_mismatch")
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
if let error = authViewModel.error {
|
||||
Text(error)
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.multilineTextAlignment(.leading)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task {
|
||||
let success = await authViewModel.register(email: email, password: password)
|
||||
if success {
|
||||
registeredEmail = email
|
||||
showVerify = true
|
||||
}
|
||||
}
|
||||
} label: {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 14, style: .continuous)
|
||||
.fill(
|
||||
LinearGradient(
|
||||
colors: [Color.red, Color.red.opacity(0.82)],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.frame(height: 52)
|
||||
|
||||
if authViewModel.isLoading {
|
||||
ProgressView()
|
||||
.tint(.white)
|
||||
} else {
|
||||
Text("register_button")
|
||||
.font(.headline)
|
||||
.foregroundStyle(.white)
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled(isFormInvalid)
|
||||
.opacity(isFormInvalid ? 0.6 : 1)
|
||||
|
||||
Button("register_has_account") { dismiss() }
|
||||
.font(.footnote.weight(.semibold))
|
||||
.foregroundStyle(.secondary)
|
||||
|
||||
Spacer(minLength: 8)
|
||||
}
|
||||
} label: {
|
||||
if authViewModel.isLoading {
|
||||
ProgressView().frame(maxWidth: .infinity)
|
||||
} else {
|
||||
Text("register_button").frame(maxWidth: .infinity)
|
||||
}
|
||||
.cardContainer()
|
||||
}
|
||||
.navigationDestination(isPresented: $showVerify) {
|
||||
VerifyEmailView(email: registeredEmail, password: password)
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.disabled(!isFormValid || authViewModel.isLoading)
|
||||
|
||||
Button("register_has_account") { dismiss() }
|
||||
.font(.footnote)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding()
|
||||
.navigationDestination(isPresented: $showVerify) {
|
||||
VerifyEmailView(email: registeredEmail)
|
||||
}
|
||||
.appBackground()
|
||||
.navigationTitle("register_title")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
}
|
||||
|
||||
@@ -2,98 +2,167 @@ import SwiftUI
|
||||
|
||||
struct VerifyEmailView: View {
|
||||
let email: String
|
||||
let password: String
|
||||
|
||||
@EnvironmentObject var authViewModel: AuthViewModel
|
||||
@State private var codeDigits: [String] = Array(repeating: "", count: 6)
|
||||
@State private var resendCooldown = 0
|
||||
@FocusState private var focusedIndex: Int?
|
||||
@State private var focusedIndex: Int?
|
||||
@State private var cooldownTask: Task<Void, Never>?
|
||||
|
||||
private var code: String {
|
||||
codeDigits.joined()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 32) {
|
||||
Spacer()
|
||||
|
||||
VStack(spacing: 8) {
|
||||
Text("verify_email_title")
|
||||
.font(.largeTitle.bold())
|
||||
Text("verify_code_sent_to")
|
||||
.foregroundStyle(.secondary)
|
||||
Text(email)
|
||||
.fontWeight(.semibold)
|
||||
ScrollView {
|
||||
contentCard
|
||||
}
|
||||
.appBackground()
|
||||
.navigationTitle("verify_nav_title")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.onAppear { focusedIndex = 0 }
|
||||
.onDisappear { cooldownTask?.cancel() }
|
||||
.onChange(of: code) { _, newValue in
|
||||
if newValue.count == 6 {
|
||||
Task { await submitCode(newValue) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HStack(spacing: 12) {
|
||||
ForEach(0..<6, id: \.self) { index in
|
||||
TextField("", text: $codeDigits[index])
|
||||
.frame(width: 44, height: 52)
|
||||
.multilineTextAlignment(.center)
|
||||
.font(.title2.bold())
|
||||
.keyboardType(.numberPad)
|
||||
.textContentType(.oneTimeCode)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.stroke(focusedIndex == index ? Color.accentColor : Color.secondary, lineWidth: 2)
|
||||
)
|
||||
.focused($focusedIndex, equals: index)
|
||||
.onChange(of: codeDigits[index]) { _, newValue in
|
||||
handleDigitChange(index: index, value: newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var contentCard: some View {
|
||||
VStack(spacing: 28) {
|
||||
Spacer(minLength: 24)
|
||||
|
||||
headerView
|
||||
otpFieldsView
|
||||
|
||||
if let error = authViewModel.error {
|
||||
Text(error)
|
||||
.foregroundStyle(.red)
|
||||
.font(.footnote)
|
||||
.multilineTextAlignment(.leading)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
|
||||
Button {
|
||||
Task { await resendCode() }
|
||||
} label: {
|
||||
if code.count == 6 {
|
||||
ProgressView()
|
||||
.padding(.top, 2)
|
||||
}
|
||||
|
||||
resendButton
|
||||
|
||||
Spacer(minLength: 8)
|
||||
}
|
||||
.cardContainer()
|
||||
}
|
||||
|
||||
private var headerView: some View {
|
||||
VStack(spacing: 8) {
|
||||
Image("Logo")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 72, height: 72)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
|
||||
.shadow(color: .red.opacity(0.22), radius: 12, y: 6)
|
||||
|
||||
Text("verify_email_title")
|
||||
.font(.largeTitle.bold())
|
||||
|
||||
Text("verify_code_sent_to")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(.secondary)
|
||||
|
||||
Text(email)
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(.primary)
|
||||
.lineLimit(1)
|
||||
.minimumScaleFactor(0.8)
|
||||
}
|
||||
}
|
||||
|
||||
private var otpFieldsView: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(0..<6, id: \.self) { index in
|
||||
otpField(at: index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private var resendButton: some View {
|
||||
Button {
|
||||
Task { await resendCode() }
|
||||
} label: {
|
||||
Group {
|
||||
if resendCooldown > 0 {
|
||||
Text("verify_resend_cooldown \(resendCooldown)")
|
||||
} else {
|
||||
Text("verify_resend")
|
||||
}
|
||||
}
|
||||
.disabled(resendCooldown > 0)
|
||||
|
||||
Spacer()
|
||||
.font(.footnote.weight(.semibold))
|
||||
.foregroundStyle(resendCooldown > 0 ? Color.secondary : Color.red)
|
||||
.padding(.horizontal, 14)
|
||||
.padding(.vertical, 8)
|
||||
.background(Color(.tertiarySystemFill))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
.padding()
|
||||
.navigationTitle("verify_nav_title")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.onAppear { focusedIndex = 0 }
|
||||
.onDisappear { cooldownTask?.cancel() }
|
||||
.disabled(resendCooldown > 0)
|
||||
}
|
||||
|
||||
private func handleDigitChange(index: Int, value: String) {
|
||||
let filtered = value.filter { $0.isNumber }
|
||||
if filtered.count > 1 {
|
||||
// Paste handling
|
||||
let digits = Array(filtered.prefix(6))
|
||||
for (i, d) in digits.enumerated() where i < 6 {
|
||||
codeDigits[i] = String(d)
|
||||
@ViewBuilder
|
||||
private func otpField(at index: Int) -> some View {
|
||||
OTPDigitField(
|
||||
text: $codeDigits[index],
|
||||
isFocused: focusedIndex == index,
|
||||
onFocus: { focusedIndex = index },
|
||||
onInsert: {
|
||||
if index < 5 {
|
||||
focusedIndex = index + 1
|
||||
}
|
||||
},
|
||||
onDeleteWhenEmpty: {
|
||||
handleDeleteOnEmpty(at: index)
|
||||
},
|
||||
onPaste: { digits in
|
||||
handlePaste(digits, startingAt: index)
|
||||
}
|
||||
focusedIndex = min(digits.count, 5)
|
||||
} else {
|
||||
codeDigits[index] = filtered.isEmpty ? "" : String(filtered.last!)
|
||||
if !filtered.isEmpty && index < 5 {
|
||||
focusedIndex = index + 1
|
||||
}
|
||||
}
|
||||
)
|
||||
.frame(width: 46, height: 56)
|
||||
.background(Color(.secondarySystemBackground))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 12, style: .continuous)
|
||||
.stroke(
|
||||
focusedIndex == index
|
||||
? Color.red.opacity(0.9)
|
||||
: Color.primary.opacity(0.10),
|
||||
lineWidth: focusedIndex == index ? 2 : 1
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
let code = codeDigits.joined()
|
||||
if code.count == 6 {
|
||||
Task { await submitCode(code) }
|
||||
private func handleDeleteOnEmpty(at index: Int) {
|
||||
guard index > 0 else { return }
|
||||
codeDigits[index - 1] = ""
|
||||
focusedIndex = index - 1
|
||||
}
|
||||
|
||||
private func handlePaste(_ digits: [String], startingAt startIndex: Int) {
|
||||
guard !digits.isEmpty else { return }
|
||||
for (offset, digit) in digits.enumerated() {
|
||||
let target = startIndex + offset
|
||||
guard target < codeDigits.count else { break }
|
||||
codeDigits[target] = String(digit.prefix(1))
|
||||
}
|
||||
focusedIndex = min(startIndex + digits.count, codeDigits.count - 1)
|
||||
}
|
||||
|
||||
private func submitCode(_ code: String) async {
|
||||
await authViewModel.verifyEmail(email: email, code: code)
|
||||
if authViewModel.error == nil {
|
||||
// Auto-login after verification - in a real flow we'd re-login here
|
||||
// since verify doesn't return tokens
|
||||
await authViewModel.login(email: email, password: password)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user