language changes for mfa requirement

OpenFn · Aug 4, 2023 · 34f891b · 34f891b
1 parent 5555a8e
commit 34f891b
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,14 @@ and this project adheres to
 
 ### Added
 
+### Changed
+
+### Fixed
+
+## [v0.7.0] - 2023-08-04
+
+### Added
+
 - Project owners can require MFA for their users
   [892](https://github.com/OpenFn/Lightning/issues/892)
 

diff --git a/lib/lightning_web/live/project_live/settings.html.heex b/lib/lightning_web/live/project_live/settings.html.heex
@@ -18,7 +18,7 @@
               hash="project"
             >
               <Heroicons.clipboard class="h-5 w-5 inline-block mr-2 align-middle" />
-              <span class="inline-block align-middle">Project</span>
+              <span class="inline-block align-middle">Setup</span>
             </LightningWeb.Components.Common.tab_item>
             <LightningWeb.Components.Common.tab_item
               orientation="vertical"
@@ -47,11 +47,20 @@
 
       <div class="flex-1 flex flex-col h-full w-full border-separate border-spacing-y-4 text-left text-sm text-gray-500 dark:text-gray-400">
         <LightningWeb.Components.Common.panel_content for_hash="project">
+          <div>
+            <h6 class="font-medium text-black">Project setup</h6>
+            <small class="block my-1 text-xs text-gray-600">
+              Projects are isolated workspaces that contain workflows, accessible to certain users.
+            </small>
+          </div>
+          <div class="hidden sm:block" aria-hidden="true">
+            <div class="py-2"></div>
+          </div>
           <div id="project-settings-#" class="bg-white p-4 rounded-md">
             <div>
-              <h6 class="font-medium text-black">Project details</h6>
+              <h6 class="font-medium text-black">Project Identity</h6>
               <small class="block my-1 text-xs text-gray-600">
-                Projects are isolated workspaces that contain workflows, accessible to certain users.
+                This metadata helps you idenity the types of workflows managed in this project and the people that have access.
               </small>
             </div>
             <.form
@@ -116,7 +125,7 @@
             <div>
               <h6 class="font-medium text-black">Version control</h6>
               <p class="block my-1 text-xs text-gray-600">
-                Export your project as code, to save this version or edit your project locally
+                Export your project as code, to save this version or edit your project locally.
               </p>
               <div class="hidden sm:block" aria-hidden="true">
                 <div class="py-2"></div>
@@ -273,35 +282,61 @@
             <div class="py-2"></div>
           </div>
           <%= if can_edit_project(assigns) do %>
-            <div class="flex items-center justify-between mb-5">
-              <span class="flex flex-grow flex-col">
-                <span
-                  class="text-sm font-medium leading-6 text-gray-900"
-                  id="require-mfa-label"
-                >
-                  Require Multi-Factor Authentication
-                </span>
-                <span class="text-sm text-gray-500" id="require-mfa-description">
-                  This adds an additional layer of security to your project by requiring
-                  all project members to have enabled Multi-Factor Authentication in order to access it.
-                </span>
-              </span>
-              <button
-                id="toggle-mfa-switch"
-                type="button"
-                class={"#{if @project.requires_mfa, do: "bg-indigo-600", else: "bg-gray-200"} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"}
-                role="switch"
-                phx-click="toggle-mfa"
-                aria-checked={@project.requires_mfa}
-                aria-labelledby="require-mfa-label"
-                aria-describedby="require-mfa-description"
-              >
-                <span
-                  aria-hidden="true"
-                  class={"#{if @project.requires_mfa, do: "translate-x-5", else: "translate-x-0"} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"}
-                >
+            <div id="project-settings-#" class="bg-white p-4 rounded-md">
+              <div class="flex items-center justify-between">
+                <span class="flex flex-grow flex-col">
+                  <span
+                    class="text-sm font-medium leading-6 text-gray-900"
+                    id="availability-label"
+                  >
+                    Multi-Factor Authentication
+                  </span>
+                  <span
+                    class="text-sm text-gray-500"
+                    id="availability-description"
+                  >
+                    Requiring multi-factor authentication (MFA) adds an
+                    additional layer of security by requiring users to enable
+                    MFA on their accounts before they are allowed access this
+                    project.
+                  </span>
                 </span>
-              </button>
+              </div>
+              <div>
+                <h6 class="font-medium text-black"></h6>
+                <p class="block my-1 text-xs text-gray-600"></p>
+                <div class="hidden sm:block" aria-hidden="true">
+                  <div class="py-2"></div>
+                </div>
+                <div class="flex items-center">
+                  <button
+                    id="toggle-mfa-switch"
+                    type="button"
+                    class={"#{if @project.requires_mfa, do: "bg-indigo-600", else: "bg-gray-200"} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"}
+                    role="switch"
+                    phx-click="toggle-mfa"
+                    aria-checked={@project.requires_mfa}
+                    aria-labelledby="require-mfa-label"
+                    aria-describedby="require-mfa-description"
+                  >
+                    <span
+                      aria-hidden="true"
+                      class={"#{if @project.requires_mfa, do: "translate-x-5", else: "translate-x-0"} pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"}
+                    >
+                    </span>
+                  </button>
+                  <span class="ml-3 text-sm" id="require-mfa-label">
+                    <span class="font-medium text-gray-900">Require MFA?</span>
+                    <span class="text-gray-500">
+                      <%= if @project.requires_mfa do %>
+                        (currently required for this project)
+                      <% else %>
+                        (currently optional for this project)
+                      <% end %>
+                    </span>
+                  </span>
+                </div>
+              </div>
             </div>
           <% end %>
         </LightningWeb.Components.Common.panel_content>

diff --git a/test/lightning_web/live/project_live_test.exs b/test/lightning_web/live/project_live_test.exs
@@ -500,7 +500,7 @@ defmodule LightningWeb.ProjectLiveTest do
             "#security"
         )
 
-      assert html =~ "Require Multi-Factor Authentication"
+      assert html =~ "Multi-Factor Authentication"
     end
 
     test "project admin can't edit project name and description with invalid data",