Page MenuHomePhabricator
Files F3509513

No OneTemporary
Actions

View Options

diff --git a/web/invite-links/accept-invite-modal.css b/web/invite-links/accept-invite-modal.css
new file mode 100644
index 000000000..d485d9c67
--- /dev/null
+++ b/web/invite-links/accept-invite-modal.css
@@ -0,0 +1,39 @@
+.container {
+ border-radius: 16px;
+ padding: 32px 24px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ background: var(--modal-bg);
+ width: 398px;
+ gap: 32px;
+}
+
+.group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+}
+
+.heading {
+ font-size: var(--xl-font-20);
+ line-height: var(--line-height-display);
+ font-weight: var(--semi-bold);
+ color: var(--fg);
+}
+
+.text {
+ font-size: var(--s-font-14);
+ color: var(--label-default-color);
+}
+
+hr {
+ width: 100%;
+ background: var(--border);
+}
+
+button {
+ width: 100%;
+}
diff --git a/web/invite-links/accept-invite-modal.react.js b/web/invite-links/accept-invite-modal.react.js
new file mode 100644
index 000000000..3a41aea15
--- /dev/null
+++ b/web/invite-links/accept-invite-modal.react.js
@@ -0,0 +1,73 @@
+// @flow
+
+import * as React from 'react';
+
+import ModalOverlay from 'lib/components/modal-overlay.react.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import { type InviteLinkVerificationResponse } from 'lib/types/link-types.js';
+
+import css from './accept-invite-modal.css';
+import Button, { buttonThemes } from '../components/button.react.js';
+
+type Props = {
+ +verificationResponse: InviteLinkVerificationResponse,
+};
+
+function AcceptInviteModal(props: Props): React.Node {
+ const { verificationResponse } = props;
+ const { popModal } = useModalContext();
+
+ React.useEffect(() => {
+ if (verificationResponse.status === 'already_joined') {
+ popModal();
+ }
+ }, [popModal, verificationResponse.status]);
+
+ let content;
+ if (verificationResponse.status === 'valid') {
+ const { community } = verificationResponse;
+ content = (
+ <>
+ <div className={css.text}>You have been invited to join</div>
+ <div className={css.heading}>{community.name}</div>
+ <hr />
+ <div className={css.group}>
+ <Button variant="filled" buttonColor={buttonThemes.standard}>
+ Accept Invite
+ </Button>
+ <Button variant="outline" onClick={popModal}>
+ Cancel
+ </Button>
+ </div>
+ </>
+ );
+ } else {
+ content = (
+ <>
+ <div className={css.group}>
+ <div className={css.heading}>Invite invalid</div>
+ <div className={css.text}>
+ This invite link may be expired, please try again with another
+ invite link
+ </div>
+ </div>
+ <hr />
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.standard}
+ onClick={popModal}
+ >
+ Return to Comm
+ </Button>
+ </>
+ );
+ }
+
+ return (
+ <ModalOverlay onClose={popModal}>
+ <div className={css.container}>{content}</div>
+ </ModalOverlay>
+ );
+}
+
+export default AcceptInviteModal;

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 5:43 AM (17 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2684809
Default Alt Text
(3 KB)

Event Timeline