From 15bfeea48eff3cfabb7906f5a4772fdbfb3f3e0e Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle <andrew@speckle.systems>
Date: Thu, 22 May 2025 14:30:00 +0200
Subject: [PATCH] refactor(fe): security page

---
 .../workspaces/security/sso/Wrapper.vue       |  54 +++--
 .../settings/workspaces/[slug]/security.vue   | 202 ++++++++++--------
 2 files changed, 138 insertions(+), 118 deletions(-)

diff --git a/packages/frontend-2/components/settings/workspaces/security/sso/Wrapper.vue b/packages/frontend-2/components/settings/workspaces/security/sso/Wrapper.vue
index a09e6356a..539de1255 100644
--- a/packages/frontend-2/components/settings/workspaces/security/sso/Wrapper.vue
+++ b/packages/frontend-2/components/settings/workspaces/security/sso/Wrapper.vue
@@ -1,38 +1,36 @@
 <template>
-  <section class="flex flex-col gap-3">
-    <SettingsSectionHeader title="Authentication" subheading class="mb-3" />
+  <section class="flex flex-col gap-2 border-t border-outline-2 py-8 mt-8">
+    <div class="flex justify-between items-start">
+      <div class="flex flex-col">
+        <h4 class="text-heading-lg">SSO</h4>
+        <p class="text-body-xs text-foreground-2">
+          Allow logins through your OpenID identity provider.
+        </p>
+      </div>
+      <div v-if="workspace.hasAccessToSSO">
+        <FormButton
+          v-if="isWorkspaceAdmin"
+          :disabled="isFormVisible || !!provider"
+          @click="handleConfigureClick"
+        >
+          Configure
+        </FormButton>
+
+        <div v-else v-tippy="`You must be a workspace admin`">
+          <FormButton disabled>Configure</FormButton>
+        </div>
+      </div>
+
+      <FormButton v-else :to="settingsWorkspaceRoutes.billing.route(workspace.slug)">
+        Upgrade to Business
+      </FormButton>
+    </div>
 
     <div v-if="loading" class="flex justify-center">
       <CommonLoadingIcon />
     </div>
 
     <template v-else>
-      <div class="flex items-center mb-4">
-        <div class="flex-1 flex-col pr-6 gap-y-1">
-          <p class="text-body-xs font-medium text-foreground">Enable SSO</p>
-          <p class="text-body-2xs text-foreground-2 leading-5 max-w-md">
-            Allow logins through your OpenID identity provider.
-          </p>
-        </div>
-        <div v-if="workspace.hasAccessToSSO">
-          <FormButton
-            v-if="isWorkspaceAdmin"
-            :disabled="isFormVisible || !!provider"
-            @click="handleConfigureClick"
-          >
-            Configure
-          </FormButton>
-
-          <div v-else v-tippy="`You must be a workspace admin`">
-            <FormButton disabled>Configure</FormButton>
-          </div>
-        </div>
-
-        <FormButton v-else :to="settingsWorkspaceRoutes.billing.route(workspace.slug)">
-          Upgrade to Business
-        </FormButton>
-      </div>
-
       <CommonCard
         v-if="!workspace.hasAccessToSSO && workspace.sso?.provider?.id"
         class="bg-foundation"
diff --git a/packages/frontend-2/pages/settings/workspaces/[slug]/security.vue b/packages/frontend-2/pages/settings/workspaces/[slug]/security.vue
index d7e0cd4a6..5185f77d1 100644
--- a/packages/frontend-2/pages/settings/workspaces/[slug]/security.vue
+++ b/packages/frontend-2/pages/settings/workspaces/[slug]/security.vue
@@ -5,81 +5,97 @@
         title="Security"
         text="Manage verified workspace domains and associated features."
       />
