test email

.env.example

@@ -18,3 +18,10 @@ JWT_REFRESH_SECRET=JWT_REFRESH_SECRET
 bcryptSaltOrRound=10
 expiresIn=30m
 refreshIn=7d
+
+# Email
+EMAIL_HOST='smtp.exmail.qq.com'
+EMAIL_PORT=465
+EMAIL_AUTH_USER='admin@qiuxu.site'
+EMAIL_AUTH_PASS=''
+EMAIL_SEND_FROM='"qiuxu.site" <admin@qiuxu.site>'

package.json

@@ -25,6 +25,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@nestjs-modules/mailer": "^1.8.1",
     "@nestjs/common": "^9.0.0",
     "@nestjs/config": "^2.3.1",
     "@nestjs/core": "^9.0.0",
@@ -38,6 +39,7 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "nestjs-prisma": "^0.20.0",
+    "nodemailer": "^6.9.1",
     "passport": "^0.6.0",
     "passport-jwt": "^4.0.1",
     "reflect-metadata": "^0.1.13",

src/app.module.ts

@@ -1,15 +1,16 @@
 import { Logger, Module } from '@nestjs/common'
 import { ConfigModule } from '@nestjs/config'
-import { nestConfig, securityConfig } from 'src/common/configs'
+import { nestConfig, securityConfig, emailConfig } from 'src/common/configs'
 import { PrismaModule, loggingMiddleware } from 'nestjs-prisma'
 import { UsersModule } from './users/users.module'
 import { AuthModule } from './auth/auth.module'
