applications/drive/src/app/components/SharedPage/Layout/UserInfo.tsx

   1 import { Button } from '@proton/atoms/index';
   2 import { getAppHref } from '@proton/shared/lib/apps/helper';
   3 import { APPS, SSO_PATHS } from '@proton/shared/lib/constants';
   4 import { replaceUrl } from '@proton/shared/lib/helpers/browser';
   5 import { getInitials } from '@proton/shared/lib/helpers/string';
   6 import { getUrlWithReturnUrl } from '@proton/shared/lib/helpers/url';
   7 import type { UserModel } from '@proton/shared/lib/interfaces';
   8
   9 import usePublicToken from '../../../hooks/drive/usePublicToken';
  10 import { RedirectionReason, drivePublicRedirectionReasonKey } from '../../../hooks/util/useRedirectToPublicPage';
  11 import { saveUrlPasswordForRedirection } from '../../../utils/url/password';
  12
  13 import './UserInfo.scss';
  14
  15 interface Props {
  16     user: UserModel;
  17 }
  18
  19 // This is a partial copy of UserDropdownButton.
  20 // We use this Component to show basic user info without the dropdown
  21 export const UserInfo = ({ user }: Props) => {
  22     const { Email, DisplayName, Name } = user || {};
  23     const nameToDisplay = DisplayName || Name || ''; // nameToDisplay can be falsy for external account
  24     const initials = getInitials(nameToDisplay || Email || '');
  25     const { token, urlPassword } = usePublicToken();
  26
  27     const accountSwitchUrl = new URL(getAppHref(SSO_PATHS.SWITCH, APPS.PROTONACCOUNT));
  28     accountSwitchUrl.searchParams.append('product', 'drive');
  29     const returnUrlSearchParams = new URLSearchParams();
  30     returnUrlSearchParams.append('token', token);
  31     // We need to pass by the private app to set latest active session, then be redirected to public page.
  32     // This will be done in MainContainer.tsx on page loading
  33     returnUrlSearchParams.append(drivePublicRedirectionReasonKey, RedirectionReason.ACCOUNT_SWITCH);
  34     const returnUrl = `/?`.concat(returnUrlSearchParams.toString());
  35     const urlWithReturnUrl = getUrlWithReturnUrl(accountSwitchUrl.toString(), {
  36         returnUrl: returnUrl,
  37         context: 'private',
  38     });
  39
  40     return (
  41         <Button
  42             onClick={() => {
  43                 // Save password before going to account switch page
  44                 saveUrlPasswordForRedirection(urlPassword);
  45                 // We replace the url to prevent any bad action from the user,
  46                 // like returning back into the history after signout all sessions
  47                 replaceUrl(urlWithReturnUrl);
  48             }}
  49             className="user-info border-none max-w-full flex items-center flex-nowrap gap-3 user-info relative interactive-pseudo-protrude rounded interactive--no-background"
  50         >
  51             {nameToDisplay ? (
  52                 <span className="flex-1 lh130 text-right hidden md:inline">
  53                     <span className="block text-ellipsis text-sm">{nameToDisplay}</span>
  54                     {Email ? (
  55                         <span className="block text-ellipsis color-weak text-sm m-0 lh-rg user-dropdown-email">
  56                             {Email}
  57                         </span>
  58                     ) : null}
  59                 </span>
  60             ) : (
  61                 <span className="lh130 text-right hidden md:inline">
  62                     <span className="block text-ellipsis">{Email}</span>
  63                 </span>
  64             )}
  65             <span
  66                 className="my-auto text-sm rounded border p-1 inline-block relative flex shrink-0 user-initials"
  67                 aria-hidden="true"
  68             >
  69                 <span className="m-auto">{initials}</span>
  70             </span>
  71         </Button>
  72     );
  73 };