diff --git a/addons/rose/addon/components/rose/form/checkbox/index.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
index d9b655458..c8f759924 100644
--- a/addons/rose/addon/components/rose/form/checkbox/index.hbs
+++ b/addons/rose/addon/components/rose/form/checkbox/index.hbs
@@ -6,6 +6,7 @@
     id={{this.id}}
     name={{@name}}
     disabled={{@disabled}}
+    onChange={{@onChange}}
     @type="checkbox"
     @checked={{if @checked true false}}
     aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 0d0118526..8d9f8b7d8 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -50,6 +50,7 @@
     "@storybook/addons": "^6.3.9",
     "@storybook/api": "^6.3.12",
     "@storybook/cli": "^6.3.10",
+    "@storybook/components": "^6.3.12",
     "@storybook/ember": "^6.3.8",
     "@storybook/ember-cli-storybook": "^0.4.0",
     "babel-eslint": "^10.1.0",
diff --git a/ui/admin/app/components/form/auth-method/oidc/index.hbs b/ui/admin/app/components/form/auth-method/oidc/index.hbs
index 75f421880..1e5cf26d8 100644
--- a/ui/admin/app/components/form/auth-method/oidc/index.hbs
+++ b/ui/admin/app/components/form/auth-method/oidc/index.hbs
@@ -81,7 +81,7 @@
     @label={{t 'form.disable_discovered_config_validation.label'}}
     @helperText={{t 'form.disable_discovered_config_validation.help'}}
     @checked={{@model.attributes.disable_discovered_config_validation}}
