feat: authentication flow view -> Cloud password login - WPB-15222

WireUI/Sources/WireAuthenticationUI/Resources/en.lproj/Localizable.strings

@@ -20,7 +20,15 @@
 "authentication.identity.input.field.placeholder" = "Email or SSO code";
 "authentication.identity.input.field.title" = "Email or SSO code";
 "authentication.identity.input.submit" = "Next";
-"authentication.identity.input.terms" = "By pressing on “Next”, you accept Wire’s [Terms and Conditions](%@)";
+
+"cloud_user_login.title" = "Enter your password to log in";
+"cloud_user_login.input_email.title" = "Email";
+"cloud_user_login.input_password.title" = "Password";
+"cloud_user_login.input_password.placeholder" = "Enter password";
+"cloud_user_login.submit" = "Next";
+"cloud_user_login.forgot_password" = "Forgot password?";
+"create_personal_account.title" = "Don’t have a Wire account?";
+"create_personal_account.button" = "Create Personal Account";
 
 "switch_backend_confirmation.title" = "Redirect to an on-premises backend?";
 "switch_backend_confirmation.message" = "If you proceed, you will be redirected to the following on-premises backend to log in:";

WireUI/Sources/WireAuthenticationUI/ViewModels/LoginViaEmailViewModel.swift

@@ -0,0 +1,46 @@
+//
+// Wire
+// Copyright (C) 2025 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import Foundation
+import WireReusableUIComponents
+
+package class LoginViaEmailViewModel {
+
+    let email: String
+    let forgotPasswordURL: URL
+    let passwordValidator: any PasswordValidator
+    let showCreateAccount: Bool
+    let onCreateAccount: @Sendable () -> Void
+
+    // MARK: - Life cycle
+
+    package init(
+        email: String,
+        forgotPasswordURL: URL,
+        passwordValidator: any PasswordValidator,
+        showCreateAccount: Bool,
+        onCreateAccount: @Sendable @escaping () -> Void
+    ) {
+        self.email = email
+        self.forgotPasswordURL = forgotPasswordURL
+        self.passwordValidator = passwordValidator
+        self.showCreateAccount = showCreateAccount
+        self.onCreateAccount = onCreateAccount
+    }
+
+}

WireUI/Sources/WireAuthenticationUI/Views/LoginViaEmailView.swift

@@ -0,0 +1,147 @@
+//
+// Wire
+// Copyright (C) 2025 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import SwiftUI
+import WireDesign
+import WireReusableUIComponents
+
+package struct LoginViaEmailView: View {
+    private let viewModel: LoginViaEmailViewModel
+
+    @State var password: String = ""
+    @State var isPasswordValid = true
+
+    package init(
+        viewModel: LoginViaEmailViewModel
+    ) {
+        self.viewModel = viewModel
+    }
+
+    package var body: some View {
+        VStack(alignment: .center, spacing: 14) {
+            LabeledTextField(
+                placeholder: nil,
+                title: L10n.CloudUserLogin.InputEmail.title,
+                string: .constant(viewModel.email)
+            )
+            .disabled(true)
+
+            PasswordField(
+                isPasswordValid: $isPasswordValid,
+                password: $password,
+                passwordValidator: viewModel.passwordValidator,
+                placeholder: L10n.CloudUserLogin.InputPassword.placeholder,
+                title: L10n.CloudUserLogin.InputPassword.title
+            )
+
+            Button(action: {
+                viewModel.onCreateAccount()
+            }, label: {
+                Text(L10n.CloudUserLogin.submit)
+                    .lineLimit(nil)
+            })
+            .wireButtonStyle(.primary)
+            .disabled(!isPasswordValid)
+
+            Button(action: {
+                UIApplication.shared.open(viewModel.forgotPasswordURL)
+            }, label: {
+                Text(L10n.CloudUserLogin.forgotPassword)
+                    .multilineTextAlignment(.center)
+                    .lineLimit(nil)
+                    .fixedSize(horizontal: false, vertical: true)
+            })
+            .wireButtonStyle(.link)
+
+            if viewModel.showCreateAccount {
+                VStack(spacing: 4) {
+                    Text(L10n.CreatePersonalAccount.title)
+                        .multilineTextAlignment(.center)
+                        .wireTextStyle(.body1)
+                        .lineLimit(nil)
+                        .fixedSize(horizontal: false, vertical: true)
+
+                    Button(action: {
+                        viewModel.onCreateAccount()
+                    }, label: {
+                        Text(L10n.CreatePersonalAccount.button)
+                            .multilineTextAlignment(.center)
+                            .lineLimit(nil)
+                            .minimumScaleFactor(0.5)
+                            .fixedSize(horizontal: false, vertical: true)
+                    })
+                    .wireButtonStyle(.link)
+                }
+                .frame(maxWidth: .infinity)
+                .padding()
+                .background {
+                    if #available(iOS 17.0, *) {
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(ColorTheme.Backgrounds.backgroundVariant.color)
+                            .stroke(ColorTheme.Strokes.outline.color, lineWidth: 1)
+                    } else {
+                        RoundedRectangle(cornerRadius: 10)
+                            .stroke(ColorTheme.Strokes.outline.color, lineWidth: 1)
+                            .background(ColorTheme.Backgrounds.backgroundVariant.color)
+                            .cornerRadius(12)
+                    }
+                }
+            }
+        }
+        .navigationTitle(L10n.CloudUserLogin.title)
+        .padding(32)
+        .background(ColorTheme.Backgrounds.surface.color)
+        .cornerRadius(16)
+        .overlay(
+            RoundedRectangle(cornerRadius: 16)
+                .stroke(ColorTheme.Backgrounds.surface.color, lineWidth: 1)
+        )
+    }
+}
+
+#Preview("Regular fonts") {
+    BackgroundView()
+        .overlay {
+            VStack(spacing: 0) {
+                Spacer()
+                    .frame(maxHeight: .infinity)
+                LoginViaEmailPreview()
+            }
+        }
+}
+
+#Preview("Large fonts") {
+    BackgroundView()
+        .overlay {
+            VStack(spacing: 0) {
+                Spacer()
+                    .frame(maxHeight: .infinity)
+                if #available(iOS 16.4, *) {
+                    ScrollView(.vertical) {
+                        LoginViaEmailPreview()
+                    }
+                    .scrollBounceBehavior(.basedOnSize)
+                } else {
+                    ScrollView(.vertical) {
+                        LoginViaEmailPreview()
+                    }
+                }
+            }
+        }
+        .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
+}

