Rework Invite Code Experience

xcode/Subconscious/Shared/Components/Common/Forms/ValidatedTextField.swift

@@ -22,6 +22,7 @@ struct ValidatedFormField<T: Equatable>: View {
     var autoFocus: Bool = false
     var submitLabel: SubmitLabel = .done
     var onSubmit: () -> Void = {}
+    var onFocusChanged: (_ focused: Bool) -> Void = { _ in }
 
     var backgroundColor = Color.background
 
@@ -32,10 +33,6 @@ struct ValidatedFormField<T: Equatable>: View {
         return this
     }
 
-    var isValid: Bool {
-        !field.shouldPresentAsInvalid
-    }
-
     var body: some View {
         VStack(alignment: alignment, spacing: AppTheme.unit2) {
             HStack {
@@ -54,16 +51,22 @@ struct ValidatedFormField<T: Equatable>: View {
                             .background(backgroundColor)
                     }
                     .padding(.trailing, 1)
-                    .opacity(isValid ? 0 : 1)
-                    .animation(.default, value: isValid)
+                    .opacity(field.shouldPresentAsInvalid ? 1 : 0)
+                    .animation(.default, value: field.shouldPresentAsInvalid)
                 }
                 .onChange(of: focused) { focused in
                     send(.focusChange(focused: focused))
+                    onFocusChanged(focused)
                 }
-                .onChange(of: innerText, perform: { innerText in
+                .onChange(of: innerText) { innerText in
                     send(.setValue(input: innerText))
-                })
-                .submitLabel(submitLabel)
+                }
+                .onChange(of: field) { field in
+                    // The has been reset, sync inner value
+                    if !field.touched && innerText != field.value {
+                        innerText = field.value
+                    }
+                }
                 .onSubmit {
                     onSubmit()
                 }
@@ -75,9 +78,9 @@ struct ValidatedFormField<T: Equatable>: View {
             }
             Text(caption)
                 .foregroundColor(
-                    isValid ? Color.secondary : Color.red
+                    field.shouldPresentAsInvalid ? Color.red : Color.secondary
                 )
-                .animation(.default, value: isValid)
+                .animation(.default, value: field.shouldPresentAsInvalid)
                 .font(.caption)
         }
         .onAppear {

xcode/Subconscious/Shared/Components/Common/Profile/FollowUserFormSheet.swift

@@ -173,7 +173,7 @@ struct FollowNewUserFormSheetModel: ModelProtocol {
             return update(
                 state: state,
                 actions: [
-                    .form(.didField(.markAsTouched)),
+                    .form(.didField(.reset)),
                     .form(.didField(.setValue(input: content)))
                 ],
                 environment: environment

xcode/Subconscious/Shared/Components/Common/ResourceSyncBadge.swift

@@ -0,0 +1,45 @@
+//
+//  ResourceSyncBadge.swift
+//  Subconscious (iOS)
+//
+//  Created by Ben Follington on 30/6/2023.
+//
+
+import Foundation
+import SwiftUI
+
+struct PendingSyncBadge: View {
+    @State var spin = false
+
+    var body: some View {
+        Image(systemName: "arrow.triangle.2.circlepath")
+            .rotationEffect(.degrees(spin ? 360 : 0))
+            .animation(Animation.linear
+                .repeatForever(autoreverses: false)
+                .speed(0.4), value: spin)
+            .task{
+                self.spin = true
+            }
+    }
+}
+
+struct ResourceSyncBadge: View {
+    var status: ResourceStatus
+
+    var body: some View {
+        switch status {
+        case .initial:
+            Image(systemName: "arrow.triangle.2.circlepath")
+                .foregroundColor(.secondary)
+        case .pending:
+            PendingSyncBadge()
+                .foregroundColor(.secondary)
+        case .succeeded:
+            Image(systemName: "checkmark.circle")
+                .foregroundColor(.secondary)
+        case .failed:
+            Image(systemName: "exclamationmark.arrow.triangle.2.circlepath")
+                .foregroundColor(.red)
+        }
+    }
+}

xcode/Subconscious/Shared/Components/FirstRun/FirstRunDoneView.swift

@@ -12,7 +12,11 @@ struct FirstRunDoneView: View {
     @Environment(\.colorScheme) var colorScheme
 
     private var status: ResourceStatus {
-        app.state.gatewayProvisioningStatus
+        if app.state.lastGatewaySyncStatus == .succeeded {
+            return app.state.lastGatewaySyncStatus
+        }
+
+        return app.state.gatewayProvisioningStatus
     }
 
     private var dottedLine: some View {
@@ -88,7 +92,7 @@ struct FirstRunDoneView: View {
             Spacer()
             Button(
                 action: {
-                    app.send(.persistFirstRunComplete(true))
+                    app.send(.submitFirstRunDoneStep)
                 }
             ) {
                 Text("Begin")

xcode/Subconscious/Shared/Components/FirstRun/FirstRunProfileView.swift

@@ -30,9 +30,7 @@ struct FirstRunProfileView: View {
                     autoFocus: true,
                     submitLabel: .go,
                     onSubmit: {
-                        if app.state.nicknameFormField.isValid {
-                            app.send(.pushFirstRunStep(.sphere))
-                        }
+                        app.send(.submitFirstRunProfileStep)
                     }
                 )
                 .textFieldStyle(.roundedBorder)
@@ -48,12 +46,11 @@ struct FirstRunProfileView: View {
             Spacer()
 
             if !app.state.nicknameFormField.hasFocus {
-                NavigationLink(
-                    value: FirstRunStep.sphere,
-                    label: {
-                        Text("Continue")
-                    }
-                )
+                Button(action: {
+                    app.send(.submitFirstRunProfileStep)
+                }, label: {
+                    Text("Continue")
+                })
                 .buttonStyle(PillButtonStyle())
                 .disabled(!app.state.nicknameFormField.isValid)
             }
@@ -65,16 +62,6 @@ struct FirstRunProfileView: View {
             AppTheme.onboarding
                 .appBackgroundGradient(colorScheme)
         )
-        .onAppear {
-            app.send(.createSphere)
-        }
-        .onDisappear {
-            guard let nickname = app.state.nicknameFormField.validated else {
-                return
-            }
-
-            app.send(.submitNickname(nickname))
-        }
     }
 }
 

xcode/Subconscious/Shared/Components/FirstRun/FirstRunRecoveryView.swift

@@ -41,12 +41,12 @@ struct FirstRunRecoveryView: View {
                 .foregroundColor(.secondary)
                 .multilineTextAlignment(.center)
             Spacer()
-            NavigationLink(
-                value: FirstRunStep.connect,
-                label: {
-                    Text("Ok, I wrote it down")
-                }
-            )
+
+            Button(action: {
+                app.send(.submitFirstRunRecoveryStep)
+            }, label: {
+                Text("Ok, I wrote it down")
+            })
             .buttonStyle(PillButtonStyle())
         }
         .padding()

xcode/Subconscious/Shared/Components/FirstRun/FirstRunSphereView.swift

@@ -50,12 +50,11 @@ struct FirstRunSphereView: View {
 
             Spacer()
 
-            NavigationLink(
-                value: FirstRunStep.recovery,
-                label: {
-                    Text("Got it")
-                }
-            )
+            Button(action: {
+                app.send(.submitFirstRunSphereStep)
+            }, label: {
+                Text("Got it")
+            })
             .buttonStyle(PillButtonStyle())
         }
         .padding()

xcode/Subconscious/Shared/Components/FirstRun/FirstRunView.swift

@@ -7,6 +7,32 @@
 import ObservableStore
 import SwiftUI
 
+struct InviteCodeRedeemedView: View {
+    var gatewayId: String
+
+    var body: some View {
+        VStack(spacing: AppTheme.unit2) {
+            HStack(spacing: AppTheme.unit2) {
+                Image(systemName: "checkmark.circle")
+                    .resizable()
+                    .frame(width: 16, height: 16)
+                    .opacity(0.5)
+                Text("Invitation accepted")
+            }
+            .font(.body)
+            .bold()
+
+            HStack(spacing: AppTheme.unit) {
+                Text("Gateway ID")
+                    .bold()
+                Text(gatewayId)
+            }
+            .font(.caption)
+        }
+        .foregroundColor(.secondary)
+    }
+}
+
 struct FirstRunView: View {
     @ObservedObject var app: Store<AppModel>
     @Environment(\.colorScheme) var colorScheme
@@ -46,55 +72,69 @@ struct FirstRunView: View {
 
                 Spacer()
 
-                ValidatedFormField(
-                    alignment: .center,
-                    placeholder: "Enter your invite code",
-                    field: app.state.inviteCodeFormField,
-                    send: Address.forward(
-                        send: app.send,
-                        tag: AppAction.inviteCodeFormField
-                    ),
-                    caption: "Look for this in your welcome email.",
-                    submitLabel: .go,
-                    onSubmit: {
-                        if app.state.inviteCodeFormField.isValid {
-                            app.send(.pushFirstRunStep(.nickname))
+                if let gatewayId = app.state.gatewayId {
+                    InviteCodeRedeemedView(
+                        gatewayId: gatewayId
+                    )
+                } else {
+                    ValidatedFormField(
+                        alignment: .center,
+                        placeholder: "Enter your invite code",
+                        field: app.state.inviteCodeFormField,
+                        send: Address.forward(
+                            send: app.send,
+                            tag: AppAction.inviteCodeFormField
+                        ),
+                        caption: Func.run {
+                            switch app.state.inviteCodeRedemptionStatus {
+                            case .failed(_):
+                                return "Could not redeem invite code"
+                            case _:
+                                return "You can find your invite code in your welcome email"
+                            }
+                        },
+                        onFocusChanged: { focused in
+                            // User finished editing the field
+                            if !focused {
+                                app.send(.submitInviteCodeForm)
+                            }
                         }
-                    }
-                )
-                .textFieldStyle(.roundedBorder)
-                .textInputAutocapitalization(.never)
-                .disableAutocorrection(true)
-
+                    )
+                    .textFieldStyle(.roundedBorder)
+                    .textInputAutocapitalization(.never)
+                    .disableAutocorrection(true)
+                    .disabled(app.state.gatewayOperationInProgress)
+                }
 
                 if !app.state.inviteCodeFormField.hasFocus {
                     Spacer()
 
-                    NavigationLink(
-                        value: FirstRunStep.nickname,
-                        label: {
-                            Text("Get Started")
-                        }
-                    )
+                    Button(action: {
+                        app.send(.submitFirstRunWelcomeStep)
+                    }, label: {
+                        Text("Get Started")
+                    })
                     .buttonStyle(PillButtonStyle())
-                    .disabled(!app.state.inviteCodeFormField.isValid)
+                    .disabled(app.state.gatewayId == nil)
                 }
 
                 // MARK: Use Offline
-                HStack(spacing: AppTheme.unit) {
-                    Text("No invite code?")
-                        .font(.caption)
-                        .foregroundColor(.secondary)
-
-                    NavigationLink(
-                        value: FirstRunStep.nickname,
-                        label: {
-                            Text("Use offline")
+                VStack {
+                    if app.state.gatewayId == .none {
+                        HStack(spacing: AppTheme.unit) {
+                            Text("No invite code?")
                                 .font(.caption)
+                                .foregroundColor(.secondary)
+
+                            Button(action: {
+                                app.send(.requestOfflineMode)
+                            }, label: {
+                                Text("Use offline")
+                                    .font(.caption)
+                            })
                         }
-                    )
-                }
-                .padding(
+                    }
+                }.padding(
                     .init(
                         top: 0,
                         leading: 0,
@@ -114,16 +154,19 @@ struct FirstRunView: View {
                 for: FirstRunStep.self
             ) { step in
                 switch step {
-                case .nickname:
+                case .profile:
                     FirstRunProfileView(app: app)
                 case .sphere:
                     FirstRunSphereView(app: app)
                 case .recovery:
                     FirstRunRecoveryView(app: app)
-                case .connect:
+                case .done:
                     FirstRunDoneView(app: app)
                 }
             }
+            .onAppear {
+                app.send(.createSphere)
+            }
         }
     }
 }