Assets, email layout

eliatra-opensearch-enterprise-distro · Dec 26, 2024 · f42a338 · f42a338
1 parent c8f0d2b
commit f42a338
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 100 deletions.
diff --git a/.keycloakify/realm-kc-26.json b/.keycloakify/realm-kc-26.json
@@ -1626,10 +1626,10 @@
         "strictTransportSecurity": "max-age=31536000; includeSubDomains"
     },
     "smtpServer": {},
-    "loginTheme": "keycloakify-starter",
+    "loginTheme": "meod",
     "accountTheme": "",
     "adminTheme": "keycloakify-starter",
-    "emailTheme": "keycloakify-starter",
+    "emailTheme": "meod",
     "eventsEnabled": false,
     "eventsListeners": ["keycloakify-logging", "jboss-logging"],
     "enabledEventTypes": [],

diff --git a/Makefile b/Makefile
@@ -0,0 +1,7 @@
+all: build
+prevmail:
+	npx email preview ./emails/
+prevkk:
+	npx keycloakify start-keycloak --keycloak-version 26
+build:
+	npm run build-keycloak-theme
diff --git a/emails/eliatra-layout.tsx b/emails/eliatra-layout.tsx
@@ -0,0 +1,117 @@
+import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email';
+import {PropsWithChildren, ReactNode} from "react";
+
+export interface EmailProps {
+    userFirstname: string;
+    userLastname: string;
+    locale: string;
+    buttonText: string;
+    buttonLink: string;
+    emailAddress: string;
+    preview: string;
+}
+
+const main = {
+    backgroundColor: '#ffffff',
+    fontFamily:
+        '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif'
+};
+
+const container = {
+    margin: '0 auto',
+    padding: '20px 0 48px'
+};
+
+const logo = {
+    margin: '0 auto'
+};
+
+const paragraph = {
+    fontSize: '16px',
+    lineHeight: '26px'
+};
+
+const btnContainer = {
+    textAlign: 'center' as const
+};
+
+const hr = {
+    borderColor: '#cccccc',
+    margin: '20px 0'
+};
+
+const footer = {
+    color: '#8898aa',
+    fontSize: '12px'
+};
+
+const baseUrl = 'https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/';
+
+export const templateName = "Eliatra Default";
+
+export const previewProps = {
+    userFirstname: 'Mister',
+    userLastname: 'Spock',
+    locale: 'en',
+    preview: 'This is a preview text',
+    buttonLink: "https://eliatra.com",
+    buttonText: "HIT ME",
+    emailAddress: "[email protected]",
+    children: <Text style={paragraph}>Dummy Text<p/>Dummy Text</Text>
+} as EmailProps;
+
+export const EmailLayout = ({
+                                userFirstname,
+                                userLastname,
+                                locale,
+                                buttonText,
+                                buttonLink,
+                                emailAddress,
+                                preview,
+                                children,
+                            }: PropsWithChildren<EmailProps>) => {
+    return (
+    <Html lang={locale}>
+        <Head />
+        <Preview>{preview}</Preview>
+        <Body style={main}>
+            <Container style={container}>
+                <Img src={`${baseUrl}meod_logo_light.svg`} width="170" height="50" alt="Eliatra" style={logo} />
+                <Text style={paragraph}>Hi {userFirstname} {userLastname},</Text>
+                <Text style={paragraph}>
+                    {children}
+                </Text>
+                <Section style={btnContainer}>
+                    <Button
+                        width={106}
+                        height={44}
+                        backgroundColor="#651fff"
+                        borderRadius={3}
+                        textColor="#fff"
+                        align="center"
+                        href={buttonLink}
+                    >
+                        {buttonText}
+                    </Button>
+                </Section>
+                <Text style={paragraph}>
+                    Best,
+                    <br />
+                    The Eliatra team
+                </Text>
+                <Hr style={hr} />
+                <Text style={footer}>Sent to {emailAddress} on behalf of the MEOD application.</Text>
+                <Text style={footer}>© 2025 | Eliatra, 77 Lower Camden Street, D02 XE80 Dublin, Ireland | www.eliatra.com</Text>
+            </Container>
+        </Body>
+    </Html>
+);
+};
+
+//needed for email previewer
+export const Template = EmailLayout
+
+
+
+
+
diff --git a/emails/layout.tsx b/emails/layout.tsx
diff --git a/emails/templates/assets/kc-logo.png b/emails/templates/assets/kc-logo.png
diff --git a/emails/templates/email-verification.tsx b/emails/templates/email-verification.tsx
@@ -1,5 +1,5 @@
 import { Text, render } from "jsx-email";
