Implement password change endpoint

* move email templates to server
This commit is contained in:
Philipinho
2024-05-04 15:46:11 +01:00
parent c1cd090252
commit fece460051
22 changed files with 323 additions and 425 deletions

View File

@ -4,4 +4,5 @@ export interface MailMessage {
subject: string;
text?: string;
html?: string;
template?: any;
}

View File

@ -6,6 +6,7 @@ import { EnvironmentService } from '../environment/environment.service';
import { InjectQueue } from '@nestjs/bullmq';
import { QueueName, QueueJob } from '../queue/constants';
import { Queue } from 'bullmq';
import { render } from '@react-email/render';
@Injectable()
export class MailService {
@ -16,11 +17,21 @@ export class MailService {
) {}
async sendEmail(message: MailMessage): Promise<void> {
if (message.template) {
// in case this method is used directly
message.html = render(message.template);
}
const sender = `${this.environmentService.getMailFromName()} <${this.environmentService.getMailFromAddress()}> `;
await this.mailDriver.sendMail({ from: sender, ...message });
}
async sendToQueue(message: MailMessage): Promise<void> {
if (message.template) {
// transform the React object because it gets lost when sent via the queue
message.html = render(message.template);
delete message.template;
}
await this.emailQueue.add(QueueJob.SEND_EMAIL, message);
}
}

View File

@ -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',
};

View File

@ -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;

View File

@ -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>
);
}

View File

@ -0,0 +1,6 @@
export const formatDate = (date: Date) => {
new Intl.DateTimeFormat("en", {
dateStyle: "medium",
timeStyle: "medium",
}).format(date);
};