Skip to content

Commit 1ca0fd1

Browse files
MiodecMiodec
authored
Custom email (monkeytypegame#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
1 parent 8d965a7 commit 1ca0fd1

File tree

19 files changed

+2470
-147
lines changed

19 files changed

+2470
-147
lines changed

‎backend/email-templates/reset-password.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-style>
4+
@import
5+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
6+
.btn table{ width: 100%; } .btn a{ width: 100%; padding: 10px 0
7+
!important;}
8+
</mj-style>
9+
</mj-head>
10+
<mj-body background-color="#323437">
11+
<mj-wrapper padding="20px 20px 200px 20px">
12+
<mj-section padding="0px" padding-bottom="20px">
13+
<mj-column width="600px">
14+
<mj-image
15+
width="200px"
16+
src="https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/images/mtfulllogo.png?raw=true"
17+
href="monkeytype.com"
18+
align="left"
19+
></mj-image>
20+
</mj-column>
21+
</mj-section>
22+
<mj-section padding="0px">
23+
<mj-column background-color="#2c2e31" border-radius="8px">
24+
<mj-spacer></mj-spacer>
25+
26+
<mj-text color="#d1d0c5" font-size="20px" font-family="sans-serif">
27+
Hey, {{name}}
28+
</mj-text>
29+
<mj-text
30+
color="#d1d0c5"
31+
font-size="16px"
32+
line-height="24px"
33+
font-family="sans-serif"
34+
>
35+
Nobody likes being locked out of their account. We're coming to your
36+
rescue - just click the button below to get started. If you didn't
37+
request a password reset, you can safely ignore this email.
38+
</mj-text>
39+
40+
<mj-button
41+
align="left"
42+
background-color="#e2b714"
43+
color="#323437"
44+
font-size="16px"
45+
line-height="32px"
46+
css-class="btn"
47+
href="{{passwordResetLink}}"
48+
font-family="sans-serif"
49+
>
50+
Reset your password
51+
</mj-button>
52+
53+
<mj-text
54+
color="#d1d0c5"
55+
font-size="16px"
56+
line-height="24px"
57+
padding-bottom="0px"
58+
font-family="sans-serif"
59+
>
60+
Cheers,
61+
</mj-text>
62+
<mj-text
63+
color="#d1d0c5"
64+
font-size="16px"
65+
line-height="24px"
66+
padding-top="0px"
67+
font-family="sans-serif"
68+
>
69+
Monkeytype Team
70+
</mj-text>
71+
72+
<mj-divider border-color="#323437"></mj-divider>
73+
74+
<mj-text
75+
color="#646669"
76+
font-size="12px"
77+
padding-bottom="0px"
78+
font-family="sans-serif"
79+
>
80+
Alternatively, you can copy and paste the link below into your
81+
browser:
82+
</mj-text>
83+
<mj-text color="#646669" font-size="12px" font-family="sans-serif">
84+
{{passwordResetLink}}
85+
</mj-text>
86+
87+
<mj-spacer></mj-spacer>
88+
</mj-column>
89+
</mj-section>
90+
<mj-section padding-bottom="6px" padding-top="20px">
91+
<mj-column width="50px">
92+
<mj-button
93+
font-size="20px"
94+
padding="10px"
95+
inner-padding="0"
96+
color="#d1d0c5"
97+
background-color="#323437"
98+
href="https://github.com/monkeytypegame/monkeytype"
99+
>
100+
<i class="fab fa-fw fa-github"></i>
101+
</mj-button>
102+
</mj-column>
103+
<mj-column width="50px">
104+
<mj-button
105+
font-size="20px"
106+
padding="10px"
107+
inner-padding="0"
108+
color="#d1d0c5"
109+
background-color="#323437"
110+
href="https://twitter.com/monkeytypegame"
111+
>
112+
<i class="fab fa-fw fa-twitter"></i>
113+
</mj-button>
114+
</mj-column>
115+
<mj-column width="50px">
116+
<mj-button
117+
font-size="20px"
118+
padding="10px"
119+
inner-padding="0"
120+
color="#d1d0c5"
121+
background-color="#323437"
122+
href="https://discord.com/invite/monkeytype"
123+
>
124+
<i class="fab fa-fw fa-discord"></i>
125+
</mj-button>
126+
</mj-column>
127+
</mj-section>
128+
<mj-section padding-top="0">
129+
<mj-column>
130+
<mj-text align="center" color="#646669" background-color="#323437">
131+
monkeytype.com
132+
</mj-text>
133+
</mj-column>
134+
</mj-section>
135+
</mj-wrapper>
136+
</mj-body>
137+
</mjml>

‎backend/email-templates/verification.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-style>
4+
@import
5+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
6+
.btn table{ width: 100%; } .btn a{ width: 100%; padding: 10px 0
7+
!important;}
8+
</mj-style>
9+
</mj-head>
10+
<mj-body background-color="#323437">
11+
<mj-wrapper padding="20px 20px 200px 20px">
12+
<mj-section padding="0px" padding-bottom="20px">
13+
<mj-column width="600px">
14+
<mj-image
15+
width="200px"
16+
src="https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/images/mtfulllogo.png?raw=true"
17+
href="monkeytype.com"
18+
align="left"
19+
></mj-image>
20+
</mj-column>
21+
</mj-section>
22+
<mj-section padding="0px">
23+
<mj-column background-color="#2c2e31" border-radius="8px">
24+
<mj-spacer></mj-spacer>
25+
26+
<mj-text color="#d1d0c5" font-size="20px" font-family="sans-serif">
27+
Hey, {{name}}
28+
</mj-text>
29+
<mj-text
30+
color="#d1d0c5"
31+
font-size="16px"
32+
line-height="24px"
33+
font-family="sans-serif"
34+
>
35+
Thanks for joining Monkeytype! We just need one more thing from you
36+
- a quick confirmation of your email address and you'll be all set.
37+
Click the button below to get started:
38+
</mj-text>
39+
40+
<mj-button
41+
align="left"
42+
background-color="#e2b714"
43+
color="#323437"
44+
font-size="16px"
45+
line-height="32px"
46+
css-class="btn"
47+
href="{{verificationLink}}"
48+
font-family="sans-serif"
49+
>
50+
Verify
51+
</mj-button>
52+
53+
<mj-text
54+
color="#d1d0c5"
55+
font-size="16px"
56+
line-height="24px"
57+
padding-bottom="0px"
58+
font-family="sans-serif"
59+
>
60+
Cheers,
61+
</mj-text>
62+
<mj-text
63+
color="#d1d0c5"
64+
font-size="16px"
65+
line-height="24px"
66+
padding-top="0px"
67+
font-family="sans-serif"
68+
>
69+
Monkeytype Team
70+
</mj-text>
71+
72+
<mj-divider border-color="#323437"></mj-divider>
73+
74+
<mj-text
75+
color="#646669"
76+
font-size="12px"
77+
padding-bottom="0px"
78+
font-family="sans-serif"
79+
>
80+
Alternatively, you can copy and paste the link below into your
81+
browser:
82+
</mj-text>
83+
<mj-text color="#646669" font-size="12px" font-family="sans-serif">
84+
{{verificationLink}}
85+
</mj-text>
86+
87+
<mj-spacer></mj-spacer>
88+
</mj-column>
89+
</mj-section>
90+
<mj-section padding-bottom="6px" padding-top="20px">
91+
<mj-column width="50px">
92+
<mj-button
93+
font-size="20px"
94+
padding="10px"
95+
inner-padding="0"
96+
color="#d1d0c5"
97+
background-color="#323437"
98+
href="https://github.com/monkeytypegame/monkeytype"
99+
>
100+
<i class="fab fa-fw fa-github"></i>
101+
</mj-button>
102+
</mj-column>
103+
<mj-column width="50px">
104+
<mj-button
105+
font-size="20px"
106+
padding="10px"
107+
inner-padding="0"
108+
color="#d1d0c5"
109+
background-color="#323437"
110+
href="https://twitter.com/monkeytypegame"
111+
>
112+
<i class="fab fa-fw fa-twitter"></i>
113+
</mj-button>
114+
</mj-column>
115+
<mj-column width="50px">
116+
<mj-button
117+
font-size="20px"
118+
padding="10px"
119+
inner-padding="0"
120+
color="#d1d0c5"
121+
background-color="#323437"
122+
href="https://discord.com/invite/monkeytype"
123+
>
124+
<i class="fab fa-fw fa-discord"></i>
125+
</mj-button>
126+
</mj-column>
127+
</mj-section>
128+
<mj-section padding-top="0">
129+
<mj-column>
130+
<mj-text align="center" color="#646669" background-color="#323437">
131+
monkeytype.com
132+
</mj-text>
133+
</mj-column>
134+
</mj-section>
135+
</mj-wrapper>
136+
</mj-body>
137+
</mjml>

‎backend/example.env‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,11 @@ MODE=dev
1313
# DB_PASSWORD=
1414
# DB_AUTH_MECHANISM="SCRAM-SHA-256"
1515
# DB_AUTH_SOURCE=admin
16+
17+
# You can get a testing email address over at
18+
# https://ethereal.email/create
19+
#
20+
# EMAIL_PORT=587
21+
# EMAIL_HOST=smtp.ethereal.email
22+
# EMAIL_USER=
23+
# EMAIL_PASS=

0 commit comments

Comments
 (0)