Consolidate onboarding into single login page with native styling and full localization

Merge the two-page welcome/login flow into a single page with the app icon,
title, subtitle, and login inputs all on one screen. Replace the custom blue
background and white-on-blue styling with native iOS system colors and
button styles. Add missing translations (de, es, fr) for all onboarding
strings and fix localization by using LocalizedStringKey and String(localized:).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Nextcloud Cookbook iOS Client/Views/Onboarding/OnboardingView.swift

@@ -10,41 +10,59 @@ import OSLog
 import SwiftUI
 
 struct OnboardingView: View {
-    @State var selectedTab: Int = 0
+    @State var loginMethod: LoginMethod = .v2
+
+    // Login error alert
+    @State var showAlert: Bool = false
+    @State var alertMessage: String = String(localized: "Error: Could not connect to server.")
 
     var body: some View {
-        TabView(selection: $selectedTab) {
+        ScrollView(showsIndicators: false) {
-            WelcomeTab().tag(0)
+            VStack(spacing: 0) {
-            LoginTab().tag(1)
-        }
-        .tabViewStyle(.page)
-        .background(
-            selectedTab == 1 ? Color.nextcloudBlue.ignoresSafeArea() : Color(uiColor: .systemBackground).ignoresSafeArea()
-        )
-        .animation(.easeInOut, value: selectedTab)
-    }
-}
-
-struct WelcomeTab: View {
-    var body: some View {
-            VStack(alignment: .center) {
-                Spacer()
                 Image("cookbook-icon")
                     .resizable()
-                    .frame(width: 120, height: 120)
+                    .frame(width: 80, height: 80)
-                    .clipShape(RoundedRectangle(cornerRadius: 10))
+                    .clipShape(RoundedRectangle(cornerRadius: 18))
-                Text("Thank you for downloading")
+                    .padding(.top, 48)
-                    .font(.headline)
                 Text("Cookbook Client")
                     .font(.largeTitle)
                     .bold()
-                Spacer()
+                    .padding(.top, 10)
-                Text("This application is an open source effort. If you're interested in suggesting or contributing new features, or you encounter any problems, please use the support link or visit the GitHub repository in the app settings.")
+                Text("Thanks for downloading! Sign in to your Nextcloud server to get started.")
-                    .padding()
+                    .font(.subheadline)
-                Spacer()
+                    .foregroundStyle(.secondary)
+                    .multilineTextAlignment(.center)
+                    .padding(.horizontal, 32)
+                    .padding(.top, 6)
+
+                VStack(alignment: .leading, spacing: 16) {
+                    Picker("Login Method", selection: $loginMethod) {
+                        Text("Nextcloud Login").tag(LoginMethod.v2)
+                        Text("App Token Login").tag(LoginMethod.token)
+                    }
+                    .pickerStyle(.segmented)
+
+                    if loginMethod == .token {
+                        TokenLoginView(
+                            showAlert: $showAlert,
+                            alertMessage: $alertMessage
+                        )
+                    } else if loginMethod == .v2 {
+                        V2LoginView(
+                            showAlert: $showAlert,
+                            alertMessage: $alertMessage
+                        )
+                    }
+                }
+                .padding(.top, 28)
             }
-            .padding()
             .fontDesign(.rounded)
+            .padding()
+            .alert(alertMessage, isPresented: $showAlert) {
+                Button("Ok", role: .cancel) { }
+            }
+        }
+        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
     }
 }
 
@@ -79,108 +97,45 @@ enum TokenLoginStage: LoginStage {
     }
 }
 