WireUI/Sources/WireAuthenticationUI/Views/Preview/LoginViaEmailPreview.swift

@@ -0,0 +1,47 @@
+//
+// Wire
+// Copyright (C) 2025 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import SwiftUI
+import WireFoundation
+import WireReusableUIComponents
+
+package struct LoginViaEmailPreview: View {
+    private let viewModel: LoginViaEmailViewModel
+
+    package init(
+        email: String = "[email protected]",
+        forgotPasswordURL: URL = URL(string: "https://example.com")!,
+        passwordValidator: any PasswordValidator = MockPasswordValidator(validationCallback: { _ in false }),
+        showCreateAccount: Bool = false,
+        onCreateAccount: @escaping (@Sendable () -> Void) = {}
+    ) {
+        self.viewModel = LoginViaEmailViewModel(
+            email: email,
+            forgotPasswordURL: forgotPasswordURL,
+            passwordValidator: passwordValidator,
+            showCreateAccount: showCreateAccount,
+            onCreateAccount: onCreateAccount
+        )
+    }
+
+    package var body: some View {
+        LoginViaEmailView(
+            viewModel: viewModel
+        )
+    }
+}

WireUI/Sources/WireAuthenticationUI/Views/Preview/SwitchBackendConfirmationViewPreview.swift → WireUI/Sources/WireAuthenticationUI/Views/Preview/SwitchBackendConfirmationPreview.swift

@@ -18,7 +18,7 @@
 
 import SwiftUI
 
-package struct SwitchBackendConfirmationViewPreview: View {
+package struct SwitchBackendConfirmationPreview: View {
     package init() {}
 
     package var body: some View {

WireUI/Sources/WireAuthenticationUI/Views/SwitchBackendConfirmationView.swift

@@ -182,7 +182,7 @@ package struct SwitchBackendConfirmationView: View {
     BackgroundView()
         .overlay(
             ZStack {
-                SwitchBackendConfirmationViewPreview()
+                SwitchBackendConfirmationPreview()
                     .padding()
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
@@ -193,7 +193,7 @@ package struct SwitchBackendConfirmationView: View {
     BackgroundView()
         .overlay(
             ZStack {
-                SwitchBackendConfirmationViewPreview()
+                SwitchBackendConfirmationPreview()
                     .padding()
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)

WireUI/Sources/WireDesign/Colors/ColorTheme.swift

@@ -110,7 +110,7 @@ public enum ColorTheme {
             static let selectedOutline = UIColor(light: .blue300Light, dark: .blue800Dark)
         }
 
-        enum Tertiary {
+        public enum Tertiary {
 
             static let enabled = UIColor(light: .white, dark: .gray90)
             public static let onEnabled = UIColor(light: .black, dark: .white)

WireUI/Sources/WireReusableUIComponents/LabeledTextField/LabeledTextField.swift

@@ -22,6 +22,7 @@ import WireFoundation
 
 public struct LabeledTextField: View {
     @Environment(\.isEnabled) private var isEnabled
+    @ScaledMetric private var fieldHeight: CGFloat = 48
 
     private let isMandatory: Bool
     private let placeholder: String?
@@ -60,19 +61,20 @@ public struct LabeledTextField: View {
                     .wireTextStyle(.body1)
                     .focused($isFocused)
                     .foregroundStyle(labelColor)
-                    .padding(.vertical, 12)
+                    .frame(height: fieldHeight)
                 if !string.isEmpty, isEnabled {
                     Button(action: {
                         string = ""
                     }, label: {
                         Image(systemName: "xmark.circle.fill")
-                            .foregroundStyle(.black)
+                            .foregroundStyle(ColorTheme.Buttons.Tertiary.onEnabled.color)
                             .frame(width: 16, height: 16)
                             .padding(19)
                     })
                 }
             }
             .padding(.leading, 16)
+            .frame(height: fieldHeight)
             .background {
                 if #available(iOS 17.0, *) {
                     RoundedRectangle(cornerRadius: 12)