feat: 🎸 [0]Add Passcode Policy support to the Authentication (#1733)

* feat: 🎸 [0]Add Passcode Policy support to the Authentication

* fix: 🐛 bot suggestion

Author: KevinZK

Apps/Examples/Examples/FioriSwiftUICore/Onboarding/AuthenticationScreenSample.swift

@@ -23,7 +23,25 @@ struct AuthenticationExamples: View {
             Button("Dynamic Authentication") {
                 self.showsDynamicAuth = true
             }
-            
+
+            NavigationLink(
+                destination: PasscodePolicyAuthenticationExample(showsIllustratedMessage: self.showsIllustratedMessage))
+            {
+                Text("Passcode Policy")
+            }
+
+            NavigationLink(
+                destination: CreatePasscodeFlowExample(showsIllustratedMessage: self.showsIllustratedMessage))
+            {
+                Text("Create Passcode Flow")
+            }
+
+            NavigationLink(
+                destination: CustomInputPasscodePolicyExample(showsIllustratedMessage: self.showsIllustratedMessage))
+            {
+                Text("Passcode Policy (Custom Input)")
+            }
+
             Toggle(isOn: self.$showsIllustratedMessage) {
                 Text("Show Illustration Message")
             }
@@ -219,3 +237,176 @@ struct AuthenticationExample: View {
                            messageType: self.messageType)
     }
 }
