packages/components/containers/organization/PassPolicies.tsx

   1 import { useEffect, useRef, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { CircleLoader } from '@proton/atoms';
   6 import Info from '@proton/components/components/link/Info';
   7 import Toggle from '@proton/components/components/toggle/Toggle';
   8 import SettingsLayout from '@proton/components/containers/account/SettingsLayout';
   9 import SettingsLayoutLeft from '@proton/components/containers/account/SettingsLayoutLeft';
  10 import SettingsLayoutRight from '@proton/components/containers/account/SettingsLayoutRight';
  11 import SettingsParagraph from '@proton/components/containers/account/SettingsParagraph';
  12 import SettingsSection from '@proton/components/containers/account/SettingsSection';
  13 import { PassLockSelector } from '@proton/components/containers/pass/PassLockSelector';
  14 import useErrorHandler from '@proton/components/hooks/useErrorHandler';
  15 import useLoading from '@proton/hooks/useLoading';
  16 import { usePassBridge } from '@proton/pass/lib/bridge/PassBridgeProvider';
  17 import type { OrganizationGetResponse } from '@proton/pass/types';
  18 import { BitField, type Maybe } from '@proton/pass/types';
  19 import type { OrganizationSettings } from '@proton/pass/types/data/organization';
  20 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  21
  22 import GenericError from '../error/GenericError';
  23
  24 const getPolicies = (): { setting: keyof OrganizationSettings; label: string; tooltip: string }[] => [
  25     {
  26         setting: 'ShareMode',
  27         label: c('Label').t`Disable sharing outside the organization`,
  28         tooltip: c('Info')
  29             .t`If this option is turned on, organization members will only be able to share vaults within the organization`,
  30     },
  31     {
  32         setting: 'ExportMode',
  33         label: c('Label').t`Disable data export for organization members`,
  34         tooltip: c('Info')
  35             .t`By default, organization members can only export vaults where they are the owners. If this option is turned on, they won't be able to export any data`,
  36     },
  37 ];
  38
  39 const PassPolicies = () => {
  40     const { organization } = usePassBridge();
  41     const [loading, withLoading] = useLoading(true);
  42     const handleError = useErrorHandler();
  43
  44     const policies = getPolicies();
  45     const [organizationSettings, setOrganizationSettings] = useState<Maybe<OrganizationGetResponse>>();
  46
  47     const touched = useRef<keyof OrganizationSettings>();
  48     const didLoad = useRef(false);
  49
  50     useEffect(() => {
  51         const fetchOrganizationSettings = () =>
  52             organization.settings.get().then((settings) => {
  53                 setOrganizationSettings(settings);
  54                 didLoad.current = true;
  55             });
  56
  57         withLoading(fetchOrganizationSettings()).catch(handleError);
  58     }, []);
  59
  60     const handleToggle = async (checked: boolean, setting: keyof OrganizationSettings) => {
  61         touched.current = setting;
  62         const value = checked ? BitField.ACTIVE : BitField.DISABLED;
  63         withLoading(organization.settings.set(setting, value).then(setOrganizationSettings)).catch(handleError);
  64     };
  65
  66     const handleLockChange = async (ttl: number) => {
  67         touched.current = 'ForceLockSeconds';
  68         withLoading(organization.settings.set('ForceLockSeconds', ttl).then(setOrganizationSettings)).catch(
  69             handleError
  70         );
  71     };
  72
  73     return (
  74         <>
  75             <SettingsSection>
  76                 <SettingsParagraph>
  77                     {c('Info').t`You can define the policies of ${PASS_APP_NAME} for the organization members.`}
  78                 </SettingsParagraph>
  79                 {organizationSettings && (
  80                     <>
  81                         <ul className="unstyled relative">
  82                             {policies.map(({ setting, label, tooltip }) => (
  83                                 <li key={setting} className="mb-4 flex items-center flex-nowrap gap-4">
  84                                     <Toggle
  85                                         checked={organizationSettings.Settings?.[setting] === BitField.ACTIVE}
  86                                         id={`${setting}-toggle`}
  87                                         onChange={({ target }) => handleToggle(target.checked, setting)}
  88                                         disabled={loading || !organizationSettings.CanUpdate}
  89                                         loading={touched.current === setting && loading}
  90                                     />
  91                                     <label htmlFor={`${setting}-toggle`}>
  92                                         <span className="mr-1">{label}</span>
  93                                         {tooltip && <Info title={tooltip} />}
  94                                     </label>
  95                                 </li>
  96                             ))}
  97                         </ul>
  98                         <SettingsLayout>
  99                             <SettingsLayoutLeft>
 100                                 <label className="text-semibold" htmlFor="pass-lock-select" id="label-pass-lock-select">
 101                                     <span className="mr-1"> {c('Label').t`Lock app after inactivity`}</span>
 102                                     <Info
 103                                         title={c('Info')
 104                                             .t`After being locked, organization members will need to unlock ${PASS_APP_NAME} with their password or PIN etc.`}
 105                                     />
 106                                 </label>
 107                             </SettingsLayoutLeft>
 108                             <SettingsLayoutRight>
 109                                 <PassLockSelector
 110                                     value={organizationSettings?.Settings?.ForceLockSeconds}
 111                                     disabled={loading || !organizationSettings.CanUpdate}
 112                                     onChange={handleLockChange}
 113                                 />
 114                             </SettingsLayoutRight>
 115                         </SettingsLayout>
 116                     </>
 117                 )}
 118             </SettingsSection>
 119
 120             {!didLoad.current && loading && <CircleLoader />}
 121             {!loading && !organizationSettings && <GenericError className="mt-16" />}
 122         </>
 123     );
 124 };
 125
 126 export default PassPolicies;