Adding reset password feature.

2026-07-14 11:16:13 +02:00 · 2025-11-22 17:20:52 +01:00
parent aabdea06a9
commit fe5d8bae1b
29 changed files with 2596 additions and 290 deletions
@@ -0,0 +1,25 @@
+import { Body, Container, Head, Html, Img, Preview, Section, Tailwind } from "@react-email/components";
+import * as React from "react";
+import { PropsWithChildren } from "react";
+import { getServerUrl } from "@/utils/get-server-url";
+
+const baseUrl = getServerUrl();
+
+export const EmailLayout = ({ children, preview }: PropsWithChildren<{ preview?: string }>) => {
+    return (
+        <Tailwind>
+            <Html>
+                <Head />
+                {preview ? <Preview>{preview}</Preview> : <Preview>Please check your mails</Preview>}
+                <Body className="bg-gray-100 py-4" style={{ fontFamily: "Arial, sans-serif" }}>
+                    <Container className="bg-white border border-gray-200 p-12">
+                        <Img src={`${baseUrl}/logo-title-black.png`} width="200" height="auto" alt="Logo" />
+                        <Section>{children}</Section>
+                    </Container>
+                </Body>
+            </Html>
+        </Tailwind>
+    );
+};
+
+export default EmailLayout;
@@ -0,0 +1,30 @@
+import * as React from "react";
+import EmailLayout from "./email-layout";
+import {Text, Section, Button} from "@react-email/components";
+
+export interface EmailResetPasswordProps {
+    url: string;
+}
+
+export const EmailResetPassword = ({url}: EmailResetPasswordProps) => {
+    return (
+        <EmailLayout preview="Email for password reset of your Portabase account">
+            <Text className="text-base  text-green-800 font-bold ">Hello !</Text>
+            <Text className="text-base font-light  text-green-800 ">You are receiving this email because we
+                received a password reset request for your account.</Text>{" "}
+            <Section className="mt-[32px] mb-[32px] text-center">
+                <Button
+                    className="rounded bg-[#000000] px-5 py-3 text-center font-semibold text-[12px] text-white no-underline"
+                    href={url}
+                >
+                    Reset Password
+                </Button>
+            </Section>
+            <Text className="text-base font-light text-green-800 ">If you did not request a password reset, no
+                further action is required.</Text>
+            <Text className="text-base font-light text-green-800 ">Regards,<br/>Portabase</Text>
+        </EmailLayout>
+    );
+};
+
+export default EmailResetPassword;
@@ -0,0 +1,15 @@
+import { Text } from "@react-email/components";
+import * as React from "react";
+import EmailLayout from "./email-layout";
+
+export const EmailSettingsTest = () => {
+    return (
+        <EmailLayout preview="Email Setup">
+            <Text className="text-base font-light leading-8 text-green-800 ">Hi, your email settings are setup !</Text>
+            <Text className="text-base font-light leading-8 text-green-800 ">Best regard,</Text>{" "}
+            <Text className="text-base font-light leading-8 text-green-800 ">Portabase</Text>
+        </EmailLayout>
+    );
+};
+
+export default EmailSettingsTest;
@@ -0,0 +1,6 @@
+import {Text as ReactEmailText} from "@react-email/components";
+import {ComponentPropsWithoutRef} from "react";
+
+export const EmailText = (props: ComponentPropsWithoutRef<typeof ReactEmailText>) => {
+    return <ReactEmailText className="text-base font-light leading-8 text-green-800 " {...props} />;
+};