Stop using Form in Tic-Tac-Toe example (#448)

Author: stephencelis

Examples/TicTacToe/Sources/Views-SwiftUI/LoginSwiftView.swift

@@ -33,56 +33,59 @@ public struct LoginView: View {
 
   public var body: some View {
     WithViewStore(self.store.scope(state: { $0.view }, action: LoginAction.view)) { viewStore in
-      VStack {
-        Form {
-          Section(
-            header: Text(
-              """
+      ScrollView {
+        VStack(spacing: 16) {
+          Text(
+            """
               To login use any email and "password" for the password. If your email contains the \
               characters "2fa" you will be taken to a two-factor flow, and on that screen you can \
               use "1234" for the code.
               """
-            )
-          ) { EmptyView() }
+          )
 
-          Section(header: Text("Email")) {
+          VStack(alignment: .leading) {
+            Text("Email")
             TextField(
               "[email protected]",
               text: viewStore.binding(get: { $0.email }, send: ViewAction.emailChanged)
             )
             .autocapitalization(.none)
             .keyboardType(.emailAddress)
             .textContentType(.emailAddress)
+            .textFieldStyle(RoundedBorderTextFieldStyle())
           }
-          Section(header: Text("Password")) {
+
+          VStack(alignment: .leading) {
+            Text("Password")
             SecureField(
               "••••••••",
               text: viewStore.binding(get: { $0.password }, send: ViewAction.passwordChanged)
             )
+            .textFieldStyle(RoundedBorderTextFieldStyle())
           }
-          Section {
-            NavigationLink(
-              destination: IfLetStore(
-                self.store.scope(state: { $0.twoFactor }, action: LoginAction.twoFactor),
-                then: TwoFactorView.init(store:)
-              ),
-              isActive: viewStore.binding(
-                get: { $0.isTwoFactorActive },
-                send: { $0 ? .loginButtonTapped : .twoFactorDismissed }
-              )
-            ) {
-              Text("Log in")
 
-              if viewStore.isActivityIndicatorVisible {
-                ActivityIndicator()
-              }
+          NavigationLink(
+            destination: IfLetStore(
+              self.store.scope(state: { $0.twoFactor }, action: LoginAction.twoFactor),
+              then: TwoFactorView.init(store:)
+            ),
+            isActive: viewStore.binding(
+              get: { $0.isTwoFactorActive },
+              send: { $0 ? .loginButtonTapped : .twoFactorDismissed }
+            )
+          ) {
+            Text("Log in")
+
+            if viewStore.isActivityIndicatorVisible {
+              ActivityIndicator()
             }
-            .disabled(viewStore.isLoginButtonDisabled)
           }
+          .disabled(viewStore.isLoginButtonDisabled)
         }
+        .alert(self.store.scope(state: { $0.alert }), dismiss: .alertDismissed)
         .disabled(viewStore.isFormDisabled)
+        .padding(.horizontal)
       }
-      .alert(self.store.scope(state: { $0.alert }), dismiss: .alertDismissed)
     }
     .navigationBarTitle("Login")
     // NB: This is necessary to clear the bar items from the game.

Examples/TicTacToe/Sources/Views-SwiftUI/NewGameSwiftView.swift

@@ -29,42 +29,47 @@ public struct NewGameView: View {
 
   public var body: some View {
     WithViewStore(self.store.scope(state: { $0.view }, action: NewGameAction.view)) { viewStore in
-      VStack {
-        Form {
-          Section(header: Text("X Player Name")) {
+      ScrollView {
+        VStack(spacing: 16) {
+          VStack(alignment: .leading) {
+            Text("X Player Name")
             TextField(
               "Blob Sr.",
               text: viewStore.binding(get: { $0.xPlayerName }, send: ViewAction.xPlayerNameChanged)
             )
             .autocapitalization(.words)
             .disableAutocorrection(true)
             .textContentType(.name)
+            .textFieldStyle(RoundedBorderTextFieldStyle())
           }
-          Section(header: Text("O Player Name")) {
+          
+          VStack(alignment: .leading) {
+            Text("O Player Name")
             TextField(
               "Blob Jr.",
               text: viewStore.binding(get: { $0.oPlayerName }, send: ViewAction.oPlayerNameChanged)
             )
             .autocapitalization(.words)
             .disableAutocorrection(true)
             .textContentType(.name)
+            .textFieldStyle(RoundedBorderTextFieldStyle())
           }
-          Section {
-            NavigationLink(
-              destination: IfLetStore(
-                self.store.scope(state: { $0.game }, action: NewGameAction.game),
-                then: GameView.init(store:)
-              ),
-              isActive: viewStore.binding(
-                get: { $0.isGameActive },
-                send: { $0 ? .letsPlayButtonTapped : .gameDismissed }
-              )
-            ) {
-              Text("Let's play!")
-            }
-            .disabled(viewStore.isLetsPlayButtonDisabled)
+
+          NavigationLink(
+            destination: IfLetStore(
+              self.store.scope(state: { $0.game }, action: NewGameAction.game),
+              then: GameView.init(store:)
+            ),
+            isActive: viewStore.binding(
+              get: { $0.isGameActive },
+              send: { $0 ? .letsPlayButtonTapped : .gameDismissed }
+            )
+          ) {
+            Text("Let's play!")
           }
+          .disabled(viewStore.isLetsPlayButtonDisabled)
         }
+        .padding(.horizontal)
       }
       .navigationBarTitle("New Game")
       .navigationBarItems(trailing: Button("Logout") { viewStore.send(.logoutButtonTapped) })

Examples/TicTacToe/Sources/Views-SwiftUI/TwoFactorSwiftView.swift

@@ -27,22 +27,20 @@ public struct TwoFactorView: View {
 
   public var body: some View {
     WithViewStore(self.store.scope(state: { $0.view }, action: TwoFactorAction.view)) { viewStore in
-      Form {
-        Section(
-          header: Text(#"To confirm the second factor enter "1234" into the form."#)
-        ) {
-          EmptyView()
-        }
+      ScrollView {
+        VStack(spacing: 16) {
+          Text(#"To confirm the second factor enter "1234" into the form."#)
 
-        Section(header: Text("Code")) {
-          TextField(
-            "1234",
-            text: viewStore.binding(get: { $0.code }, send: ViewAction.codeChanged)
-          )
-          .keyboardType(.numberPad)
-        }
+          VStack(alignment: .leading) {
+            Text("Code")
+            TextField(
+              "1234",
+              text: viewStore.binding(get: { $0.code }, send: ViewAction.codeChanged)
+            )
+            .keyboardType(.numberPad)
+            .textFieldStyle(RoundedBorderTextFieldStyle())
+          }
 
-        Section {
           HStack {
             Button("Submit") {
               viewStore.send(.submitButtonTapped)
@@ -54,11 +52,12 @@ public struct TwoFactorView: View {
             }
           }
         }
+        .alert(self.store.scope(state: { $0.alert }), dismiss: .alertDismissed)
+        .disabled(viewStore.isFormDisabled)
+        .padding(.horizontal)
       }
-      .disabled(viewStore.isFormDisabled)
-      .alert(self.store.scope(state: { $0.alert }), dismiss: .alertDismissed)
     }
-    .navigationBarTitle("Two Factor Confirmation")
+    .navigationBarTitle("Confirmation Code")
   }
 }