-
-
-
-
-struct LoginTab: View {
-    @State var loginMethod: LoginMethod = .v2
-
-    // Login error alert
-    @State var showAlert: Bool = false
-    @State var alertMessage: String = "Error: Could not connect to server."
-    
-    var body: some View {
-        ScrollView(showsIndicators: false) {
-            VStack(alignment: .leading) {
-                Spacer()
-                Picker("Login Method", selection: $loginMethod) {
-                    Text("Nextcloud Login").tag(LoginMethod.v2)
-                    Text("App Token Login").tag(LoginMethod.token)
-                }
-                .pickerStyle(.segmented)
-                .foregroundColor(.white)
-                .padding()
-                if loginMethod == .token {
-                    TokenLoginView(
-                        showAlert: $showAlert,
-                        alertMessage: $alertMessage
-                    )
-                }
-                else if loginMethod == .v2 {
-                    V2LoginView(
-                        showAlert: $showAlert,
-                        alertMessage: $alertMessage
-                    )
-                }
-                Spacer()
-            }
-            
-            .fontDesign(.rounded)
-            .padding()
-            .alert(alertMessage, isPresented: $showAlert) {
-                Button("Ok", role: .cancel) { }
-            }
-        }
-    }
-}
-    
-    
-    
-
 struct LoginLabel: View {
-    let text: String
+    let text: LocalizedStringKey
     var body: some View {
         Text(text)
-            .foregroundColor(.white)
+            .font(.subheadline)
-            .font(.headline)
+            .foregroundStyle(.secondary)
-            .padding(.vertical, 5)
     }
 }
 
 struct BorderedLoginTextField: View {
-    var example: String
+    var example: LocalizedStringKey
     @Binding var text: String
-    @State var color: Color = .white
 
     var body: some View {
         TextField(example, text: $text)
             .textFieldStyle(.plain)
             .autocorrectionDisabled()
             .textInputAutocapitalization(.never)
-            .foregroundColor(color)
-            .tint(color)
             .padding()
-            .background(
+            .background(Color(uiColor: .secondarySystemGroupedBackground))
-                RoundedRectangle(cornerRadius: 10)
+            .clipShape(RoundedRectangle(cornerRadius: 10))
-                    .stroke(.white, lineWidth: 2)
-                    .foregroundColor(.clear)
-            )
-            
     }
 }
 
 struct LoginTextField: View {
-    var example: String
+    var example: LocalizedStringKey
     @Binding var text: String
-    @State var color: Color = .white
 
     var body: some View {
         TextField(example, text: $text)
             .textFieldStyle(.plain)
             .autocorrectionDisabled()
             .textInputAutocapitalization(.never)
-            .foregroundColor(color)
-            .tint(color)
             .padding()
-            .background(
+            .background(Color(uiColor: .secondarySystemGroupedBackground))
-                RoundedRectangle(cornerRadius: 10)
+            .clipShape(RoundedRectangle(cornerRadius: 10))
-                    .foregroundColor(Color.white.opacity(0.2))
-            )
     }
 }
 
-
 struct ServerAddressField: View {
     @ObservedObject var userSettings = UserSettings.shared
     @State var serverProtocol: ServerProtocol = UserSettings.shared.serverProtocol == ServerProtocol.http.rawValue ? ServerProtocol.http : ServerProtocol.https
@@ -192,17 +147,17 @@ struct ServerAddressField: View {
     }
 
     var body: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 6) {
             LoginLabel(text: "Server address")
-            VStack(alignment: .leading) {
+            VStack(alignment: .leading, spacing: 10) {
                 HStack {
                     Picker(ServerProtocol.https.rawValue, selection: $serverProtocol) {
                         ForEach(ServerProtocol.all, id: \.self) {
                             Text($0.rawValue)
                         }
-                    }.pickerStyle(.menu)
+                    }
-                    .tint(.white)
+                    .pickerStyle(.menu)
-                    .font(.headline)
+                    .tint(.accentColor)
                     .onChange(of: serverProtocol) { value in
                         Logger.view.debug("\(value.rawValue)")
                         userSettings.serverProtocol = value.rawValue
@@ -212,27 +167,18 @@ struct ServerAddressField: View {
                         .textFieldStyle(.plain)
                         .autocorrectionDisabled()
                         .textInputAutocapitalization(.never)
-                        .foregroundStyle(.white)
+                        .padding(10)
-                        .padding()
+                        .background(Color(uiColor: .secondarySystemGroupedBackground))
-                        .background(
+                        .clipShape(RoundedRectangle(cornerRadius: 8))
-                            RoundedRectangle(cornerRadius: 10)
-                                .foregroundColor(Color.white.opacity(0.2))
-                        )
-                    
                 }
 
-                LoginLabel(text: "Full server address")
-                    .padding(.top)
                 Text(userSettings.serverProtocol + userSettings.serverAddress)
-                    .foregroundColor(.white)
+                    .font(.footnote)
-                    .padding(.vertical, 5)
+                    .foregroundStyle(.secondary)
             }
             .padding()
-            .background(
+            .background(Color(uiColor: .secondarySystemGroupedBackground))
-                RoundedRectangle(cornerRadius: 10)
+            .clipShape(RoundedRectangle(cornerRadius: 12))
-                    .stroke(.white, lineWidth: 2)
-                    .foregroundColor(.clear)
-            )
         }
     }
 }
