feat: Create account view

Mail/Views/Onboarding/OnboardingView.swift

@@ -93,7 +93,6 @@ final class LoginHandler: InfomaniakLoginDelegate, ObservableObject {
 
     func loginAfterAccountCreation(from viewController: UIViewController) {
         isLoading = true
-        matomo.track(eventWithCategory: .account, name: "openCreationWebview")
         loginService.setupWebviewNavbar(
             title: MailResourcesStrings.Localizable.buttonLogin,
             titleColor: nil,
@@ -173,79 +172,80 @@ struct OnboardingView: View {
     }
 
     var body: some View {
-        VStack(spacing: 0) {
-            Group {
-                if !isScrollEnabled,
-                   let slide = slides.first(where: { $0.id == selection }) {
-                    SlideView(slide: slide, updateAnimationColors: updateAnimationColors)
-                } else {
-                    TabView(selection: $selection) {
-                        ForEach(slides) { slide in
-                            SlideView(slide: slide, updateAnimationColors: updateAnimationColors)
-                                .tag(slide.id)
+        NavigationView {
+            VStack(spacing: 0) {
+                Group {
+                    if !isScrollEnabled,
+                       let slide = slides.first(where: { $0.id == selection }) {
+                        SlideView(slide: slide, updateAnimationColors: updateAnimationColors)
+                    } else {
+                        TabView(selection: $selection) {
+                            ForEach(slides) { slide in
+                                SlideView(slide: slide, updateAnimationColors: updateAnimationColors)
+                                    .tag(slide.id)
+                            }
                         }
+                        .tabViewStyle(.page)
+                        .ignoresSafeArea(edges: .top)
                     }
-                    .tabViewStyle(.page)
-                    .ignoresSafeArea(edges: .top)
                 }
-            }
-            .overlay(alignment: .top) {
-                MailResourcesAsset.logoText.swiftUIImage
-                    .resizable()
-                    .scaledToFit()
-                    .frame(height: UIConstants.onboardingLogoHeight)
-                    .padding(.top, UIConstants.onboardingLogoPaddingTop)
-            }
-
-            VStack(spacing: 24) {
-                if selection == slides.count {
-                    MailButton(label: MailResourcesStrings.Localizable.buttonLogin) {
-                        loginHandler.login()
-                    }
-                    .mailButtonFullWidth(true)
-                    .mailButtonLoading(loginHandler.isLoading)
+                .overlay(alignment: .top) {
+                    MailResourcesAsset.logoText.swiftUIImage
+                        .resizable()
+                        .scaledToFit()
+                        .frame(height: UIConstants.onboardingLogoHeight)
+                        .padding(.top, UIConstants.onboardingLogoPaddingTop)
+                }
 
-                    MailButton(label: MailResourcesStrings.Localizable.buttonCreateAccount) {
-                        isPresentingCreateAccount.toggle()
-                    }
-                    .mailButtonStyle(.link)
-                    .disabled(loginHandler.isLoading)
-                } else {
-                    MailButton(icon: MailResourcesAsset.fullArrowRight) {
-                        withAnimation {
-                            selection += 1
+                VStack(spacing: 24) {
+                    if selection == slides.count {
+                        MailButton(label: MailResourcesStrings.Localizable.buttonLogin) {
+                            loginHandler.login()
                         }
+                        .mailButtonFullWidth(true)
+                        .mailButtonLoading(loginHandler.isLoading)
+
+                        NavigationLink(isActive: $isPresentingCreateAccount) {
+                            CreateAccountView()
+                        } label: {
+                            MailButton(label: MailResourcesStrings.Localizable.buttonCreateAccount) {
+                                isPresentingCreateAccount = true
+                            }
+                            .mailButtonStyle(.link)
+                            .disabled(false)
+                        }
+                    } else {
+                        MailButton(icon: MailResourcesAsset.fullArrowRight) {
+                            withAnimation {
+                                selection += 1
+                            }
+                        }
+                        .mailButtonIconSize(UIConstants.onboardingArrowIconSize)
                     }
-                    .mailButtonIconSize(UIConstants.onboardingArrowIconSize)
                 }
+                .frame(height: UIConstants.onboardingButtonHeight + UIConstants.onboardingBottomButtonPadding, alignment: .top)
+                .padding(.horizontal, 24)
             }
-            .frame(height: UIConstants.onboardingButtonHeight + UIConstants.onboardingBottomButtonPadding, alignment: .top)
-            .padding(.horizontal, 24)
-        }
-        .overlay(alignment: .topLeading) {
-            if !isScrollEnabled {
-                Button {
-                    dismiss()
-                } label: {
-                    Image(systemName: "xmark")
-                        .resizable()
+            .overlay(alignment: .topLeading) {
+                if !isScrollEnabled {
+                    Button {
+                        dismiss()
+                    } label: {
+                        Image(systemName: "xmark")
+                            .resizable()
+                    }
+                    .frame(width: 24, height: 24)
+                    .padding(.top, 16)
+                    .padding(.leading, 24)
                 }
-                .frame(width: 24, height: 24)
-                .padding(.top, 16)
-                .padding(.leading, 24)
             }
+            .navigationBarTitle("")
         }
         .alert(MailResourcesStrings.Localizable.errorLoginTitle, isPresented: $loginHandler.isPresentingErrorAlert) {
             // Use default button
         } message: {
             Text(MailResourcesStrings.Localizable.errorLoginDescription)
         }
-        .sheet(isPresented: $isPresentingCreateAccount) {
-            RegisterView(registrationProcess: .mail) { viewController in
-                guard let viewController else { return }
-                loginHandler.loginAfterAccountCreation(from: viewController)
-            }
-        }
         .onAppear {
             if UIDevice.current.userInterfaceIdiom == .phone {
                 UIDevice.current
@@ -259,6 +259,7 @@ struct OnboardingView: View {
                 navigationState.transitionToRootViewDestination(.noMailboxes)
             }
         }
+        .matomoView(view: [MatomoUtils.View.onboarding.displayName, "Main"])
     }
 
     // MARK: - Private methods

Mail/Views/Switch User/CreateAccountView.swift

@@ -0,0 +1,95 @@
+/*
+ Infomaniak Mail - iOS App
+ Copyright (C) 2022 Infomaniak Network SA
+
+ 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 InfomaniakCoreUI
+import InfomaniakCreateAccount
+import InfomaniakDI
+import InfomaniakLogin
+import MailCore
+import MailResources
+import SwiftUI
+
+struct CreateAccountView: View {
+    @AppStorage(UserDefaults.shared.key(.accentColor)) private var accentColor = DefaultPreferences.accentColor
+
+    @State private var isPresentingCreateAccount = false
+    @StateObject private var loginHandler = LoginHandler()
+
+    var body: some View {
+        VStack(spacing: 0) {
+            accentColor.createAccountImage.swiftUIImage
+                .resizable()
+                .scaledToFit()
+                .padding(.top, 24)
+                .padding(.bottom, 48)
+
+            Text(MailResourcesStrings.Localizable.newAccountTitle)
+                .textStyle(.header1)
+                .multilineTextAlignment(.center)
+                .padding(.bottom, 24)
+
+            HStack {
+                Text(MailResourcesStrings.Localizable.newAccountStorageMail)
+                    .textStyle(.labelMediumAccent)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    .padding(8)
+                    .background(accentColor.secondary.swiftUIColor)
+                    .clipShape(Capsule())
+                    .multilineTextAlignment(.center)
+                Text(MailResourcesStrings.Localizable.newAccountStorageDrive)
+                    .textStyle(.labelMediumAccent)
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+                    .padding(8)
+                    .background(accentColor.secondary.swiftUIColor)
+                    .clipShape(Capsule())
+                    .multilineTextAlignment(.center)
+            }
+            .fixedSize(horizontal: false, vertical: true)
+            .padding(.bottom, 24)
+
+            Text(MailResourcesStrings.Localizable.newAccountDescription)
+                .textStyle(.bodySmallSecondary)
+                .padding(.bottom, 24)
+                .multilineTextAlignment(.center)
+
+            Spacer()
+
+            MailButton(label: MailResourcesStrings.Localizable.buttonStart) {
+                @InjectService var matomo: MatomoUtils
+                matomo.track(eventWithCategory: .account, name: "openCreationWebview")
+                isPresentingCreateAccount.toggle()
+            }
+            .mailButtonFullWidth(true)
+            .padding(.bottom, 24)
+        }
+        .padding(.horizontal, 24)
+        .sheet(isPresented: $isPresentingCreateAccount) {
+            RegisterView(registrationProcess: .mail) { viewController in
+                guard let viewController else { return }
+                loginHandler.loginAfterAccountCreation(from: viewController)
+            }
+        }
+        .matomoView(view: [MatomoUtils.View.onboarding.displayName, "CreateAccount"])
+    }
+}
+
+struct CreateAccountView_Previews: PreviewProvider {
+    static var previews: some View {
+        CreateAccountView()
+    }
+}

MailCore/Models/Settings/AccentColor.swift

@@ -99,6 +99,15 @@ public enum AccentColor: String, CaseIterable, SettingsOptionEnum {
         }
     }
 
+    public var createAccountImage: MailResourcesImages {
+        switch self {
+        case .pink:
+            return MailResourcesAsset.createAccountPink
+        case .blue:
+            return MailResourcesAsset.createAccountBlue
+        }
+    }
+
     // MARK: Swipe settings icons
 
     public var fullTrailingIcon: MailResourcesImages {

MailCore/Utils/Matomo+Extension.swift

@@ -26,6 +26,7 @@ import SwiftUI
 public extension MatomoUtils.View {
     static let accountView = MatomoUtils.View(displayName: "AccountView")
     static let bottomSheet = MatomoUtils.View(displayName: "BottomSheet")
+    static let onboarding = MatomoUtils.View(displayName: "Onboarding")
     static let threadListView = MatomoUtils.View(displayName: "ThreadListView")
     static let threadView = MatomoUtils.View(displayName: "ThreadView")
     static let settingsView = MatomoUtils.View(displayName: "SettingsView")

MailResources/Assets.xcassets/create-account-blue.imageset/Contents.json

@@ -0,0 +1,25 @@
+{
+  "images" : [
+    {
+      "filename" : "create-account-blue-light.svg",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "create-account-blue-dark.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}