diff --git a/Sources/Authenticator/Views/Primitives/PasswordField.swift b/Sources/Authenticator/Views/Primitives/PasswordField.swift index 3101dd9..cc4563e 100644 --- a/Sources/Authenticator/Views/Primitives/PasswordField.swift +++ b/Sources/Authenticator/Views/Primitives/PasswordField.swift @@ -65,6 +65,7 @@ struct PasswordField: View { } } .textFieldStyle(.plain) + .foregroundColor(foregroundColor) .frame(height: Platform.isMacOS ? 20 : 25) .padding([.top, .bottom, .leading], theme.components.field.padding) #if os(iOS) @@ -86,10 +87,10 @@ struct PasswordField: View { @ViewBuilder private func createInput() -> some View { if isShowingPassword { - SwiftUI.TextField(placeholder, text: $text) + SwiftUI.TextField("", text: $text, prompt: createPlaceHolderView(label: placeholder)) .focused($focusedField, equals: .plain) } else { - SwiftUI.SecureField(placeholder, text: $text) + SwiftUI.SecureField("", text: $text, prompt: createPlaceHolderView(label: placeholder)) .focused($focusedField, equals: .secure) } } @@ -98,6 +99,23 @@ struct PasswordField: View { return focusedField != nil } + private func createPlaceHolderView(label: String) -> SwiftUI.Text { + let textView = SwiftUI.Text(label) + .foregroundColor(theme.colors.foreground.disabled.opacity(0.6)) + .font(theme.fonts.body) + textView.accessibilityHidden(true) + return textView + } + + private var foregroundColor: Color { + switch validator.state { + case .normal: + return theme.colors.foreground.secondary + case .error: + return theme.colors.foreground.error + } + } + private var showPasswordButtonColor: Color { switch validator.state { case .normal: diff --git a/Sources/Authenticator/Views/Primitives/PhoneNumberField.swift b/Sources/Authenticator/Views/Primitives/PhoneNumberField.swift index 9f1e2d2..2d95f58 100644 --- a/Sources/Authenticator/Views/Primitives/PhoneNumberField.swift +++ b/Sources/Authenticator/Views/Primitives/PhoneNumberField.swift @@ -69,7 +69,7 @@ struct PhoneNumberField: View { .frame(width: 1) .overlay(theme.colors.border.primary) - SwiftUI.TextField(placeholder, text: $phoneNumber) + SwiftUI.TextField("", text: $phoneNumber, prompt: createPlaceHolderView(label: placeholder)) .disableAutocorrection(true) .focused($focusedField, equals: .phoneNumber) .onChange(of: phoneNumber) { newValue in @@ -100,6 +100,7 @@ struct PhoneNumberField: View { "authenticator.field.phoneNumber.label".localized() )) .textFieldStyle(.plain) + .foregroundColor(foregroundColor) .frame(height: Platform.isMacOS ? 20 : 25) .padding([.top, .bottom, .leading], theme.components.field.padding) #if os(iOS) @@ -124,6 +125,14 @@ struct PhoneNumberField: View { } } + private func createPlaceHolderView(label: String) -> SwiftUI.Text { + let textView = SwiftUI.Text(label) + .foregroundColor(theme.colors.foreground.disabled.opacity(0.6)) + .font(theme.fonts.body) + textView.accessibilityHidden(true) + return textView + } + private var foregroundColor: Color { switch validator.state { case .normal: diff --git a/Sources/Authenticator/Views/Primitives/TextField.swift b/Sources/Authenticator/Views/Primitives/TextField.swift index 2f669c2..f79fedd 100644 --- a/Sources/Authenticator/Views/Primitives/TextField.swift +++ b/Sources/Authenticator/Views/Primitives/TextField.swift @@ -51,7 +51,7 @@ struct TextField: View { isFocused: isFocused ) { HStack { - SwiftUI.TextField(placeholder, text: $text) + SwiftUI.TextField("", text: $text, prompt: createPlaceHolderView(label: placeholder)) .disableAutocorrection(true) .focused($isFocused) .onChange(of: text) { text in @@ -65,6 +65,7 @@ struct TextField: View { } } .textFieldStyle(.plain) + .foregroundColor(foregroundColor) .frame(height: Platform.isMacOS ? 20 : 25) .padding([.top, .bottom, .leading], theme.components.field.padding) #if os(iOS) @@ -82,6 +83,23 @@ struct TextField: View { } } + private func createPlaceHolderView(label: String) -> SwiftUI.Text { + let textView = SwiftUI.Text(label) + .foregroundColor(theme.colors.foreground.disabled.opacity(0.6)) + .font(theme.fonts.body) + textView.accessibilityHidden(true) + return textView + } + + private var foregroundColor: Color { + switch validator.state { + case .normal: + return theme.colors.foreground.secondary + case .error: + return theme.colors.foreground.error + } + } + private var clearButtonColor: Color { switch validator.state { case .normal: