// // Copyright 2025 Element Creations Ltd. // Copyright 2022-2025 New Vector Ltd. // // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial. // Please see LICENSE files in the repository root for full details. // import Compound import SwiftUI /// The screen shown at the beginning of the onboarding flow. struct AuthenticationStartScreen: View { @Environment(\.verticalSizeClass) private var verticalSizeClass @Bindable var context: AuthenticationStartScreenViewModel.Context var body: some View { if case let .welcomeBack(classicAppAccount) = context.viewState.classicAppMode, classicAppAccount.state.isServerSupported != false { AuthenticationClassicAppAccountView(context: context, classicAppAccount: classicAppAccount) } else { standardContent } } var standardContent: some View { // This view uses a GeometryReader instead of FullscreenDialog so its content takes the full // height available (after taking the buttons out of the equation) in order for the logo // and title to appear vertically centred and equally spaced within this content area. GeometryReader { geometry in VStack(alignment: .leading, spacing: 0) { Spacer() .frame(height: UIConstants.spacerHeight(in: geometry)) // Letro: use custom content letroContent .frame(width: geometry.size.width) .accessibilityIdentifier(A11yIdentifiers.authenticationStartScreen.hidden) // Letro: move buttons to bottom sheet Spacer() .frame(height: UIConstants.spacerHeight(in: geometry)) } .frame(maxHeight: .infinity) .safeAreaInset(edge: .bottom) { versionText .font(.compound.bodySM) .foregroundColor(.compound.textSecondary) .frame(maxWidth: .infinity) .padding(.bottom) .onTapGesture(count: 7) { context.send(viewAction: .reportProblem) // Letro letroShowButtons = false } .accessibilityIdentifier(A11yIdentifiers.authenticationStartScreen.appVersion) } .scrollBounceBehavior(.basedOnSize) } .sheet(isPresented: $letroShowButtons) { // Letro: move buttons to bottom sheet letroButtonsSheet } .navigationBarHidden(true) .background { // Letro: use custom background letroBackground } .toolbar { toolbar } .alert(item: $context.alertInfo) .introspect(.window, on: .supportedVersions) { window in context.send(viewAction: .updateWindow(window)) } } var content: some View { VStack(spacing: 0) { Spacer() if verticalSizeClass == .regular { Spacer() AuthenticationStartLogo(hideBrandChrome: context.viewState.hideBrandChrome, isOnGradient: !context.viewState.hideBrandChrome) } Spacer() if !context.viewState.hideBrandChrome { VStack(spacing: 8) { Text(L10n.screenOnboardingWelcomeTitle) .font(.compound.headingLGBold) .foregroundColor(.compound.textPrimary) .multilineTextAlignment(.center) Text(L10n.screenOnboardingWelcomeMessage(InfoPlistReader.main.productionAppName)) .font(.compound.bodyLG) .foregroundColor(.compound.textPrimary) .multilineTextAlignment(.center) } .padding() .fixedSize(horizontal: false, vertical: true) } Spacer() } .padding(.bottom) .padding(.horizontal, 16) .readableFrame() } /// The main action buttons. var buttons: some View { VStack(spacing: 16) { if context.viewState.showQRCodeLoginButton { Button { context.send(viewAction: .loginWithQR) // Letro letroShowButtons = false } label: { Label(L10n.screenOnboardingSignInWithQrCode, icon: \.qrCode) } .buttonStyle(.compound(.primary)) .accessibilityIdentifier(A11yIdentifiers.authenticationStartScreen.signInWithQr) } Button { context.send(viewAction: .login) // Letro letroShowButtons = false } label: { Text(context.viewState.loginButtonTitle) } .buttonStyle(.compound(.primary)) .accessibilityIdentifier(A11yIdentifiers.authenticationStartScreen.signIn) if context.viewState.showCreateAccountButton { Button { context.send(viewAction: .register) // Letro letroShowButtons = false } label: { Text(L10n.screenCreateAccountTitle) } .buttonStyle(.compound(.tertiary)) } versionText .font(.compound.bodySM) .foregroundColor(.compound.textSecondary) .onTapGesture(count: 7) { context.send(viewAction: .reportProblem) } .accessibilityIdentifier(A11yIdentifiers.authenticationStartScreen.appVersion) .overlay(alignment: .trailing) { developerOptionsButton .scaledOffset(x: 32, y: -0.5, relativeTo: .compound.bodySM) } .padding(.top, 16) } .padding(.horizontal, verticalSizeClass == .compact ? 128 : 24) .readableFrame() } var versionText: Text { // Let's not deal with snapshotting a changing version string. let shortVersionString = ProcessInfo.isRunningTests ? "0.0.0" : InfoPlistReader.main.bundleShortVersionString return Text(L10n.screenOnboardingAppVersion(shortVersionString)) } // MARK: - Letro @State var letroShowButtons = false var letroBackground : some View { Image(asset: Asset.Images.letroBg1) .resizable() .scaledToFill() .ignoresSafeArea() .accessibilityHidden(true) } var letroContent: some View { VStack(spacing: 16) { Image(asset: Asset.Images.letroLogoType) .padding(.top, 30) if letroShowButtons { VStack(spacing: 8) { Text("Welcome to Letro") .font(.compound.headingLG) .foregroundColor(.white) .multilineTextAlignment(.center) Text("Say hello to precision") .font(.compound.headingLG) .foregroundColor(.white) .multilineTextAlignment(.center) } Image(asset: Asset.Images.letroHeader2) Spacer() } else { Text("Beyond Post, Beyond Email") .font(.compound.headingLG) .foregroundColor(.white) .multilineTextAlignment(.center) Spacer() Image(asset: Asset.Images.letroHeader1) Spacer() letroAbout .foregroundStyle(.white) Spacer() Button { withAnimation { letroShowButtons = true } } label: { Text("Get Started") .frame(maxWidth: .infinity) .frame(height: 48) .background(.white) .cornerRadius(28) } .buttonStyle(PlainButtonStyle()) } } .padding() .readableFrame() } var letroAbout: some View { VStack(spacing: 16) { Text("Letro, Official & Secure") .font(.compound.headingLGBold) .multilineTextAlignment(.center) Text("We Make Formal Communication a Reliable, Attractive Thing.") .font(.compound.bodyLG) .multilineTextAlignment(.center) } } var letroButtonsSheet: some View { VStack { Spacer() letroAbout Spacer() buttons } .presentationDetents([.medium]) .interactiveDismissDisabled(true) } @ViewBuilder var developerOptionsButton: some View { if AppSettings.appBuildType != .release, !ProcessInfo.isRunningTests { Button { context.send(viewAction: .developerOptions) } label: { CompoundIcon(\.code) .foregroundStyle(.compound.iconSecondary) } .accessibilityLabel(L10n.commonDeveloperOptions) } } @ToolbarContentBuilder var toolbar: some ToolbarContent { ToolbarItem(placement: .primaryAction) { if case let .otherOptions(classicAppAccount) = context.viewState.classicAppMode { ToolbarButton(role: .close) { context.send(viewAction: .closeOtherOptions(classicAppAccount)) } } } } } // MARK: - Previews struct AuthenticationStartScreen_Previews: PreviewProvider, TestablePreview { static let viewModel = makeViewModel() static let provisionedViewModel = makeViewModel(provisionedServerName: "example.com") static let classicAppViewModel = makeViewModel(hasClassicAppAccount: true) static var previews: some View { AuthenticationStartScreen(context: viewModel.context) .previewDisplayName("Default") AuthenticationStartScreen(context: provisionedViewModel.context) .previewDisplayName("Provisioned") ElementNavigationStack { AuthenticationStartScreen(context: classicAppViewModel.context) } .previewDisplayName("Classic App") } static func makeViewModel(provisionedServerName: String? = nil, hasClassicAppAccount: Bool = false) -> AuthenticationStartScreenViewModel { let classicAppAccount = ClassicAppAccount.mockDan classicAppAccount.state.isServerSupported = true classicAppAccount.state.availableSecrets = .complete let classicAppManager: ClassicAppManagerMock? = hasClassicAppAccount ? .init(.init(accounts: [classicAppAccount])) : nil return AuthenticationStartScreenViewModel(authenticationService: AuthenticationService.mock(classicAppManager: classicAppManager), provisioningParameters: provisionedServerName.map { .init(accountProvider: $0, loginHint: nil) }, isBugReportServiceEnabled: true, appMediator: AppMediatorMock(), appSettings: ServiceLocator.shared.settings, mediaProvider: MediaProviderMock(configuration: .init()), userIndicatorController: UserIndicatorControllerMock()) } }