-import { EmailLayout } from "../layout";
+import { EmailLayout, EmailProps } from "../eliatra-layout";
 import {
   createVariablesHelper,
   GetSubject,
@@ -9,13 +9,6 @@ import {
 
 interface TemplateProps extends Omit<GetTemplateProps, "plainText"> {}
 
-const paragraph = {
-  color: "#777",
-  fontSize: "16px",
-  lineHeight: "24px",
-  textAlign: "left" as const,
-};
-
 export const previewProps: TemplateProps = {
   locale: "en",
   themeName: "vanilla",
@@ -26,21 +19,26 @@ export const templateName = "Email Verification";
 const { exp } = createVariablesHelper("email-verification.ftl");
 
 export const Template = ({ locale }: TemplateProps) => (
-  <EmailLayout preview={`Here is a preview`} locale={locale}>
-    <Text style={paragraph}>
-      <p>
-        Someone has created a {exp("user.firstName")} account with this email address. If
-        this was you, click the link below to verify your email address
-      </p>
-      <p>
-        <a href={exp("link")}>Link to e-mail address verification</a>
-      </p>
-      <p>
-        This link will expire within {exp("linkExpirationFormatter(linkExpiration)")}.
-      </p>
-      <p>If you didn't create this account, just ignore this message.</p>
-    </Text>
-  </EmailLayout>
+    <EmailLayout
+        userFirstname={exp("user.firstName")}
+        userLastname={exp("user.lastName")}
+        locale={locale}
+        buttonText={"Link to e-mail address verification"}
+        buttonLink={exp("link")}
+        emailAddress={exp("user.email")}
+        preview={""}>
+      <Text>
+        <p>
+          Someone has created a {exp("user.firstName")} account with this email address. If
+          this was you, click the link below to verify your email address
+        </p>
+        <p>
+          The link will expire within {exp("linkExpirationFormatter(linkExpiration)")}.
+          If the link is already expired just try to login and a new verification link will be sent.
+        </p>
+        <p>If you didn't create this account, just ignore this message.</p>
+      </Text>
+    </EmailLayout>
 );
 
 export const getTemplate: GetTemplate = async (props) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/login/main.css b/src/login/main.css
@@ -1,10 +1,14 @@
 .kcHtmlClass {
-    background: url("https://eliatra.com/_next/static/media/logo.56850517.png") no-repeat left top;
-    background-size: 150px;
+    border-top-width: 20px;
+    border-top-style: solid;
+    border-top-color: #651fff;
+    background: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/Eliatra_logo.svg") no-repeat;
+    background-size: 100px;
+    background-position: left 20px top 20px;
 }
 
 .login-pf body {
-    background-image: url("https://eliatra.com/_next/static/media/EliatraBackground.ae12357b.svg") ;
+    background-image: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/Eliatra_background.svg") ;
 }
 
 .pf-c-button.pf-m-primary {
@@ -22,5 +26,5 @@
 
 .kcHeaderWrapperClass {
     content-visibility: hidden;
-    background: url("./meod.svg") no-repeat center;
+    background: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/meod_logo_light.svg") no-repeat center;
 }
diff --git a/src/login/meod.svg b/src/login/meod.svg
diff --git a/vite.config.ts b/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
                     templatesSrcDirPath: import.meta.dirname + "/emails/templates",
                     themeNames: buildContext.themeNames,
                     keycloakifyBuildDirPath: buildContext.keycloakifyBuildDirPath,
-                    locales: ["en", "pl"],
+                    locales: ["en", "de"],
                     cwd: import.meta.dirname,
                     esbuild: {}, // optional esbuild options
                 });