202 lines
4.4 KiB
TypeScript
202 lines
4.4 KiB
TypeScript
import * as React from "react";
|
|
import { User } from "@repo/db";
|
|
import { Html, render } from "@react-email/components";
|
|
import { EmailFooter } from "./EmailFooter";
|
|
|
|
const styles = `
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a[x-apple-data-detectors] {
|
|
color: inherit !important;
|
|
text-decoration: inherit !important;
|
|
}
|
|
|
|
#MessageViewBody a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
p {
|
|
line-height: inherit;
|
|
}
|
|
|
|
.desktop_hide,
|
|
.desktop_hide table {
|
|
mso-hide: all;
|
|
display: none;
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image_block img + div {
|
|
display: none;
|
|
}
|
|
|
|
sup,
|
|
sub {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
}
|
|
|
|
.menu_block.desktop_hide .menu-links span {
|
|
mso-hide: all;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.desktop_hide table.icons-inner {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.icons-inner {
|
|
text-align: center;
|
|
}
|
|
|
|
.icons-inner td {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const Template = ({ user, code }: { user: User; code: string }) => (
|
|
<Html lang="de">
|
|
<meta content="text/html; charset=utf-8" httpEquiv="Content-Type" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Montserrat"
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
/>
|
|
<style>{styles}</style>
|
|
<body style={{ backgroundColor: "#FFFFFF", margin: 0, padding: 0 }}>
|
|
<table width="100%">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<table align="center" width="680" style={{ margin: "0 auto", color: "#000000" }}>
|
|
<tbody>
|
|
<tr>
|
|
<td style={{ textAlign: "center", paddingTop: "30px" }}>
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_HUB_URL}/mail/var_logo.png`}
|
|
alt="Logo"
|
|
width="80"
|
|
style={{ display: "block", margin: "0 auto" }}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: "24px",
|
|
color: "#011936",
|
|
padding: "20px 0",
|
|
}}
|
|
>
|
|
<strong>Bestätigung deiner E-Mail-Adresse</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: "30px",
|
|
color: "#011936",
|
|
}}
|
|
>
|
|
Hallo {user.firstname},
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: "18px",
|
|
color: "#011936",
|
|
padding: "20px",
|
|
}}
|
|
>
|
|
Klicke auf den folgenden Link, um deinen Account zu bestätigen:
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style={{ textAlign: "center", padding: "10px 0" }}>
|
|
<a
|
|
href={`${process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification?code=${code}`}
|
|
style={{
|
|
display: "inline-block",
|
|
backgroundColor: "#011936",
|
|
color: "#fff",
|
|
padding: "12px 32px",
|
|
borderRadius: "8px",
|
|
textDecoration: "none",
|
|
fontSize: "18px",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
E-Mail bestätigen
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: "16px",
|
|
color: "#011936",
|
|
padding: "10px 0",
|
|
}}
|
|
>
|
|
Oder gehe zu{" "}
|
|
<p
|
|
style={{
|
|
display: "inline",
|
|
fontWeight: "bold",
|
|
margin: 0,
|
|
}}
|
|
>
|
|
<strong>
|
|
{process.env.NEXT_PUBLIC_HUB_URL}/settings/email-verification
|
|
</strong>
|
|
</p>
|
|
<br />
|
|
und gib dort deinen Code ein.
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: "18px",
|
|
color: "#011936",
|
|
padding: "20px",
|
|
}}
|
|
>
|
|
Deinen Code lautet: <strong>{code}</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<EmailFooter />
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</body>
|
|
</Html>
|
|
);
|
|
|
|
export function renderVerificationCode({ user, code }: { user: User; code: string }) {
|
|
return render(<Template user={user} code={code} />);
|
|
}
|