implement new invitation system

* fix comments on the frontend
* move jwt token service to its own module
* other fixes and updates

apps/server/src/integrations/transactional/css/styles.ts

@@ -23,7 +23,7 @@ export const paragraph = {
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
   color: '#333',
-  lineHeight: 1.5,
+  lineHeight: 1,
   fontSize: 14,
 };
 
@@ -51,3 +51,16 @@ export const footer = {
   maxWidth: '580px',
   margin: '0 auto',
 };
+
+export const button = {
+  backgroundColor: '#176ae5',
+  borderRadius: '3px',
+  color: '#fff',
+  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
+  fontSize: '16px',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'block',
+  width: '100px',
+  padding: '8px',
+};

apps/server/src/integrations/transactional/emails/change-password-email.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { content, paragraph } from '../css/styles';
 import { MailBody } from '../partials/partials';
 
-interface ChangePasswordEmailProps {
+interface Props {
   username?: string;
 }
 
-export const ChangePasswordEmail = ({ username }: ChangePasswordEmailProps) => {
+export const ChangePasswordEmail = ({ username }: Props) => {
   return (
     <MailBody>
       <Section style={content}>

apps/server/src/integrations/transactional/emails/invitation-accepted-email.tsx

@@ -0,0 +1,28 @@
+import { Section, Text } from '@react-email/components';
+import * as React from 'react';
+import { content, paragraph } from '../css/styles';
+import { MailBody } from '../partials/partials';
+
+interface Props {
+  invitedUserName: string;
+  invitedUserEmail: string;
+}
+
+export const InvitationAcceptedEmail = ({
+  invitedUserName,
+  invitedUserEmail,
+}: Props) => {
+  return (
+    <MailBody>
+      <Section style={content}>
+        <Text style={paragraph}>Hi there,</Text>
+        <Text style={paragraph}>
+          {invitedUserName} ({invitedUserEmail}) has accepted your invitation,
+          and is now a member of the workspace.
+        </Text>
+      </Section>
+    </MailBody>
+  );
+};
+
+export default InvitationAcceptedEmail;

apps/server/src/integrations/transactional/emails/invitation-email.tsx

@@ -0,0 +1,37 @@
+import { Section, Text, Button } from '@react-email/components';
+import * as React from 'react';
+import { button, content, paragraph } from '../css/styles';
+import { MailBody } from '../partials/partials';
+
+interface Props {
+  inviteLink: string;
+}
+
+export const InvitationEmail = ({ inviteLink }: Props) => {
+  return (
+    <MailBody>
+      <Section style={content}>
+        <Text style={paragraph}>Hi there,</Text>
+        <Text style={paragraph}>You have been invited to Docmost.</Text>
+        <Text style={paragraph}>
+          Please click the button below to accept this invitation.
+        </Text>
+      </Section>
+      <Section
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingLeft: '15px',
+          paddingBottom: '15px',
+        }}
+      >
+        <Button href={inviteLink} style={button}>
+          Accept Invite
+        </Button>
+      </Section>
+    </MailBody>
+  );
+};
+
+export default InvitationEmail;

apps/server/src/integrations/transactional/partials/partials.tsx

@@ -40,7 +40,7 @@ export function MailFooter() {
     <Section style={footer}>
       <Row>
         <Text style={{ textAlign: 'center', color: '#706a7b' }}>
-          © {new Date().getFullYear()}, All Rights Reserved <br />
+          © {new Date().getFullYear()} Docmost, All Rights Reserved <br />
         </Text>
       </Row>
     </Section>