-      <template v-if="isSsoEnabled">
-        <SettingsWorkspacesSecuritySsoWrapper v-if="workspace" :workspace="workspace" />
-        <hr class="my-6 md:my-8 border-outline-2" />
-      </template>
-      <section>
-        <SettingsSectionHeader
-          title="Allowed email domains"
-          class="pb-4 md:pb-6"
-          subheading
-        />
-        <CommonCard v-if="workspace?.sso?.provider?.id" class="bg-foundation mb-4">
-          With SSO enabled, allowed domains are configured on your identity provider's
-          side.
-        </CommonCard>
-        <ul v-if="hasWorkspaceDomains">
-          <li
-            v-for="domain in workspaceDomains"
-            :key="domain.id"
-            class="border-x border-b first:border-t first:rounded-t-lg border-outline-2 last:rounded-b-lg p-6 py-4 flex items-center"
-          >
-            <p class="text-body-xs font-medium flex-1">@{{ domain.domain }}</p>
-            <FormButton
-              :disabled="workspaceDomains.length === 1 && isDomainProtectionEnabled"
-              color="outline"
-              @click="openRemoveDialog(domain)"
+      <div class="flex flex-col divide-y divide-outline-2">
+        <section>
+          <SettingsSectionHeader title="Workspace discoverability" subheading />
+          <p class="text-body-xs text-foreground-2 mt-2 mb-6">
+            Let users discover the workspace if they sign up with a matching email.
+          </p>
+          <CommonCard v-if="workspace?.sso?.provider?.id" class="bg-foundation mb-4">
+            With SSO enabled, allowed domains are configured on your identity provider's
+            side.
+          </CommonCard>
+          <ul v-if="hasWorkspaceDomains">
+            <li
+              v-for="domain in workspaceDomains"
+              :key="domain.id"
+              class="border-x border-b first:border-t first:rounded-t-lg border-outline-2 last:rounded-b-lg p-6 py-4 flex items-center"
             >
-              Delete
-            </FormButton>
-          </li>
-        </ul>
+              <p class="text-body-xs font-medium flex-1">@{{ domain.domain }}</p>
+              <FormButton color="outline" size="sm" @click="openRemoveDialog(domain)">
+                Delete
+              </FormButton>
+            </li>
+          </ul>
 
-        <p
-          v-else
-          class="text-body-xs text-foreground-2 border border-outline-2 p-6 rounded-lg"
-        >
-          No verified domains yet
-        </p>
-      </section>
-      <section class="mt-8">
-        <div class="grid grid-cols-2 gap-x-6 items-center">
-          <div class="flex flex-col gap-y-1">
-            <p class="text-body-xs font-medium text-foreground">New domain</p>
-            <p class="text-body-2xs text-foreground-2 leading-5">
-              Add a domain from a list of email domains for your active account.
-            </p>
+          <p
+            v-else
+            class="text-body-xs text-center text-foreground-2 border border-outline-2 p-6 rounded-lg"
+          >
+            No verified domains yet
+          </p>
+
+          <div class="grid grid-cols-2 gap-x-6 mt-6">
+            <div class="flex flex-col gap-y-1">
+              <p class="text-body-xs font-medium text-foreground">New domain</p>
+              <p class="text-body-2xs text-foreground-2 leading-5">
+                Add a domain from a list of email domains for your active account.
+              </p>
+            </div>
+            <div class="flex gap-x-3">
+              <FormSelectBase
+                v-model="selectedDomain"
+                :items="verifiedUserDomains"
+                :disabled-item-predicate="disabledItemPredicate"
+                disabled-item-tooltip="This domain can't be used for verified workspace domains"
+                name="workspaceDomains"
+                label="Verified domains"
+                class="w-full"
+              >
+                <template #nothing-selected>Select domain</template>
+                <template #something-selected="{ value }">@{{ value }}</template>
+                <template #option="{ item }">
+                  <div class="flex items-center">@{{ item }}</div>
+                </template>
+              </FormSelectBase>
+              <FormButton :disabled="!selectedDomain" @click="addDomain">
+                Add
+              </FormButton>
+            </div>
           </div>
-          <div class="flex gap-x-3">
-            <FormSelectBase
-              v-model="selectedDomain"
-              :items="verifiedUserDomains"
-              :disabled-item-predicate="disabledItemPredicate"
-              disabled-item-tooltip="This domain can't be used for verified workspace domains"
-              name="workspaceDomains"
-              label="Verified domains"
-              class="w-full"
-            >
-              <template #nothing-selected>Select domain</template>
-              <template #something-selected="{ value }">@{{ value }}</template>
-              <template #option="{ item }">
-                <div class="flex items-center">@{{ item }}</div>
-              </template>
-            </FormSelectBase>
-            <FormButton :disabled="!selectedDomain" @click="addDomain">Add</FormButton>
+
+          <div class="mt-6 flex flex-col gap-2">
+            <p class="text-body-xs font-medium text-foreground">New user policy</p>
+            <FormRadio
+              v-for="option in radioOptions"
+              :key="option.value"
+              :label="option.title"
+              :description="option.description"
+              :value="option.value"
+              name="measurementType"
+              :checked="joinPolicy === option.value"
+              size="sm"
+              @change="joinPolicy = option.value"
+            />
           </div>
