packages/pass/components/Lock/LockOnboarding.tsx

   1 import { type FC } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Icon } from '@proton/components';
   7 import { Card } from '@proton/pass/components/Layout/Card/Card';
   8 import { LobbyLayout } from '@proton/pass/components/Layout/Lobby/LobbyLayout';
   9 import { LockSetup } from '@proton/pass/components/Settings/LockSetup';
  10 import { PASS_APP_NAME } from '@proton/shared/lib/constants';
  11
  12 type Props = { onCancel: () => void };
  13
  14 export const LockOnboarding: FC<Props> = ({ onCancel }) => (
  15     <LobbyLayout overlay>
  16         <div
  17             key="lock-setup"
  18             className="anime-fade-in flex flex-nowrap shrink-0 flex-column gap-5"
  19             style={{ '--anime-delay': '250ms' }}
  20         >
  21             <div className="flex gap-3 justify-center text-semibold">
  22                 <Icon name="pass-lock" size={10} className="md:block hidden" />
  23                 <span>{c('Info').t`Your organization requires you to secure your access to ${PASS_APP_NAME}`}</span>
  24             </div>
  25
  26             <div>
  27                 <Card className="text-left">
  28                     <LockSetup noTTL />
  29                 </Card>
  30
  31                 <Button className="w-full text-sm my-2" color="weak" onClick={onCancel} pill shape="ghost">
  32                     {c('Action').t`Sign out`}
  33                 </Button>
  34             </div>
  35         </div>
  36     </LobbyLayout>
  37 );