Implement password change endpoint

* move email templates to server
2025-11-19 03:01:10 +10:00 · 2024-05-04 15:46:11 +01:00
parent c1cd090252
commit fece460051
22 changed files with 323 additions and 425 deletions
--- a/apps/server/src/integrations/transactional/css/styles.ts
+++ b/apps/server/src/integrations/transactional/css/styles.ts
@ -0,0 +1,53 @@
+export const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';
+
+export const main = {
+  backgroundColor: '#edf2f7',
+  fontFamily,
+};
+
+export const container = {
+  maxWidth: '580px',
+  margin: '10px auto',
+  backgroundColor: '#ffffff',
+  borderColor: '#e8e5ef',
+  borderRadius: '2px',
+  borderWidth: '1px',
+  boxShadow: '0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015)',
+};
+
+export const content = {
+  padding: '5px 20px 10px 20px',
+};
+
+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,
+  fontSize: 14,
+};
+
+export const h1 = {
+  color: '#333',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+  fontSize: '24px',
+  fontWeight: 'bold',
+  padding: '0',
+};
+
+export const logo = {
+  display: 'flex',
+  justifyContent: 'center',
+  alingItems: 'center',
+  padding: 4,
+};
+
+export const link = {
+  textDecoration: 'underline',
+};
+
+export const footer = {
+  maxWidth: '580px',
+  margin: '0 auto',
+};
--- a/apps/server/src/integrations/transactional/emails/change-password-email.tsx
+++ b/apps/server/src/integrations/transactional/emails/change-password-email.tsx
@ -0,0 +1,23 @@
+import { Section, Text } from '@react-email/components';
+import * as React from 'react';
+import { content, paragraph } from '../css/styles';
+import { MailBody } from '../partials/partials';
+
+interface ChangePasswordEmailProps {
+  username?: string;
+}
+
+export const ChangePasswordEmail = ({ username }: ChangePasswordEmailProps) => {
+  return (
+    <MailBody>
+      <Section style={content}>
+        <Text style={paragraph}>Hi {username},</Text>
+        <Text style={paragraph}>
+          This is a confirmation that your password has been changed.
+        </Text>
+      </Section>
+    </MailBody>
+  );
+};
+
+export default ChangePasswordEmail;
--- a/apps/server/src/integrations/transactional/partials/partials.tsx
+++ b/apps/server/src/integrations/transactional/partials/partials.tsx
@ -0,0 +1,48 @@
+import { container, footer, h1, logo, main } from '../css/styles';
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Row,
+  Section,
+  Text,
+} from '@react-email/components';
+import * as React from 'react';
+
+interface MailBodyProps {
+  children: React.ReactNode;
+}
+
+export function MailBody({ children }: MailBodyProps) {
+  return (
+    <Html>
+      <Head />
+      <Body style={main}>
+        <MailHeader />
+        <Container style={container}>{children}</Container>
+        <MailFooter />
+      </Body>
+    </Html>
+  );
+}
+
+export function MailHeader() {
+  return (
+    <Section style={logo}>
+      {/* <Heading style={h1}>docmost</Heading> */}
+    </Section>
+  );
+}
+
+export function MailFooter() {
+  return (
+    <Section style={footer}>
+      <Row>
+        <Text style={{ textAlign: 'center', color: '#706a7b' }}>
+          © {new Date().getFullYear()}, All Rights Reserved <br />
+        </Text>
+      </Row>
+    </Section>
+  );
+}
--- a/apps/server/src/integrations/transactional/utils/utils.ts
+++ b/apps/server/src/integrations/transactional/utils/utils.ts
@ -0,0 +1,6 @@
+export const formatDate = (date: Date) => {
+  new Intl.DateTimeFormat("en", {
+    dateStyle: "medium",
+    timeStyle: "medium",
+  }).format(date);
+};