[PM-33981] feat: Add device management UI and Account Security integration

BitwardenKit/UI/Platform/Application/Views/PillBadgeView.swift

@@ -9,6 +9,9 @@ public enum PillBadgeStyle {
     /// A danger style with red colors.
     case danger
 
+    /// An info style with blue colors.
+    case info
+
     /// A success style with green colors.
     case success
 
@@ -20,6 +23,8 @@ public enum PillBadgeStyle {
         switch self {
         case .danger:
             SharedAsset.Colors.badgeDangerBackground.swiftUIColor
+        case .info:
+            SharedAsset.Colors.badgeInfoBackground.swiftUIColor
         case .success:
             SharedAsset.Colors.badgeSuccessBackground.swiftUIColor
         case .warning:
@@ -32,6 +37,8 @@ public enum PillBadgeStyle {
         switch self {
         case .danger:
             SharedAsset.Colors.badgeDangerBorder.swiftUIColor
+        case .info:
+            SharedAsset.Colors.badgeInfoBorder.swiftUIColor
         case .success:
             SharedAsset.Colors.badgeSuccessBorder.swiftUIColor
         case .warning:
@@ -44,6 +51,8 @@ public enum PillBadgeStyle {
         switch self {
         case .danger:
             SharedAsset.Colors.badgeDangerText.swiftUIColor
+        case .info:
+            SharedAsset.Colors.badgeInfoText.swiftUIColor
         case .success:
             SharedAsset.Colors.badgeSuccessText.swiftUIColor
         case .warning:

BitwardenResources/Colors.xcassets/Badge/badgeDangerBackground.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xF2",
-          "green" : "0xF2",
-          "red" : "0xFE"
+          "blue" : "0x09",
+          "green" : "0x08",
+          "red" : "0x46"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeDangerBorder.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xC9",
-          "green" : "0xC9",
-          "red" : "0xFF"
+          "blue" : "0x12",
+          "green" : "0x07",
+          "red" : "0x9F"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeDangerText.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x2A",
-          "green" : "0x1B",
-          "red" : "0x95"
+          "blue" : "0xC9",
+          "green" : "0xC9",
+          "red" : "0xFF"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeInfoBackground.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xF6",
+          "red" : "0xEE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x55",
+          "green" : "0x24",
+          "red" : "0x16"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

BitwardenResources/Colors.xcassets/Badge/badgeInfoBorder.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xDB",
+          "red" : "0xBE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xAC",
+          "green" : "0x41",
+          "red" : "0x1A"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

BitwardenResources/Colors.xcassets/Badge/badgeInfoText.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xAC",
+          "green" : "0x41",
+          "red" : "0x1A"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF6",
+          "green" : "0xE5",
+          "red" : "0xDB"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

BitwardenResources/Colors.xcassets/Badge/badgeSuccessBackground.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xF4",
-          "green" : "0xFD",
-          "red" : "0xF0"
+          "blue" : "0x15",
+          "green" : "0x2E",
+          "red" : "0x03"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeSuccessBorder.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xCF",
-          "green" : "0xF8",
-          "red" : "0xB9"
+          "blue" : "0x30",
+          "green" : "0x66",
+          "red" : "0x01"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeSuccessText.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x0F",
-          "green" : "0x54",
-          "red" : "0x08"
+          "blue" : "0xCF",
+          "green" : "0xF8",
+          "red" : "0xB9"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeWarningBackground.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xF1",
-          "green" : "0xF8",
-          "red" : "0xFF"
+          "blue" : "0x00",
+          "green" : "0x16",
+          "red" : "0x44"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeWarningBorder.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0xBD",
-          "green" : "0xD9",
-          "red" : "0xFC"
+          "blue" : "0x03",
+          "green" : "0x22",
+          "red" : "0x8A"
         }
       },
       "idiom" : "universal"

BitwardenResources/Colors.xcassets/Badge/badgeWarningText.colorset/Contents.json

@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0x00",
-          "green" : "0x33",
-          "red" : "0xB2"
+          "blue" : "0xBD",
+          "green" : "0xD9",
+          "red" : "0xFC"
         }
       },
       "idiom" : "universal"

BitwardenResources/Localizations/en.lproj/Localizable.strings

@@ -1169,6 +1169,15 @@
 "LineOfCredit" = "Line of credit";
 "MoneyMarket" = "Money market";
 "Savings" = "Savings";
+"Devices" = "Devices";
+"NoDevicesFound" = "No devices found";
+"CurrentSession" = "Current session";
+"PendingRequest" = "Pending request";
+"Trusted" = "Trusted";
+"RecentlyActiveLabel" = "Recently active:";
+"RecentlyActiveX" = "Recently active: %1$@";
+"FirstLoginLabel" = "First login:";
+"FirstLoginX" = "First login: %1$@";
 "Today" = "Today";
 "ThisWeek" = "This week";
 "LastWeek" = "Last week";

BitwardenShared/Core/Auth/Models/Enum/DeviceTypeCategory.swift

@@ -114,27 +114,4 @@ extension DeviceType {
         }
         return Localizations.deviceDisplayName(category.displayName, platform)
     }
-
-    /// A match key used to correlate this device type with a pending login request's
-    /// `requestDeviceType` string. Differs from `platform` for extension types so that
-    /// e.g. `chromeExtension` ("Chrome Extension") is not confused with `chromeBrowser`
-    /// ("Chrome") when both are active simultaneously.
-    var pendingRequestMatchKey: String {
-        switch self {
-        case .chromeExtension:
-            "Chrome Extension"
-        case .firefoxExtension:
-            "Firefox Extension"
-        case .operaExtension:
-            "Opera Extension"
-        case .edgeExtension:
-            "Edge Extension"
-        case .safariExtension:
-            "Safari Extension"
-        case .vivaldiExtension:
-            "Vivaldi Extension"
-        default:
-            platform
-        }
-    }
 }

BitwardenShared/Core/Auth/Models/Enum/DeviceTypeCategoryTests.swift

@@ -111,24 +111,4 @@ struct DeviceTypeCategoryDeviceTypeExtensionTests {
         #expect(DeviceType.server.displayName == Localizations.server)
         #expect(DeviceType.unknownBrowser.displayName == Localizations.unknown)
     }
-
-    /// `pendingRequestMatchKey` returns the extension-specific label for extension types.
-    @Test(arguments: [
-        (DeviceType.chromeExtension, "Chrome Extension"),
-        (.firefoxExtension, "Firefox Extension"),
-        (.operaExtension, "Opera Extension"),
-        (.edgeExtension, "Edge Extension"),
-        (.safariExtension, "Safari Extension"),
-        (.vivaldiExtension, "Vivaldi Extension"),
-    ])
-    func pendingRequestMatchKey_extension(type: DeviceType, expected: String) {
-        #expect(type.pendingRequestMatchKey == expected)
-    }
-
-    /// `pendingRequestMatchKey` falls back to `platform` for non-extension types.
-    @Test
-    func pendingRequestMatchKey_default() {
-        #expect(DeviceType.chromeBrowser.pendingRequestMatchKey == "Chrome")
-        #expect(DeviceType.iOS.pendingRequestMatchKey == "iOS")
-    }
 }

