monkeytype/backend/email-templates/verification.html
Jack 1ca0fd1b23
Custom email (#3964)
* added nodemailer and mjml

* added email template

* basic email util file

* added email queue

* email worker

* renamed folder

* showing which queues and workers were initialized

* initializing email on server boot
added some test code

* renamed to email worker

* type fix

* renamed queue

* added queue to list

* added worker to list

* logging when config was verified

* handling send mail result

* not minifying (not supported anymore)
using .html property
returning correct value

* dont send me emails

* added port to .env

* updated example

* updated test email

* using env email

* parseint base

* message

* refactor

* message

* rename

* moved email templates

* using async file read

* typo

* using mustache

* moved file
renamed to email client

* logging with prometheus

* added social links

* line

* using stronger types (object instead of array of any[])
moved prometheus logging into email client
added function to send mail using a template

* fixed templates not working

* removed console log

* name change

* rename

* moved templates

* rename

* string interpolation

* string interpolation

* moved to dev dependencies, exact versions

* moved types

* removed function, remove unnecessary if

* update template params

* updated name

* fixed button not clickable

* throwing

* moved template metadata to one place

* rename

* sending email on account creation

* removed test code
removed await

* fixed button

* not stopping the server if email client validation failed

* added metric for queue lengths

* exposing getjobcounts

* added job to log queue lengths

* added endpoint to request verification email

* using send verification email that calls api instead of firebase built in

* updated route

* renamed function

* recording time to complete

* returning 400 if email already verified

* setting transport initialized to true earlier, setting it to false if caught error

* moved forgot password flow to a simple popup, added new endpoint to ape

* added forgotpasswordemail route

* added email tempalte

* setting transport to false if caught error

* added email queue function

* moved try higher

* fixed log
2023-02-13 13:24:43 +01:00

137 lines
4.1 KiB
HTML

<mjml>
<mj-head>
<mj-style>
@import
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
.btn table{ width: 100%; } .btn a{ width: 100%; padding: 10px 0
!important;}
</mj-style>
</mj-head>
<mj-body background-color="#323437">
<mj-wrapper padding="20px 20px 200px 20px">
<mj-section padding="0px" padding-bottom="20px">
<mj-column width="600px">
<mj-image
width="200px"
src="https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/images/mtfulllogo.png?raw=true"
href="monkeytype.com"
align="left"
></mj-image>
</mj-column>
</mj-section>
<mj-section padding="0px">
<mj-column background-color="#2c2e31" border-radius="8px">
<mj-spacer></mj-spacer>
<mj-text color="#d1d0c5" font-size="20px" font-family="sans-serif">
Hey, {{name}}
</mj-text>
<mj-text
color="#d1d0c5"
font-size="16px"
line-height="24px"
font-family="sans-serif"
>
Thanks for joining Monkeytype! We just need one more thing from you
- a quick confirmation of your email address and you'll be all set.
Click the button below to get started:
</mj-text>
<mj-button
align="left"
background-color="#e2b714"
color="#323437"
font-size="16px"
line-height="32px"
css-class="btn"
href="{{verificationLink}}"
font-family="sans-serif"
>
Verify
</mj-button>
<mj-text
color="#d1d0c5"
font-size="16px"
line-height="24px"
padding-bottom="0px"
font-family="sans-serif"
>
Cheers,
</mj-text>
<mj-text
color="#d1d0c5"
font-size="16px"
line-height="24px"
padding-top="0px"
font-family="sans-serif"
>
Monkeytype Team
</mj-text>
<mj-divider border-color="#323437"></mj-divider>
<mj-text
color="#646669"
font-size="12px"
padding-bottom="0px"
font-family="sans-serif"
>
Alternatively, you can copy and paste the link below into your
browser:
</mj-text>
<mj-text color="#646669" font-size="12px" font-family="sans-serif">
{{verificationLink}}
</mj-text>
<mj-spacer></mj-spacer>
</mj-column>
</mj-section>
<mj-section padding-bottom="6px" padding-top="20px">
<mj-column width="50px">
<mj-button
font-size="20px"
padding="10px"
inner-padding="0"
color="#d1d0c5"
background-color="#323437"
href="https://github.com/monkeytypegame/monkeytype"
>
<i class="fab fa-fw fa-github"></i>
</mj-button>
</mj-column>
<mj-column width="50px">
<mj-button
font-size="20px"
padding="10px"
inner-padding="0"
color="#d1d0c5"
background-color="#323437"
href="https://twitter.com/monkeytypegame"
>
<i class="fab fa-fw fa-twitter"></i>
</mj-button>
</mj-column>
<mj-column width="50px">
<mj-button
font-size="20px"
padding="10px"
inner-padding="0"
color="#d1d0c5"
background-color="#323437"
href="https://discord.com/invite/monkeytype"
>
<i class="fab fa-fw fa-discord"></i>
</mj-button>
</mj-column>
</mj-section>
<mj-section padding-top="0">
<mj-column>
<mj-text align="center" color="#646669" background-color="#323437">
monkeytype.com
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>