@@ -242,6 +188,5 @@ struct ServerAddressField_Preview: PreviewProvider {
         ServerAddressField()
             .previewLayout(.sizeThatFits)
             .padding()
-            .background(Color.nextcloudBlue)
     }
 }

Nextcloud Cookbook iOS Client/Views/Onboarding/TokenLoginView.swift

@@ -26,45 +26,44 @@ struct TokenLoginView: View {
     }
 
     var body: some View {
-        VStack(alignment: .leading) {
+        VStack(alignment: .leading, spacing: 16) {
             ServerAddressField()
-                .padding(.bottom)
 
-            LoginLabel(text: "User name")
+            VStack(alignment: .leading, spacing: 6) {
-            BorderedLoginTextField(example: "username", text: $userSettings.username)
+                LoginLabel(text: "User name")
-                .focused($focusedField, equals: .username)
+                BorderedLoginTextField(example: "username", text: $userSettings.username)
-                .textContentType(.username)
+                    .focused($focusedField, equals: .username)
-                .submitLabel(.next)
+                    .textContentType(.username)
-                .padding(.bottom)
+                    .submitLabel(.next)
-            
-            
-            LoginLabel(text: "App Token")
-            BorderedLoginTextField(example: "can be generated in security settings of your nextcloud", text: $userSettings.token)
-                .focused($focusedField, equals: .token)
-                .textContentType(.password)
-                .submitLabel(.join)
-            HStack{
-                Spacer()
-                Button {
-                    Task {
-                        if await loginCheck(nextcloudLogin: false) {
-                            userSettings.onboarding = false
-                        }
-                    }
-                } label: {
-                    Text("Submit")
-                        .foregroundColor(.white)
-                        .font(.headline)
-                        .padding()
-                        .background(
-                            RoundedRectangle(cornerRadius: 10)
-                                .stroke(Color.white, lineWidth: 2)
-                                .foregroundColor(.clear)
-                        )
-                }
-                .padding()
-                Spacer()
             }
+
+            VStack(alignment: .leading, spacing: 6) {
+                LoginLabel(text: "App Token")
+                BorderedLoginTextField(example: "can be generated in security settings of your nextcloud", text: $userSettings.token)
+                    .focused($focusedField, equals: .token)
+                    .textContentType(.password)
+                    .submitLabel(.join)
+            }
+
+            Button {
+                Task {
+                    if await loginCheck(nextcloudLogin: false) {
+                        userSettings.onboarding = false
+                    }
+                }
+            } label: {
+                Label("Submit", systemImage: "person.badge.key")
+                    .font(.subheadline)
+                    .fontWeight(.medium)
+                    .frame(maxWidth: .infinity)
+                    .padding(.vertical, 10)
+                    .foregroundStyle(Color.nextcloudBlue)
+                    .background(
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(Color.nextcloudBlue.opacity(0.1))
+                    )
+            }
+            .padding(.top, 4)
         }
         .onSubmit {
             switch focusedField {
@@ -80,11 +79,11 @@ struct TokenLoginView: View {
 
     func loginCheck(nextcloudLogin: Bool) async -> Bool {
         if userSettings.serverAddress == "" {
-            alertMessage = "Please enter a server address!"
+            alertMessage = String(localized: "Please enter a server address!")
             showAlert = true
             return false
         } else if !nextcloudLogin && (userSettings.username == "" || userSettings.token == "") {
-            alertMessage = "Please enter a user name and app token!"
+            alertMessage = String(localized: "Please enter a user name and app token!")
             showAlert = true
             return false
         }
@@ -95,7 +94,7 @@ struct TokenLoginView: View {
             let _ = try await client.getCategories()
             return true
         } catch {
-            alertMessage = "Login failed. Please check your inputs and internet connection."
+            alertMessage = String(localized: "Login failed. Please check your inputs and internet connection.")
             showAlert = true
             return false
         }

Nextcloud Cookbook iOS Client/Views/Onboarding/V2LoginView.swift

@@ -46,92 +46,88 @@ struct V2LoginView: View {
     }
 
     var body: some View {
-        ScrollView {
+        VStack(alignment: .leading, spacing: 16) {
-            VStack(alignment: .leading) {
+            ServerAddressField()
-                ServerAddressField()
-                CollapsibleView {
-                    VStack(alignment: .leading) {
-                        Text("Make sure to enter the server address in the form 'example.com', or \n'<server address>:<port>'\n when a non-standard port is used.")
-                            .padding(.bottom)
-                        Text("The 'Login' button will open a web browser. Please follow the login instructions provided there.\nAfter a successful login, return to this application and press 'Validate'.")
-                            .padding(.bottom)
-                        Text("If the login button does not open your browser, use the 'Copy Link' button and paste the link in your browser manually.")
-                    }
-                } title: {
-                    Text("Show help")
-                        .foregroundColor(.white)
-                        .font(.headline)
-                }.padding()
 
-                if loginRequest != nil {
+            CollapsibleView(titleColor: .secondary) {
-                    Button("Copy Link") {
+                VStack(alignment: .leading, spacing: 8) {
-                        UIPasteboard.general.string = loginRequest!.login
+                    Text("Make sure to enter the server address in the form 'example.com', or '<server address>:<port>' when a non-standard port is used.")
-                    }
+                    Text("The 'Login' button will open a web browser. Please follow the login instructions provided there. After a successful login, return to this application and press 'Validate'.")
-                    .font(.headline)
+                    Text("If the login button does not open your browser, use the 'Copy Link' button and paste the link in your browser manually.")
-                    .foregroundStyle(.white)
-                    .padding()
                 }
+                .font(.footnote)
+                .foregroundStyle(.secondary)
+            } title: {
+                Text("Show help")
+                    .font(.subheadline)
+            }
 
-                HStack {
+            if loginRequest != nil {
-                    Button {
+                Button {
-                        if UserSettings.shared.serverAddress == "" {
+                    UIPasteboard.general.string = loginRequest!.login
-                            alertMessage = "Please enter a valid server address."
+                } label: {
-                            showAlert = true
+                    Label("Copy Link", systemImage: "doc.on.doc")
-                            return
+                        .font(.subheadline)
-                        }
-                        
-                        Task {
-                            let error = await sendLoginV2Request()
-                            if let error = error {
-                                alertMessage = "A network error occured (\(error.localizedDescription))."
-                                showAlert = true
-                            }
-                            if let loginRequest = loginRequest {
-                                presentBrowser = true
-                                //await UIApplication.shared.open(URL(string: loginRequest.login)!)
-                            } else {
-                                alertMessage = "Unable to reach server. Please check your server address and internet connection."
-                                showAlert = true
-                            }
-                        }
-                        loginStage = loginStage.next()
-                    } label: {
-                        Text("Login")
-                            .foregroundColor(.white)
-                            .font(.headline)
-                            .padding()
-                            .background(
-                                RoundedRectangle(cornerRadius: 10)
-                                    .stroke(Color.white, lineWidth: 2)
-                                    .foregroundColor(.clear)
-                            )
-                    }.padding()
-                    
-                    if loginStage == .validate {
-                        Spacer()
-                        
-                        Button {
-                            // fetch login v2 response
-                            Task {
-                                let (response, error) = await fetchLoginV2Response()
-                                checkLogin(response: response, error: error)
-                            }
-                        } label: {
-                            Text("Validate")
-                                .foregroundColor(.white)
-                                .font(.headline)
-                                .padding()
-                                .background(
-                                    RoundedRectangle(cornerRadius: 10)
-                                        .stroke(Color.white, lineWidth: 2)
-                                        .foregroundColor(.clear)
-                                )
-                        }
-                        .disabled(loginRequest == nil ? true : false)
-                        .padding()
-                    }
                 }
             }
+
+            HStack(spacing: 12) {
+                Button {
+                    if UserSettings.shared.serverAddress == "" {
+                        alertMessage = String(localized: "Please enter a valid server address.")
+                        showAlert = true
+                        return
+                    }
+
+                    Task {
+                        let error = await sendLoginV2Request()
+                        if let error = error {
+                            alertMessage = String(localized: "A network error occurred. Please try again.")
+                            showAlert = true
+                        }
+                        if let _ = loginRequest {
+                            presentBrowser = true
+                        } else {
+                            alertMessage = String(localized: "Unable to reach server. Please check your server address and internet connection.")
+                            showAlert = true
+                        }
+                    }
+                    loginStage = loginStage.next()
+                } label: {
+                    Label("Login", systemImage: "person.badge.key")
+                        .font(.subheadline)
+                        .fontWeight(.medium)
+                        .frame(maxWidth: .infinity)
+                        .padding(.vertical, 10)
+                        .foregroundStyle(Color.nextcloudBlue)
+                        .background(
+                            RoundedRectangle(cornerRadius: 10)
+                                .fill(Color.nextcloudBlue.opacity(0.1))
+                        )
+                }
+
+                if loginStage == .validate {
+                    Button {
+                        Task {
+                            let (response, error) = await fetchLoginV2Response()
+                            checkLogin(response: response, error: error)
+                        }
+                    } label: {
+                        Label("Validate", systemImage: "checkmark.circle.fill")
+                            .font(.subheadline)
+                            .fontWeight(.medium)
+                            .frame(maxWidth: .infinity)
+                            .padding(.vertical, 10)
+                            .foregroundStyle(Color.nextcloudBlue)
+                            .background(
+                                RoundedRectangle(cornerRadius: 10)
+                                    .fill(Color.nextcloudBlue.opacity(0.1))
+                            )
+                    }
+                    .disabled(loginRequest == nil)
+                }
+            }
+            .padding(.top, 4)
         }
         .sheet(isPresented: $presentBrowser, onDismiss: {
             Task {
@@ -158,12 +154,12 @@ struct V2LoginView: View {
 
     func checkLogin(response: LoginV2Response?, error: NetworkError?) {
         if let error = error {
-            alertMessage = "Login failed. Please login via the browser and try again. (\(error.localizedDescription))"
+            alertMessage = String(localized: "Login failed. Please login via the browser and try again.")
             showAlert = true
             return
         }
         guard let response = response else {
-            alertMessage = "Login failed. Please login via the browser and try again."
+            alertMessage = String(localized: "Login failed. Please login via the browser and try again.")
             showAlert = true
             return
         }