Merge pull request #14587 from overleaf/mf-enable-sso-managed-users

[web] Enable SSO switch on Group Settings

GitOrigin-RevId: 591881eb4e6bad912de026f7a687f3b020712c2d

services/web/frontend/extracted-translations.json

@@ -261,7 +261,10 @@
   "dictionary": "",
   "did_you_know_institution_providing_professional": "",
   "did_you_know_that_overleaf_offers": "",
+  "disable_single_sign_on": "",
+  "disable_sso": "",
   "disable_stop_on_first_error": "",
+  "disabling": "",
   "discount_of": "",
   "dismiss": "",
   "dismiss_error_popup": "",
@@ -319,9 +322,12 @@
   "emails_and_affiliations_explanation": "",
   "emails_and_affiliations_title": "",
   "enable_managed_users": "",
+  "enable_single_sign_on": "",
+  "enable_sso": "",
   "enable_stop_on_first_error_under_recompile_dropdown_menu": "",
   "enabled_managed_users_set_up_sso": "",
   "enabling": "",
+  "enabling_sso_will_make_this_the_only_sign_in_option": "",
   "end_of_document": "",
   "enter_image_url": "",
   "entry_point": "",
@@ -845,6 +851,7 @@
   "project_url": "",
   "projects": "",
   "projects_list": "",
+  "provide_details_of_your_sso_configuration": "",
   "public": "",
   "publish": "",
   "publish_as_template": "",
@@ -1040,7 +1047,12 @@
   "sso_config_prop_help_last_name": "",
   "sso_config_prop_help_user_entry_point": "",
   "sso_config_prop_help_user_id": "",
+  "sso_configuration": "",
   "sso_explanation": "",
+  "sso_is_disabled_explanation_1": "",
+  "sso_is_disabled_explanation_2": "",
+  "sso_is_enabled_explanation_1": "",
+  "sso_is_enabled_explanation_2": "",
   "sso_link_error": "",
   "start_a_free_trial": "",
   "start_by_adding_your_email": "",
@@ -1274,7 +1286,9 @@
   "we_logged_you_in": "",
   "wed_love_you_to_stay": "",
   "welcome_to_sl": "",
+  "what_does_this_mean": "",
   "what_does_this_mean_for_you": "",
+  "what_happens_when_sso_is_enabled": "",
   "when_you_tick_the_include_caption_box": "",
   "wide": "",
   "with_premium_subscription_you_also_get": "",
@@ -1305,6 +1319,7 @@
   "you_have_been_invited_to_transfer_management_of_your_account": "",
   "you_have_been_invited_to_transfer_management_of_your_account_to": "",
   "you_may_be_able_to_prevent_a_compile_timeout": "",
+  "you_need_to_configure_your_sso_settings": "",
   "you_will_be_able_to_reassign_subscription": "",
   "youll_get_best_results_in_visual_but_can_be_used_in_source": "",
   "your_affiliation_is_confirmed": "",
@@ -1327,6 +1342,8 @@
   "your_projects": "",
   "your_subscription": "",
   "your_subscription_has_expired": "",
+  "youre_about_to_disable_single_sign_on": "",
+  "youre_about_to_enable_single_sign_on": "",
   "youre_on_free_trial_which_ends_on": "",
   "zoom_in": "",
   "zoom_out": "",

services/web/frontend/js/shared/components/switch.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames'
+
+type SwitchProps = {
+  onChange: () => void
+  checked: boolean
+  disabled?: boolean
+}
+
+function Switch({ onChange, checked, disabled = false }: SwitchProps) {
+  return (
+    <label className={classNames('switch-input', { disabled })}>
+      <input
+        className="invisible-input"
+        type="checkbox"
+        role="switch"
+        autoComplete="off"
+        onChange={onChange}
+        checked={checked}
+        disabled={disabled}
+      />
+      <span className="switch" />
+    </label>
+  )
+}
+
+export default Switch

services/web/frontend/stories/subscription/sso/configuration-modal.stories.tsx

@@ -31,7 +31,7 @@ export const ConfigurationModalLoadingError = (
   return <SSOConfigurationModal {...args} />
 }
 