-    onChange={{fn
+    @onChange={{fn
       (mut @model.attributes.disable_discovered_config_validation)
       (if @model.attributes.disable_discovered_config_validation false true)
     }}
diff --git a/ui/admin/app/components/form/credential-store/index.hbs b/ui/admin/app/components/form/credential-store/index.hbs
index 4da5e3ad3..8f8850784 100644
--- a/ui/admin/app/components/form/credential-store/index.hbs
+++ b/ui/admin/app/components/form/credential-store/index.hbs
@@ -145,7 +145,7 @@
     @label={{t 'resources.credential-store.form.tls_skip_verify.label'}}
     @helperText={{t 'resources.credential-store.form.tls_skip_verify.help'}}
     @checked={{@model.attributes.tls_skip_verify}}
-    onChange={{fn
+    @onChange={{fn
       (mut @model.attributes.tls_skip_verify)
       (if @model.attributes.tls_skip_verify false true)
     }}
diff --git a/ui/admin/app/components/form/group/add-members/index.hbs b/ui/admin/app/components/form/group/add-members/index.hbs
index 9a2767a7c..49d5233cb 100644
--- a/ui/admin/app/components/form/group/add-members/index.hbs
+++ b/ui/admin/app/components/form/group/add-members/index.hbs
@@ -27,7 +27,7 @@
             <row.headerCell>
               <form.checkbox
                 @label={{user.displayName}}
-                onChange={{fn this.toggleMember user}}
+                @onChange={{fn this.toggleMember user}}
               />
               {{#if user.accountName}}
                 {{!
diff --git a/ui/admin/app/components/form/host-set/add-hosts/index.hbs b/ui/admin/app/components/form/host-set/add-hosts/index.hbs
index 9f5a0fcd1..9eaa01c32 100644
--- a/ui/admin/app/components/form/host-set/add-hosts/index.hbs
+++ b/ui/admin/app/components/form/host-set/add-hosts/index.hbs
@@ -28,7 +28,7 @@
               <form.checkbox
                 @label={{host.id}}
                 @description={{host.description}}
-                onChange={{fn this.toggleHost host}}
+                @onChange={{fn this.toggleHost host}}
               />
             </row.cell>
             <row.cell>{{host.name}}</row.cell>
diff --git a/ui/admin/app/components/form/role/add-principals/index.hbs b/ui/admin/app/components/form/role/add-principals/index.hbs
index af5e73e3d..403de7679 100644
--- a/ui/admin/app/components/form/role/add-principals/index.hbs
+++ b/ui/admin/app/components/form/role/add-principals/index.hbs
@@ -28,7 +28,7 @@
             <row.headerCell>
               <form.checkbox
                 @label={{principal.displayName}}
-                onChange={{fn this.togglePrincipal principal}}
+                @onChange={{fn this.togglePrincipal principal}}
               />
               {{#if principal.accountName}}
                 {{!
diff --git a/ui/admin/app/components/form/target/add-credential-libraries/index.hbs b/ui/admin/app/components/form/target/add-credential-libraries/index.hbs
index d07c27884..ce0c51912 100644
--- a/ui/admin/app/components/form/target/add-credential-libraries/index.hbs
+++ b/ui/admin/app/components/form/target/add-credential-libraries/index.hbs
@@ -27,7 +27,7 @@
               <form.checkbox
                 @label={{credentialLibrary.id}}
                 @description={{credentialLibrary.description}}
-                onChange={{fn this.toggleCredentialLibrary credentialLibrary}}
+                @onChange={{fn this.toggleCredentialLibrary credentialLibrary}}
               />
             </row.headerCell>
             <row.cell>{{credentialLibrary.name}}</row.cell>
diff --git a/ui/admin/app/components/form/target/add-host-sets/index.hbs b/ui/admin/app/components/form/target/add-host-sets/index.hbs
index 1885700fd..ca5c7a3e4 100644
--- a/ui/admin/app/components/form/target/add-host-sets/index.hbs
+++ b/ui/admin/app/components/form/target/add-host-sets/index.hbs
@@ -29,7 +29,7 @@
               <form.checkbox
                 @label={{hostSet.id}}
                 @description={{hostSet.description}}
-                onChange={{fn this.toggleHostSet hostSet}}
+                @onChange={{fn this.toggleHostSet hostSet}}
               />
             </row.cell>
             <row.cell>{{hostSet.name}}</row.cell>
diff --git a/ui/admin/app/components/form/user/add-accounts/index.hbs b/ui/admin/app/components/form/user/add-accounts/index.hbs
index 03f00ded9..1e9dd1380 100644
--- a/ui/admin/app/components/form/user/add-accounts/index.hbs
+++ b/ui/admin/app/components/form/user/add-accounts/index.hbs
@@ -29,7 +29,7 @@
               <form.checkbox
                 @label={{account.id}}
                 @description={{account.description}}
-                onChange={{fn this.toggleAccount account}}
+                @onChange={{fn this.toggleAccount account}}
               />
             </row.cell>
             <row.cell>{{account.accountName}}</row.cell>
diff --git a/ui/desktop/tests/end2end/authentication.spec.js b/ui/desktop/tests/end2end/authentication.spec.js
index 93540c0f7..3ba899d13 100644
--- a/ui/desktop/tests/end2end/authentication.spec.js
+++ b/ui/desktop/tests/end2end/authentication.spec.js
@@ -4,12 +4,19 @@ const { _electron: electron } = require('playwright');
 const helpers = require('./test-helpers');
 
 let electronApp = null;
+// Subdirectory within tests/end2end/screenshots where the screenshots of this test suite will be stored.
 const screenshotsDirectory = 'authentication/';
+// Path where the Boundary Desktop client binary is generated
 const executablePath = helpers.returnExecutablePath(
   process.platform,
   process.arch
 );
 
+// Set login variables
+const originValue = 'http://localhost:9200';
+const loginUsername = 'admin';
+const loginPassword = 'password';
+
 test.beforeEach(async () => {
   electronApp = await electron.launch({
     executablePath: executablePath,
@@ -34,29 +41,15 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.evaluate(() =>
         window.localStorage.setItem('desktop:origin', null)
       );
-      const originValue = 'http://localhost:9200';
-      const authLoginNameValue = 'admin';
-      const authLoginPasswordValue = 'password';
 
-      // Fill the origin input
-      await boundaryWindow.waitForSelector('[name=host]');
-      await boundaryWindow.fill('[name=host]', originValue);
-      // Take screenshot
-      await boundaryWindow.screenshot({
-        path: helpers.generateScreenshotPath(
-          screenshotsDirectory,
-          'fillOrigin'
-        ),
-        fullPage: true,
-      });
+      // Perform login
+      await helpers.login(
+        boundaryWindow,
+        originValue,
+        loginUsername,
+        loginPassword
+      );
 
-      // Click the submit button
-      await boundaryWindow.waitForSelector('button[type="submit"]');
-      await helpers.click(boundaryWindow, 'button[type="submit"]');
-
-      // Fill user & password
-      await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
-      await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
       // Take screenshot
       await boundaryWindow.screenshot({
         path: helpers.generateScreenshotPath(
@@ -126,32 +119,13 @@ test.describe('Authentication end to end test suite', async () => {
       await boundaryWindow.evaluate(() =>
         window.localStorage.setItem('desktop:origin', null)
       );
-      const originValue = 'http://localhost:9200';
-      const authLoginNameValue = 'admin';
-      const authLoginPasswordValue = '123456';
-
-      // Fill the origin input
-      await boundaryWindow.fill('[name=host]', originValue);
-      // Take screenshot
-      await boundaryWindow.screenshot({
-        path: helpers.generateScreenshotPath(
-          screenshotsDirectory,
-          'fillOrigin'
-        ),
-        fullPage: true,
-      });
-
-      // Click the submit button
-      await boundaryWindow.waitForSelector('button[type="submit"]');
-      await helpers.click(boundaryWindow, 'button[type="submit"]');
-
-      // Fill user & password
-      await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
-      await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
-
-      // Click submit
-      await boundaryWindow.waitForSelector('button[type="submit"]');
-      await helpers.click(boundaryWindow, 'button[type="submit"]');
+      // Perform login
+      await helpers.login(
+        boundaryWindow,
+        originValue,
+        loginUsername,
+        '123456789'
+      );
 
       // Wait for the notification
       await boundaryWindow.waitForSelector('.rose-notification-body');
diff --git a/ui/desktop/tests/end2end/targets.spec.js b/ui/desktop/tests/end2end/targets.spec.js
index e71211cf1..3baa15199 100644
--- a/ui/desktop/tests/end2end/targets.spec.js
+++ b/ui/desktop/tests/end2end/targets.spec.js
@@ -4,12 +4,19 @@ const { _electron: electron } = require('playwright');
 const helpers = require('./test-helpers');
 
 let electronApp = null;
+// Subdirectory within tests/end2end/screenshots where the screenshots of this test suite will be stored.
 const screenshotsDirectory = 'targets/';
+// Path where the Boundary Desktop client binary is generated
 const executablePath = helpers.returnExecutablePath(
   process.platform,
   process.arch
 );
 
+// Set login variables
+const originValue = 'http://localhost:9200';
+const loginUsername = 'admin';
+const loginPassword = 'password';
+
 test.beforeEach(async () => {
   electronApp = await electron.launch({
     executablePath: executablePath,
@@ -28,30 +35,19 @@ test.afterEach(async () => {
 test.describe('Targets end to end test suite', async () => {
   test('Connects to a target', async () => {
     const boundaryWindow = await electronApp.firstWindow(); // The window that contains the app.
+
     // Override local storage origin
     await boundaryWindow.evaluate(() =>
       window.localStorage.setItem('desktop:origin', null)
     );
 
-    const originValue = 'http://localhost:9200';
-    const authLoginNameValue = 'admin';
-    const authLoginPasswordValue = 'password';
-
-    // Fill the origin input
-    await boundaryWindow.waitForSelector('[name=host]');
-    await boundaryWindow.fill('[name=host]', originValue);
-
-    // Click the submit button
-    await boundaryWindow.waitForSelector('button[type="submit"]');
-    await helpers.click(boundaryWindow, 'button[type="submit"]');
-
-    // Fill user & password
-    await boundaryWindow.fill('[name="identification"]', authLoginNameValue);
-    await boundaryWindow.fill('[name="password"]', authLoginPasswordValue);
-
-    // Click submit
-    await boundaryWindow.waitForSelector('button[type="submit"]');
-    await helpers.click(boundaryWindow, 'button[type="submit"]');
+    // Perform the login
+    await helpers.login(
+      boundaryWindow,
+      originValue,
+      loginUsername,
+      loginPassword
+    );
 
     // Check we are in Targets
     await boundaryWindow.waitForURL('**/#/scopes/global/projects/targets');
diff --git a/ui/desktop/tests/end2end/test-helpers.js b/ui/desktop/tests/end2end/test-helpers.js
index ba7e739fd..da35f237e 100644
--- a/ui/desktop/tests/end2end/test-helpers.js
+++ b/ui/desktop/tests/end2end/test-helpers.js
@@ -46,9 +46,34 @@ exports.returnExecutablePath = (platform, arch) => {
 /**
  * Performs a click with a workarouind due to an error with plain playwright click.
  * More info about the issue here: https://github.com/microsoft/playwright/issues/1808
- * @param {*} appWindow The current electron window.
- * @param {*} selector The DOM element selector.
+ * @param {object} appWindow The electron window to perform the action.
+ * @param {string} selector The DOM element selector.
  */
 exports.click = async (appWindow, selector) => {
   await appWindow.$eval(selector, (element) => element.click());
 };
+
+/**
+ * Performs login on the app window provided with the credentials provided.
+ * @param {object} appWindow The electron window to perform the action.
+ * @param {string} origin URL origin to set.
+ * @param {string} username Username to login.
+ * @param {string} password Password to login.
+ */
+exports.login = async (appWindow, origin, username, password) => {
+  // Fill the origin input
+  await appWindow.waitForSelector('[name=host]');
+  await appWindow.fill('[name=host]', origin);
+
+  // Click the set origin submit button
+  await appWindow.waitForSelector('button[type="submit"]');
+  await this.click(appWindow, 'button[type="submit"]');
+
+  // Fill user & password
+  await appWindow.fill('[name="identification"]', username);
+  await appWindow.fill('[name="password"]', password);
+
+  // Click submit
+  await appWindow.waitForSelector('button[type="submit"]');
+  await this.click(appWindow, 'button[type="submit"]');
+};
diff --git a/yarn.lock b/yarn.lock
index bc5537d8b..9e8fd65eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3521,6 +3521,36 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/components@^6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.12.tgz#0c7967c60354c84afa20dfab4753105e49b1927d"
+  integrity sha512-kdQt8toUjynYAxDLrJzuG7YSNL6as1wJoyzNUaCfG06YPhvIAlKo7le9tS2mThVFN5e9nbKrW3N1V1sp6ypZXQ==
+  dependencies:
+    "@popperjs/core" "^2.6.0"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.3.12"
+    "@types/color-convert" "^2.0.0"
+    "@types/overlayscrollbars" "^1.12.0"
+    "@types/react-syntax-highlighter" "11.0.5"
+    color-convert "^2.0.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    markdown-to-jsx "^7.1.3"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.13.1"
+    polished "^4.0.5"
+    prop-types "^15.7.2"
+    react-colorful "^5.1.2"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.3"
+    react-textarea-autosize "^8.3.0"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-client@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.8.tgz#9223b9f22ab86d205dac605bcef15ba0f0068e15"
@@ -7475,9 +7505,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001265:
-  version "1.0.30001267"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001267.tgz#b1cf2937175afc0570e4615fc2d2f9069fa0ed30"
-  integrity sha512-r1mjTzAuJ9W8cPBGbbus8E0SKcUP7gn03R14Wk8FlAlqhH9hroy9nLqmpuXlfKEw/oILW+FGz47ipXV2O7x8lg==
+  version "1.0.30001270"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001270.tgz#cc9c37a4ec5c1a8d616fc7bace902bb053b0cdea"
+  integrity sha512-TcIC7AyNWXhcOmv2KftOl1ShFAaHQYcB/EPL/hEyMrcS7ZX0/DvV1aoy6BzV0+16wTpoAyTMGDNAJfSqS/rz7A==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -7735,9 +7765,9 @@ clean-css-promise@^0.1.0:
     pinkie-promise "^2.0.0"
 
 clean-css@^3.4.5, clean-css@^4.1.11, clean-css@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
-  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
+  integrity sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==
   dependencies:
     source-map "~0.6.0"