Add a error view to authentication (#401)

Automattic · Sep 12, 2024 · 977b8e8 · 977b8e8
1 parent c8708e7
commit 977b8e8
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 19 deletions.
diff --git a/Demo/Demo/Gravatar-SwiftUI-Demo/DemoProfileEditorView.swift b/Demo/Demo/Gravatar-SwiftUI-Demo/DemoProfileEditorView.swift
@@ -30,7 +30,7 @@ struct DemoProfileEditorView: View {
                 isPresented: $isPresentingPicker,
                 email: email,
                 scope: .avatarPicker,
-                contentLayout: AvatarPickerContentLayoutWithPresentation.vertical(),
+                contentLayout: .horizontal(),
                 onDismiss: {
                     updateHasSession(with: email)
                 }

diff --git a/Sources/GravatarUI/SwiftUI/AvatarPicker/AvatarPickerView.swift b/Sources/GravatarUI/SwiftUI/AvatarPicker/AvatarPickerView.swift
@@ -19,7 +19,7 @@ struct AvatarPickerView<ImageEditor: ImageEditorView>: View {
     public var body: some View {
         ZStack {
             VStack(spacing: 0) {
-                email()
+                EmailText(email: model.email)
                     .accumulateIntrinsicHeight()
                 profileView()
                     .accumulateIntrinsicHeight()
@@ -61,16 +61,6 @@ struct AvatarPickerView<ImageEditor: ImageEditorView>: View {
         }
     }
 
-    @ViewBuilder
-    private func email() -> some View {
-        if let email = model.email?.rawValue, !email.isEmpty {
-            Text(email)
-                .padding(.bottom, Constants.emailBottomSpacing / 2)
-                .font(.footnote)
-                .foregroundColor(Color(UIColor.secondaryLabel))
-        }
-    }
-
     private func header() -> some View {
         VStack(alignment: .leading) {
             Text(Localized.Header.title)
@@ -281,7 +271,7 @@ struct AvatarPickerView<ImageEditor: ImageEditorView>: View {
                 .cornerRadius(8)
                 .shadow(color: profileShadowColor, radius: profileShadowRadius, y: 3)
         })
-        .padding(.top, Constants.emailBottomSpacing / 2)
+        .padding(.top, Constants.profileViewTopSpacing / 2)
         .padding(.bottom, Constants.vStackVerticalSpacing)
         .padding(.horizontal, Constants.horizontalPadding)
     }
@@ -312,7 +302,7 @@ private enum AvatarPicker {
         static let lightModeShadowColor = Color(uiColor: UIColor.rgba(25, 30, 35, alpha: 0.2))
         static let title: String = "Gravatar" // defined here to avoid translations
         static let vStackVerticalSpacing: CGFloat = .DS.Padding.medium
-        static let emailBottomSpacing: CGFloat = .DS.Padding.double
+        static let profileViewTopSpacing: CGFloat = .DS.Padding.double
     }
 
     enum Localized {

diff --git a/Sources/GravatarUI/SwiftUI/AvatarPicker/Views/EmailText.swift b/Sources/GravatarUI/SwiftUI/AvatarPicker/Views/EmailText.swift
@@ -0,0 +1,17 @@
+import SwiftUI
+
+struct EmailText: View {
+    enum Constants {
+        static let bottomSpacing: CGFloat = .DS.Padding.double
+    }
+
+    let email: Email?
+    var body: some View {
+        if let email = email?.rawValue, !email.isEmpty {
+            Text(email)
+                .padding(.bottom, Constants.bottomSpacing / 2)
+                .font(.footnote)
+                .foregroundColor(Color(UIColor.secondaryLabel))
+        }
+    }
+}
diff --git a/Sources/GravatarUI/SwiftUI/ProfileEditor/QuickEditor.swift b/Sources/GravatarUI/SwiftUI/ProfileEditor/QuickEditor.swift
@@ -66,11 +66,27 @@ struct QuickEditor<ImageEditor: ImageEditorView>: View {
     func noticeView() -> some View {
         VStack {
             if !isAuthenticating {
-                Button("Authenticate (Future error view)") {
-                    Task {
-                        performAuthentication()
-                    }
-                }
+                EmailText(email: email)
+                ContentLoadingErrorView(
+                    title: Constants.Localized.LogInError.title,
+                    subtext: Constants.Localized.LogInError.subtext,
+                    image: nil,
+                    actionButton: {
+                        Button {
+                            performAuthentication()
+                        } label: {
+                            CTAButtonView(Constants.Localized.LogInError.buttonTitle)
+                        }
+                    },
+                    innerPadding: .init(
+                        top: .DS.Padding.double,
+                        leading: .DS.Padding.double,
+                        bottom: .DS.Padding.double,
+                        trailing: .DS.Padding.double
+                    )
+                )
+                .padding(.horizontal, .DS.Padding.double)
+                Spacer()
             } else {
                 ProgressView()
             }
@@ -99,6 +115,30 @@ struct QuickEditor<ImageEditor: ImageEditorView>: View {
     }
 }
 
+extension QuickEditorConstants {
+    enum Localized {
+        enum LogInError {
+            static let title = SDKLocalizedString(
+                "AvatarPicker.ContentLoading.Failure.LogInError.title",
+                value: "Login required",
+                comment: "Title of a message advising the user that something went wrong while trying to log in."
+            )
+
+            static let buttonTitle = SDKLocalizedString(
+                "AvatarPicker.ContentLoading.Failure.SessionExpired.LogInError.buttonTitle",
+                value: "Log in",
+                comment: "Title of a button that will begin the process of authenticating the user, appearing beneath a message stating that a previous log in attept has failed."
+            )
+
+            static let subtext = SDKLocalizedString(
+                "AvatarPicker.ContentLoading.Failure.SessionExpired.LogInError.subtext",
+                value: "To modify your Gravatar profile, you need to log in first.",
+                comment: "A message describing the error and advising the user to login again to resolve the issue"
+            )
+        }
+    }
+}
+
 #Preview {
     QuickEditor<NoCustomEditor>(
         email: .init(""),