-export const ConfigurationModal = (args: SSOConfigurationModalProps) => {
+export const ConfigurationModalFilled = (args: SSOConfigurationModalProps) => {
   useMeta({ 'ol-groupId': '123' })
   useFetchMock(fetchMock => {
     fetchMock.get('express:/manage/groups/:id/settings/sso', config, {
@@ -77,7 +77,7 @@ export const ConfigurationModalSaveError = (
 }
 
 export default {
-  title: 'Subscription / SSO',
+  title: 'Subscription / SSO / Configuration Modal',
   component: SSOConfigurationModal,
   args: {
     show: true,

services/web/frontend/stories/subscription/sso/enable-modal.stories.tsx

@@ -0,0 +1,37 @@
+import SSOEnableModal, {
+  type SSOEnableModalProps,
+} from '../../../../modules/managed-users/frontend/js/components/modals/sso-enable-modal'
+import useFetchMock from '../../hooks/use-fetch-mock'
+import { useMeta } from '../../hooks/use-meta'
+
+export const EnableSSOModalDefault = (args: SSOEnableModalProps) => {
+  useMeta({ 'ol-groupId': '123' })
+  useFetchMock(fetchMock => {
+    fetchMock.post('express:/manage/groups/:id/settings/enableSSO', 200, {
+      delay: 500,
+    })
+  })
+  return <SSOEnableModal {...args} />
+}
+
+export const EnableSSOModalError = (args: SSOEnableModalProps) => {
+  useMeta({ 'ol-groupId': '123' })
+  useFetchMock(fetchMock => {
+    fetchMock.post('express:/manage/groups/:id/settings/enableSSO', 500, {
+      delay: 500,
+    })
+  })
+  return <SSOEnableModal {...args} />
+}
+
+export default {
+  title: 'Subscription / SSO / Enable Modal',
+  component: SSOEnableModal,
+  args: {
+    show: true,
+  },
+  argTypes: {
+    handleHide: { action: 'close modal' },
+    onEnableSSO: { action: 'callback' },
+  },
+}

services/web/frontend/stories/switch.stories.tsx

@@ -0,0 +1,14 @@
+import Switch from '../js/shared/components/switch'
+
+export const Unchecked = () => {
+  return <Switch onChange={() => {}} checked={false} />
+}
+
+export const Checked = () => {
+  return <Switch onChange={() => {}} checked />
+}
+
+export default {
+  title: 'Shared / Components / Switch',
+  component: Switch,
+}

services/web/frontend/stylesheets/_style_includes.less

@@ -46,6 +46,7 @@
 @import 'components/alerts.less';
 @import 'components/progress-bars.less';
 @import 'components/select.less';
+@import 'components/switch.less';
 @import 'components/switcher.less';
 // @import "components/media.less";
 @import 'components/list-group.less';

services/web/frontend/stylesheets/components/switch.less

@@ -0,0 +1,63 @@
+@switch-circle-diameter: 16px;
+@switch-inner-padding: 2px;
+@switch-width: 34px;
+@switch-height: @switch-circle-diameter + @switch-inner-padding +
+  @switch-inner-padding;
+@switch-circle-translate-x: @switch-width - @switch-circle-diameter -
+  @switch-inner-padding - @switch-inner-padding;
+@switch-circle-wrapper-border-radius: @switch-height / 2;
+@switch-transition: 0.4s;
+
+.switch-input {
+  position: relative;
+  display: inline-block;
+  width: @switch-width;
+  height: @switch-height;
+
+  input.invisible-input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    // span.switch -> circle "wrapper"
+    & + span.switch {
+      background-color: @ol-blue-gray-4;
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: @switch-transition;
+      border-radius: @switch-circle-wrapper-border-radius;
+    }
+
+    // span.switch::before is the circle itself
+    & + span.switch::before {
+      position: absolute;
+      content: '';
+      height: @switch-circle-diameter;
+      width: @switch-circle-diameter;
+      left: @switch-inner-padding;
+      bottom: @switch-inner-padding;
+      background-color: @white;
+      transition: @switch-transition;
+      border-radius: 50%;
+    }
+
+    &:checked + span.switch {
+      background-color: @ol-green;
+    }
+
+    // when input is checked, move circle to the right
+    &:checked + span.switch::before {
+      transform: translateX(@switch-circle-translate-x);
+    }
+  }
+
+  &.disabled {
+    input.invisible-input + span.switch {
+      background-color: @gray-light;
+    }
+  }
+}

services/web/frontend/stylesheets/main-style.less

@@ -73,6 +73,7 @@
 @import 'components/split-menu.less';
 @import 'components/list-group.less';
 @import 'components/select.less';
+@import 'components/switch.less';
 @import 'components/switcher.less';
 
 // Components w/ JavaScript

services/web/frontend/stylesheets/modules/managed-users.less

@@ -1,10 +1,21 @@
-.group-settings-title {
-  font-family: Lato, sans-serif;
+h2.group-settings-title {
+  margin-bottom: 5px;
   font-size: @font-size-large;
+}
+
+h3.group-settings-title {
+  margin-bottom: 0;
+  font-size: @font-size-base;
+}
+
+h2.group-settings-title,
+h3.group-settings-title {
+  font-family: Lato, sans-serif;
   line-height: 28px;
   font-weight: bold;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-top: 0;
 }
 
 .enrollment-invite {
@@ -82,3 +93,17 @@
     vertical-align: text-bottom;
   }
 }
+
+.group-settings-sso {
+  border-top: 1px solid @gray-lighter;
+  padding-top: 25px;
+  margin-top: 25px;
+
+  .group-settings-sso-enable,
+  .group-settings-sso-configure {
+    margin-top: @margin-md;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}