WIP

Sources/Secretive/Views/ContentView.swift

@@ -88,7 +88,7 @@ extension ContentView {
                 }, label: {
                     Image(systemName: "plus")
                 })
-                .popover(isPresented: $showingCreation, attachmentAnchor: .point(.bottom), arrowEdge: .bottom) {
+                .sheet(isPresented: $showingCreation) {
                     if let modifiable = storeList.modifiableStore {
                         CreateSecretView(store: modifiable, showing: $showingCreation)
                     }

Sources/Secretive/Views/CreateSecretView.swift

@@ -8,32 +8,40 @@ struct CreateSecretView<StoreType: SecretStoreModifiable>: View {
 
     @State private var name = ""
     @State private var requiresAuthentication = true
+    @State private var test: ThumbnailPickerView.Item = ThumbnailPickerView.Item(name: "Test", description: "Hello", thumbnail: Text("Hello"))
 
     var body: some View {
         VStack {
             HStack {
-                Image(nsImage: NSApplication.shared.applicationIconImage)
-                    .resizable()
-                    .frame(width: 64, height: 64)
-                    .padding()
                 VStack {
                     HStack {
-                        Text("Create a New Secret").bold()
+                        Text("Create a New Secret")
+                            .font(.largeTitle)
                         Spacer()
                     }
                     HStack {
                         Text("Name:")
-                        TextField("Shhhhh", text: $name).focusable()
+                        TextField("Shhhhh", text: $name)
+                            .focusable()
                     }
-                    HStack {
+                    if #available(macOS 12.0, *) {
-                        VStack(spacing: 20) {
+                        ThumbnailPickerView(items: [
-                            Picker("", selection: $requiresAuthentication) {
+                            ThumbnailPickerView.Item(name: "Requires Authentication Before Use", description: "You will be required to authenticate using Touch ID, Apple Watch, or password before each use.", thumbnail: AuthenticationView()),
-                                Text("Requires Authentication (Biometrics or Password) before each use").tag(true)
+                            ThumbnailPickerView.Item(name: "Notify on Use",
-                                Text("Authentication not required when Mac is unlocked").tag(false)
+                                                     description: "No authentication is required while your Mac is unlocked.",
-                            }
+                                                     thumbnail: NotificationView())
-                            .pickerStyle(RadioGroupPickerStyle())
+                        ], selection: $test)
-                        }
+                    } else {
-                        Spacer()
+                        //                    HStack {
+                        //                        VStack(spacing: 20) {
+                        //                            Picker("", selection: $requiresAuthentication) {
+                        //                                Text("Requires Authentication (Biometrics or Password) before each use").tag(true)
+                        //                                Text("Authentication not required when Mac is unlocked").tag(false)
+                        //                            }
+                        //                            .pickerStyle(SegmentedPickerStyle())
+                        //                        }
+                        //                        Spacer()
+                        //                    }
                     }
                 }
             }
@@ -55,3 +63,193 @@ struct CreateSecretView<StoreType: SecretStoreModifiable>: View {
         showing = false
     }
 }
+
+struct ThumbnailPickerView: View {
+
+    let items: [Item]
+    @Binding var selection: Item
+
+    var body: some View {
+        HStack {
+            ForEach(items) { item in
+                VStack {
+                    item.thumbnail
+                        .clipShape(RoundedRectangle(cornerRadius: 10))
+                        .overlay(RoundedRectangle(cornerRadius: 10)
+                            .stroke(lineWidth: item.id == selection.id ? 5 : 0))
+                            .foregroundColor(.accentColor)
+                    Text(item.name)
+                        .bold()
+                    Text(item.description)
+                }.onTapGesture {
+                    selection = item
+                }
+            }
+        }.onAppear {
+            selection = items.first!
+        }
+    }
+
+}
+
+extension ThumbnailPickerView {
+
+    struct Item: Identifiable {
+        let id = UUID()
+        let name: String
+        let description: String
+        let thumbnail: AnyView
+
+        init<ViewType: View>(name: String, description: String, thumbnail: ViewType) {
+            self.name = name
+            self.description = description
+            self.thumbnail = AnyView(thumbnail)
+        }
+    }
+
+}
+
+@available(macOS 12.0, *)
+struct SystemBackgroundView: View {
+
+    let anchor: UnitPoint
+
+    var body: some View {
+        if let mainScreen = NSScreen.main, let imageURL = NSWorkspace.shared.desktopImageURL(for: mainScreen) {
+            AsyncImage(url: imageURL) { phase in
+                switch phase {
+                case .empty, .failure:
+                    Rectangle()
+                        .foregroundColor(Color(.systemPurple))
+                case .success(let image):
+                    image
+                        .resizable()
+                        .scaleEffect(3, anchor: anchor)
+                        .clipped()
+                @unknown default:
+                    Rectangle()
+                        .foregroundColor(Color(.systemPurple))
+                }
+            }
+        } else {
+            Rectangle()
+                .foregroundColor(Color(.systemPurple))
+        }
+    }
+}
+
+@available(macOS 12.0, *)
+struct AuthenticationView: View {
+
+    var body: some View {
+        ZStack {
+            SystemBackgroundView(anchor: .center)
+            VStack {
+                Spacer()
+                Image(systemName: "touchid")
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: 100)
+                    .foregroundColor(Color(.systemRed))
+                Spacer()
+                Text("Touch ID Prompt")
+                    .font(.largeTitle)
+                    .foregroundColor(.primary)
+                    .redacted(reason: .placeholder)
+                Spacer()
+                VStack {
+                    Text("Touch ID Detail prompt.Detail two.")
+                        .font(.title3)
+                        .foregroundColor(.primary)
+                    Text("Touch ID Detail prompt.Detail two.")
+                        .font(.title3)
+                        .foregroundColor(.primary)
+                }
+                .redacted(reason: .placeholder)
+                Spacer()
+                RoundedRectangle(cornerRadius: 10)
+                    .frame(width: 275, height: 40, alignment: .center)
+                    .foregroundColor(.accentColor)
+                RoundedRectangle(cornerRadius: 10)
+                    .frame(width: 275, height: 40, alignment: .center)
+                    .foregroundColor(Color(.unemphasizedSelectedContentBackgroundColor))
+            }
+            .padding()
+            .background(
+                RoundedRectangle(cornerRadius: 15)
+                    .foregroundStyle(.ultraThickMaterial)
+            )
+            .padding()
+        }
+    }
+
+}
+
+@available(macOS 12.0, *)
+struct NotificationView: View {
+
+    var body: some View {
+        ZStack {
+            SystemBackgroundView(anchor: .topTrailing)
+            VStack {
+                Rectangle()
+                    .background(Color.clear)
+                    .foregroundStyle(.thinMaterial)
+                    .frame(height: 35)
+                VStack {
+                    HStack {
+                        Spacer()
+                        HStack {
+                            Image(nsImage: NSApplication.shared.applicationIconImage)
+                                .resizable()
+                                .frame(width: 64, height: 64)
+                                .foregroundColor(.primary)
+                                .padding()
+                            VStack(alignment: .leading) {
+                                Text("Secretive")
+                                    .font(.largeTitle)
+                                    .foregroundColor(.primary)
+                                Text("Secretive wants to sign some request")
+                                    .font(.title3)
+                                    .foregroundColor(.primary)
+                                Text("Secretive wants to sign some request")
+                                    .font(.title3)
+                                    .foregroundColor(.primary)
+                            }
+                            .padding()
+                        }
+                        .redacted(reason: .placeholder)
+                        .background(
+                            RoundedRectangle(cornerRadius: 15)
+                                .foregroundStyle(.ultraThickMaterial)
+                        )
+                    }
+                    Spacer()
+                }
+                .padding()
+            }
+        }
+    }
+
+}
+
+#if DEBUG
+
+struct CreateSecretView_Previews: PreviewProvider {
+
+    static var previews: some View {
+        Group {
+            CreateSecretView(store: Preview.StoreModifiable(), showing: .constant(true))
+            if #available(macOS 12.0, *) {
+                AuthenticationView().environment(\.colorScheme, .dark)
+                AuthenticationView().environment(\.colorScheme, .light)
+                NotificationView().environment(\.colorScheme, .dark)
+                NotificationView().environment(\.colorScheme, .light)
+            } else {
+                // Fallback on earlier versions
+            }
+        }
+    }
+}
+
+#endif