-        </div>
-      </section>
-      <section class="flex flex-col space-y-3 mt-8">
-        <div class="flex flex-col space-y-8">
-          <div class="flex items-center">
+        </section>
+
+        <template v-if="isSsoEnabled">
+          <SettingsWorkspacesSecuritySsoWrapper
+            v-if="workspace"
+            :workspace="workspace"
+          />
+        </template>
+
+        <section class="py-8">
+          <SettingsSectionHeader subheading title="Allowed email domains" />
+          <p class="text-body-xs text-foreground-2 mt-2 mb-6">
+            Only users with email addresses from your verified domains can be added as
+            workspace members or administrators.
+          </p>
+          <div class="flex">
             <div class="flex-1 flex-col pr-6 gap-y-1">
-              <div class="flex items-center">
-                <p class="text-body-xs font-medium text-foreground">
-                  Domain protection
-                </p>
-              </div>
+              <p class="text-body-xs font-medium text-foreground">Domain protection</p>
               <p class="text-body-2xs text-foreground-2 leading-5 max-w-md">
                 Only users with email addresses from your verified domains can be added
                 as workspace members or administrators.
@@ -96,25 +112,8 @@
               />
             </div>
           </div>
-          <div class="flex items-center">
-            <div class="flex-1 flex-col pr-6 gap-y-1">
-              <p class="text-body-xs font-medium text-foreground">
-                Domain-based discoverability
-              </p>
-              <p class="text-body-2xs text-foreground-2 leading-5 max-w-md">
-                When enabled, users with a verified email address from your verified
-                domain list will be able to request to join this workspace.
-              </p>
-            </div>
-            <FormSwitch
-              v-model="isDomainDiscoverabilityEnabled"
-              name="domain-discoverability"
-              :disabled="!hasWorkspaceDomains"
-              :show-label="false"
-            />
-          </div>
-        </div>
-      </section>
+        </section>
+      </div>
     </div>
 
     <SettingsWorkspacesSecurityDomainRemoveDialog
@@ -141,6 +140,7 @@ import {
   workspaceUpdateDiscoverabilityMutation
 } from '~/lib/workspaces/graphql/mutations'
 import { useVerifiedUserEmailDomains } from '~/lib/workspaces/composables/security'
+import { FormRadio } from '@speckle/ui-components'
 
 graphql(`
   fragment SettingsWorkspacesSecurity_Workspace on Workspace {
@@ -172,6 +172,11 @@ useHead({
   title: 'Settings | Workspace - Security'
 })
 
+enum JoinPolicy {
+  AdminApproval = 'admin-approval',
+  AutoJoin = 'auto-join'
+}
+
 const slug = computed(() => (route.params.slug as string) || '')
 
 const { domains: userEmailDomains } = useVerifiedUserEmailDomains({
@@ -193,6 +198,7 @@ const showRemoveDomainDialog = ref(false)
 const removeDialogDomain =
   ref<SettingsWorkspacesSecurityDomainRemoveDialog_WorkspaceDomainFragment>()
 const blockedDomainItems: ShallowRef<string[]> = shallowRef(blockedDomains)
+const joinPolicy = ref<JoinPolicy>(JoinPolicy.AdminApproval)
 
 const { result } = useQuery(settingsWorkspacesSecurityQuery, {
   slug: slug.value
@@ -278,13 +284,15 @@ const tooltipText = computed(() => {
 
 const addDomain = async () => {
   if (!selectedDomain.value || !workspace.value) return
+  const isFirstDomain = !hasWorkspaceDomains.value
+
   await addWorkspaceDomain.mutate(
     {
       domain: selectedDomain.value,
       workspaceId: workspace.value.id
     },
     workspace.value.domains ?? [],
-    workspace.value.discoverabilityEnabled,
+    isFirstDomain,
     workspace.value.domainBasedMembershipProtectionEnabled,
     workspace.value.hasAccessToSSO,
     workspace.value.hasAccessToDomainBasedSecurityPolicies
@@ -308,6 +316,20 @@ const disabledItemPredicate = (item: string) => {
   return blockedDomainItems.value.includes(item)
 }
 
+const radioOptions = [
+  {
+    title: 'Admin approval required',
+    description: 'Users must be approved by an admin to join the workspace.',
+    value: JoinPolicy.AdminApproval
+  },
+  {
+    title: 'Auto-join',
+    description:
+      'Users with a verified email address can join the workspace without admin approval.',
+    value: JoinPolicy.AutoJoin
+  }
+] as const
+
 watch(
   () => workspaceDomains.value,
   () => {