+
+// MARK: - Passcode Policy (single screen)
+
+/// Demonstrates a single-screen passcode entry validated against a `FioriPasscodePolicy`.
+struct PasscodePolicyAuthenticationExample: View {
+    @State private var passcode: String = ""
+    @State var showsIllustratedMessage: Bool
+
+    private let policy: FioriPasscodePolicy = {
+        var policy = FioriPasscodePolicy(minLength: 8, hasDigit: true, hasUpper: true, hasSpecial: true, minUniqueChars: 4)
+        policy.addPasscodeRule(FioriPasscodeRule(displayName: "At least 2 lowercase letters", isDisplayed: true) { passcode in
+            passcode.unicodeScalars.filter { CharacterSet.lowercaseLetters.contains($0) }.count >= 2
+        })
+        return policy
+    }()
+
+    var body: some View {
+        Authentication(detailImage: {
+            if self.showsIllustratedMessage {
+                Image(.illustration).resizable().aspectRatio(contentMode: .fit)
+            }
+        }, title: {
+            Text("Create Passcode")
+        }, subtitle: {
+            Text("Your passcode must meet the requirements below.")
+        }, isDisabled: !self.policy.validate(passcode: self.passcode)) {
+            print("passcode accepted ......")
+        }
+        .authenticationStyle(PasscodePolicyAuthenticationStyle(passcode: self.$passcode, policy: self.policy))
+        .navigationBarTitle("Passcode Policy", displayMode: .inline)
+    }
+}
+
+// MARK: - Create Passcode Flow (two steps: create -> confirm)
+
+/// Demonstrates a two-step "create passcode" flow using `PasscodePolicyAuthenticationStyle`:
+/// 1. `CreatePasscodeView` — enter a new passcode that must satisfy the policy.
+/// 2. `ConfirmPasscodeView` — re-enter the passcode; it must match the one from step 1.
+struct CreatePasscodeFlowExample: View {
+    @State var showsIllustratedMessage: Bool
+
+    /// The policy for the "create" step.
+    private let policy: FioriPasscodePolicy = {
+        var policy = FioriPasscodePolicy(minLength: 8, hasDigit: true, hasUpper: true, hasSpecial: true, minUniqueChars: 4)
+        policy.addPasscodeRule(FioriPasscodeRule(displayName: "At least 2 lowercase letters", isDisplayed: true) { passcode in
+            passcode.unicodeScalars.filter { CharacterSet.lowercaseLetters.contains($0) }.count >= 2
+        })
+        return policy
+    }()
+
+    var body: some View {
+        CreatePasscodeView(policy: self.policy, showsIllustratedMessage: self.showsIllustratedMessage)
+    }
+}
+
+/// Step 1: enter a new passcode that satisfies the policy, then continue to confirmation.
+struct CreatePasscodeView: View {
+    let policy: FioriPasscodePolicy
+    var showsIllustratedMessage: Bool
+
+    @State private var passcode: String = ""
+    @State private var showsConfirm: Bool = false
+
+    var body: some View {
+        Authentication(detailImage: {
+            if self.showsIllustratedMessage {
+                Image(.illustration).resizable().aspectRatio(contentMode: .fit)
+            }
+        }, title: {
+            Text("Create Passcode")
+        }, subtitle: {
+            Text("Your passcode must meet the requirements below.")
+        }, signInAction: {
+            FioriButton { _ in Text("Next") }
+        }, isDisabled: !self.policy.validate(passcode: self.passcode)) {
+            self.showsConfirm = true
+        }
+        .authenticationStyle(PasscodePolicyAuthenticationStyle(passcode: self.$passcode, policy: self.policy))
+        .navigationBarTitle("Create Passcode", displayMode: .inline)
+        .navigationDestination(isPresented: self.$showsConfirm) {
+            ConfirmPasscodeView(originalPasscode: self.passcode, showsIllustratedMessage: self.showsIllustratedMessage)
+        }
+    }
+}
+
+/// Step 2: re-enter the passcode; it must match the one created in step 1.
+struct ConfirmPasscodeView: View {
+    let originalPasscode: String
+    var showsIllustratedMessage: Bool
+
+    @Environment(\.dismiss) private var dismiss
+    @State private var passcode: String = ""
+    @State private var isPresentedBanner: Bool = false
+
+    /// A policy whose single displayed requirement is "matches the original passcode".
+    private var confirmPolicy: FioriPasscodePolicy {
+        var policy = FioriPasscodePolicy(minLength: 0)
+        let original = self.originalPasscode
+        policy.addPasscodeRule(FioriPasscodeRule(displayName: "Matches the passcode above", isDisplayed: true) { passcode in
+            !passcode.isEmpty && passcode == original
+        })
+        return policy
+    }
+
+    var body: some View {
+        Authentication(detailImage: {
+            if self.showsIllustratedMessage {
+                Image(.illustration).resizable().aspectRatio(contentMode: .fit)
+            }
+        }, title: {
+            Text("Confirm Passcode")
+        }, subtitle: {
+            Text("Re-enter your passcode to confirm.")
+        }, signInAction: {
+            FioriButton { _ in Text("Done") }
+        }, isDisabled: !self.confirmPolicy.validate(passcode: self.passcode)) {
+            print("passcode created ......")
+            self.isPresentedBanner = true
+        }
+        .authenticationStyle(PasscodePolicyAuthenticationStyle(passcode: self.$passcode, policy: self.confirmPolicy))
+        .navigationBarTitle("Confirm Passcode", displayMode: .inline)
+        .bannerMessageView(isPresented: self.$isPresentedBanner,
+                           pushContentDown: .constant(false),
+                           icon: { EmptyView() },
+                           title: "Passcode created successfully",
+                           bannerTapped: nil,
+                           alignment: nil,
+                           messageType: .positive)
+    }
+}
+
+// MARK: - Passcode Policy with custom authInput
+
+/// Demonstrates supplying a custom `authInput` (multiple fields / custom styles) while still
+/// letting `PasscodePolicyAuthenticationStyle` append the live requirement checklist below it.
+/// The custom passcode field and the style share the same `passcode` binding, so the checklist
+/// updates as the user types.
+struct CustomInputPasscodePolicyExample: View {
+    @State private var name: String = ""
+    @State private var passcode: String = ""
+    @State var showsIllustratedMessage: Bool
+
+    private let policy = FioriPasscodePolicy(minLength: 8, hasDigit: true, hasUpper: true, hasSpecial: true, minUniqueChars: 4)
+
+    var body: some View {
+        Authentication(detailImage: {
+            if self.showsIllustratedMessage {
+                Image(.illustration).resizable().aspectRatio(contentMode: .fit)
+            }
+        }, title: {
+            Text("Create Passcode")
+        }, subtitle: {
+            Text("Custom fields with an appended requirement checklist.")
+        }, authInput: {
+            VStack(spacing: 16) {
+                TextFieldFormView(title: "User Name:", text: self.$name, placeholder: "Enter your name")
+                    .textFieldFormViewStyle(AuthTextFieldStyle())
+                    .titleStyle { config in
+                        config.title.font(.fiori(forTextStyle: .headline, weight: .medium))
+                    }
+                TextFieldFormView(title: "Passcode:", text: self.$passcode, isSecureEnabled: true, placeholder: "Enter your passcode")
+                    .textFieldFormViewStyle(AuthTextFieldStyle())
+                    .titleStyle { config in
+                        config.title.font(.fiori(forTextStyle: .headline, weight: .medium))
+                    }
+            }
+        }, isDisabled: self.name.isEmpty || !self.policy.validate(passcode: self.passcode)) {
+            print("passcode accepted ......")
+        }
+        .authenticationStyle(PasscodePolicyAuthenticationStyle(passcode: self.$passcode, policy: self.policy))
+        .navigationBarTitle("Custom Input", displayMode: .inline)
+    }
+}