+import { EmailModule } from './email/email.module'
 
 @Module({
   imports: [
     ConfigModule.forRoot({
       isGlobal: true,
-      load: [nestConfig, securityConfig],
+      load: [nestConfig, securityConfig, emailConfig],
     }),
     PrismaModule.forRoot({
       isGlobal: true,
@@ -25,6 +26,7 @@ import { AuthModule } from './auth/auth.module'
 
     UsersModule,
     AuthModule,
+    EmailModule,
   ],
   controllers: [],
 })

src/common/configs/email.config.ts

@@ -0,0 +1,11 @@
+import { registerAs, ConfigType } from '@nestjs/config'
+
+export const emailConfig = registerAs('email', () => ({
+  host: process.env.EMAIL_HOST || 'smtp.exmail.qq.com',
+  port: Number(process.env.EMAIL_PORT) || 465,
+  user: process.env.EMAIL_AUTH_USER || 'admin@qiuxu.site',
+  password: process.env.EMAIL_AUTH_PASS || '',
+  send_from: process.env.EMAIL_SEND_FROM || '"qiuxu.site" <admin@qiuxu.site>',
+}))
+
+export type EmailConfig = ConfigType<typeof emailConfig>

src/common/configs/index.ts

@@ -1,2 +1,3 @@
 export { nestConfig, NestConfig } from './nest.config'
 export { securityConfig, SecurityConfig } from './security.config'
+export { emailConfig, EmailConfig } from './email.config'

src/email/dto/email.dto.ts

@@ -0,0 +1,7 @@
+import { IsEmail, IsNotEmpty } from 'class-validator'
+
+export class EmailDto {
+  @IsNotEmpty()
+  @IsEmail()
+  email: string
+}

src/email/email.controller.ts

@@ -0,0 +1,16 @@
+import { Body, Controller, Post } from '@nestjs/common'
+import { EmailService } from './email.service'
+import { ApiTags, ApiOperation } from '@nestjs/swagger'
+import { EmailDto } from './dto/email.dto'
+
+@ApiTags('Email')
+@Controller('api/email')
+export class EmailController {
+  constructor(private readonly emailService: EmailService) {}
+
+  @ApiOperation({ summary: '发送邮件' })
+  @Post('test')
+  async sendEmailTo(@Body() payload: EmailDto) {
+    return this.emailService.sendEmailTo(payload.email)
+  }
+}

src/email/email.module.ts

@@ -0,0 +1,36 @@
+import { Module } from '@nestjs/common'
+import { EmailService } from './email.service'
+import { EmailController } from './email.controller'
+import { MailerModule } from '@nestjs-modules/mailer'
+import { emailConfig, EmailConfig } from 'src/common/configs'
+import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter'
+
+@Module({
+  imports: [
+    MailerModule.forRootAsync({
+      inject: [emailConfig.KEY],
+      useFactory: async (emailConfig: EmailConfig) => ({
+        transport: {
+          host: emailConfig.host,
+          port: emailConfig.port,
+          secure: emailConfig.port === 465,
+          auth: {
+            user: emailConfig.user,
+            pass: emailConfig.password,
+          },
+        },
+        defaults: {
+          from: emailConfig.send_from,
+        },
+        template: {
+          dir: process.cwd() + '/src/email/templates/',
+          adapter: new HandlebarsAdapter(),
+          options: { strict: true },
+        },
+      }),
+    }),
+  ],
+  controllers: [EmailController],
+  providers: [EmailService],
+})
+export class EmailModule {}

src/email/email.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@nestjs/common'
+import { MailerService } from '@nestjs-modules/mailer'
+
+@Injectable()
+export class EmailService {
+  constructor(private mailerService: MailerService) {}
+  async sendEmailTo(email: string) {
+    return this.mailerService.sendMail({
+      to: email, // list of receivers
+      subject: 'Testing Nest Mailermodule with template ✔',
+      template: 'index', // The `.pug` or `.hbs` extension is appended automatically.
+      context: {
+        // Data to be sent to template engine.
+        code: 'cf1a3f828287',
+        username: 'john doe',
+      },
+    })
+  }
+}

src/email/templates/index.hbs

@@ -0,0 +1,429 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>Simple Transactional Email</title>
+  <style>
+    /* -------------------------------------
+          GLOBAL RESETS
+      ------------------------------------- */
+    /*All the styling goes here*/
+    img {
+      border: none;
+      -ms-interpolation-mode: bicubic;
+      max-width: 100%;
+    }
+
+    body {
+      background-color: #f6f6f6;
+      font-family: sans-serif;
+      -webkit-font-smoothing: antialiased;
+      font-size: 14px;
+      line-height: 1.4;
+      margin: 0;
+      padding: 0;
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
+    }
+
+    table {
+      border-collapse: separate;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+      width: 100%;
+    }
+
+    table td {
+      font-family: sans-serif;
+      font-size: 14px;
+      vertical-align: top;
+    }
+
+    /* -------------------------------------
+          BODY & CONTAINER
+      ------------------------------------- */
+    .body {
+      background-color: #f6f6f6;
+      width: 100%;
+    }
+
+    /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+    .container {
+      display: block;
+      margin: 0 auto !important;
+      /* makes it centered */
+      max-width: 580px;
+      padding: 10px;
+      width: 580px;
+    }
+
+    /* This should also be a block element, so that it will fill 100% of the .container */
+    .content {
+      box-sizing: border-box;
+      display: block;
+      margin: 0 auto;
+      max-width: 580px;
+      padding: 10px;
+    }
+
+    /* -------------------------------------
+          HEADER, FOOTER, MAIN
+      ------------------------------------- */
+    .main {
+      background: #ffffff;
+      border-radius: 3px;
+      width: 100%;
+    }
+
+    .wrapper {
+      box-sizing: border-box;
+      padding: 20px;
+    }
+
+    .content-block {
+      padding-bottom: 10px;
+      padding-top: 10px;
+    }
+
+    .footer {
+      clear: both;
+      margin-top: 10px;
+      text-align: center;
+      width: 100%;
+    }
+
+    .footer td,
+    .footer p,
+    .footer span,
+    .footer a {
+      color: #999999;
+      font-size: 12px;
+      text-align: center;
+    }
+
+    /* -------------------------------------
+          TYPOGRAPHY
+      ------------------------------------- */
+    h1,
+    h2,
+    h3,
+    h4 {
+      color: #000000;
+      font-family: sans-serif;
+      font-weight: 400;
+      line-height: 1.4;
+      margin: 0;
+      margin-bottom: 30px;
+    }
+
+    h1 {
+      font-size: 35px;
+      font-weight: 300;
+      text-align: center;
+      text-transform: capitalize;
+    }
+
+    p,
+    ul,
+    ol {
+      font-family: sans-serif;
+      font-size: 14px;
+      font-weight: normal;
+      margin: 0;
+      margin-bottom: 15px;
+    }
+
+    p li,
+    ul li,
+    ol li {
+      list-style-position: inside;
+      margin-left: 5px;
+    }
+
+    a {
+      color: #3498db;
+      text-decoration: underline;
+    }
+
+    /* -------------------------------------
+          BUTTONS
+      ------------------------------------- */
+    .btn {
+      box-sizing: border-box;
+      width: 100%;
+    }
+
+    .btn>tbody>tr>td {
+      padding-bottom: 15px;
+    }
+
+    .btn table {
+      width: auto;
+    }
+
+    .btn table td {
+      background-color: #ffffff;
+      border-radius: 5px;
+      text-align: center;
+    }
+
+    .btn a {
+      background-color: #ffffff;
+      border: solid 1px #3498db;
+      border-radius: 5px;
+      box-sizing: border-box;
+      color: #3498db;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 14px;
+      font-weight: bold;
+      margin: 0;
+      padding: 12px 25px;
+      text-decoration: none;
+      text-transform: capitalize;
+    }
+
+    .btn-primary table td {
+      background-color: #3498db;
+    }
+
+    .btn-primary a {
+      background-color: #3498db;
+      border-color: #3498db;
+      color: #ffffff;
+    }
+
+    /* -------------------------------------
+          OTHER STYLES THAT MIGHT BE USEFUL
+      ------------------------------------- */
+    .last {
+      margin-bottom: 0;
+    }
+
+    .first {
+      margin-top: 0;
+    }
+
+    .align-center {
+      text-align: center;
+    }
+
+    .align-right {
+      text-align: right;
+    }
+
+    .align-left {
+      text-align: left;
+    }
+
+    .clear {
+      clear: both;
+    }
+
+    .mt0 {
+      margin-top: 0;
+    }
+
+    .mb0 {
+      margin-bottom: 0;
+    }
+
+    .preheader {
+      color: transparent;
+      display: none;
+      height: 0;
+      max-height: 0;
+      max-width: 0;
+      opacity: 0;
+      overflow: hidden;
+      mso-hide: all;
+      visibility: hidden;
+      width: 0;
+    }
+
+    .powered-by a {
+      text-decoration: none;
+    }
+
+    hr {
+      border: 0;
+      border-bottom: 1px solid #f6f6f6;
+      margin: 20px 0;
+    }
+
+    /* -------------------------------------
+          RESPONSIVE AND MOBILE FRIENDLY STYLES
+      ------------------------------------- */
+    @media only screen and (max-width: 620px) {
+      table[class=body] h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+
+      table[class=body] p,
+      table[class=body] ul,
+      table[class=body] ol,
+      table[class=body] td,
+      table[class=body] span,
+      table[class=body] a {
+        font-size: 16px !important;
+      }
+
+      table[class=body] .wrapper,
+      table[class=body] .article {
+        padding: 10px !important;
+      }
+
+      table[class=body] .content {
+        padding: 0 !important;
+      }
+
+      table[class=body] .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+
+      table[class=body] .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+
+      table[class=body] .btn table {
+        width: 100% !important;
+      }
+
+      table[class=body] .btn a {
+        width: 100% !important;
+      }
+
+      table[class=body] .img-responsive {
+        height: auto !important;
+        max-width: 100% !important;
+        width: auto !important;
+      }
+    }
+
+    /* -------------------------------------
+          PRESERVE THESE STYLES IN THE HEAD
+      ------------------------------------- */
+    @media all {
+      .ExternalClass {
+        width: 100%;
+      }
+
+      .ExternalClass,
+      .ExternalClass p,
+      .ExternalClass span,
+      .ExternalClass font,
+      .ExternalClass td,
+      .ExternalClass div {
+        line-height: 100%;
+      }
+
+      .apple-link a {
+        color: inherit !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: none !important;
+      }
+
+      #MessageViewBody a {
+        color: inherit;
+        text-decoration: none;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+
+      .btn-primary table td:hover {
+        background-color: #34495e !important;
+      }
+
+      .btn-primary a:hover {
+        background-color: #34495e !important;
+        border-color: #34495e !important;
+      }
+    }
+  </style>
+</head>
+
+<body class="">
+  <span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
+  <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
+    <tr>
+      <td>&nbsp;</td>
+      <td class="container">
+        <div class="content">
+
+          <!-- START CENTERED WHITE CONTAINER -->
+          <table role="presentation" class="main">
+
+            <!-- START MAIN CONTENT AREA -->
+            <tr>
+              <td class="wrapper">
+                <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                  <tr>
+                    <td>
+                      <p>Hi there,</p>
+                      <p>Context Code : {{code}}</p>
+                      <p>Context Username: {{username}}</p>
+                      <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
+                        <tbody>
+                          <tr>
+                            <td align="left">
+                              <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+                                <tbody>
+                                  <tr>
+                                    <td> <a href="http://htmlemail.io" target="_blank">Call To Action</a> </td>
+                                  </tr>
+                                </tbody>
+                              </table>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      <p>This is a really simple email template. Its sole purpose is to get the
+                        recipient to click the button with no distractions.</p>
+                      <p>Good luck! Hope it works.</p>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+          </table>
+          <!-- END CENTERED WHITE CONTAINER -->
+
+          <!-- START FOOTER -->
+          <div class="footer">
+            <table role="presentation" border="0" cellpadding="0" cellspacing="0">
+              <tr>
+                <td class="content-block">
+                  <span class="apple-link">Company Inc, 3 Abbey Road, San Francisco CA 94102</span>
+                  <br> Don't like these emails? <a href="http://i.imgur.com/CScmqnj.gif">Unsubscribe</a>.
+                </td>
+              </tr>
+              <tr>
+                <td class="content-block powered-by">
+                  Powered by <a href="http://htmlemail.io">HTMLemail</a>.
+                </td>
+              </tr>
+            </table>
+          </div>
+          <!-- END FOOTER -->
+
+        </div>
+      </td>
+      <td>&nbsp;</td>
+    </tr>
+  </table>
+</body>
+
+</html>