BitwardenShared/Core/Platform/Models/Enum/FeatureFlag.swift

@@ -38,6 +38,9 @@ extension FeatureFlag: @retroactive CaseIterable {
     /// Flag to enable/disable Fill-Assist targeting rules.
     static let fillAssistTargetingRules = FeatureFlag(rawValue: "fill-assist-targeting-rules")
 
+    /// Feature flag for device management screen.
+    static let manageDevices = FeatureFlag(rawValue: "pm-4516-manage-devices")
+
     /// Flag to enable/disable migration from My Vault Items to My Items.
     static let migrateMyVaultToMyItems = FeatureFlag(rawValue: "pm-20558-migrate-myvault-to-myitems")
 
@@ -70,6 +73,7 @@ extension FeatureFlag: @retroactive CaseIterable {
             .deviceAuthKey,
             .enableCipherKeyEncryption,
             .fillAssistTargetingRules,
+            .manageDevices,
             .migrateMyVaultToMyItems,
             .newItemTypes,
             .noLogoutOnKdfChange,

BitwardenShared/UI/Platform/Settings/Settings/AccountSecurity/AccountSecurityAction.swift

@@ -21,6 +21,9 @@ enum AccountSecurityAction: Equatable {
     /// The logout button was pressed.
     case logout
 
+    /// The manage devices button was tapped.
+    case manageDevicesTapped
+
     /// The pending login requests button was tapped.
     case pendingLoginRequestsTapped
 

BitwardenShared/UI/Platform/Settings/Settings/AccountSecurity/AccountSecurityProcessor.swift

@@ -99,6 +99,8 @@ final class AccountSecurityProcessor: StateProcessor<// swiftlint:disable:this t
             coordinator.navigate(to: .deleteAccount)
         case .logout:
             showLogoutConfirmation()
+        case .manageDevicesTapped:
+            coordinator.navigate(to: .deviceManagement)
         case .pendingLoginRequestsTapped:
             coordinator.navigate(to: .pendingLoginRequests)
         case let .sessionTimeoutActionChanged(newValue):
@@ -181,6 +183,8 @@ final class AccountSecurityProcessor: StateProcessor<// swiftlint:disable:this t
 
             state.isAuthenticatorSyncEnabled = try await services.stateService.getSyncToAuthenticator()
 
+            state.isManageDevicesEnabled = await services.configService.getFeatureFlag(.manageDevices)
+
             if state.biometricUnlockStatus.isEnabled || state.isUnlockWithPINCodeOn {
                 await completeAccountSetupVaultUnlockIfNeeded()
             }