overleaf/services/web/frontend/js/features/token-access/components/require-accept-screen.tsx

113 lines
3.3 KiB
TypeScript
Raw Normal View History

import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
export type RequireAcceptData = {
projectName?: string
linkSharingChanges: boolean
}
export const RequireAcceptScreen: FC<{
requireAcceptData: RequireAcceptData
sendPostRequest: (confirmedByUser: boolean) => void
}> = ({ requireAcceptData, sendPostRequest }) => {
const { t } = useTranslation()
const user = getMeta('ol-user')
if (requireAcceptData.linkSharingChanges) {
return (
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="text-centered link-sharing-invite">
<div className="link-sharing-invite-header">
<p>
{t('youre_joining')}
<br />
<em>
<strong>
{requireAcceptData.projectName || 'This project'}
</strong>
</em>
{user && (
<>
<br />
{t('as_email', { email: user.email })}
</>
)}
</p>
</div>
</div>
<div className="row row-spaced text-center">
<div className="col-md-12">
<p>
{t(
'your_name_and_email_address_will_be_visible_to_the_project_owner_and_other_editors'
)}
</p>
</div>
</div>
<div className="row row-spaced text-center">
<div className="col-md-12">
<button
className="btn btn-lg btn-primary"
type="submit"
onClick={() => sendPostRequest(true)}
>
{t('ok_join_project')}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
return (
<div className="loading-screen">
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="card">
<div className="page-header text-centered">
<h1>
{t('invited_to_join')}
<br />
<em>{requireAcceptData.projectName || 'This project'}</em>
</h1>
</div>
{user && (
<div className="row text-center">
<div className="col-md-12">
<p>
{t('accepting_invite_as')} <em>{user.email}</em>
</p>
</div>
</div>
)}
<div className="row text-center">
<div className="col-md-12">
<button
className="btn btn-lg btn-primary"
type="submit"
onClick={() => sendPostRequest(true)}
>
{t('join_project')}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}