Skip to content

Commit d7cce6d

Browse files
tomast1337tomast1337
committed
feat: enhance email templates with improved styling and button for login links
1 parent 335fc95 commit d7cce6d

File tree

2 files changed

+125
-9
lines changed

2 files changed

+125
-9
lines changed

‎server/src/mailing/templates/magic-link-new-account.hbs‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,72 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Welcome to the OpenNoteBlockWorld!</title>
7+
<title>Welcome to OpenNoteBlockWorld!</title>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
text-align: center;
12+
padding: 20px;
13+
}
14+
15+
.outer {
16+
background-image: url('cid:background-image');
17+
background-repeat: repeat;
18+
background-size: 268px 462px;
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
.container {
24+
background-color: #ffffff;
25+
max-width: 500px;
26+
margin: 0 auto;
27+
padding: 20px;
28+
border-radius: 10px;
29+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.logo {
33+
max-width: 150px;
34+
margin-bottom: 20px;
35+
}
36+
37+
.btn {
38+
display: inline-block;
39+
padding: 12px 20px;
40+
margin-top: 20px;
41+
font-size: 16px;
42+
color: #ffffff;
43+
background-color: #28a745;
44+
text-decoration: none;
45+
border-radius: 5px;
46+
}
47+
48+
.btn:hover {
49+
background-color: #218838;
50+
}
51+
52+
.footer {
53+
margin-top: 20px;
54+
font-size: 12px;
55+
color: #666666;
56+
}
57+
</style>
858
</head>
959

1060
<body>
11-
<h1>Wellcome, {{username}}!</h1>
12-
<p>Click the link below to log in to your account:</p>
13-
<a href="{{magicLink}}">Login</a>
14-
<p>If you did not request this login link, please ignore this email.</p>
61+
<div class="outer">
62+
<div class="container">
63+
<img src="cid:logo" alt="OpenNoteBlockWorld Logo" class="logo">
64+
<h1>Welcome, {{username}}!</h1>
65+
<p>Click the button below to log in to your account:</p>
66+
<a href="{{magicLink}}" class="btn">Login</a>
67+
<p>If you did not request this login link, please ignore this email.</p>
68+
<footer class="footer">
69+
<p>OpenNoteBlockWorld</p>
70+
</footer>
71+
</div>
72+
</div>
1573
</body>
1674

1775
</html>

‎server/src/mailing/templates/magic-link.hbs‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,71 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Login to Your Account</title>
8+
<style>
9+
body {
10+
font-family: Arial, sans-serif;
11+
text-align: center;
12+
padding: 20px;
13+
}
14+
15+
.outer {
16+
background-image: url('cid:background-image');
17+
background-repeat: repeat;
18+
background-size: 268px 462px;
19+
width: 100%;
20+
height: 100%;
21+
}
22+
23+
.container {
24+
background-color: #ffffff;
25+
max-width: 500px;
26+
margin: 0 auto;
27+
padding: 20px;
28+
border-radius: 10px;
29+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
30+
}
31+
32+
.logo {
33+
max-width: 150px;
34+
margin-bottom: 20px;
35+
}
36+
37+
.btn {
38+
display: inline-block;
39+
padding: 12px 20px;
40+
margin-top: 20px;
41+
font-size: 16px;
42+
color: #ffffff;
43+
background-color: #007bff;
44+
text-decoration: none;
45+
border-radius: 5px;
46+
}
47+
48+
.btn:hover {
49+
background-color: #0056b3;
50+
}
51+
52+
.footer {
53+
margin-top: 20px;
54+
font-size: 12px;
55+
color: #666666;
56+
}
57+
</style>
858
</head>
959

1060
<body>
11-
<h1>Hello, {{username}}!</h1>
12-
<p>Click the link below to log in to your account:</p>
13-
<a href="{{magicLink}}">Login</a>
14-
<p>If you did not request this login link, please ignore this email.</p>
61+
<div class="outer">
62+
<div class="container">
63+
<img src="cid:logo" alt="OpenNoteBlockWorld Logo" class="logo">
64+
<h1>Hello, {{username}}!</h1>
65+
<p>Click the button below to log in to your account:</p>
66+
<a href="{{magicLink}}" class="btn">Login</a>
67+
<p>If you did not request this login link, please ignore this email.</p>
68+
<footer class="footer">
69+
<p>OpenNoteBlockWorld</p>
70+
</footer>
71+
</div>
72+
</div>
1573
</body>
1674

1775
</html>

0 commit comments

Comments
 (0)