packages/pass/components/Lock/PasswordUnlock.tsx

   1 import { type FC, useCallback, useEffect } from 'react';
   2 import { useHistory } from 'react-router-dom';
   3
   4 import { c } from 'ttag';
   5
   6 import { useNotifications } from '@proton/components';
   7 import { useAuthStore } from '@proton/pass/components/Core/AuthStoreProvider';
   8 import { useConnectivity } from '@proton/pass/components/Core/ConnectivityProvider';
   9 import { useRequest } from '@proton/pass/hooks/useRequest';
  10 import { useRerender } from '@proton/pass/hooks/useRerender';
  11 import { LockMode } from '@proton/pass/lib/auth/lock/types';
  12 import type { PasswordCredentials } from '@proton/pass/lib/auth/password';
  13 import { validateCurrentPassword, validateExtraPassword } from '@proton/pass/lib/validation/auth';
  14 import { unlock } from '@proton/pass/store/actions';
  15 import { getBasename } from '@proton/shared/lib/authentication/pathnameHelper';
  16 import { PASS_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  17
  18 import { PasswordForm } from './PasswordForm';
  19
  20 type Props = { extraPassword: boolean; offlineEnabled?: boolean };
  21
  22 export const PasswordUnlock: FC<Props> = ({ extraPassword, offlineEnabled }) => {
  23     const { createNotification } = useNotifications();
  24     const online = useConnectivity();
  25     const authStore = useAuthStore();
  26     const history = useHistory();
  27     const passwordUnlock = useRequest(unlock, { initial: true });
  28     const disabled = !online && !offlineEnabled;
  29     const [key, rerender] = useRerender();
  30
  31     const onSubmit = useCallback(({ password }: PasswordCredentials) => {
  32         /** As booting offline will not trigger the AuthService::login
  33          * sequence we need to re-apply the redirection logic implemented
  34          * in the service's `onLoginComplete` callback */
  35         const localID = authStore?.getLocalID();
  36         history.replace(getBasename(localID) ?? '/');
  37         passwordUnlock.dispatch({ mode: LockMode.PASSWORD, secret: password });
  38     }, []);
  39
  40     useEffect(() => {
  41         if (!online) {
  42             rerender();
  43
  44             if (offlineEnabled === false) {
  45                 createNotification({
  46                     type: 'error',
  47                     text: c('Error')
  48                         .t`You're currently offline. Please resume connectivity in order to unlock ${PASS_SHORT_APP_NAME}.`,
  49                 });
  50             }
  51         }
  52     }, [online, offlineEnabled]);
  53
  54     return (
  55         <PasswordForm
  56             key={key}
  57             id="offline-unlock"
  58             disabled={disabled}
  59             loading={passwordUnlock.loading}
  60             submitLabel={!online && offlineEnabled ? c('Action').t`Continue offline` : c('Action').t`Continue`}
  61             onSubmit={onSubmit}
  62             onValidate={extraPassword ? validateExtraPassword : validateCurrentPassword}
  63         />
  64     );
  65 };