ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 21:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

QR Code, verification code views (#2685)

Browse Source
This commit is contained in:
Mauro
2024-04-12 11:29:14 +02:00
committed by GitHub
parent 5c9d0975ce
commit fc1310d7ad
18 changed files with 215 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Resources/Localizations/en.lproj/Localizable.strings
+5
View File
@@ -489,6 +489,8 @@
"screen_qr_code_login_connection_note_secure_state_list_item_2" = "If you encounter the same problem, try a different wifi network or use your mobile data instead of wifi";
"screen_qr_code_login_connection_note_secure_state_list_item_3" = "If that doesn’t work, sign in manually";
"screen_qr_code_login_connection_note_secure_state_title" = "Connection not secure";
"screen_qr_code_login_device_code_subtitle" = "You’ll be asked to enter the two digits shown below.";
"screen_qr_code_login_device_code_title" = "Enter number on your device";
"screen_qr_code_login_initial_state_item_1" = "Open %1$@ on a desktop device";
"screen_qr_code_login_initial_state_item_2" = "Click on your avatar";
"screen_qr_code_login_initial_state_item_3" = "Select %1$@";
@@ -504,6 +506,9 @@
"screen_qr_code_login_scanning_state_title" = "Scan the QR code";
"screen_qr_code_login_start_over_button" = "Start over";
"screen_qr_code_login_unknown_error_description" = "An unexpected error occurred. Please try again.";
"screen_qr_code_login_verify_code_loading" = "Waiting for your other device";
"screen_qr_code_login_verify_code_subtitle" = "Your account provider may ask for the following code to verify the sign in.";
"screen_qr_code_login_verify_code_title" = "Your verification code";
"screen_recovery_key_change_description" = "Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.";
"screen_recovery_key_change_generate_key" = "Generate a new recovery key";
"screen_recovery_key_change_generate_key_description" = "Make sure you can store your recovery key somewhere safe";
ElementX/Sources/Generated/Strings.swift
+10
View File
@@ -1197,6 +1197,10 @@ internal enum L10n {
internal static var screenQrCodeLoginConnectionNoteSecureStateListItem3: String { return L10n.tr("Localizable", "screen_qr_code_login_connection_note_secure_state_list_item_3") }
/// Connection not secure
internal static var screenQrCodeLoginConnectionNoteSecureStateTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_connection_note_secure_state_title") }
/// You’ll be asked to enter the two digits shown below.
internal static var screenQrCodeLoginDeviceCodeSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_device_code_subtitle") }
/// Enter number on your device
internal static var screenQrCodeLoginDeviceCodeTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_device_code_title") }
/// Open %1$@ on a desktop device
internal static func screenQrCodeLoginInitialStateItem1(_ p1: Any) -> String {
return L10n.tr("Localizable", "screen_qr_code_login_initial_state_item_1", String(describing: p1))
@@ -1237,6 +1241,12 @@ internal enum L10n {
internal static var screenQrCodeLoginStartOverButton: String { return L10n.tr("Localizable", "screen_qr_code_login_start_over_button") }
/// An unexpected error occurred. Please try again.
internal static var screenQrCodeLoginUnknownErrorDescription: String { return L10n.tr("Localizable", "screen_qr_code_login_unknown_error_description") }
/// Waiting for your other device
internal static var screenQrCodeLoginVerifyCodeLoading: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_loading") }
/// Your account provider may ask for the following code to verify the sign in.
internal static var screenQrCodeLoginVerifyCodeSubtitle: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_subtitle") }
/// Your verification code
internal static var screenQrCodeLoginVerifyCodeTitle: String { return L10n.tr("Localizable", "screen_qr_code_login_verify_code_title") }
/// Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.
internal static var screenRecoveryKeyChangeDescription: String { return L10n.tr("Localizable", "screen_recovery_key_change_description") }
/// Generate a new recovery key
ElementX/Sources/Mocks/Generated/GeneratedMocks.swift
+24 -1
View File
@@ -903,7 +903,30 @@ class ApplicationMock: ApplicationProtocol {
}
//MARK: - openAppSettings
var openAppSettingsCallsCount = 0
var openAppSettingsUnderlyingCallsCount = 0
var openAppSettingsCallsCount: Int {
get {
if Thread.isMainThread {
return openAppSettingsUnderlyingCallsCount
} else {
var returnValue: Int? = nil
DispatchQueue.main.sync {
returnValue = openAppSettingsUnderlyingCallsCount
}
return returnValue!
}
}
set {
if Thread.isMainThread {
openAppSettingsUnderlyingCallsCount = newValue
} else {
DispatchQueue.main.sync {
openAppSettingsUnderlyingCallsCount = newValue
}
}
}
}
var openAppSettingsCalled: Bool {
return openAppSettingsCallsCount > 0
}
ElementX/Sources/Screens/AppLock/AppLockSetupPINScreen/View/PINTextField.swift
+39 -10
View File
@@ -21,10 +21,12 @@ import SwiftUI
struct PINTextField: View {
@Binding var pinCode: String
var isSecure = false
var maxLength = 4
var size = PINDigitField.Size.medium
var body: some View {
textField
.textFieldStyle(PINTextFieldStyle(pinCode: pinCode, isSecure: isSecure))
.textFieldStyle(PINTextFieldStyle(pinCode: pinCode, isSecure: isSecure, maxLength: maxLength, size: size))
.keyboardType(.numberPad)
.accessibilityIdentifier(A11yIdentifiers.appLockSetupPINScreen.textField)
.onChange(of: pinCode) { newValue in
@@ -47,7 +49,7 @@ struct PINTextField: View {
func sanitize(_ pinCode: String) -> String {
var sanitized = pinCode
if sanitized.count > 4 { sanitized = String(pinCode.prefix(4)) }
if sanitized.count > maxLength { sanitized = String(pinCode.prefix(maxLength)) }
return sanitized.filter(\.isNumber)
}
}
@@ -55,14 +57,15 @@ struct PINTextField: View {
/// A text field style for displaying individual digits of a PIN code.
private struct PINTextFieldStyle: TextFieldStyle {
@FocusState private var isFocussed
let pinCode: String
let isSecure: Bool
let maxLength: Int
let size: PINDigitField.Size
func _body(configuration: TextField<_Label>) -> some View {
HStack(spacing: 8) {
ForEach(0..<4) { index in
PINDigitField(digit: digit(index))
ForEach(0..<maxLength, id: \.self) { index in
PINDigitField(digit: digit(index), size: size)
}
}
.overlay {
@@ -82,23 +85,43 @@ private struct PINTextFieldStyle: TextFieldStyle {
}
/// A single digit shown within the text field style.
private struct PINDigitField: View {
struct PINDigitField: View {
enum Size {
case small
case medium
}
let digit: Character?
let size: Size
private var cornerRadius: CGFloat {
switch size {
case .small: return 14
case .medium: return 8
}
}
private var edge: CGFloat {
switch size {
case .small: return 44
case .medium: return 48
}
}
var body: some View {
ZStack {
if let digit {
RoundedRectangle(cornerRadius: 8, style: .continuous)
RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
.fill(Color.compound.bgSubtlePrimary)
Text(String(digit))
.font(.compound.headingMDBold)
} else {
RoundedRectangle(cornerRadius: 8, style: .continuous)
RoundedRectangle(cornerRadius: cornerRadius, style: .continuous)
.inset(by: 0.5)
.stroke(Color.compound.iconPrimary, lineWidth: 1)
}
}
.frame(width: 48, height: 48)
.frame(width: edge, height: edge)
}
}
@@ -113,15 +136,21 @@ struct PINTextField_Previews: PreviewProvider, TestablePreview {
PreviewWrapper(pinCode: "", isSecure: true)
PreviewWrapper(pinCode: "12", isSecure: true)
PreviewWrapper(pinCode: "1234", isSecure: true)
.padding(.bottom)
PreviewWrapper(pinCode: "123456", isSecure: false, maxLength: 6, size: .small)
PreviewWrapper(pinCode: "12", isSecure: false, maxLength: 2, size: .small)
}
}
struct PreviewWrapper: View {
@State var pinCode = ""
let isSecure: Bool
var maxLength = 4
var size: PINDigitField.Size = .medium
var body: some View {
PINTextField(pinCode: $pinCode, isSecure: isSecure)
PINTextField(pinCode: $pinCode, isSecure: isSecure, maxLength: maxLength, size: size)
}
}
}
ElementX/Sources/Screens/QRCodeLoginScreen/QRCodeLoginScreenModels.swift
+25
View File
@@ -66,6 +66,8 @@ enum QRCodeLoginState: Equatable {
case initial
/// The camera is scanning
case scan(QRCodeLoginScanningState)
/// Codes are being shown
case displayCode(QRCodeLoginDisplayCodeState)
/// Any full screen error state
case error(QRCodeLoginErrorState)
@@ -83,4 +85,27 @@ enum QRCodeLoginState: Equatable {
/// the qr code has been processed and is invalid
case invalid
}
enum QRCodeLoginDisplayCodeState: Equatable {
case deviceCode(String)
case verificationCode(String)
var code: String {
switch self {
case .deviceCode(let code):
return code
case .verificationCode(let code):
return code
}
}
}
var isDisplayingCode: Bool {
switch self {
case .displayCode:
return true
default:
return false
}
}
}
ElementX/Sources/Screens/QRCodeLoginScreen/View/QRCodeLoginScreen.swift
+80 -2
View File
@@ -39,6 +39,8 @@ struct QRCodeLoginScreen: View {
initialContent
case .scan:
qrScanContent
case .displayCode:
displayCodeContent
case .error:
errorContent
}
@@ -67,6 +69,70 @@ struct QRCodeLoginScreen: View {
}
}
@ViewBuilder
private var displayCodeContent: some View {
if case let .displayCode(displayCodeState) = context.viewState.state {
FullscreenDialog {
VStack(spacing: 32) {
VStack(spacing: 40) {
displayCodeHeader(state: displayCodeState)
PINTextField(pinCode: .constant(displayCodeState.code),
maxLength: displayCodeState.code.count,
size: .small)
.disabled(true)
}
VStack(spacing: 4) {
ProgressView()
Text(L10n.screenQrCodeLoginVerifyCodeLoading)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodySM)
}
}
} bottomContent: {
Button(L10n.actionCancel) {
context.send(viewAction: .cancel)
}
.buttonStyle(.compound(.secondary))
}
.padding(.horizontal, 24)
}
}
private func displayCodeHeader(state: QRCodeLoginState.QRCodeLoginDisplayCodeState) -> some View {
VStack(spacing: 16) {
switch state {
case .deviceCode:
HeroImage(icon: \.computer, style: .subtle)
VStack(spacing: 8) {
Text(L10n.screenQrCodeLoginDeviceCodeTitle)
.foregroundColor(.compound.textPrimary)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
Text(L10n.screenQrCodeLoginDeviceCodeSubtitle)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
}
case .verificationCode:
HeroImage(icon: \.lock, style: .subtle)
VStack(spacing: 8) {
Text(L10n.screenQrCodeLoginVerifyCodeTitle)
.foregroundColor(.compound.textPrimary)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
Text(L10n.screenQrCodeLoginVerifyCodeSubtitle)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
}
}
}
}
private var qrScanContent: some View {
FullscreenDialog {
VStack(spacing: 40) {
@@ -139,8 +205,10 @@ struct QRCodeLoginScreen: View {
@ToolbarContentBuilder
private var toolbar: some ToolbarContent {
ToolbarItem(placement: .cancellationAction) {
Button(L10n.actionCancel) {
context.send(viewAction: .cancel)
if !context.viewState.state.isDisplayingCode {
Button(L10n.actionCancel) {
context.send(viewAction: .cancel)
}
}
}
}
@@ -280,6 +348,10 @@ struct QRCodeLoginScreen_Previews: PreviewProvider, TestablePreview {
static let unknownErrorStateViewModel = QRCodeLoginScreenViewModel.mock(state: .error(.unknown))
static let deviceCodeStateViewModel = QRCodeLoginScreenViewModel.mock(state: .displayCode(.deviceCode("12")))
static let verificationCodeStateViewModel = QRCodeLoginScreenViewModel.mock(state: .displayCode(.verificationCode("123456")))
static var previews: some View {
QRCodeLoginScreen(context: initialStateViewModel.context)
.previewDisplayName("Initial")
@@ -301,5 +373,11 @@ struct QRCodeLoginScreen_Previews: PreviewProvider, TestablePreview {
QRCodeLoginScreen(context: unknownErrorStateViewModel.context)
.previewDisplayName("Unknown error")
QRCodeLoginScreen(context: deviceCodeStateViewModel.context)
.previewDisplayName("Device code")
QRCodeLoginScreen(context: verificationCodeStateViewModel.context)
.previewDisplayName("Verification code")
}
}